Kitab Suci Photoshop Efek http www.dream
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.
pada toolbox, seleksilah bagian kanan
10. Klik menu Edit > Copy.
11. Klik ikon Create a new Layer
membuat layer baru.
pada bagian bawah panel Layers untuk
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.
pada toolbox, seleksilah bagian bawah kiri
17. Klik menu Edit > Copy.
18. Klik ikon Create a new Layer
membuat layer baru.
pada bagian bawah panel Layers untuk
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.
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.
pada bagian
10. Lantas, klik menu Edit > Paste.
11. Tambahkan style Jayhan-LS2 pada potongan tombol tersebut (Layer 1).
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.
pada toolbox, dan buatlah seleksi berbentuk
7. Klik ikon Create a New Layer
pada bagian bawah panel Layers.
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.
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
pada bagian bawah panel Layers.
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.
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
pada bagian bawah panel Layers.
12. Pilih menu Edit > Paste.
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.
9. Kemudian klik ikon Create a new layer
pada bagian bawah panel Layers.
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.
4. Klik Type Tool
pada toolbox, pilih font Bauhaus, pilih warna putih, dan
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.
4. Klik Type Tool
pada toolbox, pilih font Forte, pilih warna putih, dan
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.
4. Kemudian klik Type Tool
pada toolbox, pilih font Calibri (Bold), pilih
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.
pada toolbox, pilih font Freehand521 BT, pilih warna
6. Lalu klik Type Tool
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
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.
pada toolbox, seleksilah bagian kanan
10. Klik menu Edit > Copy.
11. Klik ikon Create a new Layer
membuat layer baru.
pada bagian bawah panel Layers untuk
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.
pada toolbox, seleksilah bagian bawah kiri
17. Klik menu Edit > Copy.
18. Klik ikon Create a new Layer
membuat layer baru.
pada bagian bawah panel Layers untuk
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.
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.
pada bagian
10. Lantas, klik menu Edit > Paste.
11. Tambahkan style Jayhan-LS2 pada potongan tombol tersebut (Layer 1).
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.
pada toolbox, dan buatlah seleksi berbentuk
7. Klik ikon Create a New Layer
pada bagian bawah panel Layers.
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.
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
pada bagian bawah panel Layers.
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.
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
pada bagian bawah panel Layers.
12. Pilih menu Edit > Paste.
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.
9. Kemudian klik ikon Create a new layer
pada bagian bawah panel Layers.
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.
4. Klik Type Tool
pada toolbox, pilih font Bauhaus, pilih warna putih, dan
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.
4. Klik Type Tool
pada toolbox, pilih font Forte, pilih warna putih, dan
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.
4. Kemudian klik Type Tool
pada toolbox, pilih font Calibri (Bold), pilih
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.
pada toolbox, pilih font Freehand521 BT, pilih warna
6. Lalu klik Type Tool
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