This article assumes you know how to use Photoshop and the basics of CSS site design. Note: Images removed and can be seen by viewing original article here:

http://www.bpsdesigns.com/blog/view_blog.asp?Blog_ID=108

You’ve seen all the snazzy CSS based websites that have an ‘outer glow’ type effect around all of their pages. Well here’s a simple way to achieve this using Photoshop.

Let’s say you have your website layout finished in Photoshop and you are ready to start slicing and saving your images etc.

This is a simple site layout with a header, main content area and a footer (I did say simple!)

Now, you want the outer glow to be around the purple box so select this layer and apply an outer glow with the following settings:

Now all you do is flatten your image, select your header section using the top guide, copy and paste it into a new image and save it as your header:

Copy a section of the middle for your content background layer:

And do the same for the footer:

So, all you would then do is in your CSS stylesheet, set the header and footer divs to contain your header and footer images, and your content div to the background image (image 4). You would set your content background to repeat-y so that it fills the content and joins the header and footer together. Also i’ve added a padding div to keep the content away from the edges.

Your markup would be something like this:

Content here etc…

The padding div is needed so that you can set left and right padding to keep your content over the middle white box bit.

When pieced together your page will look like this:

To view the screenshots, please see the original article

Ben Snape runs BPS Designs. A web design company based in Warrington, UK. http://www.bpsdesigns.co.uk

Source: High Quality Article Database - 365articles.com