Monday, March 4, 2013

Cara membuat Tombol Website dengan Photoshop CS5 - Icon Anak Panah

cara membuat icon tombol website dengan photoshop cs5
Masih bagian dari rangkaian Tutorial Cara Membuat Berbagai Bentuk Tombol Icon Website dengan Photoshop CS5. Posting kali adalah Bagaimana Cara Membuat Icon Tombol Anak Panah Dengan  Photoshop CS5? Berikut ini tutorialnya nya: 

 





1. Siapkan file (canvas) baru, caranya pilih File > New. Lakukan pengaturan pada kotak dialog New dengan latar belakang (background) putih berukuran 500x500 pixel, seperti ilustrasi gambar berikut ini:
 
2. Pilih Custom Shape Tool.

custom shape tool photoshop untuk membuat icon tombol website

Kemudian atur opsi yang yang ada di atas seperti ilsutrasi gambar di bawah ini. Klik kotak drop down Shape, kemudian klik ikon segitiga kecil di sebelah kanan, pilih opsi Arrow dan klik OK pada kotak dialog “Replace current shape with the shapes from Arrows”.
 
custom shape tool photoshop untuk membuat icon tombol website


Kembali lagi ke kotak drop-down Shape dan pilih Arrow 9

custom shape tool photoshop untuk membuat icon tombol website

3. Buatlah sebuah tanda panah pada canvas gambar photoshop.

 4. Arahkan mouse pada panel Layers, klik-kanan pada layer Shape 1, pilih opsi Rasterize Layer.

rasterize layer photoshop cs5
5. Kembali klik layer Shape 1, kita akan bermain dengan layer style menggunakan blending options, caranya pilih menu Layer > Later Style maka akan ada menu drop-down seperti ilustrasi gambar di bawah ini. Perhatikan 7 opsi dengan kotak merah yang akan kita gunakan seperti langkah-langkah berikut ini. 

fitur layer style pada photoshop cs5

6. Pilih pengaturan blending Gradient Overlay. Atur Blend Mode: Normal, Opacity:100%, Angel: 90 derajat. Klik kotak pengaturan warna Gradient

gradient overlay photoshop cs5

Pada jendela Gradient Editor, ubahlah warna gradient default, caranya klik Color Stop kiri, pilih warna Hitam dan Location: 23%, hal yang sama dengan Color Stop kanan dengan pilihan warna Hitam, Location: 77%. Tambahkan Color Stop tengah dengan kode warna: 04CA29. Pengaturan seperti pada ilustrasi kotak dialog berikut ini:
cara membuat color stop gradient overlay photoshop


7. Pilih pengaturan blending Stroke dari menu Layer > Layer Style. Atur Blend Mode: Normal, Opacity: 100%, Size: 10px, Position: Outside, Fill Type: Gradient. Pilih Style Shape Burst, Angle: 90, Scale: 78%. Kemudian klik kotak pengaturan warna Gradient


Pada jendela Gradient Editor, pilih warna gradient default Black, White. Pengaturan seperti pada ilustrasi kotak dialog berikut ini:

cara membuat color stop fitur stroke pada photoshop
8. Pilih pengaturan blending Bevel and Emboss. Pilih Style: Inner Bevel, Technique: Smooth, atur nilai Depth: 500%, Direction: Up, Size: 8px, dan Soften: 0%, Angle: 120 derajat, Altitude: 30 derajat.

Masih dalam pengaturan Bevel and Emboss, pilih pengaturan Contour klik drop down Contour, pilih mode Ring.  Highlight Mode, ubah warna dengan kode 5DC458, kemudian turunkan nilai Opacity menjadi 70%
cara merubah preset contour bevel and emboss di photoshop
9. Pilih pengaturan blending Inner Glow. Atur Blend Mode: Screen, Opacity: 100%, Noise: 0%. Klik kotak pengaturan warna Set color glow, pilih warna baru dengan kode 177412, Technique: Softer, Source: Edge, Choke: 5%, Size: 27px.

cara mengatur blending inner glow di photoshop cs5

10. Pilih pengaturan blending Outer Glow. Atur Blend Mode: Screen, Opacity: 75%, Noise: 0% Klik kotak pengaturan warna Set color of glow, pilih warna dengan kode 115402, Size: 10px.

cara mengatur blending outer glow di photoshop cs5

11. Pilih pengaturan blending Inner Shadow.  Atur Blend Mode: Multiply, pilih warna solid Hitam, Opacity: 75%, Angle: 120 derajat, Distance: 5px, Choke: 0, Size: 9px.

cara mengatur blending inner shadow di photoshop cs5
12. Pilih pengaturan blending Drop Shadow. Atur Blend mode: Normal, pilih warna solid Hitam, Opacity: 100%, Angle: 120 derajat, Distance: 5px, Spread: 0%, Size: 54px.

cara mengatur blending drop shadow di photoshop cs5

13. Tambahkan teks judul pada tombol (button) Anak Panah tersebut.
cara membuat icon tombol anak panah dengan photoshop cs5
Nah, selamat! Anda sudah berhasil membuat tombol icon website Anak Panah dengan photoshop cs5 .

Tips: Jika tombol icon ini akan digunakan di website, saya menyarankan agar sobat menyimpan file dalam format PNG dengan latar belakang transparan dan di resize sesuai ukuran di website seperti pada posting Cara Merubah Ukuran (Resize) File PNG dengan Photosop CS5.

Baca juga tutorial lainnya cara membuat bentuk icon tombol website atau bisa juga untuk watermark foto: