RSS Artikel
- SEO Submiter (3156)
- Tips Mempercepat Koneksi Modem IM2 (772)
- Mengetahui Log dan Quota Bandwidth Indosat M2 (629)
- Tutorial: Membuat Menu Navigasi Memakai CSS (500)
- Photoshop: Membuat Tombol Web 2.0 (392)
- Validasi di PHP untuk data yg sama atau duplicate (309)
- Mendaftarkan Website ke Google (237)
- Belajar XHTML dan Web Standards (236)
- HASIL TRY OUT UM UGM 2010 DI BANYUWANGI (622)
- My First Blog (310)
- TRY OUT UM UGM 2010 DI BANYUWANGI (297)
- Doa Yang Membawa Keberuntungan (171)
- Jawaban Dari Segala Kegelisahan yang Melanda Perutku... (159)
- Ngenet Seharian Bersama Baim Wong (150)
- Apakah Singkatan Dari Indowebster? (143)
- IM2 My Presents Conection Profider (117)
Photoshop: Membuat Tombol Web 2.0
Diposting oleh : Andang Charisma Perdana
Kategori: Desain - Dibaca: 393 kali
Membuat tombol web 2.0 menggunakan Photoshop merupakan topik artikel yang paling populer di berbagai web site desain semenjak maraknya web 2.0, seperti topik yang kita angkat kali ini. Lets go, langsung saja kita praktekkan seperti apa sih proses pembuatan tombol yang sesuai dengan web 2.0.
Buat project baru dengan ukuran kanvas 500px (lebar) x 400px (tinggi) untuk memulai desain. Buat layer baru, dan beri nama "bg01" atau terserah anda. Pilih Rounded Rectangular Tool, tekan SHIFT dan buat kotakan di tengah dengan sembarang warna.
Buka Blending Options dari "bg01" dan masukkan style di bawah ini:
Drop Shadow
- Opacity: 40%
- Distance: 0px
- Spread: 0%
- Size: 6px
Gradiant Overlay
- Color stop: 0%, #d00031
- Color stop: 100%, #ff2b5d
TekanCTRL lalu klik kiri pada "bg01" Layer Thumbnail untuk memilih shape. Pilih Select -> Modify -> Contract dan masukkan nilai "2px". Ini akan menenggelamkan area yang dipilh sejauh 2 pixel.
Buat layer baru dengan nama terserah anda, tapi disini saya menggunakan nama "bg02" dan isi dengan warna terserah pada area yang terseleksi. Saya menggunakan warna hitam (#000000). Klik dua kali di "bg02" untuk membuka jendela Blending Option dan aplikasikan style di bawah ini.
Gradiant Overlay
- Color stop: 0%, #c6002f
- Color stop: 100%, #c6002f
Buat layer baru untuk text (membuat tulisan) dengan nama "txt". Ketik huruf di atas tombol. Font styles yang saya gunakan adalah:
- Rounded Arial Bold
- 150pt
Klik ganda pada "txt" untuk membuka jendela Blending Options dan aplikasikan styles di bawah ini.
Drop Shadow
- Opacity: 25%
- Distance: 0px
- Spread: 0px
- Size: 5px
Inner Shadow
- Opacity: 10%
- Distance: 0px
- Choke: 0
- Size: 10px
Bevel Emboss
- Depth: 1px
- Direction: Down
- Size: 0px
- Softten: 0px
- Highlight Mode Opacity: 32%
- Shadow Mode Opacity: 32%
Gradiant Overlay
- Color Stop:0% #d2d2d2
- Color Stop:100% #f0efef
Tombol sudah jadi. Nah sekarang tinggal menambahkan efek kilaun cahaya. TekanCTRL, klik kiri pada "bg02" Layer Thumbnail untuk untuk seleksi ; pilih Eclipse Marquee Tool. Sekarang tekan ALT, dengan Eclipse Marquee Tool terpilih, drag pada area yang terseleksi. Seperti yang terlihat di gambar atas.
Klik kiri pada area yang terseleksi kemudian pilih Feather; masukkan nilai 15px untuk radius nya.
Buat layer baru dengan nama "glow" atau sesuai dengan selera anda kemudian isi area yang telah terseleksi dengan warna putih [#ffffff]. Ya seharusnya proses ini dapat menimbulkan efek pencahayaan di bagian atas tombol. Hehehe... Tadaaaa...!!!! hasil akhir yang kita buat bersama-sama tadi akan terlihat seperti gambar di bawah ini.
Thanks...
Simpan Artikel ini:
12 Komentar :
aan
wah cukup simple yah mas
ya saya tunggu artikel yang akan datang...
matur nuwun...
shakti
kerenz!
hehe ^^
Andre
Woiiiii
kq iso ngono yo cuy......
apixcs..apics....
kapan2 ajari yow....
andangcharisma.com
ok trimakasih lho ya telah mampir...
nantikan artikel selanjutnya yach...
jangan lupa baca blog akuw, ok..
nice day...
kunyuk
hem hebat" tingkatkan ........
edi ganteng
apik coy..!!!
ajari yo!!!
a6a51
Emang ga salah dirimu masuk divisi web & multimedia.
Lanjutkan....
andangcharisma,com
trimakasih ya teman2 jadi melambung nih, kbanyakan di puji hehe...
edi ganteng
hemmmmm.....
sombong tenan saiki kowe...
andangcharisma.com
hahaha.. opo edd..
gak trima yow kwe edd..
hikata.co.tv
mas ......numpang tanya donk
bagaimana caranya biar artikel bisa ditambahin gambar ga cuman satu ,tapi banyak?
kyk artikel ini.....
tlg dibls mas
maturnuwun sebelumnya :)
andangcharisma
wow hikata, nama yang bagus.. aku panggil hikata ja yak.. salam kenal yak..
Langsung aja deh, kalo nampilin gambar di artikel gak cuma satu tok,.. kamu bisa manual pake [img src =""] biasanya itu satu satu, kalo gak mau repot kamu bisa pake editor kayak tinyMCE atau FCKEditor, tutorial untuk implementasi ada di web ini juga kok..
klik ini
http://andangcharisma.com/berita-99-mengintegrasikan-fckeditor-pada-web-berbasis-php.html
semoga bisa menjawab pertanyaan kamu,.. :)
Isi Komentar :