Membuat tombol website dengan photoshop

Posted on

Berikut ini, kita akan belajar membuat sebuah tombol dengan photoshop. Tombol ini diharapkan bisa ditambah juga ke website atau blog anda.

Postingan membuat tombol ini merupakan tutorial ketiga setelah sebelumnya saya memposting membuat tombol download dengan photoshop dan membuat tombol online dengan photoshop.

Preview desain

Berikut ini hasil desain yang akan kita pelajari pada tutorial berikut ini

Membuat tombol dengan photoshop

Detail Tutorial

  • Tingkat Kesulitan : Pemula
  • Program yang dipakai : Adobe Photoshop (Disini menggunakan Photoshop CS)
  • Materi yang dipelajari : Pencahayaan dan noise
  • Lama Pembuatan : 10 Menit

Tutorial

Langkah 1 : Membuat dan memberi efek cahaya pada lembar kerja baru

Buat lembar kerja baru, disini saya membuat dengan ukuran 500 x 250 pixels.

Setelah membuat sebuah canvas kerja, selanjutnya unlock layer Background dengan cara double klik pada layer background tersebut.

Selanjutnya, beri layer style pada layer tersebut

langkah 2 : membuat tombol dengan photoshop

Buat sebuah tombol/botton dengan Rounded rectangle tool, buat dengan radius 5 px.

Beri efek layer style pada tombol yang kita desain seperti gambar dibawah ini.

inner glow

gradient overlay

stroke

Langkah 3 : membuat seleksi pada tombol

Selanjutnya beralih ke pallete layer, sambil menekan Ctrl pada keyboard klik pada tombol yang kita buat pada langkah 2. Akan nampak sebuah seleksi mengelilingi tombol tersebut.

Save selection tersebut dengan beralih kemenu select > save selection.

Beri nama pada seleksi yang akan kita save dan klik ok.

Seleksi ini berguna jika suatu saat kita membutuhkan seleksi baru yang sama persis saat kita save

Langkah 4 : memberi efek noise pada tombol

Buat layer baru (ctrl + shift + alt + N) masih dalam keadaan terseleksi warnai seleksi dengan warna hitam (fiil dengan warna hitam).

Hilangkan seleksi dengan klik menu Select > Deselect, beri efek noise pada layer yang diberi warna hitam tersebut di menu filter > noise > add noise.

ubah layer mode layer tersebut menjadi Screen dengan opacity 10%


Langkah 5 : membuat cahaya tombol

Buat layer baru (seperti langkah 4) load selection dengan klik menu select > load selection, pada pilihan Channel pilih nama seleksi yang anda buat tadi.

fiil dengan warna putih (isikan dengan warna putih), hilangkan seleksinya lagi dengan klik select > deselect. Pilih Rectangular marquee tool dan seleksi sebagian bagian putih yang kita fiil tadi. Tekan Delete pada keyboard untuk menghapus bagian tersebut.

Ubah layer mode menjadi Overlay dan opacity 10%

langkah 6 : menambah teks pada tombol

Seperti tombol-tombol lainnya, kita perlu menambah sebuah teks pada tombol tersebut. Pilih type tool dan tambahkan sepenggal teks

Beri layer style teks tersebut.

Drop shadow


Outer Glow

Langkah 7 : menambah cahaya

Buat lagi layer baru dan load selection pada menu select > load selection, dan pilih brush tool. Setting brush dengan hardness 0% dan brush dengan warna putih.

Ubah layer mode menjadi overlay dengan opacity sebesar 66%.

Langkah 8 : menambah efek cahaya

Buat lagi layer baru disini saya menamakannya menjadi garis.

Pilih Pencil Tool dan buat garis putih kecil berukuran 1 px.

Pilih erase tool Dengan Hardness 0% erase dengan lembut pada pinggiran garis 1 px yang kita buat tadi.

Ubah layer untuk pencil tersebut menjadi overlay dan opacity sebesar 30%.

Hasil akhir

Download file PSD : Membuat tombol website dengan photosho UPDATE! Link download sedang bermasalah.

Demikianlah pembelajaran photoshop kali ini, semoga dengan tutorial ini bisa mengobati kerinduan anda karena setelah 2 minggu tanpa tutorial di website PSD desain ini :)

Panggil saya Jaka, saya suka desain. Saya orang yang mudah untuk diajak berinteraksi, temukan juga saya diwebsite pribadi Jakazulham.