I am writing this tutorial in part to see how it will be received by the community in order to decide if I should make more advance ones in the future. Feedback would be helpful for that.
This is a simple clean header design that can be used for any type of website, but I will add some things that are probably more appropriate for blogs as I continue along in the series. I will assume a very basic level of familiarity with photoshop or any image editing program.
1. Open a new document in photoshop and create a 900 x 200 document at 72 dpi, use transparency for the background.
2. Make a new layer. Select the rounded rectangle tool and set radius to 20 px / anti-alias to on. Draw the header to the size you need it at. I used guidelines at 50 px and 850 px to draw a 800px wide header.
3. Double click on the thumbnail of the header you just drew and set a gradient overlay with a stroke and outer glow according to the values in the screen shots.
4. Next we work on the menu. Create a new layer. Then select the rectangle marque and draw in the bar.
5. Double click on the thumbnail of the rectangle you just drew. Apply a gradient overlay using the values in the screen shot.
6. Create a new layer. Select the line tool, set it to 1 px and turn anti-alias off. Zoom in, pick a darker color than the gradient, and draw in this line to separate the menu buttons.
7. Add a layer mask to this layer. Select the gradient fill tool and use the radial. Like shown.
8. Duplicate layer by hitting ctrl-J on windows and command-J on mac. Select the move tool and hit the right directional button to move it over one pixel. Set this layer to a lighter color.
9. Merge the two layers and duplicate as necessary to create the rest.
10. The next parts are just mostly details. Select your favorite font and fill in the menu bars. I used a slight drop shadow to give the words some depth. As shown here.
Conclusion
In order to give it more visual interest and just increase it’s overall coolness factor, I added in text to serve as a logo with a slogan. I also created a section for a picture in order to make it more easily customizable for different personalities. You can pretty much add anything there, I would suggest a picture of yourself or something you are interested in to give it some more flair.
Finally in order to give the header a greater emphasis, I used a dark background with a texture over it to give it some more depth. Adding a gradient would also work very well to put more emphasis on the header even more. I also included the psd file at the bottom so you can tinker around and play with it. Feel free to share it, but please link back to me, thanks.
I will be writing up a series of tutorials for blog designs. Subscribe today and get updated when new articles are posted.
47 comments
This is way too technical for the photoshop dummy like myself. For instance I don’t know how to do anything so finding the ‘anti-alias’ is a task that frustrates me to the point of giving up. If you want to make tutorials that are helpful try doing them with instructions of every move you make and don’t think anything is obvious.
Thanks for the feedback Alison. I was afraid at the beginning that I would spend too much time explaining steps that people already knew, but I will try to be more detailed in the future so that no steps are left out so they are more helpful.
Nice tutorial, One error however: Step 5 the gradiant links to:
http://www.vinhlewebdesigner.com/tutorials/header/header05.jp
I think you forgot a g on the end of that
Good eye, thanks for the feedback. I guess I need to triple check before I post instead of double.
i may sound like a retard but for noobs you may want to specify what measurements are required for step 1. 900 x 200 what?
it would also help to show us how you go about changing your colors when doing the overlays. I do realize that you assume a basic familiarity with photoshop, but there may be noobs who want to start blog designing, and because they cant seem to follow quite well you just lost 1 visitor right there.
Thanks for the feedback my friend. I will be sure to be more detailed in my next tutorial. I might even do a video version so it will be easier to follow.
No offense, but most of this can be done with CSS.
And, like has been said already - not a great tuturial - lots missing.
That’s awesome Smiley, I can’t wait for CSS 3 to be more widely supported so that it will be easier to implement things across different browsers without breaking like it does now. I’ll keep your suggestion in mind for my next tutorial.
Thanks for this very helpful tutorial…. Just what I was looking for:)
This is a really nice tutorial to improve the design of the blog. I am still using pre-created designs, but soon I like to learn to design my own templates.
well done, bro
@Matt D, @Willyzo: Thanks for telling me you like it. I will try to make more helpful tutorials in the future. If there is a specific style you want to learn, feel free to send me an e-mail about it.
@rob: Yes, pre-created designs are nice for a while and then you just got to have something cooler. I feel the same way.
Hi, I really likes the tutorial, so I followed it and made a header, but (here comes the noob part) how can I turn it into html and css???
Hi,
I just want to say that i find this a great tutorial. there are just a few steps which i couldn’t follow.
As mentioned earlier: the anti alias thing didn’t work for me either and later on the line tool gave me an arrow instead of a line
However, i decided to download the psd and turn it into something i like. this is what i came up with:
http://i10.photobucket.com/albums/a105/flower_power1979/vincentheader.png
Helllo, well your tutorial is pretty cool, and perfect but, next time please make instructions!
you know what i mean…
this is a tutorial so you need to explain more with images and text, with instructions because you know, tutorials are most for people who need them because they’re new in photoshop and they cant find everything easily! so this is a good tutorial! but more instructions!
Ohh and congratulations your work is awesome!
Sentimental and nostalgic. Great.
css layer examples / properties and layer attributes
http://css-lessons.ucoz.com/css-layer-properties.htm
HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out
simple yet powerful design… i like it….
Very usefull post thnx alot!
Hello admin, nice site ! Good content, eautiful design, thank !r
This site is really superb!!! Thank you for you work! Good Luckk
I\’m love this great website. Many thanks guye
Thnx alot !
Thanks for under standing keep it you serve…..
Hi!
xxoxo
I made with photoshop anime myspace pictures.
have a look at them:
http://tinyurl.com/5ajypv
Thank you 4 your site
Continue this blog but write the tuts in more detail. Step by Step, colors/gradients used, resources of textures and lettertypes, etc.
See good examples of PhotoShop links on: http://adobe-tutorials.vindjeviahier.nl
Very useful information for designing header in blogs
It is a nice tips about designing a header for a blog
I feel this is nice post this is what what i have been looking for because header design plays vital role in blog designing
tesekkurler
Great Blog very useful to all webdesigners, I suggest all designer to share this blog
Nice resources, Thanks
Are there any sites which offer header generators online ?
nice tip to design a headeer
Nice post, and I found new subject
Nice post. I really need a blog header quick. Where can I find it?
very useful for me, thanks for share your article with me……
Very interesting sites., http://boards.sonypictures.com/boards/member.php?u=79912 christian debt consolidation now, txigze,
very useful for me, thanks for share your article with me……
Very clear explanation
That interesting to learn
I suggest all designer to share this blog
A beautiful header will take you more visitors.
How can I design the header of my blog about ball mill?
Trackbacks
Add a comment