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 men-dapatkan desain baru yang lebih fresh.

BAB 3

94 Kitab Efek Photoshop CS5

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.

Bab 3 Efek-Efek Tombol 95

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


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.


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


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


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.


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



3. Pada panel Styles, pilih style Jayhan-LS31.

4. Klik Type Tool pada toolbox, pilih font Danube, pilih warna putih dan ketikkan huruf K pada kanvas Photoshop. Tempatkan huruf K di tengah tombol.


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



3. Pada panel Style, pilih style Jayhan-LS44.

4. Klik Eliptical Rectangle Tool , buatlah seleksi berbentuk lingkaran.

5. Tekan ikon Create a new Layer pada bagian bawah panel Layers.


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


17. Pilih Magic Wand Tool pada toolbox, dan buatlah seleksi pada sisa lingkaran Layer 1 Copy.

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.

23. Klik Elips Tool , buatlah lingkaran, tempatkan di bawah Layer 1 Copy, lalu terapkan style Jayhan-LS43.

24. Seleksilah Layer 1, Layer 1 Copy, dan Layer Shape 2, lalu klik kanan dan pilih opsi Merge Layers.


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.


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



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.


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 pada toolbox, seleksilah bagian kanan atas tombol.

10. Klik menu Edit > Copy.

11. Klik ikon Create a new Layer pada bagian bawah panel Layers untuk 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 pada toolbox, seleksilah bagian bawah kiri tombol.

17. Klik menu Edit > Copy.

18. Klik ikon Create a new Layer pada bagian bawah panel Layers untuk membuat layer baru.

19. Tekan menu Edit > Paste.

20. Jika sudah, klik layer Shape 1 Copy, klik kanan dan tekan opsi Delete Layer.



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




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.


11. Dengan demikian Anda berhasil membuat ikon Beebo, seperti pada contoh gambar berikut.


Desain tombol Beebo siap dipasang di halaman web

7

jayhan-56-layer-styles: Membuat Ikon Facebook




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%


8. Tekan tombol OK sekali lagi untuk menerapkan pengaturan gradasi.

9. Klik Type Tool pada toolbox. Pilih font SegoeUI, pilih warna putih, dan 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.


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

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



3. Tambahkan style pada tombol dengan memilih style Jayhan-LS43.

4. Kemudian klik Type Tool pada toolbox, pilih font Gill Sans MT 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 dan buatlah kotak kecil di dalam tombol.

9. Tambahkan style pada kotak tersebut dengan memilih style Jayhan-LS11.

10. Kemudian Klik Type Tool pada toolbox. Pilih font Gill Sans MT 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)


15. Dengan demikian, Anda berhasil membuat ikon Facebook, seperti pada contoh gambar berikut.

Desain tombol Youtube siap dipasang di halaman web


9

jayhan-56-layer-styles: Membuat Ikon Wordpress




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


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.


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





4. Kemudian klik Pen Tool pada toolbox, dan buatlah garis yang memotong 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 pada bagian bawah panel Layers.

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.


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.


23. Dengan demikian Anda berhasil membuat ikon Hi5, seperti pada contoh gambar berikut.

Desain tombol Hi5 siap dipasang di halaman web


11

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




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 pada toolbox, dan buatlah seleksi berbentuk lingkaran.

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.


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.


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


21. Rotasikan Layer 2 Copy dan tempatkan di bagian bawah hingga menghu-bungkan 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.


27. Dengan demikian Anda berhasil membuat ikon Share This, seperti pada contoh gambar berikut.

Desain tombol Share This dipasang di halaman web


12

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





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 pada toolbox, buatlah garis seleksi pada batang huruf sebelah kanan.

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



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



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





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 pada toolbox, buatlah garis seleksi yang memotong bagian atas tombol.

8. Klik kanan garis seleksi dan pilih opsi Make Selection.

9. Pada kotak dialog Make Selection yang muncul tekan tombol OK.


10. Pilih menu Edit > Copy.


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.


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.


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






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.


21. Klik Layer 1 Copy 2, lalu tekan tombol Delete.

22. Tambahkan style untuk memperkuat kedalaman huruf S, dengan memilih style Jayhan-LS28.


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.




5. Tambahkan style pada tombol dengan memilih style Veoh.

6. Klik Type Tool pada toolbox, pilih font Arial Rounded MT bold, pilih warna putih, dan ketikkan kata Download. Tempatkan kata tersebut di tengah tombol.

7. Tambahkan style Jayhan-LS9 pada Layer Download.


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



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.


7. Dengan demikian Anda berhasil membuat tombol Gallery, seperti pada contoh gambar berikut.


Desain tombol Gallery siap dipasang di halaman web

17

Button Layer Styles: Membuat Ikon ”Contact Us”



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.

6. Klik Type Tool pada toolbox, pilih font Elephant, pilih warna putih, lalu ketikkan kata Contact Us. Tempatkan kata tersebut di tengah tombol.

7. Tambahkan style MEGAUPLOAD Send pada Layer Contact Us.


9. Dengan demikian Anda berhasil membuat tombol Contact Us, seperti pada contoh gambar berikut.

Desain tombol Contact Us siap dipasang di halaman web


18

Button Layer Styles: Membuat Ikon ”Buy Now”



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.


7. Dengan demikian Anda berhasil membuat tombol Buy Now, seperti pada contoh gambar berikut.

Desain tombol Buy Now siap dipasang di halaman web


19

Button Layer Styles: Membuat Ikon untuk Jejaring Sosial



3. Tambahkan style pada tombol dengan memilih style Technorati Header.


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.


9. Dengan demikian Anda berhasil membuat tombol Share This, seperti pada contoh gambar berikut.

Desain tombol Share This siap dipasang di halaman web


20

Button Layer Styles: Membuat Tombol Interaktif



3. Tambahkan style pada tombol dengan memilih style MSN Search.


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.


11. Dengan demikian Anda berhasil membuat tombol Tutorial, seperti pada contoh gambar berikut.

Desain tombol Tutorial siap dipasang di halaman web


21

Button Layer Styles: Membuat Ikon Aqua



3. Tambahkan style pada tombol dengan memilih style Metacafe go.


5. Pilih pengaturan Inner Shadow, turunkan nilai Opacity menjadi 45%, turun-kan 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.


12. Dengan demikian Anda berhasil membuat tombol My Profiles, seperti pada contoh gambar berikut.

Desain tombol My Profiles siap dipasang di halaman web


22

Button Layer Styles: Membuat Ikon Berbentuk Kapsul



3. Tambahkan style pada tombol dengan memilih style MEGAUPLOAD Send.

4. Kemudian klik Type Tool pada toolbox, pilih font Archery Black, pilih 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.


10. Dengan demikian Anda berhasil membuat tombol Free Download, seperti pada contoh gambar berikut.

Desain tombol Free Download siap dipasang di halaman web


23

Button Layer Styles: Membuat Ikon Reflektif



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.


11. Dengan demikian Anda berhasil membuat tombol Articles, seperti pada contoh gambar berikut.

Desain tombol Articles siap dipasang di halaman web


24

Button Layer Styles: Membuat Ikon Candy



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.


11. Dengan demikian Anda berhasil membuat tombol Ning, seperti pada contoh gambar berikut.

Desain tombol Ning siap dipasang di halaman web


25

Button Layer Styles: Membuat Ikon Aquatic



3. Tambahkan style pada tombol dengan memilih style ASK Search.


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.


11. Dengan demikian Anda berhasil membuat tombol myspace.com, seperti pada contoh gambar berikut.

Desain tombol myspace.com siap dipasang di halaman web


26

Button Layer Styles: Membuat Tombol Mail



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


27

Button Layer Styles: Membuat Decorative Icon



3. Tambahkan style pada tombol dengan memilih style stumbleupon join.


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.


12. Dengan demikian Anda berhasil membuat tombol Free Vector, seperti pada contoh gambar berikut.

Desain tombol Free Vector siap dipasang di halaman web


28

Button Layer Styles: Membuat Tombol Glow



3. Tambahkan style pada tombol dengan memilih style amazon wishlist.


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.


11. Dengan demikian Anda berhasil membuat tombol Link Directory, seperti pada contoh gambar berikut.

Desain tombol Link Directory siap dipasang di halaman web


29

Button Layer Styles: Membuat Tombol Hitam Berkilau



3. Tambahkan style pada tombol dengan memilih style Stage6.


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.


12. Dengan demikian Anda berhasil membuat tombol My Document, seperti pada contoh gambar berikut.

Desain tombol My Document siap dipasang di halaman web

kitab efek photoshop cs5

Documents