For Adobe Photosop.
PSD: [Only registered and activated users can see links. ].
Excuse the typo on "Tutorial".
1. Open a new document acording to the size of your website. For this tutorial I will be using 500x100
2. Double click on your background layer to unlock it name it Background.
3. Right-Click on the background layer and click on Blending Options and use these settings:
Gradient Overlay:
To make a 3-D feel we use certain shades of colors. Light to dark from top to bottom, the colors will be 3A3A3A and 505050 shown in the image.You do not want the difference of shade to be too obvious.
Now we will start on the Navigation area.
4. Now make a new layer and name it navigation.
Grab the Rectangular Marquee tool and make a selection like this:
5. Right click on the document and fill with 4a4a4a.
6. Right click on the "navigation" layer and click blending options. Use these settings:
Gradient Overlay: This time will be like the other Gradient settings but reversed.
Stroke: 1px 323232
7. Now make a new layer and name it "highlight", grab the Single-Row Marquee Tool . Zoom in and select right below the stroke line on the "highlight" layer and fill with white.
8. Lower the opacity of the "highlight" layer from 100% to 15%:
So far you should have something like this:
See how the reverse of dark and light and one pixel can creat a simple 3-d look.
Now we will start adding the rest of the navigation header.
10. Take the Text tool and click right in the middle of the navigation and start typing all you navigation links. I will be using Home, Forums, Tutorial, Downloads, Affiliate and Contact.
Works best if you leave three spaces between each word instad of one. For the color use 909090. The font is Arial, size 12px.
12. Duplicate the Text layer and right-click on the bottom text layer->Blending Options->Color Overlayer->323232
13. Grab the Move Tool, make sure that you are on the bottom text layer and on your keyboard press the down arrow key then the right arrow key.
You should now have:
14. Now make a new layer above all your layers and name it "highlight2". Grab the rectangular Marquee Tool and in the middle between each word select 1px in between and fill with 575757 :
Also fill before the first word and last word. In this case "Home" and "Contact"
15. After filling in between each word duplicate "highlight2" layer. On your keyboard press the left arrow key (select Move tool first). Then right-click on layer->Blending Options-> Color Overlay->403f3f.
Now you should have:
We are now done with the navigation, but the header is still very plain.
16. Click on the background layer, make a new layer and name it "header". The "header" layer should now be above the "Background" layer. Take the eliptical tool, slect a corner cirlcle on the left, fill it white, do the same on the right. Lower this layer's opactiy to 5%.
Now for Text. Click on your "header" layer then follow the next step.
17. Take the Text Tool and Type you site name in the middle. Mine will be Realgfx.net, Font Asenine, size 28px. Color 9a9a9a.
Now duplicate your text layer, go to Edit->Transform->Flip Vertical and move the text layer you just flip down like this and lower opacity to about 35-45%.
You are done, now you can add whatever you like and voila: A nice, simple, header.
I hope you liked this tutorial and that it wasn't too difficult to understand. If you would like the PSD version please sign up and download [Only registered and activated users can see links. ].
For Adobe Photosop.
PSD: [Only registered and activated users can see links. ].
Excuse the typo on "Tutorial".
1. Open a new document acording to the size of your website. For this tutorial I will be using 500x100
2. Double click on your background layer to unlock it name it Background.
3. Right-Click on the background layer and click on Blending Options and use these settings:
Gradient Overlay:
To make a 3-D feel we use certain shades of colors. Light to dark from top to bottom, the colors will be 3A3A3A and 505050 shown in the image.You do not want the difference of shade to be too obvious.
Now we will start on the Navigation area.
4. Now make a new layer and name it navigation.
Grab the Rectangular Marquee tool and make a selection like this:
5. Right click on the document and fill with 4a4a4a.
6. Right click on the "navigation" layer and click blending options. Use these settings:
Gradient Overlay: This time will be like the other Gradient settings but reversed.
Stroke: 1px 323232
7. Now make a new layer and name it "highlight", grab the Single-Row Marquee Tool . Zoom in and select right below the stroke line on the "highlight" layer and fill with white.
8. Lower the opacity of the "highlight" layer from 100% to 15%:
So far you should have something like this:
See how the reverse of dark and light and one pixel can creat a simple 3-d look.
Now we will start adding the rest of the navigation header.
10. Take the Text tool and click right in the middle of the navigation and start typing all you navigation links. I will be using Home, Forums, Tutorial, Downloads, Affiliate and Contact.
Works best if you leave three spaces between each word instad of one. For the color use 909090. The font is Arial, size 12px.
12. Duplicate the Text layer and right-click on the bottom text layer->Blending Options->Color Overlayer->323232
13. Grab the Move Tool, make sure that you are on the bottom text layer and on your keyboard press the down arrow key then the right arrow key.
You should now have:
14. Now make a new layer above all your layers and name it "highlight2". Grab the rectangular Marquee Tool and in the middle between each word select 1px in between and fill with 575757 :
Also fill before the first word and last word. In this case "Home" and "Contact"
15. After filling in between each word duplicate "highlight2" layer. On your keyboard press the left arrow key (select Move tool first). Then right-click on layer->Blending Options-> Color Overlay->403f3f.
Now you should have:
We are now done with the navigation, but the header is still very plain.
16. Click on the background layer, make a new layer and name it "header". The "header" layer should now be above the "Background" layer. Take the eliptical tool, slect a corner cirlcle on the left, fill it white, do the same on the right. Lower this layer's opactiy to 5%.
Now for Text. Click on your "header" layer then follow the next step.
17. Take the Text Tool and Type you site name in the middle. Mine will be Realgfx.net, Font Asenine, size 28px. Color 9a9a9a.
Now duplicate your text layer, go to Edit->Transform->Flip Vertical and move the text layer you just flip down like this and lower opacity to about 35-45%.
You are done, now you can add whatever you like and voila: A nice, simple, header.
I hope you liked this tutorial and that it wasn't too difficult to understand. If you would like the PSD version please sign up and download [Only registered and activated users can see links. ].
For Adobe Photosop.
PSD: [Only registered and activated users can see links. ].
Excuse the typo on "Tutorial".
1. Open a new document acording to the size of your website. For this tutorial I will be using 500x100
2. Double click on your background layer to unlock it name it Background.
3. Right-Click on the background layer and click on Blending Options and use these settings:
Gradient Overlay:
To make a 3-D feel we use certain shades of colors. Light to dark from top to bottom, the colors will be 3A3A3A and 505050 shown in the image.You do not want the difference of shade to be too obvious.
Now we will start on the Navigation area.
4. Now make a new layer and name it navigation.
Grab the Rectangular Marquee tool and make a selection like this:
5. Right click on the document and fill with 4a4a4a.
6. Right click on the "navigation" layer and click blending options. Use these settings:
Gradient Overlay: This time will be like the other Gradient settings but reversed.
Stroke: 1px 323232
7. Now make a new layer and name it "highlight", grab the Single-Row Marquee Tool . Zoom in and select right below the stroke line on the "highlight" layer and fill with white.
8. Lower the opacity of the "highlight" layer from 100% to 15%:
So far you should have something like this:
See how the reverse of dark and light and one pixel can creat a simple 3-d look.
Now we will start adding the rest of the navigation header.
10. Take the Text tool and click right in the middle of the navigation and start typing all you navigation links. I will be using Home, Forums, Tutorial, Downloads, Affiliate and Contact.
Works best if you leave three spaces between each word instad of one. For the color use 909090. The font is Arial, size 12px.
12. Duplicate the Text layer and right-click on the bottom text layer->Blending Options->Color Overlayer->323232
13. Grab the Move Tool, make sure that you are on the bottom text layer and on your keyboard press the down arrow key then the right arrow key.
You should now have:
14. Now make a new layer above all your layers and name it "highlight2". Grab the rectangular Marquee Tool and in the middle between each word select 1px in between and fill with 575757 :
Also fill before the first word and last word. In this case "Home" and "Contact"
15. After filling in between each word duplicate "highlight2" layer. On your keyboard press the left arrow key (select Move tool first). Then right-click on layer->Blending Options-> Color Overlay->403f3f.
Now you should have:
We are now done with the navigation, but the header is still very plain.
16. Click on the background layer, make a new layer and name it "header". The "header" layer should now be above the "Background" layer. Take the eliptical tool, slect a corner cirlcle on the left, fill it white, do the same on the right. Lower this layer's opactiy to 5%.
Now for Text. Click on your "header" layer then follow the next step.
17. Take the Text Tool and Type you site name in the middle. Mine will be Realgfx.net, Font Asenine, size 28px. Color 9a9a9a.
Now duplicate your text layer, go to Edit->Transform->Flip Vertical and move the text layer you just flip down like this and lower opacity to about 35-45%.
You are done, now you can add whatever you like and voila: A nice, simple, header.
I hope you liked this tutorial and that it wasn't too difficult to understand. If you would like the PSD version please sign up and download [Only registered and activated users can see links. ].
I dont think it does, well the way that I do it you dont. Just slice up the images that you want to be hyperlinked, then go to - Save for web, and then you have the coded page, and just hyperlink the images that you want. Does that make sence?
It shows that you are unregistered. Please register with us by clicking Here
and make a selection like this:
. Zoom in and select right below the stroke line on the "highlight" layer and fill with white.
make sure that you are on the bottom text layer and on your keyboard press the down arrow key then the right arrow key.
Linear Mode
