Efek Tombol Glossy

Diarsipkan dalam kategori: Efek Teks tanggal: 24 November 2008 oleh Mbah Dewo

Pada tutorial Photoshop yang sekarang ini saya gunakan untuk membuat sebuah style. Style ini bisa digunakan untuk membuat efek pada tombol.
tutorial photoshop efek style 1 Biasanya efek ini ditemukan pada tombol untuk mendownload, ataupun tombol pembelian pada situs-situs affiliasi. Style ini sendiri saya namakan efek glossy. Langkahnya agak panjang, namun tidak akan terasa sulit jika sudah terbiasa menggunakan layer style. Juga sangat saya anjurkan untuk mencoba membuat Style Tetesan Air yang pernah saya tulis dulu. Karena pada tutorial tersebut akan saling melengkapi keterangan yang saya tulis disini.

Langkah pembuatan Style efek glossy

Langkah 1
Buatlah sebuah file baru dengan photoshop. Ukuran bisa disesuaikan dengan selera Anda sendiri.

tutorial photoshop efek style 2

Langkah 2
Buatlah sebuah obyek yang akan digunakan sebagai media membuat style, karena style kan tidak bisa diterapkan pada layer background yang terkunci. Obyek ini bisa berupa teks, bentuk shape, ataupun lainnya.

Kali ini saya gunakan sebuah bentuk shape kotak yang bersudut tumpul dengan Rounded Rectangle tool (lebih lanjut tentang pembuatan bentuk shape bisa dibaca di sini).

tutorial photoshop efek style 3

Gambar shape tersebut seperti dibawah ini

tutorial photoshop efek style 4

Langkah 3
Kemudian pilih menu Layer > Layer Style > Inner Glow.
Ubahlah warna glow-nya. Caranya diklik pada pilihan warnanya. Seperti gambar dibawah ini, yang saya beri tanda lingkaran merah.

tutorial photoshop efek style 5

Setelah berada pada kotak dialog color picker, pilihlah warna seperti pada gambar dibawah ini.

tutorial photoshop efek style 6

Pada contoh ini saya pilih warna dengan kode #f8b500 (bisa diisikan pada kotak isian paling bawah). Setelah itu di klik OK.

Masih pada kotak dialog Inner Glow, aturlah seperti gambar dibawah ini.

tutorial photoshop efek style 7

Blend mode-nya Normal, Opacity = 40%. Size = 7. Yang lain sudah ukuran default-nya seperti itu, jadi mungkin di komputer Anda juga sudah sama settingannya.

Langkah 4
Jangan diklik OK dulu. Sekarang klik pada style Gradient Overlay (ada di kiri agak bawah dari kotak dialog Layer Style).

Kemudian ubah warna gradasinya. Caranya dengan mengeklik pada warna gradasinya (yang saya beri tanda lingkaran merah pada gambar dibawah ini). *)

tutorial photoshop efek style 8

*) Catatan
Jangan diklik pada segitiga kecilnya, tapi klik tepat pada warna gradasinya.

Setelah muncul gambar seperti dibawah ini, klik pada titik segitiga yang saya beri tanda huruf A, kemudian klik pada kotak warna yang saya beri tanda huruf B.

tutorial photoshop efek style 9

Pilih warna sebagai berikut:

tutorial photoshop efek style 9a

Kode warnanya saja yang diisikan, yaitu #fbe29d. Kemudian klik OK untuk menerapkan pilihan warna tersebut.

Masih berada pada kotak pemilihan warna gradasi tadi, kira-kira sekarang gambarnya menjadi seperti dibawah ini.

tutorial photoshop efek style 9b

Kliklah agak ditengah dari gambar gradasi tersebut, yang saya beri tanda lingkaran merah pada gambar diatas. Ini untuk membuat titik gradasi baru.

Lakukan lagi klik tapi sekarang agak disebelah kanannya. Sehingga kita mempunyai 4 titik warna gradasi, seperti gambar tutorial Photoshop dibawah ini (saya beri tanda dengan huruf A, B, C, dan D).

Ubahlah setiap titik warna gradasi dengan warna seperti dibawah ini (caranya mengubah warna seperti sebelumnya tadi).

tutorial photoshop efek style 10

  • A = #fbe29d
  • B = #fccd4d
  • C = #f8b500
  • D = #fcecc0

Setelah diubah warnanya, klik pada titik B, kemudian pada pengaturan Location isilah 50%.

tutorial photoshop efek style 11

Lakukan pengaturan Location tersebut pada titik C (juga diisi 50%).

Setelah itu diklik OK pada kotak pemilihan warna gradasi. Akan didapat gambarnya menjadi seperti dibawah ini.

tutorial photoshop efek style 12

Langkah 5
Masih berada pada kotak Layer Style. Sekarang klik pada style Stroke (letaknya di paling kiri bawah dari kotak dialog Layer Style).

Lakukan pengaturan seperti gambar tutorial Photoshop dibawah ini.

tutorial photoshop efek style 13

  • Size = 1 pixel
  • Position = Inside
  • Color = Warnanya diubah menjadi #de9d00

Efeknya sudah jadi. Setelah ini, jangan lupa klik tombol New Style, dan beri nama yang sesuai. Kemudian klik OK pada kotak dialog Layer Style.

tutorial photoshop efek style 14

Silahkan dicoba, dan kemudian dikreasikan dengan pilihan warna-warna yang lain.

Style ini bisa diterapkan untuk membuat bentuk tombol, ataupun digunakan sebagai efek pada tulisan. Misalnya seperti dibawah ini.

tutorial photoshop efek style 15

tutorial photoshop efek style 16

Jika ingin menggunakan style ini namun kesulitan saat membuatnya, sudah saya buatkan style ini yang siap di-download.
Silahkan di-download style ini di sini. File-nya berukuran 2,4 kb, bisa digunakan mulai pada Photoshop 7 hingga CS3. Setelah didownload tinggal di-load saja dari palet style.

Lebih lanjut tentang cara menggunakan style hasil download akan saya tulis dalam tutorial yang berikutnya, karena saya lupa, ternyata belum pernah menulis tutorialnya.


74 Responses to “Efek Tombol Glossy”

  1. Thanks banget sangat membantu

  2. Walid says:

    Wow akhirnya sy paham tntang artikel ini,dan tutorial nya Bagus Terima kasih :)

  3. aksan says:

    kurang paham bro

  4. aksan says:

    gan ane kurng paham, klo bisa yg lebih detail lg

  5. ADI INRAWAN says:

    GMN SH BERAJAR PS LEBIH CPT DI MENGERTI

  6. haris says:

    salam kenal mbah, tutorialnya membantu sekali.
    kalo boleh tau itu cara buat tulisan mbahdewo.com seperti yg ada dalam tombol glossy gmn mbah?
    masih nubie nih…dasar pun blm becus heheeh..

Leave a Reply

Komentar Anda akan dibaca semua orang, gunakanlah tulisan yang jelas dan dengan bahasa yang sopan.