Membuat Tombol Enter dengan Menggunakan Adobe Photoshop Oleh : Tomy Meilando

Transkripsi

1 Membuat Tombol Enter dengan Menggunakan Adobe Photoshop Oleh : Tomy Meilando Pembuatan tombol enter di bawah ini adalah pembuatan tombol dengan menggunakan alat seleksi lingkaran dan gradient, langkah-langkah pembuatan tiap bagian tombol di buat berulang dengan sedikit pembedaan sehingga menimbulkan kesan dari perpaduan transisi dan warna gradient. 1. Langkah pertama pembuatan tombol adalah membuka canvas baru dengan cara klik menu file lalu pilih new. 2. Tentukan ukuran canvas sesuai dengan kebutuhan anda, dalam tutorial ini digunakan jenis ukuran 300x300 pixel dengan resolusi 72 px/inch.

2 3. Setelah canvas di buka, berikutnya adalah menambahkan satu buah layer diatas canvas yang di tentukan sebelumnya (layer adalah lapisan putih transparent yang sangat di butuhkan dalam proses pengeditan, layer akan mempermudah tahap pengeditan, apabila terjadi kesalahan editor hanya membuang bagian layer yang rusak tanpa membuang semua bagian canvas lalu mengulangi langkah pengeditan dari awal). Penambahan layer dapat di lakukan dengan cara klik menu layer lalu pilih new kemudian pilih layer atau shortcut Shift + Ctrl + N, Kemudian muncul kotak dialog new layer, ubah nama layer sesuai kebutuhan atau klik ok tanpa melakukan perubahan nama layer.

3 Penambahan layer baru (new layer) dapat di lakukan dengan cara klik ikon add new layer pada pallete layer.(pallete layer pada posisi kanan bawah tampilan photoshop, untuk memunculkan pallete layer dapat di lakukan dengan menggunakan shortcut F7). Di bawah ini merupakan kondisi layer setelah penambahan layer. 4. Aktif pada layer baru kemudian buat seleksi lingkaran dengan menggunakan alat seleksi lingkaran atau elliptical marquee pada tool box atau dapat menggunakan shortcut M, untuk mengambil alat ke dua tekan Shift + M.

4 5. Buatlah sebuah seleksi lingkaran sempurna dengan menekan tombol Shift lalu klik kiri tahan mouse kemudian tarik seleksi secara diagonal sehingga menghasilkan sebuah lingkaran seleksi seperti gambar di bawah ini.

5 6. Untuk membuat tiap bagian tombol di gunakan alat gradient (gradient tool) pada tool box atau dapat diambil dengan menggunakan shortcut G. 7. Lakukan pengaturan pada option bar(baris dibawah menu bar), pilih radial gradient untuk tipe gradient lingkaran. Klik gradient picker untuk melakukan pengaturan pada gradient, pastikan di pilih type foreground to background atau arah gradient dari warna depan ke warna belakang, lalu klik kembali gradient picker untuk menutup pengaturan. 8. Setelah pengaturan gradient pada option bar selesai, selanjutnya adalah memastikan warna apa yang akan di gunakan untuk tombol yang akan di buat. Untuk tutorial kali ini di gunakan warna default dari photoshop yaitu hitam putih/ hitam untuk warna depan(foreground) kemudian putih untuk warna belakang(background). Untuk mengembalikan warna depan dan belakang menjadi warna default cukup tekan shortcut D pada keyboard atau dengan cara klik ikon default pada tool box.. Dalam pembuatan tombol kali ini di perlukan warna putih ke hitam, untuk memperoleh warna depan putih dan warna belakang hitam cukup di lakukan dengan cara membalik warna depan dan warna belakang (switch foreground and background color) dengan shortcut X atau klik ikon switch pada tool box. Perhatikan gambar di bawah ini yang merupakan kondisi ketika warna default di balik sehingga putih untuk depan kemudian hitam untuk belakang.

6 9. Tetap aktif pada layer baru yang di tambahkan pada awal tutorial, pastikan seleksi yang di buat masih ada dan berada pada posisi yang pas sesuai dengan kebutuhan,.dan yang paling penting adalah pastikan bahwa alat yang sedang aktif adalah gradient tool. 10. Klik kiri tahan gradient kemudian tarik gradient pada area canvas secara diagonal mulai dari bagian kiri atas area seleksi sampai bagian kanan bawah area seleksi lalu lepas klik sehingga warna gradient secara radial akan memasuki area dalam seleksi.

7 11. Bagian tombol yang pertama telah selesai. Jangan ragu-ragu untuk undo apabila terjadi kesalahan(alt + Ctrl + Z. (tekan kemudian tahan tombol Alt bersamaan dengan tombol Ctrl pada keyboard kemudian tekan Z)). Atau anda dapat membuang layer yang salah dengan cara klik ikon kotak sampah pada pallete layer(ikon paling kanan pada pallete layer). 12. Setelah bagian tombol yang pertama selesai, pastikan gradient yang anda fill tadi benar-benar terdapat pada layer 1/layer baru di atas layer background. 13. Buat kembali layer baru (new layer) untuk membuat bagian tombol yang ke dua, lihat point/langkah ke tiga untuk melihat cara menambah layer baru. Perhatikan gambar di bawah ini untuk melihat kondisi pada pallete layer.

8 14. Setelah layer ke dua di pastikan telah masuk pada pallete layer, langkah selanjut nya adalah membuat bagian tombol yang kedua, alat yang di butuhkan adalah alat seleksi lingkaran (elliptical marquee tool, M), sederhana nya kita hanya mengulangi langkah pembuatan bagian tombol yang pertama untuk bagian tombol yang ke dua. 15. Buat seleksi sedikit lebih kecil dari seleksi pertama atau buat seleksi sedikit lebih kecil dari bagian tombol yang pertama, untuk melihat hasil seleksi silahkan perhatikan gambar di bawah ini.

9 16. Setelah seleksi di buat, pastikan aktif pada layer ke dua atau layer kosong untuk membuat bagian tombol ke dua, alat yang di gunakan untuk membuat bagian tombol ke dua sama seperti pembuatan bagian tombol yang pertama yaitu menggunakan gradient tool, pilih gradient tool pada tool box atau tekan tombol G pada keyboard untuk mengambil gradient tool. 17. Pada bagian tombol ke dua, gradient memiliki komposisi warna yang berbeda dari komposisi bagian tombol yang pertama,. Jika komposisi gradient pada bag tombol yang pertama dari foreground ke background adalah putih ke hitam, untuk komposisi gradient bag tombol yang ke dua dari foreground ke background adalah hitam ke putih, atau dengan kata lain komposisi gradient tombol ke dua adalah kebalikan dari komposisi gradient tombol bag pertama. 18. Untuk membuat komposisi warna foreground dan background (depan dan belakang) agar sesuai dengan kebutuhan nya adalah cukup dengan membalik

10 posisi warna depan dan warna belakang dengan cara klik tombol switch foreground and background color pada tool box atau dengan cara tekan tombol X pada keyboard. 19. Hal ini dapat di lakukan pula dengan cara yang berbeda yaitu dengan membalik arah tarikan gradient tanpa harus membalik warna foreground dan warna background (warna depan dan warna belakang). 20. Setelah posisi warna depan dan warna belakang sesuai (depan : hitam, belakang : putih), selanjutnya adalah klik kiri tahan tarik kemudian lepas gradient pada canvas sehingga warna gradient memasuki area canvas, arah tarikan sama seperti tombol bag pertama yaitu dari sudut kiri atas secara diagonal ke kanan bawah, sedikit perbedaan pada bag tombol ke dua yaitu posisi start penarikan gradient sedikit lebih keatas area seleksi lalu akhir penarikan gradient pada posisi bawah keluar dari area seleksi. Perhatikan gambar di bawah ini untuk melihat arah tarikan gradient.

11 21. Perhatikan gambar di bawah ini untuk melihat hasil gradient bagian tombol ke dua, setelah gradient memasuki area canvas, pastikan bahwa gradient benar-benar masuk pada layer ke dua atau layer kosong seleksi dapat di hapus dengan menggunakan shortcut Ctrl + D atau klik pilih alat sekeksi kemudian klik kanan area seleksi pilih deselect. 22. Bagian tombol ke dua telah selesai, selanjutnya adalah membuat bagian tombol ke tiga. Perhatikan gambar pallete layer di atas, setiap bagian tombol menempati masing-masing layer kosong, sehingga kesalahan pada satu bagian layer cukup hanya menghapus satu lapisan layer saja tanpa membuang semua lapisan layer. 23. Langkah pembuatan bagian tombol yang ke tiga hampir sama seperti langkah pembuatan tombol bagian pertama dan kedua, yaitu dengan menggunakan marquee selection dan gradient tool. 24. Seperti langkah sebelumnya, pembuatan bagian tombol ke tiga di mulai dengan menambahkan layer baru / new layer pada pallete layer, langkah penambahan layer baru dapat di lihat pada point ke Pastikan blank layer atau layer kosong telah masuk pada pallete layer. Perhatikan kondisi pallete layer di bawah ini.

12 26. Secara default nama layer baru adalah layer 3 untuk bagian tombol ke tiga. Selanjutnya adalah pilih elliptical marquee tool (alat seleksi lingkaran) pada tool box atau tekan M pada keyboard. 27. Pastikan aktif pada layer baru atau layer 3 kemudian buat seleksi lingkaran (jangan lupa untuk tekan dan tahan tombol shift untuk memperoleh hasil seleksi lingkaran yang sempurna). Seleksi lingkaran di buat sedikit lebih kecil dari ukuran lingkaran bagian tombol ke dua. Perhatikan gambar di bawah ini untuk melihat hasil seleksi

13 28. Berikutnya pilih gradient tool pada toolbox / tekan tombol G pada keyboard untuk pembuatan bagian tombol ke tiga. 29. Pilih warna sesuai dengan kebutuhan untuk bag tombol ke tiga, pengaturan warna dapat di lakukan melalui foreground dan background color pada tool box. Warna foreground dan warna background di pilih sesuai dengan konsep website yang di buat, sebagai contoh saya menggunakan warna biru. Transisi atau komposisi warna dari warna depan ke warna belakang adalah dari terang ke gelap, contoh komposisi warna depan di pilih biru muda sedangkan untuk warna belakang di pilih biru tua agar transisi antara kedua warna terlihat lebih baik. 30. Dalam tutorial kali ini dilakukan pengaturan warna melalui option bar. Lakukan pengaturan pada option bar untuk mengubah warna depan dan belakang sesuai dengan kebutuhan warna dengan cara klik area gradient bar pada option bar gradient, perhatikan gambar di bawah ini untuk melihat pengaturan warna yang di maksud.

14 31. Setelah gradient di klik maka akan muncul kotak dialog pengaturan warna gradient / gradient editor, seperti tampak pada gambar di bawah ini. 32. Pilih transisi warna foreground ke warna background untuk bagian pengaturan presets kemudian klik panel warna pada bagian bawah pengaturan gradient / perhatikan gambar di atas untuk melihat panel pengaturan yang harus di klik. 33. Klik panel pengaturan warna, kemudian akan muncul panel color picker, pilih warna pada kolom warna kemudian pilih terang dan gelapnya warna pada bagian jendela warna bagian kiri kolom warna kemudian klik tombol ok, lakukan pada kedua panel, pilih warna terang untuk bagian kiri panel dan warna gelap untuk bagian kanan panel.

15 34. Setelah pengaturan pada gradient editor selesai, selanjutnya klik tombol ok pada kotak dialog gradient editor, sebelumnya pastikan warna pada panel gradient telah sesuai dengan kebutuhan warna atau telah sesuai dengan warna yang di pilih pada color picker.

16 35. Setelah pengaturan warna gradient selesai, selanjutnya di mulai tahapan pembuatan bagian tombol ke tiga. Pastikan alat gradient aktif, seleksi lingkaran yang di buat berada pada posisi yang benar dan posisi layer pada blank layer / berada pada layer kosong agar apabila terjadi kesalahan pada tahapan pembuatan tombol bagian ke tiga, layer tombol bagian ketiga dapat di delete tanpa mengganggu layer yang lain. 36. Klik kiri tahan kemudian tarik gradient secara diagonal dari sudur kiri atas seleksi lingkaran sampai sudut kanan bawah seleksi lalu lepas klik sehingga warna gradient akan memasuki area seleksi, apabila hasil yang di peroleh tidak sesuai, lakukan undo kemudian ulangi langkah sebelumnya, pastikan tipe gradient yang di pakai adalah radial gradient. Perhatikan gambar di bawah ini untuk melihat arah tarikan gradient. Arah tarikan gradient dan hasil gradient (tombol bagian ke tiga). Tekan Ctrl + D, untuk menghapus seleksi setelah warna gradient masuk pada area seleksi 37. Pastikan bagian tombol ke tiga benar-benar masuk pada layer baru / new layer dan berada pada layer kosong / blank layer. Perhatikan gambar pallete layer di bawah ini untuk melihat kondisi layer setelah pembuatan bagian tombol ke tiga.

17 38. Selanjutnya memasuki tahapan pembuatan bagian tombol ke empat. Alat yang di gunakan adalah gradient tool. Klik ikon new layer pada pallete layer atau klik menu layer kemudian klik new lalu pilih layer untuk menambahkan layer baru pada pallete layer sebagai media pembuatan bagian tombol ke empat. Perhatikan gambar kondisi pallete layer setelah penambahan layer baru / new layer yaitu layer kosong / blank layer.

18 39. Buat seleksi baru pada layer kosong tersebut dengan ukuran sedikit lebih kecil dari ukuran tombol bagian ke tiga. Perhatikan gambar di bawah ini untuk melihat perkiraan ukuran dan posisi seleksi. 40. Pilih gradient tool pada tool box atau tekan tombol G pada keyboard. Klik panel pengaturan gradient pada option bar untuk membuka gradient picker. Perhatikan gambar di bawah ini untuk melihat pengaturan gradient yang di maksud.

19 Pilih transisi gradient dari warna foreground ke warna transparent / foreground to transparent, untuk tipe gradient pilih linear gradient, kemudian klik kembali panel untuk menutup pengaturan gradient. 41. Pastikan warna depan atau warna foreground pada tool box berwarna putih atau kondisi warna depan pada warna putih dengan cara tekan tombol D pada keyboard sehingga warna depan dan belakang default hitam dan putih kemudian tekan tombol X pada keyboard sehingga warna depan dan belakang default di balik menjadi putih dan hitam. Warna putih pada foreground color di pilih untuk pembuatan bagian tombol ke empat karena bagian tombol ke empat adalah bagian bayangan pada permukaan tombol bagian ke tiga. 42. Pastikan alat yang dipilih adalah gradient tool, kemudian klik kiri tahan lalu tarik gradient secara vertical dari bagian atas seleksi sampai bagian bawah seleksi lepas klik sehingga warna gradient memasuki area seleksi, undo dan ulangi langkah tersebut jika komposisi warna yang masuk pada area seleksi tidak sesuai. Arah tarikan gradient.

20 Hasil gradient bagian tombol ke empat. 43. Lakukan transformasi pada bagian tombol ke empat sehingga di peroleh bentuk yang sesuai dengan cara klik menu edit kemudian pilih free transform / Ctrl + T.

21 44. Pastikan posisi layer berada pada layer bagian tombol ke empat untuk melakukan perubahan bentuk tombol ke empat. 45. Tarik point bawah transform sehingga didapatkan hasil bayangan yang elips. 46. Pada bagian kanan option bar Klik commit untuk setuju dengan hasil transformasi atau cancel untuk membatalkan transformasi. 47. Selanjutnya tahapan pembuatan bagian tombol ke lima yaitu teks enter pada bagian tengah tombol. Pilih Horizontal type teks tool pada toolbox untuk membuat teks horizontal. 48. Lakukan pengaturan teks pada option bar berupa pengaturan jenis teks, ukuran, style, warna dan pengaturan lain yang mungkin di butuhkan. 49. Klik pointer pada area canvas sehingga muncul kursor pada area canvas kemudian ketik nama tombol sesuai dengan kebutuhan. 50. Pada tutorial kali ini di pakai warna teks putih lalu nama tombol di beri nama enter. 51. Kurangi nilai opacity layer teks pada pallete layer agar teks terlihat berada di dalam tombol.

22 52. Selanjutnya berikan style inner shadow pada bagian tombol ke tiga agar kesan lekuk pada tombol lebih terlihat jelas. 53. Pilih layer tombol bagian ke tiga kemudian klik ikon style pada pallete layer kemudian pilih inner shadow untuk melakukan pengaturan, nilai pengaturan disesuaikan dengan warna tombol yang di pilih.

23 Perhatikan gambar di bawah yang merupakan hasil dari pembuatan tombol enter pada tutorial kali ini, demikian tutorial dari saya, untuk pertanyaan silahkan kirimkan melalui ke : meilando_tomy@telkom.net. Terima Kasih,.