Welcome to Newanz's first tutorial since release!
I thought of this tutorials while making this design, which you will see when you're busy making it.
When you are done you will have a nice looking website bar that can fit into any professional layout or in a personal website.
Final possible results
Step 1 - Making the PSD file
When you have started up Photoshop, press
Ctrl + N to make a new PSD file. For the width I picked 200 pixels and for the height 20 pixels. You can choose your own sizes, but for the height I would go heigher than 25 pixels, those will become to dominant in your layout.
For the background-color I choose transparent, this is my personal favorite, it will allow you to make images that will have a transparant background (.gif files only).
Step 2 - Making the first layer
Now you should have one layer in your layer palet on your right, called: Layer 1. I like to rename my layers so I known which is which, do this by right clicking on the layer in the layer palet and click on
Layer Properties. Here you will get a pop-up and this is where you can rename your layer and give it a color for in the layer palet. I call this one: Bar master layer.
Step 3 - Filling the first layer
Now you got your tranparent layer we want to add something to it. Press
Shift + F5 on your keyboard. A new pop-up wil appear.
The color you choose now will not effect your final outcome so choose white and press Ok.
Step 4 - Giving effects to layer one
Now you won't have more than just one white layer. We want more than that! Again go to your layer palet to your right. Right click on your first layer and click on
Blending Options. Again a new pop-up will appear.
Now we don't have to fill anything in on this page, go to
Bevel and Emboss and add the following settings:
Now that's hardly what I can call settings, but it all has a purpose! We won't see much difference on the layer right now, but stay in the Blending Options pop-up and go to
Gradient Overlay.
As a standaard Photoshop will pick the white to black gradient. This is a nice one, but not very creative. So click on the white to black piece (not the drop down menu arrow, but on the image). Again a new pop-up will appear.
To change colors of the gradient click on the arrow looking things on the bottom of the preview gradient, a new pop-up will appear with the color selection tool, pick a color and press OK.
The colors I used are
Left:
#147438
Right:
#72d287
The key is to pick a dark color on the left side and a light color on the right side. The right side color should also be more gray than left, as you can see when you fill in those colors I gave.
Step 5 - New layers
Now we actually made the website bar, it's time to add more effects to it. This can be done by adding some new layers to the image. Do this by going to your layers palet on your right and press the very small button displayed in the image.
It will the automaticly add a layer to your layer palet and give it the name: Layer #number.
Step 6 - The white overlay
Now this will be again an easy step.
Now go to your layer pallet again and make sure you have selected your second layer.
Grab the
Rectangular Marquee Tool (image above) and select half your bar horizontaly (image below).
Now you have selected half you bar press
Shift + F5 again which will get you into the Fill pop-up. Fill the layer this time with: white, this will have effect on your result, and press OK. Now deselect your selection by pressing
Ctrl + D.
Now go to your layer pallet again and make sure you have selected your second layer. Then go to the opacity and change the value to
10%.
You will now have a nice overlay. And actually your website bar is now completly finnished. But wait there is more! Below here I will start some optional effects to the bar and if you want you can go through these steps aswell.
If not, go to the end of the tutorials right now.
Optional A - Bar edges
Great you want to do this optional effect. Now then let's get started!
This one is easy. Grab the
Rectangular Marquee Tool and make a
1 pixel border all around your bar.
Now press
Shift + F5 to get the fill pop-up again, select the color you want as your border and press OK. I picked black, but any other dark color will be fine.
Well we got a really dark border around our website bar, but maybe you want it not so dominant. Go to
Opacity as described in Step 6 and take a good opacity for your border, I used
50% this time.
Tip
Well now we got a nice bar around it. If you would use this as a real bar on your website, let me give you a tip for your borders. Take your left and right border seperate and have a 100 pixels width middle piece. When you program your website you will be able to repeat the middle piece all our your table or div and put your left and right border where they belong. This will help you get dynamic sizes for your bars in stead of making one for each width, that could really take a long time.
Optional B - Texture Overlay
We got a nice website bar now, maybe you placed borders now, maybe you didn't. Anyway the bar is so the same each time, you might not like it, maybe you do and won't need this optional effect, but for the ones they do, I will explain.
Again go to your layer palet and right-click on your first layer, containing the gradient overlay of the website bar. Go to Blending Options and go to the tab
Texture tab under
Bevel and Emboss. I added these settings (see image below) you can use any pattern you want and change the Scale and Depth. The scale will let the pattern grow or shrink on your blending options, the Depth will set how visible the pattern will be. Also if you want it totally different than you can do there, go back to Bevel and Emboss and change some settings there like size and shadings, those will have the most effect on your texture.
Optional C - Text
Well if you use this website bar to start blocks of content like on this website, you might want to add text to it. On this site that's isn't done in Photoshop, but in html itself. If you will add it in Photoshop you will have to make a special bar for every piece of content you make. Not really efficient time use. So depending on your colors I would use a contrast color that stands out of the bar and is easy to find and read.
Okay, we are finnally done. That didn't took so long 6 steps with 2 optional steps. I hope you learned a lot, that's the idea of a tutorial. This might not be the most complicated tutorial I ever written, but for new people it's really usefull.
Below here I placed some links to results.
Results
