BAB 3

EFEK-EFEK TOMBOL
Pada bab ini Anda akan mendapatkan petunjuk bagaimana membuat desain tombol atau ikon yang menarik dengan bantuan Style. Hampir sama dengan Action, Style merupakan sekumpulan perintah yang memuat langkah-langkah editing photoshop yang direkam dan dapat dijalankan secara otomatis untuk mengubah gambar menjadi lebih menarik. Selain style default Photoshop, Anda dapat mengunduh style-style yang disediakan situs-situs tertentu. Penerapan style ini sangat mudah, Anda cukup memasukkan gambar, jalankan style, maka proses editing berjalan secara otomatis. Seketika Anda akan mendapatkan desain baru yang lebih fresh.

1 Vista Glass Style: Membuat Tombol Glass Seperti Vista

1. Bukalah alamat URL berikut ini untuk mendapatkan Vista Glass Style.
LINK DOWNLOAD Untuk mendapatkan Style, Anda bisa men-download di:

http://lost--in--thought.deviantart.com/art/Vista-Glass-Style-54030653

2. Tekan tombol Download File untuk mengunduh Vista Glasss Style.

Tekan tombol Download File

3. Ekstrak file Vista_Glass_Style_by_lost__in__thought.zip, lalu klik ganda file Vista Glass.asl untuk menginstal style secara otomatis ke dalam panel Style Photoshop. 4. Jalankan software Adobe Photoshop CS5 dalam komputer Anda. 5. Buatlah kanvas baru dengan menekan menu File > New.

94

Kitab Efek Photoshop CS5

Tekan tombol File > New

6. Tentukan ukuran kanvas sesuai keinginan Anda. Dalam hal ini, penulis menggunakan ukuran kanvas US Paper (Letter). Klik kotak kombo Preset dan pilih opsi US Paper. Jika sudah, tekan tombol OK.

Klik kotak kombo Preset dan pilih opsi US Paper

7. Pilih Rounded Rectangle Tool

pada Toolbox.

8. Buatlah kotak tombol dengan ukuran tertentu pada kanvas Photoshop.

Buatlah kotak tombol dengan ukuran sesuai keinginan Anda Bab 3 Efek-Efek Tombol 95

9. Pilih file menu Window > Styles.

Tekan menu Window > Styles

10. Pada panel Styles, pilih style Glass.

Pilih style Glass

11. Seketika gambar tersebut akan menjadi 3D dengan adanya bayangan yang mengelilingi objek.

96

Kitab Efek Photoshop CS5

Gambar 2D berubah menjadi 3D

12. Selanjutnya, klik Horizontal Type Tool pada Toolbox. Misalnya, Anda ingin membuat ikon Google, pilih font Californian FB, pilih warna putih, lalu ketikkan huruf g pada kanvas Photoshop. 13. Perbesar ukuran huruf dan tempatkan di tengah-tengah tombol.

Tempatkan huruf di tengah-tengah tombol

14. Pilih menu Window > Styles.

Pilih menu Window > Styles Bab 3 Efek-Efek Tombol 97

15. Pada panel Styles, pilih opsi style Blue Glass (Button).

Pilih style Blue Glass (Button)

16. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk semakin menguatkan kesan 3D. 17. Maka desain tombol Anda akan menjadi seperti berikut.

Desain tombol Google siap dipasang di halaman web

2 jayhan-56-layer-styles: Membuat Ikon Twitter secara Cepat

1. Bukalah alamat URL berikut ini untuk mendapatkan Jayhan-56-layer-styles.
LINK DOWNLOAD Untuk mendapatkan Style, Anda bisa men-download di:

http://www.jay-han.com/files/jayhan-56-layer-styles.zip 98 Kitab Efek Photoshop CS5

2. Tekan tombol Download! untuk mengunduh Jayhan-56-layer-styles.zip.

Tekan tombol Download!

3. Ekstrak file tersebut, lalu klik ganda file jayhan-56-layer-styles.asl untuk menginstal style secara otomatis ke dalam panel Style Photoshop. 4. Pilih Rounded Rectangle Tool pada Toolbox, dan buatlah kotak tombol dengan ukuran tertentu pada kanvas Photoshop. 5. Pilih file menu Window > Style. 6. Pada panel Style, pilih salah satu style yang Anda inginkan. Untuk membuat ikon Twitter, pilih style Jayhan-LS1.

Pilih style Jayhan-LS1

7. Klik Type Tool pada toolbox, pilih font Maagkramp, pilih warna putih dan ketikkan huruf t pada kanvas Photoshop. Tempatkan huruf t di tengah tombol. 8. Klik kanan Layer t, pilih opsi Blending Options. 9. Pilih pengaturan Color Overlay, pada bagian Color, klik kotak pengaturan warna dan pilih warna yang sama dengan warna tombol, yaitu #70dff9, lalu tekan tombol OK.

Bab 3 Efek-Efek Tombol

99

10. Pilih Pengaturan Stroke, klik kotak kombo Fill Type dan pilih opsi Color. Lalu klik kotak pengaturan warna dan pilih warna putih (#ffffff). Lantas, geser slider Size ke kanan sebesar 100 px. 11. Klik kotak cek Inner Shadow, lalu akhiri pengaturan dengan menekan tombol OK. 12. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 13. Dengan demikian Anda berhasil membuat tombol Twitter, seperti pada contoh gambar berikut.

Desain tombol Twitter siap dipasang di halaman web

3 jayhan-56-layer-styles: Menciptakan Ikon Yahoo Koprol

pada Toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Pada panel Styles, pilih style Jayhan-LS31. pada toolbox, pilih font Danube, pilih warna putih dan 4. Klik Type Tool ketikkan huruf K pada kanvas Photoshop. Tempatkan huruf K di tengah tombol.
100 Kitab Efek Photoshop CS5

5. Klik kanan Layer K, pilih opsi Blending Options. 6. Pilih pengaturan Drop Shadow, geser slider Distance ke kanan sebesar 35 px, lalu geser slider Size ke kanan sebesar 50 px. 7. Klik kotak cek Bevel and Emboss, dan akhiri pengaturan dengan menekan tombol OK. 8. Selanjutnya, tambahkan bayangan di bagian bawah tombol tersebut untuk memberikan efek 3D. 9. Dengan demikian Anda berhasil membuat ikon Yahoo Koprol, seperti pada contoh gambar berikut.

Desain tombol Yahoo Koprol siap dipasang di halaman web

4 jayhan-56-layer-styles: Membuat RSS Feed Icon

pada Toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Pada panel Style, pilih style Jayhan-LS44. 4. Klik Eliptical Rectangle Tool 5. Tekan ikon Create a new Layer , buatlah seleksi berbentuk lingkaran. pada bagian bawah panel Layers.
Bab 3 Efek-Efek Tombol 101

6. Klik menu Edit > Fill. 7. Pada kotak kombo Use, pilih opsi 50% Gray dan tekan tombol OK. 8. Klik kanan Layer 1, dan ilih opsi Duplicate layer. 9. Klik kanan Layer 1 Copy, dan pilih opsi Blending Options. 10. Pilih pengaturan Color Overlay, pada bagian Color, klik kotak warna dan pilih warna putih, lalu tekan tombol OK. 11. Perkecil ukuran lingkaran Layer 1 Copy, lalu tempatkan di tengah lingkaran Layer 1. 12. Gunakan garis bantu untuk memotong kedua lingkaran tersebut menjadi empat bagian. 13. Klik Pen Tool pada toolbox, lalu buatlah garis seleksi yang memotong bagian kanan atas lingkaran.

Gunakan Pen Tool untuk membuat garis seleksi pada bagian kanan atas lingkaran

14. Klik kanan garis seleksi, pilih opsi Make Selection, lalu tekan tombol OK. 15. Pilih menu Select > Inverse. 16. Klik Layer 1 dan tekan tombol Delete, kemudian klik Layer 1 Copy dan tekan tombol Delete untuk menghapus bagian lingkaran di luar garis seleksi yang tidak dibutuhkan.

Tekan tombol Delete untuk menghapus bagian lingkaran di luar garis seleksi 102 Kitab Efek Photoshop CS5

17. Pilih Magic Wand Tool lingkaran Layer 1 Copy.

pada toolbox, dan buatlah seleksi pada sisa

18. Klik Layer 1, lalu tekan tombol Delete.

Seleksi sisa lingkaran dengan Magic Wand Tool

19. Kemudian klik Layer 1 Copy dan hapus layer tersebut dengan menekan tombol Delete.

Tekan tombol Delete untuk menghapus Layer 1 Copy

20. Klik Layer 1, pilih style Jayhan-LS43, dan perbesar ukuran layer. 21. Klik kanan Layer 1 dan pilih opsi Duplicate Layer. 22. Perkecil ukuran Layer 1 Copy dan tempatkan di kiri bawah Layer 1. , buatlah lingkaran, tempatkan di bawah Layer 1 Copy, lalu 23. Klik Elips Tool terapkan style Jayhan-LS43. 24. Seleksilah Layer 1, Layer 1 Copy, dan Layer Shape 2, lalu klik kanan dan pilih opsi Merge Layers.

Bab 3 Efek-Efek Tombol

103

25. Klik kanan Layer Shape 2, dan pilih opsi Blending Options. 26. Pilih pengaturan Inner Shadow, klik kotak teks Angle dan ketikkan nilai 90, lalu tekan tombol OK. 27. Selanjutnya, tambahkan bayangan di bagian bawah tombol tersebut untuk memberikan efek 3D. 28. Dengan demikian Anda berhasil membuat ikon RSS Feed, seperti pada contoh gambar berikut.

Desain tombol RSS Feed siap dipasang di halaman web

5 jayhan-56-layer-styles: Membuat Ikon Delicious

pada Toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Pada panel Style, pilih style Jayhan-LS26 pada panel Styles. 4. Klik kanan layer Shape 1, dan pilih opsi Duplicate Layer. 5. Pilih layer Shape 1 Copy, kemudian pilih style Jayhan-LS29. 6. Buatlah garis bantu horizontal dan vertikal yang memotong layer Shape 1 Copy menjadi 4 bagian.
104 Kitab Efek Photoshop CS5

Buatlah garis bantu horizontal dan vertikal yang memotong tombol menjadi 4 bagian

7. Klik kanan layer Shape 1 Copy, dan pilih opsi Convert to Smart Object. 8. Lalu klik kanan layer Shape 1 Copy, dan pilih Razterize Layer. 9. Klik Rectangular Marquee Tool atas tombol. 10. Klik menu Edit > Copy. 11. Klik ikon Create a new Layer membuat layer baru. 12. Tekan menu Edit > Paste. 13. Kemudian kembali ke layer Shape 1 Copy, ubahlah style tersebut dengan memilih style Jayhan-LS16. 14. Klik kanan layer Shape 1 Copy, dan pilih opsi Convert to Smart Object. 15. Lalu klik kanan layer Shape 1 Copy, dan pilih Razterize Layer. 16. Klik Rectangular Marquee Tool tombol. 17. Klik menu Edit > Copy. 18. Klik ikon Create a new Layer membuat layer baru. 19. Tekan menu Edit > Paste. 20. Jika sudah, klik layer Shape 1 Copy, klik kanan dan tekan opsi Delete Layer. 21. Selanjutnya, tambahkan bayangan di bagian bawah tombol tersebut untuk memberikan efek 3D. pada bagian bawah panel Layers untuk pada toolbox, seleksilah bagian bawah kiri pada bagian bawah panel Layers untuk pada toolbox, seleksilah bagian kanan

Bab 3 Efek-Efek Tombol

105

22. Dengan demikian Anda berhasil membuat ikon situs Delicious.com, seperti pada contoh gambar berikut.

Desain tombol Delicious Anda sudah siap dipasang di halaman web

6 jayhan-56-layer-styles: Membuat Ikon Beebo

pada Toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Pada panel Style, pilih style Jayhan-LS11. 4. Tekan Type Tool pada toolbox. 5. Pilih font Maagkramp dan ketikkan huruf b pada kanvas Photoshop. 6. Perbesar ukuran huruf kemudian tempatkan huruf tersebut di tengah tombol. 7. Tambahkan style pada huruf, klik style Jayhan-LS9 pada panel Styles. 8. Lalu klik kanan Layer b, pilih opsi Blending Options. 9. Pilih pengaturan Bevel and Emboss, pada bagian Shadow Mode, tambahkan nilai opacity hingga 50%. Jika sudah, tekan tombol OK. 10. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 11. Dengan demikian Anda berhasil membuat ikon Beebo, seperti pada contoh gambar berikut.

106

Kitab Efek Photoshop CS5

Desain tombol Beebo siap dipasang di halaman web

7 jayhan-56-layer-styles: Membuat Ikon Facebook

pada Toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Pada panel Style, pilih style Jayhan-LS30. 4. Klik kanan layer Shape 1, dan pilih opsi Blending Options. 5. Pilih pengaturan Gradient Overlay, lalu klik kotak cek Reverse. 6. Klik kotak kombo Gradient untuk mengedit penempatan gradasi warna. 7. Pada kotak dialog Gradient Editor, geser Stops Color ketiga dari kanan hingga 84%, kemudian geser Stops Color keempat dari kanan sebesar 86%. Jika sudah, tekan tombol OK.

Geser lokasi warna gradasi ke tiga ke kanan sebesar 84%, dan geser lokasi warna gradasi keempat ke kanan sebesar 86% Bab 3 Efek-Efek Tombol 107

8. Tekan tombol OK sekali lagi untuk menerapkan pengaturan gradasi. pada toolbox. Pilih font SegoeUI, pilih warna putih, dan 9. Klik Type Tool ketikkan huruf f pada kanvas Photoshop. 10. Perbesar ukuran huruf kemudian tempatkan huruf tersebut di sebelah kanan tombol. 11. Tambahkan style pada huruf dengan memilih style Jayhan-LS9. 12. Lalu klik kanan Layer f, pilih opsi Blending Option, kemudian klik kotak cek Drop Shadows. 13. Lantas, kosongkan kotak cek Stroke untuk menghilangkan garis tepi tombol. Jika sudah, tekan tombol OK. 14. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 15. Dengan demikian Anda berhasil membuat ikon Facebook, seperti pada contoh gambar berikut.

Desain tombol Facebook siap dipasang di halaman web

8 jayhan-56-layer-styles: Membuat Ikon YouTube

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop.
108 Kitab Efek Photoshop CS5

2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style Jayhan-LS43. pada toolbox, pilih font Gill Sans MT 4. Kemudian klik Type Tool Condensed, pilih warna putih, lalu ketikkan kata You pada tombol tersebut. Tempatkan kata tersebut di tengah tombol. 5. Tambahkan style pada Layer You dengan memilih style Jayhan-LS28. 6. Klik kanan pada Layer You, dan pilih opsi Blending Options. 7. Klik kotak cek Color Overlay, pada bagian Color, klik kotak warna dan pilih warna hitam (#000000) 8. Selanjutnya, klik Rounded Rectangle Tool dalam tombol. dan buatlah kotak kecil di

9. Tambahkan style pada kotak tersebut dengan memilih style Jayhan-LS11. pada toolbox. Pilih font Gill Sans MT 10. Kemudian Klik Type Tool Condensed, lalu ketikkan kata Tube pada tombol tersebut. Tempatkan kata tersebut secara proporsional di dalam kotak. 11. Tambahkan style pada Layer Tube dengan memilih style Jayhan-LS28. 12. Klik kanan pada layer Tube, dan pilih opsi Blending Options. 13. Klik kotak cek Color Overlay, pada bagian Color, klik kotak warna dan pilih warna putih (#ffffff) 14. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 15. Dengan demikian, Anda berhasil membuat ikon Facebook, seperti pada contoh gambar berikut.

Desain tombol Youtube siap dipasang di halaman web Bab 3 Efek-Efek Tombol 109

9 jayhan-56-layer-styles: Membuat Ikon Wordpress

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style Jayhan-LS16. 4. Buat layer baru dengan menekan ikon Create a new layer pada bagian bawah panel Layers. Buatlah lingkaran di dalam tombol menggunakan Elliptical Marquee Tool . 5. Klik kanan lingkaran seleksi dan pilih opsi Fill, pada kotak dialog Fill, klik kotak kombo Use dan pilih opsi warna White. Jika sudah, tekan tombol OK. 6. Klik kanan Layer 1 dan pilih opsi Duplicate Layer, pada kotak dialog yang muncul tekan tombol OK. 7. Buatlah seleksi di dalam lingkaran (Layer 1 Copy) menggunakan Elliptical Marquee Tool . 8. Hilangkah bagian dalam lingkaran dengan menekan tombol Delete. 9. Perbesar ukuran lingkaran Layer 1 Copy dan tempatkan sebagai garis tepi Layer 1.

Tempatkan Layer 2 Copy sebagai garis tepi Layer 2

110

Kitab Efek Photoshop CS5

10. Tambahkan style pada Layer 1 dan Layer 1 Copy dengan memilih style Jayhan-LS43. 11. Kemudian Klik Type Tool pada toolbox, pilih font Modern No.20, lalu ketikkan huruf W. Perbesar ukuran huruf dan letakkan di tengah-tengah lingkaran. Kemudian rotasikan posisi huruf W ke kiri, sehingga menjadi miring. 12. Selanjutnya, seleksilah Layer 1, Layer 1 Copy dan Layer W. Geser ketiga layer tersebut ke posisi kanan pojok atas sampai keluar dari area tombol. 13. Kemudian klik Layer Shape 1, pilih Magic Wand Tool pada toolbox, dan seleksilah bagian luar tombol. 14. Lalu klik Layer 1, dan tekan tombol Delete, klik Layer 1 Copy, dan tekan tombol Delete untuk menghapus bagian gambar yang berada di luar area tombol. 15. Klik kanan Layer W dan tekan opsi Razterize Layer, lalu tekan tombol Delete untuk menghapus bagian gambar yang berada di luar area tombol. 16. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 17. Dengan demikian Anda berhasil membuat ikon Wordpress, seperti pada contoh gambar berikut.

Desain tombol Wordpress siap dipasang di halaman web

10 jayhan-56-layer-styles: Membuat Ikon Hi5

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop.
Bab 3 Efek-Efek Tombol 111

2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style Jayhan-LS29. pada toolbox, dan buatlah garis yang memotong 4. Kemudian klik Pen Tool bagian kanan tombol dengan posisi miring.

Klik Pen Tool dan buatlah garis yang memotong bagian kanan tombol dengan posisi miring

5. Klik kanan pada garis seleksi dan pilih opsi Make Selection, kemudian tekan tombol OK. 6. Klik kanan layer Shape 1, dan pilih opsi Convert a smart object. 7. Klik kanan layer Shape 1, dan pilih opsi Rasterize Layer. 8. Lalu klik menu Edit > Copy. 9. Buatlah layer baru dengan memilih ikon Create a new layer bawah panel Layers. 10. Lantas, klik menu Edit > Paste. 11. Tambahkan style Jayhan-LS2 pada potongan tombol tersebut (Layer 1). pada bagian

Tambahkan style Jayhan-LS2 pada Layer 1

12. Seleksilah Layer Shape 1 dan Layer 1, klik kanan dan pilih opsi Merge Layers.

112

Kitab Efek Photoshop CS5

13. Kemudian Klik Type Tool pada toolbox, pilih font Freestyle Script, pilih warna putih lalu ketikkan kata hi. 14. Klik kanan Layer hi, dan pilih opsi Blending Options. 15. Pilih pengaturan Stroke, klik kotak pengaturan warna Color dan pilih warna putih (#ffffff), kemudian pada bagian Size tambahkan nilai stroke sebesar 15px. 16. Jika sudah, perbesar ukuran huruf dan tempatkan huruf hi pada potongan tombol sebelah kiri. 17. Selanjutnya, klik Type Tool pada toolbox lalu ketikkan angka 5. 18. Tambahkan stroke pada Layer 5 dengan klik kanan Layer hi, lalu pilih opsi Copy, kemudian klik kanan Layer 5, dan pilih opsi Paste. 19. Perbesar ukuran huruf dan tempatkan angka 5 pada potongan tombol sebelah kanan. 20. Seleksilah Layer hi dan Layer 5, klik kanan dan pilih opsi Rasterize Type. Jika sudah, satukan keduanya dengan klik kanan dan pilih opsi Merge Layers. 21. Tambahkan efek pada Layer 5 dengan memilih style Jayhan-LS9. 22. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 23. Dengan demikian Anda berhasil membuat ikon Hi5, seperti pada contoh gambar berikut.

Desain tombol Hi5 siap dipasang di halaman web

Bab 3 Efek-Efek Tombol

113

11 jayhan-56-layer-styles: Membuat Ikon Share This

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style Jayhan-LS31. 4. Kemudian klik kanan Layer Shape 1, pilih opsi Blending Options. 5. Pilih pengaturan Inner Shadow, pada bagian Distance naikkan pixel menjadi 25 px, pada bagian Size naikkan pixel menjadi 250 px. Lalu klik kotak kombo Countour, dan pilih countour Half Round. Jika sudah, tekan tombol OK. 6. Klik Elliptical Marquee Tool lingkaran. 7. Klik ikon Create a New Layer 8. Pilih menu Edit > Fill. 9. Pada kotak dialog Fill yang muncul, klik kotak kombo Use, dan pilih opsi White. 10. Tempatkan lingkaran tersebut di tengah sebelah kiri tombol. 11. Klik kanan Layer 1 dan pilih opsi Duplicate Layer. 12. Tempatkan Layer 1 Copy di sebelah kanan atas tombol. 13. Klik kanan Layer 1 Copy dan pilih opsi Duplicate Layer. 14. Tempatkan Layer 1 Copy 2 di sebelah kanan bawah tombol. pada toolbox, dan buatlah seleksi berbentuk pada bagian bawah panel Layers.

114

Kitab Efek Photoshop CS5

15. Lalu klik Rounded Marquee Tool pada toolbox, dan buatlah kotak persegi panjang. 16. Klik ikon Create a new layer 17. Klik menu Edit > Fill. 18. Pada kotak dialog Fill yang muncul, klik kotak kombo Use dan pilih opsi White. 19. Rotasikan Layer 2 (kotak persegi panjang) sehingga menghubungkan Layer 1 dengan Layer 1 Copy 20. Klik kanan Layer 2 dan pilih opsi Duplicate Layer. 21. Rotasikan Layer 2 Copy dan tempatkan di bagian bawah hingga menghubungkan Layer 1 dengan Layer 1 Copy 2. 22. Seleksilah Layer 1, Layer 1 Copy, Layer 1 Copy 2, Layer 2 dan Layer 2 Copy, satukan kelima layer tersebut dengan klik kanan dan pilih opsi Merge Layers. 23. Tambahkan style pada Layer 2 Copy dengan memilih style Jayhan-LS9. 24. Klik kanan Layer 2 Copy, dan pilih opsi Blending Options. 25. Pada kotak dialog Blending options, klik kotak cek Drop Shadow. Jika sudah, tekan tombol OK. 26. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 27. Dengan demikian Anda berhasil membuat ikon Share This, seperti pada contoh gambar berikut. pada bagian bawah panel Layers.

Desain tombol Share This dipasang di halaman web

Bab 3 Efek-Efek Tombol

115

12 jayhan-56-layer-styles: Membuat Ikon Yahoo!

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style Jayhan-LS34. 4. Kemudian klik kanan Layer Shape 1, pilih opsi Blending Options. 5. Pilih pengaturan Inner Shadow, pada bagian Distance naikkan pixel menjadi 25 px. Jika sudah, tekan tombol OK. 6. Klik Type Tool pada toolbox, pilih font Lucida Bright, pilih warna putih dan ketikkan huruf Y pada kanvas Photoshop. 7. Pada Options bar, klik kotak kombo Regular dan pilih opsi Demibold untuk mengubah format font dari Regular menjadi lebih tebal yaitu Demibold. 8. Pada ikon asli Yahoo!, batang huruf Y sebelah kanan lebih pendek daripada sebelah kiri. Untuk itu, buatlah bagian tersebut lebih pendek seperti aslinya. 9. Klik kanan Layer Y, dan pilih opsi Rasterize Layer. 10. Kemudian klik Pen Tool huruf sebelah kanan. pada toolbox, buatlah garis seleksi pada batang

11. Klik kanan garis seleksi dan pilih opsi Make Selection. 12. Pada kotak dialog Make Selection yang muncul tekan tombol OK. 13. Pilih menu Edit > Cut.

Potong batang huruf sebelah kanan dengan Pen Tool 116 Kitab Efek Photoshop CS5

14. Klik ikon Create a new layer pada bagian bawah panel Layers. 15. Pilih menu Edit > Paste. 16. Kemudian geser potongan bagian huruf tersebut ke bawah menutupi sisa potongan huruf yang lain sehingga terlihat lebih pendek.

Tempatkan potongan huruf menutupi sisa potongan huruf lainnya sehingga batang huruf sebelah kanan terlihat lebih pendek

17. Klik Type Tool

pada toolbox, ketikkan tanda ! (seru).

18. Tempatkan di sebelah kanan huruf Y, rotasikan tanda ! ke kanan bawah sehingga terlihat miring. 19. Seleksilah Layer Y, Layer 1, dan Layer !, lalu klik kanan dan pilih opsi Merge Layers. 20. Tambahkan style pada Layer ! tersebut, dengan memilih style Jayhan-LS9. 21. Lalu klik kanan Layer ! dan pilih opsi Blending Options. 22. Pada kotak dialog Blending Options, klik kotak cek Drop Shadow. Jika sudah, tekan tombol OK. 23. Huruf Y dan ! pada ikon asli Yahoo terlihat lebih pendek. Untuk itu seleksilah Layer Y dan Layer ! , lalu turunkan ketinggian huruf tersebut.

Klik Layer Y dan Layer !, lalu turunkan ketinggian huruf tersebut Bab 3 Efek-Efek Tombol 117

24. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 25. Dengan demikian Anda berhasil membuat ikon Yahoo!, seperti pada contoh gambar berikut.

Desain tombol Yahoo! Anda sudah siap dipasang di halaman web

13 jayhan-56-layer-styles: Membuat Ikon Blogger

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style Jayhan-LS53. 4. Kemudian klik kanan Layer Shape 1, pilih opsi Blending Options. 5. Klik kanan Layer Shape 1, dan pilih opsi Convert to Smart Object. 6. Klik kanan Layer Shape 1 dan pilih opsi Rasterize Layer. 7. Klik Pen Tool atas tombol. pada toolbox, buatlah garis seleksi yang memotong bagian

8. Klik kanan garis seleksi dan pilih opsi Make Selection. 9. Pada kotak dialog Make Selection yang muncul tekan tombol OK.
118 Kitab Efek Photoshop CS5

10. Pilih menu Edit > Copy. 11. Klik ikon Create a new layer 12. Pilih menu Edit > Paste. pada bagian bawah panel Layers.

Gunakan Pen tool untuk membuat seleksi pada tombol

13. Klik kanan Layer 1 dan pilih opsi Blending Options. 14. Pilih pengaturan Gradient Overlay. 15. Lalu klik Stops Color sebelah kiri bawah, ubahlah warna gradien dari warna hitam menjadi putih. Klik kotak Color dan pilih warna putih (#ffffff). 16. Kemudian klik Stops Color sebelah kanan atas, dan turunkan nilai Opacity dari 100% menjadi 0%. Jika sudah, tekan tombol OK. 17. Kembali pada bagian Gradient, turunkan nilai Opacity dari 100% menjadi 30%. Lalu akhiri pengaturan dengan menekan tombol OK. 18. Lantas, klik kanan Layer 1 dan pilih opsi Duplicate Layer. 19. Pada panel Layers, tempatkan Layer 1 Copy di bawah Layer Shape 1. 20. Perbesar ukuran Layer 1 Copy sehingga membingkai Layer Shape 1. 21. Selanjutnya, seleksilah Layer Shape 1 dan Layer 1, klik kanan dan pilih opsi Merge Layers. 22. Kemudian klik kanan Layer 1, dan pilih opsi Blending Options. 23. Klik kotak cek Bevel and Emboss dan tekan tombol OK. 24. Klik Type Tool pada toolbox, pilih font Maagkramp dengan warna putih, dan ketikkan huruf B pada kanvas Photoshop. 25. Perbesar ukuran huruf dan letakkan di tengah-tengah tombol. 26. Tambahkan style pada Layer B dengan memilih style Jayhan-LS28.

Bab 3 Efek-Efek Tombol

119

27. Klik kanan Layer B, dan pilih opsi Blending Options. 28. Klik kotak cek Color Overlay, lalu klik kotak pengaturan warna, pilih opsi warna putih (#ffffff). Jika sudah, tekan tombol OK. 29. Tambahkan efek untuk memperkuat kedalaman huruf B, dengan klik kotak cek Inner Shadow, lalu naikkan nilai Opacity sebesar 40%. Jika sudah, klik tombol OK. 30. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 31. Dengan demikian Anda berhasil membuat ikon Blogger, seperti pada contoh gambar berikut.

Desain tombol Blogger siap dipasang di halaman web

14 jayhan-56-layer-styles: Membuat Ikon Skype

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style Jayhan-LS29. 4. Kemudian klik kanan Layer Shape 1, pilih opsi Blending Options.

120

Kitab Efek Photoshop CS5

5. Pilih pengaturan Inner Shadow, klik kotak warna dan ubahlah warna putih menjadi hitam (#000000). Lalu geser slider Size ke kanan hingga 250px. 6. Lalu pilih pengaturan Inner Glow, dan geser slider Size ke kanan hingga 150px. 7. Hilangkan kotak cek Bevel and Emboss. Jika sudah, tekan tombol OK. 8. Klik Elliptical Marquee Tool pada toolbox, dan buatlah lingkaran besar. pada bagian bawah panel Layers.

9. Kemudian klik ikon Create a new layer 10. Lalu tekan menu Edit > Fill.

11. Pada kotak dialog Fill, klik kotak kombo dan tekan opsi White. Jika sudah, tekan tombol OK. Tempatkan lingkaran besar di tengah-tengah tombol. 12. Klik kanan Layer 1 dan pilih opsi Duplicate Layer, lalu tekan tombol OK. 13. Perkecil ukuran lingkaran hingga setengah ukuran lingkaran besar. 14. Kemudian tempatkan lingkaran kecil (Layer 1 Copy) di kiri atas dengan posisi menempel atau menyatu hingga separuh badan ke badan lingkaran besar. 15. Klik kanan Layer 1 Copy dan pilih opsi Duplicate Layer, lalu tekan tombol OK. 16. Kemudian tempatkan lingkaran kecil (Layer 1 Copy 2) di kanan atas dengan posisi menempel atau menyatu hingga separuh badan ke badan lingkaran besar.

17. Kemudian seleksilah Layer 1, Layer 1 Copy, dan Layer 1 Copy 2, klik kanan dan pilih opsi Merge Layers. 18. Lalu klik kanan Layer 1 Copy 2, pilih opsi Blending Options dan klik kotak cek Drop Shadow dan Bevel and Emboss, akhiri dengan klik tombol OK. 19. Klik Type Tool pada toolbox, pilih font Arial Rounded MT bold, pilih warna putih , dan ketikkan huruf S. Tempatkan huruf di tengah lingkaran besar. 20. Pilih Magic Wand Tool pada toolbox, seleksilah huruf S tersebut.

Bab 3 Efek-Efek Tombol

121

21. Klik Layer 1 Copy 2, lalu tekan tombol Delete. 22. Tambahkan style untuk memperkuat kedalaman huruf S, dengan memilih style Jayhan-LS28. 23. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 24. Dengan demikian Anda berhasil membuat ikon Skype, seperti gambar berikut.

Desain tombol Skype siap dipasang di halaman web

15 Button Layer Styles: Membuat Ikon Download

1. Bukalah alamat URL berikut ini untuk mendapatkan Button Layer Styles.
LINK DOWNLOAD Untuk mendapatkan Style, Anda bisa men-download di: http://www.designwalker.com/img/button_layer_styles/button_layer_styles.zip

2. Ekstrak file button_layer_styles.zip, lalu klik ganda file button_layer_styles.asl untuk menginstal style secara otomatis ke dalam panel Style Photoshop. 3. Pilih Rounded Rectangle Tool pada toolbox, dan buatlah kotak tombol dengan ukuran tertentu pada kanvas Photoshop. 4. Pilih file menu Window > Styles.

122

Kitab Efek Photoshop CS5

5. Tambahkan style pada tombol dengan memilih style Veoh. pada toolbox, pilih font Arial Rounded MT bold, pilih 6. Klik Type Tool warna putih, dan ketikkan kata Download. Tempatkan kata tersebut di tengah tombol. 7. Tambahkan style Jayhan-LS9 pada Layer Download. 8. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 9. Dengan demikian Anda berhasil membuat tombol Download, seperti pada contoh gambar berikut.

Desain tombol Download siap dipasang di halaman web

16 Button Layer Styles: Menciptakan Ikon Gold

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style Amazon Cart. pada toolbox, pilih font Bauhaus, pilih warna putih, dan 4. Klik Type Tool ketikkan kata Gallery. Tempatkan kata tersebut di tengah tombol. 5. Tambahkan style Jayhan-LS34 pada Layer Gallery. 6. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 7. Dengan demikian Anda berhasil membuat tombol Gallery, seperti pada contoh gambar berikut.

Bab 3 Efek-Efek Tombol

123

Desain tombol Gallery siap dipasang di halaman web

17 Button Layer Styles: Membuat Ikon Contact Us

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style fox sports. 4. Kemudian klik kanan Layer Shape 1, dan pilih opsi Blending Options. 5. Lalu pilih pengaturan Inner Shadow, turunkan nilai Opacity menjadi 25 px, lantas naikkan nilai Size menjadi 125 px. Jika sudah, tekan tombol OK. pada toolbox, pilih font Elephant, pilih warna putih, lalu 6. Klik Type Tool ketikkan kata Contact Us. Tempatkan kata tersebut di tengah tombol. 7. Tambahkan style MEGAUPLOAD Send pada Layer Contact Us. 8. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 9. Dengan demikian Anda berhasil membuat tombol Contact Us, seperti pada contoh gambar berikut.

Desain tombol Contact Us siap dipasang di halaman web

124

Kitab Efek Photoshop CS5

18 Button Layer Styles: Membuat Ikon Buy Now

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style MAPQUEST Save. pada toolbox, pilih font Forte, pilih warna putih, dan 4. Klik Type Tool ketikkan kata Buy Now. Tempatkan kata tersebut di tengah tombol. 5. Tambahkan style Flixster Search pada Layer Buy Now. 6. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 7. Dengan demikian Anda berhasil membuat tombol Buy Now, seperti pada contoh gambar berikut.

Desain tombol Buy Now siap dipasang di halaman web

Bab 3 Efek-Efek Tombol

125

19 Button Layer Styles: Membuat Ikon untuk Jejaring Sosial

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style Technorati Header. 4. Kemudian klik kanan Layer Shape 1, dan pilih opsi Blending Options. 5. Klik kotak cek Drop Shadow, lalu pilih pengaturan Inner Shadow, turunkan nilai Opacity menjadi 57%, dan naikkan nilai Size menjadi 125%. Jika sudah, tekan tombol OK. 6. Klik Type Tool pada toolbox, pilih font Rockwell, pilih warna putih, dan ketikkan kata Share This. Tempatkan kata tersebut di tengah tombol. 7. Tambahkan style Webshots Search pada Layer Share This. 8. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 9. Dengan demikian Anda berhasil membuat tombol Share This, seperti pada contoh gambar berikut.

Desain tombol Share This siap dipasang di halaman web

126

Kitab Efek Photoshop CS5

20 Button Layer Styles: Membuat Tombol Interaktif

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style MSN Search. 4. Kemudian klik kanan Layer Shape 1, dan pilih opsi Blending Options. 5. Klik kotak cek Drop Shadow, pilih pengaturan Inner Shadow, naikkan nilai Size menjadi 114%. Jika sudah, tekan tombol OK. 6. Selanjutnya, klik Type Tool pada toolbox, pilih font Cooper Black, pilih warna putih, lalu ketikkan kata Tutorial. Tempatkan kata tersebut di tengah tombol. 7. Tambahkan style MEGAUPLOAD Send pada Layer Tutorial. 8. Kemudian klik kanan Layer Tutorial, dan pilih opsi Blending Options. 9. Pilih pengaturan Drop Shadow, naikkan nilai Distance menjadi 32%, naikkan nilai Spread menjadi 6%, dan naikkan nilai Size menjadi 46%. Jika sudah, tekan tombol OK. 10. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 11. Dengan demikian Anda berhasil membuat tombol Tutorial, seperti pada contoh gambar berikut.

Desain tombol Tutorial siap dipasang di halaman web Bab 3 Efek-Efek Tombol 127

21 Button Layer Styles: Membuat Ikon Aqua

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style Metacafe go. 4. Kemudian klik kanan Layer Shape 1, dan pilih opsi Blending Options. 5. Pilih pengaturan Inner Shadow, turunkan nilai Opacity menjadi 45%, turunkan nilai Distance menjadi 11px, dan naikkan nilai Size menjadi 60px. 6. Pilih pengaturan Inner Glow, naikkan nilai Size menjadi 98px. Jika sudah, akhiri dengan menekan tombol OK. 7. Klik Type Tool pada toolbox, pilih font Jokerman, pilih warna putih, dan ketikkan kata My Profiles. Tempatkan kata tersebut di tengah tombol. 8. Tambahkan style IMEEM SignUp pada Layer My Profiles. 9. Kemudian klik kanan Layer My Profiles, dan pilih opsi Blending Options. 10. Klik kotak cek Drop Shadow dan Inner Shadow. Jika sudah, akhiri pengaturan dengan menekan tombol OK. 11. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 12. Dengan demikian Anda berhasil membuat tombol My Profiles, seperti pada contoh gambar berikut.

Desain tombol My Profiles siap dipasang di halaman web

128

Kitab Efek Photoshop CS5

22 Button Layer Styles: Membuat Ikon Berbentuk Kapsul

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style MEGAUPLOAD Send. pada toolbox, pilih font Archery Black, pilih 4. Kemudian klik Type Tool warna putih, dan ketikkan kata Free Download. Tempatkan kata tersebut di tengah tombol. 5. Lalu tambahkan style Jumpcut Register pada Layer Free Download. 6. Lantas, klik kanan Layer Free Download, dan pilih opsi Blending Options. 7. Kemudian pilih pengaturan Drop Shadow, naikkan nilai Distance menjadi 39px, dan naikkan nilai Size menjadi 45px. 8. Lalu pilih pengaturan Bevel and Emboss, turunkan nilai Depth menjadi 1%, klik kotak cek Countour dan pilih Countour default (Linear). Jika sudah, akhiri dengan menekan tombol OK. 9. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 10. Dengan demikian Anda berhasil membuat tombol Free Download, seperti pada contoh gambar berikut.

Desain tombol Free Download siap dipasang di halaman web

Bab 3 Efek-Efek Tombol

129

23 Button Layer Styles: Membuat Ikon Reflektif

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style bebo login. 4. Kemudian klik kanan Layer Bebo Login, dan pilih opsi Blending Options. 5. Pilih pengaturan Inner Shadow, dan naikkan nilai Size menjadi 84px. Jika sudah, tekan tombol OK. 6. Lalu klik Type Tool pada toolbox, pilih font Book Antiqua, pilih warna putih, dan ketikkan kata Articles. Tempatkan kata tersebut di tengah tombol. 7. Tambahkan style AIM Search pada Layer Articles. 8. Klik kanan Layer Articles, dan pilih opsi Blending Options. 9. Lalu pilih pengaturan Inner Shadow, turunkan nilai Distance menjadi 10px. Jika sudah, akhiri pengaturan dengan menekan tombol OK. 10. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 11. Dengan demikian Anda berhasil membuat tombol Articles, seperti pada contoh gambar berikut.

Desain tombol Articles siap dipasang di halaman web

130

Kitab Efek Photoshop CS5

24 Button Layer Styles: Membuat Ikon Candy

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style tripod.lycos Start. 4. Kemudian klik kanan Layer Shape 1, dan pilih opsi Blending Options, 5. Pilih pengaturan Inner Shadow, lantas turunkan nilai Opacity menjadi 57%, naikkan nilai Size menjadi 125px. Jika sudah, tekan tombol OK. 6. Lalu klik Type Tool pada toolbox, pilih font Modern No.20, pilih warna putih, dan ketikkan kata Ning. Tempatkan kata tersebut di tengah tombol. 7. Tambahkan style AIM Search pada Layer Ning. 8. Klik kanan Layer Ning, dan pilih opsi Blending Options. 9. Kemudian pilih pengaturan Bevel and Emboss, turunkan nilai Opacity menjadi 40%. Lalu klik kotak cek Countour, pilih countour default (Linear). Jika sudah, akhiri pengaturan dengan menekan tombol OK. 10. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 11. Dengan demikian Anda berhasil membuat tombol Ning, seperti pada contoh gambar berikut.

Desain tombol Ning siap dipasang di halaman web Bab 3 Efek-Efek Tombol 131

25 Button Layer Styles: Membuat Ikon Aquatic

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style ASK Search. 4. Kemudian klik kanan Layer Shape 1, dan pilih opsi Blending Options. 5. Klik kotak cek Drop Shadow, lalu pilih pengaturan Inner Shadow. Lantas, turunkan nilai Opacity menjadi 57%, dan naikkan nilai Size menjadi 215px. Jika sudah, akhiri dengan menekan tombol OK. 6. Kemudian klik Type Tool pada toolbox, pilih font Calibri (Bold), pilih warna putih, dan ketikkan kata myspace.com. Tempatkan kata tersebut di tengah tombol. 7. Lalu tambahkan style fox sports pada Layer myspace.com. 8. Klik kanan Layer myspace.com, dan pilih opsi Blending Options. 9. Lantas, klik kotak cek Inner Shadow dan Outer Glow. Jika sudah, akhiri dengan menekan tombol OK. 10. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 11. Dengan demikian Anda berhasil membuat tombol myspace.com, seperti pada contoh gambar berikut.

Desain tombol myspace.com siap dipasang di halaman web

132

Kitab Efek Photoshop CS5

26 Button Layer Styles: Membuat Tombol Mail

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style stumbleupon join. pada toolbox, pilih font Calibri (Bold), pilih 4. Kemudian klik Type Tool warna putih, dan ketikkan kata Yahoo!Mail. Tempatkan kata tersebut di tengah tombol. 5. Tambahkan style photobucket Join pada Layer Yahoo!Mail. 6. Klik kanan Layer Yahoo!Mail, dan pilih opsi Blending Options. 7. Kemudian klik kotak cek Outer Glow. Lalu pilih pengaturan Bevel and Emboss, dan naikkan nilai Size menjadi 10 px. Jika sudah, akhiri dengan menekan tombol OK. 8. Selanjutnya, tambahkan ikon kotak surat di dalam tombol dan tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 9. Dengan demikian Anda berhasil membuat tombol Yahoo!Mail, seperti pada contoh gambar berikut.

Desain tombol Yahoo!Mail siap dipasang di halaman web

Bab 3 Efek-Efek Tombol

133

27 Button Layer Styles: Membuat Decorative Icon

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style stumbleupon join. 4. Kemudian klik kanan Layer Shape 1, dan pilih opsi Blending Options, 5. Pilih pengaturan Inner Shadow, lalu turunkan nilai Opacity menjadi 57%, dan naikkan nilai Size menjadi 125px. Jika sudah, tekan tombol OK. 6. Lalu klik Type Tool pada toolbox, pilih font Perpetua (Bold), pilih warna putih, dan ketikkan kata Free Vector. Tempatkan kata tersebut di tengah tombol. 7. Tambahkan style IMEEM SignUp pada Layer Free Vector. 8. Klik kanan Layer Free Vector, pilih opsi Blending Options. 9. Lalu klik kotak cek Drop Shadow dan akhiri dengan menekan tombol OK. 10. Anda dapat menambahkan brush pada bagian dalam tombol untuk membuat kesan tombol yang lebih menarik. 11. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 12. Dengan demikian Anda berhasil membuat tombol Free Vector, seperti pada contoh gambar berikut.

Desain tombol Free Vector siap dipasang di halaman web 134 Kitab Efek Photoshop CS5

28 Button Layer Styles: Membuat Tombol Glow

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style amazon wishlist. 4. Kemudian klik kanan Layer Shape 1, dan pilih opsi Blending Options, 5. Pilih pengaturan Inner Shadow, lantas turunkan nilai Opacity menjadi 57%, dan naikkan nilai Size menjadi 125px. Jika sudah, tekan tombol OK. 6. Kemudian klik Type Tool pada toolbox, pilih font Freehand521 BT, pilih warna putih, dan ketikkan kata Link Directory. Tempatkan kata tersebut di tengah tombol. 7. Tambahkan style Flixster Search pada Layer Link Directory. 8. Klik kanan Layer Link Directory, dan pilih opsi Blending Options. 9. Pilih pengaturan Inner Shadow, turunkan nilai Distance menjadi 10px. Jika sudah, akhiri dengan menekan tombol OK. 10. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 11. Dengan demikian Anda berhasil membuat tombol Link Directory, seperti pada contoh gambar berikut.

Desain tombol Link Directory siap dipasang di halaman web

Bab 3 Efek-Efek Tombol

135

29 Button Layer Styles: Membuat Tombol Hitam Berkilau

pada toolbox, dan buatlah kotak tombol 1. Pilih Rounded Rectangle Tool dengan ukuran tertentu pada kanvas Photoshop. 2. Pilih file menu Window > Styles. 3. Tambahkan style pada tombol dengan memilih style Stage6. 4. Kemudian klik kanan Layer Shape 1, dan pilih opsi Blending Options, 5. Pilih pengaturan Inner Shadow, lantas naikkan nilai Size menjadi 92px. Jika sudah, tekan tombol OK. 6. Lalu klik Type Tool pada toolbox, pilih font Freehand521 BT, pilih warna putih, dan ketikkan kata My Document. Tempatkan kata tersebut di tengah tombol. 7. Tambahkan style Flixster Search pada Layer My Document. 8. Klik kanan Layer My Document, pilih opsi Blending Options. 9. Lalu pilih pengaturan Drop Shadow, turunkan nilai Distance menjadi 0 px. 10. Lantas, pilih pengaturan Bevel and Emboss, dan turunkan nilai Size menjadi 0 px. Jika sudah, akhiri dengan menekan tombol OK. 11. Selanjutnya, tambahkan bayangan di bagian bawah tombol untuk memberikan efek 3D. 12. Dengan demikian Anda berhasil membuat tombol My Document, seperti pada contoh gambar berikut.

Desain tombol My Document siap dipasang di halaman web 136 Kitab Efek Photoshop CS5