Search

Custom Search

shiny web2.0 button tutorial using photoshop cs2

Tuesday, October 14, 2008 | Labels: , , , | 3 comments |

My first ever tutorial, a friend ask me to make a tutorial on nav button with hover effects using imageready but i was too busy and takes time to make as i am lazy in making tutorials lol.... but i have decided to make my first tutorial to all of you, its a simple tutorial and here i will show you how to make a simple but nice button... here is what it should look like, i hope...

Ok here we go, first thing is we have to create a new canvas, any size you like but make sure to set the resolution to 72 px/in as it will not look like this one if its a little higher, but you could try to different resolution and see what it looks like, here i made a 400 x 400 canvas with white background, click shift+d to reset your foreground and background color settings in your tools, choose the rounded rectangle tool and set the radius to 15 px or any value that you think looks greate, name the layer as shape 1... here's mine, this will be our base layer as we have to add some new layer on top, be sure to follow the corroect layer sequence
looks pretty awesome huh? lol


and we add some gradients, the colors are #6d0019 and #a90329, so now we have this one
wow?
now the fun part, we add a new layer on top of it, select shape 1 on the layer palette and click ctrl+j, now we have a new layer named shape 1 copy which is a copy of our base layer, rename the layer stripes. now go to layer style and add this settings:
1.

2. deselect gradient overlay

3.
you should have a stripe pattern but its ok if you don't add the stripes

here is what our button looks like so far
nice!!!


select again our base layer ang ctrl+j to copy it and rename it glass... so now we have three layers which is glass on top followed by stripes then shape 1 moving on.... here is what make's our button looks pretty cool!!! the tricky part.... select the glass layer and apply these settings

for the above
gloss contour



well those are pretty much it i think... anyway here's what it should look like pretty cool right??? now we can add some text... using the
horizontal type tool to add our text, type "click here" for our text on top of the glass layer, select impact as your font, add gradient to your text or you can just use a white text, here i use these vales for my gradient: #feae31 and #efe457 then add a drop shadow with this settings:

and here's our final button with the added font, you can add some graphics on the side like an arrow or something like that or some small text on top



you can use the settings of the glass buttons on my free samples here Free Web Buttons
hope to see you on the next tutorial

thaaaaannnnnnkkkkkssssss!!!!!!!!

Free Website psd templates

Tuesday, October 7, 2008 | | 1 comments |

Here is my new free psd templates, add some of your ideas to make it much more interesting, have fun....























Simplicity is the ultimate sophistication.
- Leonardo da Vinci

Free Web 2.0 Templates

Tuesday, June 3, 2008 | | 6 comments |

FREE website templates for personal or professional use. Download the .psd files for free.





Free Web Buttons

Sunday, May 25, 2008 | | 0 comments |

Enhance your website with these quality buttons. download the .psd files for free.



Nav menu buttons with hover effect, download for free.






DVD Cover Design, CD Rom, Box Designs etc...

Wednesday, May 21, 2008 | | 0 comments |

Want to promote your products, here are a sample of my designs to advertise your products.