Tutorial Photoshop Stylish Dark Buttons | Copyright 2008 Web 2.0 www.dremi.info

Tutorial Photoshop, Forum Photoshop, Tutorial CSS, Tutorial PHP, HTML, Web Tips, dll ! dremi.info

Custom Search

Mar ‘08 23 Stylish Dark Buttons

1958 hits 2 comments 545 download print send

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

New Layer Group

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

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

545 download print send

Technorati Cosmos: other blogs commenting on this post

SOCIAL BOOKMARK :

Social Bookmarks

PERMALINK HERE :

http://www.dremi.info/tutorial/photoshop/stylish-dark-buttons.html

SHARE TUTORIAL :

<p>lam kenal bwat om om tante tante penghuni ilmu web, mudah2an wabis nnni ga diikenal kikakakakakak....... :D</p>
<p>nyoba posting di ilmu web, moga moga suka.. hahahahaa...</p>
<p>Heuummm.... woke...!!! let's start brother ...</p>
<p>semalem wabis inetan ampe malem, bangun subuh, Musik The Misfits [Hate Breeders] kembali menggebrak kamar gw, langsong dah bikin tutor... </p>
<p>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.. </p>
<p>bikin kanvas baro, Ubah warna background menjadi #1d1d1d.</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish%20Dark%20Buttons/stylish-dark-button1.png" width="400" height="70" /></p>
<p>pertama bikin layer group dolo, ama layer baru di dalam na</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish%20Dark%20Buttons/new-layergroup.png" alt="New Layer Group" width="199" height="233" /> </p>
<p>wuki, ambil rectangle marquee tool  <img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish%20Dark%20Buttons/rectangle-marquee-tool .png" alt="Rectangle Marquee Tool" width="25" height="23" /> bikin bidang ke gini:</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button2.png" width="266" height="112" /></p>
<p>kasi style gradient overlay:</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button15.png" width="256" height="200" /> </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button16.png" width="385" height="224" /></p>
<p>Â </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button3.png" width="199" height="82" /></p>
<p>Â </p>
<p>hmm... karena terkesan menimalis, gw kasi line gradasi di ujungna bwat keseimbangan objek button na, ....heheheehe.</p>
<p>Â </p>
<p>pencet [CTRL+Click] pada layer button lu (Layer 1), bwat nge-load seleksi na.</p>
<p>ambil kembali  rectangle marquee tool na, ubah setting menjadi fixxed size: 1 px , ama tinggi lu sesuain ma button na.</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button17.png" width="388" height="26" /> </p>
<p>aktifkan mode seleksi menjadi Intersect With Selection</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/intersect-with-selection.png" alt="Intersect With Selection" width="199" height="60" /></p>
<p>klik sekali di ujung objek button: gedein biar keliatan, jadi biar seleksi ujungna ngepas.</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button4.png" width="400" height="244" /> </p>
<p>nah bakalan kbntuk seleksi yang pas ma bidang button na</p>
<p>ubah warna forground color menjadi #5f5f5f, bikin layer baro </p>
<p>tarik gradasi na dalam seleksi</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button5.png" width="387" height="251" />   </p>
<p>gw gedein pake zooming tool </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button6.png" width="181" height="271" /></p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button7.png" width="232" height="385" /></p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button8.png" width="181" height="389" /></p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button9.png" width="252" height="384" /></p>
<p>wuki, duplicate aja broder layer na, tros pilih Edit > transform > Flip Vertical</p>
<p>weuhhehheeeee...lu geser dah taro di sebelah kiri na button.</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button10.png" width="282" height="371" /></p>
<p>ni hasil smntara naaa...</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button11.png" width="393" height="153" />  </p>
<p>kasi text button na...perhatiakan tipografi na, yang atas gw pake text agak terang dari yg bawah </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button18.png" width="190" height="80" /> </p>
<p>naaaah tinggal duplicate dah, layer group button lu...geser dengan posisi masing2 ujung menempel satu sama lain</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button13.png" width="360" height="314" /></p>
<p>hehek uhuiii jadi dah.... </p>
<p><a href="http://i175.photobucket.com/albums/w126/hairulazami/Stylish%20Dark%20Buttons/stylish-dark-button.png" target="_blank"><img src="http://i175.photobucket.com/albums/w126/hairulazami/Stylish Dark Buttons/stylish-dark-button12.png" alt="Stylish Dark Buttons - Gedein ajah" width="362" height="87" border="0" /></a> </p>
<p>Â  </p>
 <P>&nbsp;</P><P style='font-size:11px;'><strong>© Copyright 2008 <a href="http://www.dremi.info" target="_blank" title="tutorial Photoshop">www.dremi.info</a> </strong><BR>
Original Post: <a href='http://www.dremi.info/tutorial/photoshop/stylish-dark-buttons.html' title='tutorial photoshop Stylish Dark Buttons'>Stylish Dark Buttons</a> Category: <a href='http://www.dremi.info/tutorial/photoshop/button.html' title='tutorial photoshop Button'>Button</a>
<BR><B>About the Author:</B> dr.emi is a free man to distribute anything that he was founded. As a Webmaster He was publishing <a href="http://www.dremi.info" target="_blank" title="tutorial Photoshop">www.dremi.info</a> to create one community that loves free idealism. Very specialy in Design Category. <I>Welcome to love it!</I></P>

Selama untuk keperluan non profit dan belajar gratis, dipersilahkan untuk dicopy, disebarluaskan, atow diperbanyak, tanpa merubah content tutorial dengan tetap memasang author link, sesuai source code HTML na. Ntu tandana lu mensupport All Free Idealism dan menghargai karya dr.emi. Copy TAG HTML diatas bwat dipasang di web / blog lu.