Cryptic GFX - GFX Forum

In this tutorial I'm going to teach you how to create some beautiful bars and buttons for all your web designs. This style is common around the web right now.


Bars:
Step 1:
Open up a fresh document, any size will work, but I've chosen 600x300px so it fits on this screen good. Fill the background a light grey. I used the color #e5e5e5.


Step 2:
Create a new layer and set your foreground color to #3e3e3e. Now grab the rounded rectangle tool with a radius of 5px. Make a rounded rectangle the width you want your bar and about 100px in height. The height doesn't have to be exact, we will be trimming it.


Step 3:
Grab the marque tool and make a box around most of the rectangle (leave arround 60px out on the top). Press delete.


Step 4:
Now lets apply stroke and gradient overlay to our bar. Open up blending options and use the following settings.




Step 5:
Alright, now that we have out base set up, let's add the stroke to make this thing shine. Create a new layer and zoom in so you can see individual pixels. Now grab a pencil tool with a 1px white pencil. Now you're going to draw a one pixel like across the top (1 pixel down) and round the corners by one. Take a look at the picture, you'll know what I mean.



Step 6:
Set the layer mode of the white stroke to overlay and lower the opacity as needed.


Step 7 (Optional):
We now have the basic bar complete. At this point you can add things to make it look a little bit different. Drop shadow with pattern overlays tend to work great! Here's a few variations:

Drop Shadow:


Pattern Overlays:





You can also change the colors. Pretty much any color will look good. I'll use a different color for buttons.

Navigations Bar:
Ok so if you wanted to turn this into a navigation bar all you need to do is add some 2px dividers and some text.

Step 1:
Create a new layer, zoom in and draw up a divider thing like I did:


Step 2:
Set the layer mode to overlay and lower the opacity to around 15%.


Step 3:
Decide how many navigation links you will have, and divide the bar into that many sections. Mine's pretty short so I'll only have a few.


Step 4:
Add some text.


Creating Buttons:
To create buttons you'll be using the same technique except you'll leave the bottom corners rounded as well. Here's how they will look.


Well that's it! The PSD is available to download below Here's how my final image looks like:


Also, be sure to register and post. We're a growing community and we love getting new members. Be sure to register and introduce yourself.

That looks really nice.
How would I use buttons made in photoshop and make them function on a webpage?

Very nice.

(05-15-2011 03:49 PM)Impulse Wrote: [ -> ]That looks really nice.
How would I use buttons made in photoshop and make them function on a webpage?

You need to be more specific, how do you want it to function?

for example i want it to change opacity or brighness when wmy mouseis ove it nd change again when i click it. I also want it to take me to a web page/ i ma drunk thunmbs up if your drunk

lol ^

You could throw it in a div and use the opacity element thing, or there are jquery scripts for the opacity.

HTML

CSS

Here I've uploaded a demo of what the code above produces here:
http://worldofkewl.com/impulse

tyvm balloon. I see tutorials everywhere on how to make layouts in photoshop and I've made at least four of em myself, it just that no one ever goes on to say how you would actually use that and make it into a functionable website.

"oh great I made this good-looking thing now how can I make this picture into something?" you know what I'm saying?

(05-16-2011 09:09 PM)Impulse Wrote: [ -> ]tyvm balloon. I see tutorials everywhere on how to make layouts in photoshop and I've made at least four of em myself, it just that no one ever goes on to say how you would actually use that and make it into a functionable website.

"oh great I made this good-looking thing now how can I make this picture into something?" you know what I'm saying?

Yeah you to learn html/css. Here's a great tutorial that teaches you how to create a nice layout and turn it into a fuctioning website.

http://webdesign.tutsplus.com/tutorials/...photoshop/

^ This is just part 1/9