Catatan Galung: PhotoShop

Sebenarnya agak sedikit enggan membuat tutorial tentang PhotoShop, alasan utamanya adalah kang Rohman tidak terlalu pandai menggunakan program PhotoShop ini dan alasannya lainnya adalah jika membahas tutorial PhotoShop harus menyertakan banyak gambar, jadinya males deh harus capture dari monitor terus. Namun ternyata banyak request tentang tutorial ini, jadinya walaupun tidak terlalu Pede kang Rohman mencoba untuk belajar menulis tutorial photoshop.

Salah satu permintaan dari teman-teman yaitu bagaimana cara membuat gambar berbingkai seperti gambar berikut pada program Photoshop ;

Sebenarnya bagi anda yang sudah biasa melakukan aktivitas blogging dengan menggunakan program Windows Live Writer seperti yang pernah kang Rohman posting pada artikel Asyik Ngeblog Bersama Windows Live Writer serta pada artikel Tanya Jawab Seputar Windows Live Writer (WLW) dapat dengan mudah membuat efek bingkai tersebut. namun ternyata tidak semua orang bisa menginstall program Windows Live Writer.

Untuk membuat efek bingkai pada program Adobe Photoshop sangatlah mudah dan mungkin hanya memerlukan waktu tidak lebih dari 1 menit saja, akan tetapi itu kata yang sudah mahir dan akan berbeda jawabannya bagi yang belum terbiasa dengan program tersebut. Bagi anda yang masih bingung tentang bagaimana membuat bingkai seperti contoh di atas pada Photoshop, berikut kang Rohman tuliskan langkah-langkahnya. Mudah-mudahan tidak mengecewakan.

Catatan pertama adalah dalam membuat sesuatu pada photoshop tentulah banyak cara yang bisa di lakukan atau orang biasa menyebut banyak jalan menuju Roma, jadi langkah-langkah berikut hanyalah salah satu cara yang biasa kang Rohman lakukan. Catatan kedua adalah kang Rohman menggunakan adobe PhotoShop versi PhotoShop CS2, untuk versi lain silahkan di sesuaikan saja karena tidak terlalu banyak perbedaan. Sudah tidak sabar? yuk mulai.

Silahkan siapkan gambar yang akan anda beri efek bingkai.
Buka program Adobe PhotoShop anda.
Klik menu File, kemudian pilih Open…, atau tekan tombol Ctrl+O pada keyboard anda. Silahkan tuju folder gambar yang akan di beri bingkai.
Pastikan gambar anda dalam skala 100% karena biasanya gambar pertama kali muncul dalam skala yang lebih kecil. Pilih Zoom Tool (Z), klik kanan pada gambar kemudian setelah muncul pilihan, pilih Actual Pixels.
Jika gambar yang akan di edit mempunyai ukuran yang sangat besar, anda bisa memperkecilnya dengan cara klik menu Image kemudian pilih Image Size…, atau tekan tombol Alt+Ctrl+I pada keyboard anda. Silahkan tentukan ukuran yang di inginkan oleh anda. Misal : Width : 300 pixel.
Untuk membuat bingkai pada pinggir gambar, anda perlu canvas yang lebih besar dari gambar yang ada. Silahkan klik menu Image kemudian pilih Canvas Size…, atau tekan tombol Alt+Ctrl+C pada keyboard anda. ubah nilai yang ada dengan nilai yang lebih besar. Misalkan jika sebelumnya mempunyai ukuran width : 300 pixels dan height 201 pixel, silakan di ubah menjadi width : 350 pixels dan height : 250 pixels.
Silahkan tambahkan sebuah layer dengan cara klik menu Layer kemudian pilih New lalu pilih Layer…, atau dengan menekan tombol Shift+Ctrl+N pada keyboard anda, beri nama layer tersebut ( apa saja ). Atau ada cara lain untuk menambah layer dengan cukup klik icon create new layer
Pilih Rectangular Marquee Tool ( tool bentuk kotak garis ), jika yang di tampilkan adalah tool yang lain, silahkan klik kanan pada tool tersebut, lalu pilih Rectangular Marquee Tool.
Secara otomatis kursor akan berubah menjadi tanda plus ( + ), simpan kursor di sudut kiri atas gambar dan beri jarak agar nanti membentuk seperti bingkai. Tekan tombol kiri mouse, tahan lalu gerakan ke sudut kanan bawah gambar sehingga terbentuk gambar kotak garis-garis, kemudian lepaskan klik mouse yang tadi masih di tahan ;
Pilih Paint Bucket Tool ( tool bentuk kaleng cat ), jika yang di tampilkan adalah tool yang lain, silahkan klik kanan pada tool tersebut, lalu pilih Paint Bucket Tool.
Siram ( klik ) pada area yang tadi sudah di beri garis-garis. Setelah gambar tertutup oleh warna, ubah Fill menjadi 0% ( nol persen ) sehingga terlihat transparan kembali.
Klik menu Layer kemudian pilih Layer Style lalu pilih Stroke…, atau lebih mudah dengan cara klik klik icon Add a Layer style kemudian pilih Stroke…
Atur Size menjadi 1 ( satu ), dan klik pada Color untuk merubah warna sesuai keinginan, setelah muncul pilihan gambar, klik pada warna yang di inginkan, kemudian klik tombol OK.
Klik pada tulisan Drop Shadow. Atur angle pada 120, lalu opacity 100 ( contoh saja ), lalu klik tombol OK.
Sekarang gambar anda sudah mempunyai bingkai. Langkah selanjutnya adalah memotong gambar tersebut dengan Crop Tool. Pilih Crop Tool, kemudian tempatkan pada ujung kiri atas bingkai. Klik lalu tahan dan kemudian geser ke arah kanan bawah sesuai dengan gambar yang di inginkan, Dobel klik pada gambar yang di crop. Sekarang gambar anda sudah terpotong
Klik menu File lalu pilih Save For web…, pilih yang 4-Up. Pilih format gambar yang anda inginkan ( GIF, JPEG, PNG-8, PNG-24 ) kemudian tombol SAVE. Beri nama pada file gambar anda, lalu Save.
Selesai.

Sangat mudah mudah bukan? Selamat mencoba!

Saya yakin dan percaya bahwa anda pasti sudah mengetahui software pengolah gambar yang bernama PhotoShop. Dengan Photoshop anda dapat menciptakan sebuah gambar yang menarik dengan mudah, atau anda dapat mengedit sebuah gambar yang sudah jadi ( misal photo, dll ) sehingga menghasilkan gambar dalam bentuk lain yang anda inginkan.

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.