Stylish Dark Buttons
March 23rd, 2008 by dr.emi
Heuummm…. woke…!!! let
lam kenal bwat om om tante tante penghuni ilmu web, mudah2an wabis nnni ga diikenal kikakakakakak…….
nyoba posting di ilmu web, moga moga suka.. hahahahaa…
Heuummm…. woke…!!! let’s start brother …
semalem wabis inetan ampe malem, bangun subuh, Musik The Misfits [Hate Breeders] kembali menggebrak kamar gw, langsong dah bikin tutor…
ni ada tutor sederhana, gw mao bikin design interface bwat menu button.. hmmm tema na styles dark …ga terlalu web 2.0, konsep na sedikit minimalis tapi masih tetep clean kok… hehehehhe..
bikin kanvas baro, Ubah warna background menjadi #1d1d1d.

pertama bikin layer group dolo, ama layer baru di dalam na
wuki, ambil rectangle marquee tool bikin bidang ke gini:

kasi style gradient overlay:

Â

Â
hmm… karena terkesan menimalis, gw kasi line gradasi di ujungna bwat keseimbangan objek button na, ….heheheehe.
Â
pencet [CTRL+Click] pada layer button lu (Layer 1), bwat nge-load seleksi na.
ambil kembali rectangle marquee tool na, ubah setting menjadi fixxed size: 1 px , ama tinggi lu sesuain ma button na.
aktifkan mode seleksi menjadi Intersect With Selection

klik sekali di ujung objek button: gedein biar keliatan, jadi biar seleksi ujungna ngepas.
nah bakalan kbntuk seleksi yang pas ma bidang button na
ubah warna forground color menjadi #5f5f5f, bikin layer baro
tarik gradasi na dalam seleksi
gw gedein pake zooming tool




wuki, duplicate aja broder layer na, tros pilih Edit > transform > Flip Vertical
weuhhehheeeee…lu geser dah taro di sebelah kiri na button.

ni hasil smntara naaa…
kasi text button na…perhatiakan tipografi na, yang atas gw pake text agak terang dari yg bawah
naaaah tinggal duplicate dah, layer group button lu…geser dengan posisi masing2 ujung menempel satu sama lain

hehek uhuiii jadi dah….
Â
Hello my fox! Glad to see you today!If you love my tutorial, please chose any action from the left button.
2 Comments
keren bang tutorialnya.kebetulan aq lg buat web n bingung mo buat web button yg cantik n eyecaching,thx yach
ya,baguslah lagi keadaan bingung aj bisa dpt ispirasi……:)
Just say it with fill the comment form.
My Friends Link
10001 Inspirasi 4w1n.Blogspot.Com Afial blog Afotsum.CO.NR Alfikry Blogspot Ancaran.Com Andrian.Blogdrive.Com AngsaRea AraZidsi Arteknindo.Com ArtheZoo.TK Articlecillin Belajar Gratis Blog Si Bochan BloGila_U2.Blogdrive.Com BOGIRO Book and Movie Review Can_Dra Blog Catalog-Tutorial CatatanLou.110mb.Com Cenmedia.NET Coin-Kevin CSS Lovers DataBagus.Com Dede Permana, S. Kom (PT. BITA Bandung) Deniall.Com Desire 8 Distro & Clothing dHian - Kanaq Sasak Diplomski.Com Ensept.Com Esato.Com Faris Wijaya FarisW.Com Blog Fendix Wordpress Foxxed-ART Gadget and Tech Gedex.Web.ID GejalaGila.Com GraphicVN HendiHen.Com Henny Indrianty Hmzaky-dot.Blogspot.Com I D I K IDWebHost.BIZ IDWebHost.Com Ilivetodesign.Com Ilmu Grafis Inez Nugroho Irenk Design Jafair.Multiply.Com Jaloe Blog Spot Jenggot Community JiranKubur Jurnal Jaloee K B M S Blog Klik-Kanan.Com LearnSimply LensaDarbi MadeInAra - Graphic Design Mark Xaviar Mifka.Multiply.Com More Tech Tips! Ngetixide.Wordpress.Com Nursingmedia.Blogspot.Com OneMoment.CO.NR PC MILD Percikan Iman Bandung Photoshop Tutorials dr.emi | PSdremi Profit Trading Forex PSD to CMS Pulsa Center PuwaSila Denpasar Rumah Sakit Herbal SEO Articles and Newsletters Seputar Info Wanita {Niella Anwar} SMKN 3 Batu Supermodel and Celebrity Tedy Blog TeguhNET Articles The-Sulton.Com TopBlogArea.Com Tutorial Flash - Blog Apri UdaraMaya.Com WebDesigner.Web.ID Yudha Yudhanto, S. KomSupporter
Sponsors
Subcribe RSS Feed
Flick Group dr.emi
Contact The Doctor
Head Studio:
dr.emi creative design
Jl. Tubagus Ismail Dalam No. 18
Gg. Kubang Sari II Bandung
Jawa Barat Indonesia 40132
Phone: +62 813 9513 4144
Email:
info[at]dremi.net
webmaster[at]dremi.info
YM: hairulazami
GTalk: dremi007
dr.emi Creative Design
SEO Articles & Newsletters
Forum dremi.info
Clients
Partner
Free Download
Recent Comments
- syharial: Pak..tolong dong bagi passwordnya gnomePM nya.saya butuh bua...
- mulkan: Semangat...
- buku belajar komputer: Baguss nih artikelnya, sekalian bikin pak Tutorial convert H...
- zoel: Trima Kasih buat tutorialnya, sangat bermanfaat....
- alvin: Pak..tolong dong bagi passwordnya gnomePM nya.saya butuh bua...
- Novianti Soraya: Mas emi, tolong kirim ke email saya xxx@yahoo.com, terima ka...
- dr.emi: matur tampi asih saq beleq meton...
Recent Posts
- Freelancer Kini Tajam dan Berbahaya
- Website dremi.NET Ganti Wajah
- Web Based Absensi System Menggunakan BarCode Reader
- The Chain Tutorial from FuelYourCreativity
- dreLogin v.2.0 Has Release
- 26 Resources for the Web Developer’s Toolbox
- How to Check Username Availability using jQuery + PHP
- White Space Problem with JavaScript
- Website Web Development dan Design dremi.NET Telah Publish
- Kerja Keras Adalah Energi Kita
Archives
Popular Tags
3D illustration abstract design adsense aero button animation banner clean navigation colouring layer CSS tutorials digital library effect form interface glassy effect google gradient style GUI photoshop design hacker handcoded HTML IT job jasa pembuatan web jQuery layer mask layer style photoshop logo merancang web pen tool photo retouch photoshop design PHP PHP Advance PHP login product demo relationship search engine shapping spirit tab link text effect transparent gradient web articles web design web development web header web layout web tips

























PSD Files
PHP Source Code






