Bagi anda yang senang akan blog design atau Web design tentu saja harus bisa mengoperasikan software pengolah gambar yang salah satunya seperti yang kang Rohman sebutkan tadi yaitu PhotoShop. Salah satu teknik yang sangat erat hubungannya dengan dunia blog design atau website design adalah teknik slicing.
Slicing adalah teknik membagi atau memotong gambar mejadi beberapa bagian dan mempunyai ukuran file serta format yang berbeda-beda. Teknik slicing ini sering di gunakan agar gambar tidak telalu berat pada saat blog anda di loading oleh pengunjung. Contoh, perhatikan contoh gambar (1) di bawah ini :
Gambar seperti contoh di atas seringkali di gunakan sebagai background dari judul sidebar. Tahukah anda bahwa untuk menampilkan background seperti contoh di atas tidak perlu menampilkan keseluruhan gambar, namun anda hanya cukup memotongnya menjadi potongan kecil agar pada saat loading blog anda tidak terlalu berat. Gambar yang di perlukan cukup hanya potongan kecil seperti ini saja :
Teknik untuk menampilkannya adalah dengan bantuan kode :
background:url("URL_gambar) repeat-x;
repeat-x adalah teknik menampilakn gambar secara berulang dalam bentuk horizontal ( sumbu X ). Jadi walaupun gambarnya hanya berupa potongan kecil saja, gambar tersebut akan terlihat penuh ke pinggir seperti gambar (1) di atas.
Contoh lain adalah seperti gambar 2 di bawah ini :
gambar seperti contoh di atas biasanya di pakai sebagai background blog atau web (dalam ukuran besar tentunya). Agar gambar yang begitu besar tidak membebani loading, maka kita perlu memotongnya seperti gambar di bawah ini :
Teknik untuk menampilkannya adalah dengan bantuan kode :
background:url("URL_gambar) repeat-y;
repeat-y adalah teknik menampilakn gambar secara berulang dalam bentuk vertikal ( sumbu y ). Jadi walaupun gambarnya hanya berupa potongan kecil saja, gambar tersebut akan terlihat penuh ke secara vertikal seperti gambar 2 di atas.
Sepertinya postingan ini tidak akan terlalu mendalam tentang teknik gambar repeat-x atau repeat-y karena akan lebih fokus kepada teknik dasar slicing pada Photoshop.
Tanpa basa basi agar tidak terlalu panjang, maka silahkan buka adobe photoshop anda, buatlah file baru.
Pilihlah ukuran gambar 640 x 480 ( sebagai contoh )
Buatlah layer baru, klik : Layer » New » Layer…
Atau cukup klik icon create New layer (secara default biasanya ada di kanan bawah layar)
Klik icon add a layer Style, lalu pilih gradien overlay…
Setting angle menjadi 0 (nol), kemudian klik pada contoh gambar gradien :
Pilih gambar gradien kuning (sebagai contoh), maka hasilnya akan seperti ini ;
Sekarang waktunya kita melakukan slicing, Pilih Slice Tool ( space + k )
Arahkan pada sudut gambar yang ingin di potong sesuai keinginan, klik lalu tahan, kemudian geser pada arah yang anda inginkan. Lepaskan (klik yg di tahan tadi) pada ujung gambar yang di inginkan. Lakukan kembali slicing pada area gambar lainnya yang anda inginkan.
Klik File lalu Save For Web… untuk menyimpan hasil gambar anda.
Pilih yang tab 4-up dan pilih format gambar serta kualitas yang anda inginkan. Lalu Save untuk mengakhirinya.
Mungkin itu saja teknik dasar dari slicing. Ternyata cape banget yah bikin tutorial photoshop, kapok sepertinya nih
Semoga bermanfaat.
0 komentar:
Posting Komentar