Tuesday, February 26, 2013

Cara membuat Tombol Website dengan Photoshop CS5 - Icon Persegi Panjang Biru

cara membuat tombol icon website dengan photoshop cs5
Masih bagian dari rangkaian Tutorial Cara Membuat Berbagai Bentuk Tombol Icon Website dengan Photoshop CS5. Nah, posting kali adalah Bagaimana Cara Membuat Icon Tombol Kotak Persegi Biru  Dengan  Photoshop CS5? Kita latihan bareng yuk sob, berikut ini step by step 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:

new layer photoshop cs5

2. Pilih Rounded Rectangle Tool pada toolbox dan klik opsi Shape Layer dengan warna Hitam seperti ilustasi gambar di bawah ini.

rounded rectangle tool photoshop cs5

3. Buatlah sebuah kotak persegi panjang pada canvas tersebut.


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

cara rasterize layer di photoshop cs5

Dan panel Layer akan terlihat seperti ini:


5. Setelah ini 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 5 opsi dengan kotak merah yang akan kita gunakan seperti langkah-langkah berikut ini.

layer style blending options photoshop cs5

6. Pilih pengaturan blending Drop Shadow dari menu Layer > Layer Style. Atur Blend Mode: Multiply, Opacity: 20%, Angle: 100 derajat, uncheck atau hilangkan kotak cek Use Global Light, isi nilai Distance: 8px, Spread: 0%, Size: 4px. Pengaturan seperti pada ilustrasi kotak dialog berikut ini:

blending options drop shadow untuk membuat tombol icon website

7. Pilih pengaturan blending Inner Shadow. Atur Blend Mode: Multiply, klik kotak pengaturan warna Set color of shadow, pilih warna dengan kode d5d5d5, atur nilai Angle: -48 derajat, Dstance: 21px, Choke: 0% dan Size: 21px.

select shadow color pada menu inner shadow

8. Pilih pengaturan blending Inner Glow. Atur Blend Mode: Normal, Opacity: 62%, Noise: , Technique: Softer, Source: Edge, Choke: 0%, Size: 8px, Range: 10%.

cara setting inner glow di photshop cs5

9. Pilih pengaturan blending Bevel and Emboss. Atur nilai Depth: 100%, Direction: Down, Size: 21px, dan Soften: 0%, kemudian turunkan nilai Opacity pada bagian Shadow Mode menjadi 35% dan setting lainnya seperti ilustrasi gambar dibawah ini.

cara mengatur nilai bevel and emboss photoshop cs5

10. Pilih pengaturan blending Gradient Overlay. Atur Blend Mode: Normal, Opacity:100%.


Klik kotak pengaturan warna Gradient. Pada jendela Gradient Editor, ubahlah warna gradient default, caranya klik Color Stop kiri, pilih warna dengan kode 00A9E0, klik Color Stop kanan, pilih warna dengan kode 7BDDFD. Pilih Style: Linear, Angle: 90 derajat, Scale: 120%. Pengaturan seperti pada ilustrasi kotak dialog berikut ini:

cara membuat color stop pada gradient editor layer style gradient editor
Sampai di sini hasil pengaturan layer style dengan ke-5 blending options di atas akan terlihat seperti gambar berikut ini:


11. Tambahkan teks judul pada tombol (button) kotak persegi panjang biru tersebut.

contoh hasil membuat tombol icon website dengan photoshop cs5


Nah, selamat! Anda sudah berhasil membuat tombol icon website kotak persegi panjang biru 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 icon tombol bulat untuk website atau untuk watermark foto: