Home  /  Belajar Photoshop  / Membuat tombol website dengan photoshop

Membuat tombol website dengan photoshop


Membuat tombol website dengan photoshop

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.

membuat lembar kerja baru

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

unlock layer

Selanjutnya, beri layer style pada layer tersebut

memberi layer style pada photoshop

langkah 2 : membuat tombol dengan photoshop

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

membuat tombol dengan photoshop

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

inner glow

memberi layer style pada photoshop

gradient overlay

memberi layer style pada photoshop

stroke

memberi layer style pada photoshop

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.

cara membuat seleksi dengan photoshop

Save selection tersebut dengan beralih kemenu select > save selection.

cara menyimpan seleksi dengan save selection

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

cara menyimpan seleksi dengan save selection

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).

cara membuat seleksi dengan photoshop

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

memberi efek noise pada gambar

ubah layer mode layer tersebut menjadi Screen dengan opacity 10%

layer photoshop

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.

Cara load selection pada photoshop

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.

Delete

Ubah layer mode menjadi Overlay dan opacity 10%

layer photoshop

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

Menambahkan teks pada photoshop

Beri layer style teks tersebut.

Drop shadow

drop shadow

Outer Glow

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.

menambah warna dengan brush

Ubah layer mode menjadi overlay dengan opacity sebesar 66%.

Langkah 8 : menambah efek cahaya

Buat lagi layer baru disini saya menamakannya menjadi garis.

layer photoshop

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

brushes photoshop

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

buat dengan pencil tool

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

layer photoshop

Hasil akhir

Membuat tombol dengan photoshop

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

Punya Android hanya untuk chatting ? yuk cari uang juga lewat Android dengan cara mudah dan telah terbukti, lihat tutorialnya pada postingan cara mendapatkan uang dengan Android

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

Related Post


Mengembalikan foto yang telah di cropping dengan photoshop
Mengembalikan foto yang telah di cropping dengan photoshop

Apabila anda telah melakukan cropping atau memotong gambar dengan photoshop,…

Membuat Tombol online dengan photoshop
Membuat Tombol online dengan photoshop

Setelah sebelumnya kita membuat tombol download dengan adobe photoshop CS3,…

Download template desain website dengan photoshop
Download template desain website dengan photoshop

Kali ini, saya akan membagikan gratis kepada anda sebuah contoh…

Mempertajam gambar dengan photoshop
Mempertajam gambar dengan photoshop

Untuk mengedit foto yang tampak buram dan kabur photoshop memiliki…



  • Leo Ari Wibowo

    Saya bimbang, antara pakai tombol memakai gambar atau murni CSS. Mana yang lebih baik ya?

    • http://psdesain.net/ Jaka Zulham

      Jika anda mementingkan kecepatan dalam blog anda, memakai css lebih baik dari pada anda membuat tombol. Tapi, saya rasa untuk sebuah tombol kecil yang kita tambahkan ke website kita juga tidak akan membawa pengaruh besar untuk performa website/blog kita. :)

      • http://utchanovsky.com Uchan

        Bisa dibilang kompatibilitas vs performa begitu mas? :D

        performa cepat make CSS, tapi tidak 100% kompatibel
        atau 100% kompatibel (asal jgn png), tapi tidak begitu cepat

  • Belajar SEO

    Tombol pake gambar ato css sama aja sich menurutku, yang penting kita tidak membingungkan visitor dengan berbagai tombol yang ambigu.. betul tidak ?

    • http://psdesain.net/ Jaka Zulham

      betul! saya setuju :)
      tapi, yang memang websitenya diutamakan kecepatan tanpa menggunakan gambar satu pun yang tertempel diwebsite memang lebih memilih pengkodingan yang saya sendiri sangat tidak paham betul dengan itu?.
      lihat aja blog ini semenjak saya berlangganan di situ, tak satupun gambar pernah dimuatnya kecuali dalam satu postingan.

  • Hendro Prayitno

    Dari kemaren gw pingin komen tpi nyoba dulu,,ternyata bisa. Bukan sepuluh menit malah satu jam gw utak atik..abis instal plugin.
    Oia minta request dong plugin buat photoshop yang keren-keren..

    • http://psdesain.net/ Jaka Zulham

      Insya Allah akan saya carikan mas hendro :)

  • belajaronline88

    wew, ulasannya benar2 menarik. saya bookmark dulu ya blognya. biar bisa sering2 mampir kesini :)

    • http://psdesain.net/ Jaka Zulham

      thanks :)
      Saya juga pembaca setia blog anda. :)