- Knowledge needed: Intermediate Photoshop, XHTML, CSS
- Requires: Photoshop, text editor
- Project time: 1 hour
Create the perfect homepage header design in Photoshop, then learn how to code it up with HTML and CSS
A website’s header is the first part of a page a visitor sees and, being higher than all other page elements, it has the potential to impress before anything else. Page headers have to consider the clarity of navigation, but because they rarely contain any substantial content, they have the freedom to run wild with graphic flourishes and embellishments.
There are no hard and fast rules to creating a good-looking page header design, apart from balancing clarity with visual flair. We’re going to create a header with an autumnal theme for a fictitious company website. This will enable us to be playful with colour, texture and the use of manipulated photography. And since many people have asked how I created the header on my personal website, we’ll be using that general layout as a template in this tutorial.
As well as using some subtle but effective Photoshop techniques to achieve some great results, we’ll be paying attention to the groundwork of a solid grid system, and we’ll also be laying out elements with some key principles of balance in mind. Near the end of the tutorial, once we’ve created our layered page header design in Photoshop, I’ll show you how to turn the design into a functional header with some markup and CSS.
We’re essentially building two page headers: one that will stretch the entire width of the browser window (no matter how large the screen) and one that sits inside this in the centre. This ‘inner’ header will contain content such as the headings and navigation.
2. Grids are go
We’re going to align everything to a nice tight grid, so open up guide.psd from this issue’s disc and make sure you have guides switched on (View > Show > Guides). This is based upon the 960 grid system.
3. Begin your canvas
In Photoshop, open background.jpg from the tutorial files. Add two adjustment layers (one for lightness/contrast and one for hue/saturation), and turn the image an earthy brown. Flatten the image and drag it onto your main canvas.
4. Marquee tool
Create a new layer and, using the Marquee tool, make a selection that extends the width of your canvas. To make sure the bar is 180px high, turn snapping on. Fill it with black and add a brown (outer) stroke by double-clicking on the layer in the Layers palette.
5. New layer
Create a new layer and make a selection that’s 20px high and as wide as the whole canvas. Using the Gradient tool, hold Shift and drag a vertical gradient through the selection, so it turns from black to transparent. Duplicate the layer and move the copy underneath the bar.
6. Find a suitable image
Open leaves.jpg from this issue’s disc, which is a free stock photograph from stock.xchng. I chose this picture after a quick search for ‘leaves’, as I wanted some leaves that would be relatively easy to separate from the background.
7. Make a copy
Save the original version of the layer in case you need to go back to it. Now create a new layer, fill it with red, and move that behind your working area – this way you’ll be able to easily see what you’re cutting out. I’ve used the Magic Wand tool to make quick selections.
8. Reduce size
Drag your cut-out leaves onto your main canvas and use Free Transform to reduce the size of the layer. Ideally it should slightly overlap the main header bar. Now invoke Image > Adjustments > Hue/Saturation and take the hue value down to -50 for an autumnal look.
9. Layer Effects
Double-click on the layer in the Layers palette to bring up the Layer Effects. Now select a black outer glow and adjust the settings so that the leaves stand out – but don’t make the glow too obvious. Create a new text layer and write your title in your chosen font.
10. Choose a font
Here I’ve chosen the Selfish font, which is a free download from misprintedtype.com. I’ve added a subtle orange outer glow to the text using Layer Effects, but I’ve also added a drop shadow to knock back the leaves beneath the text to make it more legible.
11. Experiment with margins
Write the website slogan in Georgia Italic and to make it more interesting, experiment with contrasting left and right margins on each line of the text. Notice how the whole text block fits into the grid – it spans five column widths.
12. Embellish the text
Let’s embellish the text with some simple ornaments. Create a new layer and choose a shape from the menu provided by the Custom Shape tool. Here I’ve gone for some leaf-like ornaments to complement the rest of the logo. Create another new layer.
Make a rectangular selection and fill it with the colour of the main bar’s stroke. Make another selection with the circular Marquee tool and delete it from the shape to create a curve. Repeat with the other side and use Layer Effects to add a gradient overlay to the block.
14. Add some foliage
The leaves around the text look good, but adding a subtle bit of foliage on the other side of the page header design will really spice up this design. Copy the leaves layer, use Free Transform to rotate the layer, and move it behind the main bar. Delete any parts of the layer that protrude from the bottom.
15. Outer glow
Open feed.png from the tutorial files and drag it on top of the new leaves. Add the same black outer glow by copying the leaves’ Layer Style and pasting it onto the feed icon layer. Position both layers so that the right side of the icon sits flush with the outer guide.
16. Get content
It’s time to turn this graphic into a functional website header, so locate the file raw.html in your browser and you’ll see the content we’re going to be working with. Save all of the images from your PSD as individual graphics files, or refer to those on the tutorial files.
17. View in browser
Look at step17.html in your browser and you’ll see that the basic layout has been established. Open it in your text editor and you’ll notice that this is thanks to the link to the style1.css file. The style sheet shows that minimal code was used for the layout.
18. Finish layout
The file style2.css finishes off the layout of the inner header by absolutely positioning elements within their containing div, which has a ‘relative’ position. Note the text is replaced by images but remains in the source code, so it’s accessible to screen readers.
19. Perfect header design
View index.html in your browser and you’ll see the finished header: it makes the most of PNG transparency, built using just a few lines of XHTML and CSS. Next issue, we’ll be looking at how to create a great looking footer for your website.