CARA MEMBUAT TOMBOL DI PHOTOSHOP

Belajar Photoshop | Dalam sebuah website atau blog, ada yang namanya template dan didalam template tersebut ada beberapa komponen yang penting untuk menginstruksikan perintah pada pengunjung berpindah ke halaman lain ataupun meng-ok-kan suatu tindakan, sebut saja dia tombol web. dalam pertemuan kali ini saya akan mengajarkan pada sobat cara membuat tombol di photoshop, agar dalam tampilan website nanti bisa lebih menarik lagi.

Perlu sobat ketahui, bentuk dari tombol yang akan kita buat ini selain sebagai petunjuk klik on off bisa digunakan juga sebagai icon. tergantung pemanfaatannya. yang terpenting adalah sobat mengetahui teknik membuatnya di photoshop. karena dalam pembutan kali ini, kita hanya memanfaatkan 90% fungsi blending options photoshop. berikut contoh tombol web yang akan kita buat :

Tombol yang akan kita buat ini berbentuk lingkaran dengan tampilannya dalamnya yang elegan. kilauan cahaya menambahkan efek 3dimensi, serta titik terang didalamnya memberikan informasi bahwa ini adalah tombol. tapi menurut saya, tutorial kali ini tidak kalah hebat dengan sebelumnya yaitu membuat bola berbulu diphotoshop. jika tertarik silahkan ikuti langkah pembuatannya dibawah :

CARA MEMBUAT TOMBOL DI PHOTOSHOP

Langkah 1

Buka photoshop sobat. buat lembar kerja baru dengan menekan CTRL N atau pergi ke File - New. berikan ukuran pada lembar kerja 1400x900 pixels. lalu biarkan background warna Putih. kemudian Ok.

Buatlah Layer kosong baru - lalu gunakan Elliptical Marquee Tool lalu buatlah lingkaran seperti dibawah. agar lingkaran bisa seimbang bentuknya, tahan Shift Alt pada saat membuat lingkaran. 

jika sudah berikan warna didalamnya sesuai keinginan, dengan menekan Alt Backspace. tekan CTRL D untuk menghilangkan garis seleksinya.

Langkah 2 : Memberikan efek blending options

Sekarang klik kanan pada layer lingkaran kita, lalu pilih Blending Options. pada Blending options:custom. berikan nilai 0% pada Fill Opacity. 

Ini akan membuat warna yang ada pada lingkaran tadi tidak terlihat, karena selanjutnya kita akan gunakan pengaturan pada blending options ini.

#Gradient Overlay

Sekarang gunakan Gradient overlay. fungsinya disini sebagai warna yang pada Tombol kita. 

• Blendmode Normal
• Opacity 100%
• Gradient, gunakan warna dari tua ke muda. saya menggunakan warna magenta tua ke magenta muda
• Style Radial, Angle 90 derajat

# Bevel and Emboss

Fungsi bevel and emboss disini akan memberikan efek 3dimensi pada sisi tombol. 

• Style Pillow emboss
• Technique Chisel hard
• Depth dan Size sobat sesuaikan saja sendiri, sambil melihat hasilnya. siapa tahu memiliki keinginan sendiri.
• Gloss Contour, disini gunakan yang seperti bentuk tangga. pada pilihan contour standar pasti sobat tidak akan melihatnya karena masih tersembunyi, untuk memunculkan silahkan klik icon roda gigi dan pilih contours.

  

  cara menampilkan semua contour photoshop

• Highlight mode beserta Shadow mode berikan warna muda atau Putih.

Sekarang Contour pada pilihan dibawah bevel and emboss. ini berfungsi untuk memberikan efek pada bentuk bevel and emboss yang sudah kita buat diatas.  silahkan pilih sesuai tanda panah merah dibawah.

# Stroke

Stroke berfungsi untuk menambahkan garis luar maupun dalam pada bentuk. disini gunakan gradient untuk warna dari garisnya.

• Size 15px ( menentukan tebalnya garis )
• Position Center
• Blendmode Normal
• Opacity 100%
• Gradient - berikan warna yang yang sama seperti gradient overlay sebeoumnya,
• Style gunakan Linear.

# Inner Shadow

Inner shadow berfungsi untuk memberikan efek  bayangan didalam objek. seperti bola misalnya, pasti kalau dilihat dibagian bawahnya akan ada bagian yang gelap karena kurangnya cahaya yang diterima. 

• Blendmode Overlay warna Hitam
• Opacity 76%
• Angle 120 derajat
• Size 100px 
• Contour guakan yang ditunjuk dibawah. fungsi contour disini untuk memberikan bentuk dari bayangan. jadi bayangannya juga bisa kita permainkan bentuknya.

# Inner Glow

Inner glow berfungsi sebagari efek sinar didalam objek. efek ini akan memberikan cahaya pada objek sehingga terlihat lebih terang.

• Blendmode Overlay
• Opacity 100%, Noise 0
• Warna, gunakan magenta Muda
• Source pilih Center, jadi cahayanya akan berada di tengah objek tombol.
• Contour pilih sesuai gambar.

# Satin

Satin disini berfungsi sebagai yang akan memberikan bercak warna acak pada objek. jadi kalau digunakan dengan baik, efek satin ini sangat baik untuk menghasilkan objek dengan realistik yang baik.

• Pengaturan blending optionsnya ikuti instruksi gambar dibawah.

# Color Overlay

Color overlay berfungsi untuk memberikan warna pada objek. karena tadi kita sudah menggunakan Gradient overlay sebagai warna , jadi pengaturan ini, kita kurangi Opacitynya samapi 18%, agar tidak terlalu berpengaruh.

Gunakan Blend mode Softlight - warna Hitam.

# Outer Glow

Outer glow ini sebenarnya kebalikan dari inner glow. jadi fungsinya sebagai efek yang akan memancarkan sinar namun ini dibagian luar tombol kita. untuk pengaturannya silahkan ikuti petunjuk dibawah :

#Drop shadow

Fungsi Drop shadow adalah sebagai efek bayangan pada luar objek. jadi efek ini memang sangat penting jika menginginkan sesuatu yang realistik. karena sifat benda pasti memiliki bayangan jika terkena cahaya.

Jika sudah sekarang tekan OK. lalu lihatlah hasilnya. tombol web kita sudah jadi.

Bagaimana mudahkan membuat tombol di photoshop. inti dari tutorial photoshop ini sebenarnya, untuk menjelaskan kepada sobat bagaimana fungsi blending options.  karena hanya dengan fitur ini kita bisa menghasilkan sesuatu yang menarik. untuk membuatnya lebih menarik, bisa menambahkan teks didalamnya, siapa tahu tombol mau difungsikan sebagai tombol power.

Kabar gembira : sekarang fitur blending options sudah di upgrade pada photoshop cc. di photoshop cc kita sudah bisa menduplikat efek yang di inginkan, jadi jika kita ingin membuat objek berbayang banyak diphotoshop sudah bisa. untuk lebih jelasnya lihat di kelebihan blending options photoshop cc.

Semoga yang saya berikan kali ini bisa bermanfaat bagi kita semua. jika ada masalah silahkan tulis komentarnya dibawah. jangan lupa juga di share ketamn yang lain. saya SAFRI ST mengucapkan banyak terim kasih sudah mau berkunjung, Assalamualaikum.

Sumber https://www.grafis-media.website/

Share this post