Posted on October 25, 2008 - by Matthew Heidenreich
Pro Header With Picture and Navigation
Introduction…
In this tutorial you will learn how to create a professional header with an image implemented into it. If you have any questions about this tutorial be sure to ask in the comments and i’ll be happy to answer any questions. Also, remember with all the tutorials, the psd is available for download.
Download the PSD…
Don’t have time to do the tutorial, but would like to see the results? The PSD is available to anybody who would like to use it.
Lets get started…
1. First thing we need to do is create a new canvas with a size of 860×400
2. Next, we want to go ahead and change what our background looks like. So go ahead and insert the following blending options onto your background layer (right click layer, then chose blending options)
3. Next, we want to go ahead and get our image ready. I used a photo from sxc.hu that can be found here
4. What we want to do now is use our rounded rectangle tool with a radius of 10px to make a selection like this:
5. Next, position your image over your rounded rectangle. When you have it where you want it, CTRL+CLICK your rounded rectangle layer to select it. Then choose, SELECT>INVERSE. On your photos layer, then choose EDIT>CLEAR and you’ll have something that looks like this
6. Now, we want to go ahead and move our rounded rectangle layer over the picture layer. We then want to use this rounded rectangle as the background to our navigation. Using your rectangle marquee tool, make a selection similar to the following and then choose EDIT>CLEAR
7. Now we want to add some blending options to the back of our navigation. So input the following:
8. Your image will look like this
9. We want to add a little ‘highlight’ to the top of our box, so CTRL+CLICK your navigation back layer to select it. Then create a new layer over it and fill it with #FFFFFF. Make sure you still have an active selection then choose, SELECT>CONTRACT> 1 PX. Then choose EDIT>CLEAR. You will have something that looks like this:
10. Change that layers blending mode to Soft Light and it will look like the following:
11. Next, make a selection similar to the following with your rectangle marquee tool:
12. Fill it with #FFFFFF on its own layer, and then input the following blending options
13. Your document will look like this:
14. Next we want to add some links to our navigational menu. I used the font Lucida Grande with all caps.
15. Now we want to create a search box. With a rectangle marquee tool, make a selection like this:
16. Fill it with #FFFFFF, and then input the following blending options onto that layer:
17. Next, we want to make another selection using our rectangle marquee tool, that looks like this:
18. Create a new layer and fill it with #FFFFFF. Then input the following blending options
19. Now you just need to add some text, and add a shine to the navigation and your final results will look something like this:
**If you have any problems, or have any questions about this tutorial, please leave your comments and I will get back to you. Also, remember the PSD to this tutorial is available for download.
If you enjoyed this tutorial, why not check out our other Adobe Photoshop Tutorials?
Visit My Website
October 25, 2008
Permalink
Very nice.
Visit My Website
October 26, 2008
Permalink
Nice Tut, clear and precise, keep em comin
Visit My Website
November 3, 2008
Permalink
Hi,love your site.I have been an amateur photoshop/dreamweaver/flash/web designer for nearly 10 years.Please note “amateur”. And I have followed just about every tutorial on the web and I find yours to be up there with the best.It’ nice to see original tutorials instead of the repeated tosh that is out there. Keep up the good work
Visit My Website
November 6, 2008
Permalink
its really great and cool tut thanks so much and i like that header alot
i wish you give us more nice tips thank you so much
Visit My Website
November 9, 2008
Permalink
does this work with photoshop 7.0
?
Visit My Website
November 10, 2008
Permalink
sam,photoshop 7 is a little outdated,some people have been known to download cs3 from sites like mini nova using bit torrent,totally unfair to the producers of this superb program,but then again the prices charged are also unfair.Oh yes it’s also illegal to do so,but hey ho charging hundreds of $$$ for it could also be deemed illegal in some quarters
Visit My Website
November 11, 2008
Permalink
Pro Header With Picture and Navigation - idotutorials.com…
In this tutorial you will learn how to create a professional header with an image implemented into it….
Visit My Website
November 12, 2008
Permalink
ZOMG great site! first time I come to visit, but added to feeds inmediatly =)
Visit My Website
November 16, 2008
Permalink
nice tutorial..
but can i ask on how to make a link?
thankz
Visit My Website
November 17, 2008
Permalink
Yenzkie you need to slice up your website using the slice tool.When you ’slice’ drag a box over each link/button/pic or whatever you want to link to and you will see a ’slice’ box appear,here is where you ‘tell’ photoshop to create the link with http://www.whatever etc etc.Oviously after that you need to create further pages on your website and name and link them all up
hope this helps
Visit My Website
December 6, 2008
Permalink
Hi! I just love your tutorials… However, how can I put the link codes in each button of the navigation bar? Is there any program to do that? Please, answer my questions asap!
Thank you!
Visit My Website
December 6, 2008
Permalink
@ Mafalda
Yes, you would have to slice your design in photoshop to do that and then most people would take it into dreamweaver and code it into css/xhtml.
I actually started up a new site at psdvibe.com, where i will hopefully be offering more coding tutorials for the designs i make.
Visit My Website
December 6, 2008
Permalink
Mafalda,use the slice tool in Photoshop to link things, what you will be doing is effectively “chopping up” your completed page into smaller pieces, and “telling” photoshop what buttons link to what eg.when you name your front page it should be named index.html and then whatever you name your navigation buttons name your pages the same eg news.html, portfolio.html, contact.html etc.etc.Hope this helps
Visit My Website
December 9, 2008
Permalink
Looks like another tutorial site “DEAD”
no updates
:(
Visit My Website
December 10, 2008
Permalink
@uber Brown
Yes, sadly I do not write tutorials on here anymore. I broke off and write over at psdvibe.com now
Visit My Website
December 12, 2008
Permalink
well would it not be better to just remove the site??
Visit My Website
December 19, 2008
Permalink
excelent…!!!
http://www.crea-t.net
Visit My Website
December 19, 2008
Permalink
Great tutorial. Will definitely help designers.
Visit My Website
December 26, 2008
Permalink
gomeupjekfyricgxwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch
Visit My Website
December 28, 2008
Permalink
[...] Pro Header With Picture and Navigation [...]
Visit My Website
December 30, 2008
Permalink
[...] 有图片和导航的Header [...]