Senin, 31 Agustus 2009

Mendesign glossy button di photoshop

Aku udah nyiapin beberapa tutorial yang biasa aku pake pas ngedesain web. Aku pake dua software, Adobe Photoshop CS (yup, katro emang. Tapi ntar lagi gw ganti kq. Jadi yang pake versi yang baru, silahkan cari alternatif lain deh) ama Adobe Illustrator CS2 (ntar juga mo diganti pake CS3).
Yup, ini dia tutorialnya. Silahkan menikmati. Resep untuk 6 porsi, minyak goreng dapat diganti dengan mentega *loh.. salah =p*.
  1. Buat bentuk tombol yang kamu inginkan. Aku sih pake bentuk rounded rectangle . Ukuran dan warna terserah kamu. Disini aku pake warna #92CDFF.
  2. Trus kamu seleksi bentuk tombol dengan cara Select » Load Selection ato kamu Ctrl+klik thumbnail di palet layer.

  3. Ubah foreground ke tone yang lebih tua. Punyaku pake #094373. Trus, kasi gradasi linear, Foreground to Transparent . Buat gradasi dari atas ke bawah. Jangan lupa tekan Shift pas buat gradasi. Fungsinya untuk menjaga gradasi kamu agar tetap lurus.


  4. Bentuk tombol masih diseleksi, pilih menu Select » Modify » Contract.
  5. Pake 3 pixels aja.
  6. Ini akan membuat seleksi sebesar 3 pixels lebih kecil dari seleksi awal.

  7. Jangan di-deselect dulu… Pake tool Rectange Marquee Selection (M) , pilih Subtract from Selection, feathernya 0 . Buat seleksi untuk ngilangin bagian bawah kira-kira setengahnya.
  8. Trus nanti jadi kaya gini:


  9. Buat layer baru dengan cara klik aja icon Create a New Layer ato (Ctrl+Shift+N). Kali ini kita bakal buat efek glass-nya.
  10. Masih belum di-deselect. Ubah foregroundnya jadi warna putih (#FFFFFF) *MESTI WARNA PUTIH! Soalnya sekarang mau buat efek glass-nya. Putih adalah warna yang umum untuk buat efek glass*. Kasi gradasi linear, Foreground to Transparent , dari dari atas ke bawah (kaya sebelumnya). Baru di-deselect (Ctrl+D). Punyaku jadi seperti ini:

  11. Yaaapppzz.. Udah jadi deh.. Sekarang kamu bisa nambahin blending option seperti inner glow, drop shadow, ato stroke (di tutorial” yang aku temuin biasanya pake tiga itu ja). Klo mau ngisiin, jangan terlalu gede size-nya. Web 2.0 perlu warna yang tegas n kuat.
  12. Gw ngisiin inner glow…

  13. Drop shadow…
  14. dan stroke…
  15. Blanding tadi diaplikasikan pada layer 1. Hasilnya seperti ini.

    Tapi gw tetep milih tanpa blending option apapun.

So, gimana punyamu? Klo ga sreg silahkan kamu otak-atik lagi, trus kasi tahu aku (tempe juga boleh, tapi karena kedele mahal, ayam aja deh sekalian). Bagi" ilmu gitu deh..
Good luck, dan selamat berkreasi…

Silahkan download di sini (format: .psd, size: 31KB)




Tidak ada komentar:

Posting Komentar