- Check out these resources before you read on:
- 35 Free Images from Bigstock.com
- Complimentary video clips on Bigstock. Get up to 35 videos in a week.
The use of horizontal bands in website design has been a growing trend over the last few years with results of a fantastic looking website layout. Not only does the use of these horizontal strips provide specific containers for each page area, but it also spans right the way across the user’s monitor. This is especially handy when taking into consideration those with an exceptionally large monitor, helping prevent the main site content being lost in a sea of flat colour. Check out this collection of excellent examples of this web design style, and follow through to a quick walkthrough of how to create the effect yourself.
Create Your Own Horizontal Bands
Let’s take a look at how to create and implement such design styles into your own website designs. We’ll be producing the initial graphics in Adobe Photoshop, exporting the relevant imagery then adding some simple CSS coding to bring the effect to life. This technique can be used not only on the page body, but also on container divs and other elements.
Create a new document in Adobe Photoshop, I tend to work at a resolution of 1680×1050 to give a good indication of the overall appearance of the website on an average sized widescreen monitor.
Create a selection across the width of the document, fill with white on a new layer and double click to access the layer styling properties. Click the Gradient Overlay tab and select two swatches to create a vertical linear gradient.
Repeat the process on a new layer, this time creating a larger blue gradient. To add an extra element of detail leave a 1px gap between the panels to provide the illustion of a highlight, also add a subtle Inner Shadow to the panel to give an impression of depth to the layout.
With the visual concept complete, draw a thin one to two pixel selection vertically across each band of colour. Go to Edit > Copy Merged and paste the thin strip into a new document
Go to File > Save for Web to export the strip, choose a suitable filetype and compression. Notice the considerably small file size of the graphic, making it an excellent technique which not only visually enhances the page, but keeps overall weight to a minimum.
Add the CSS coding to style the web page. Here the image is being applied to the body tag and set to repeat horizontally using the repeat-x command. The CSS can also be condensed down to a single line by writing out the rule in shorthand.
With numerous instances of the image butted together it gives the impression of a continuous graphic when viewed in the browser. In this particular technique we have used a single graphic to provide two panels of a specific height, to take the example further each coloured strip could be attached to an individual div along with a background colour sampled from the image, this will allow the section to continuously expand depending on the length of the content.