Photoshop Web Design Tutorial

I'm often asked about ways to create eye popping web sites. Fortunately, it's actually pretty easy BUT you have to know how to use Photoshop. The basic steps are simple and I'll outline them for you.

Most people don't know that you can use Photoshop to do web design. They just think of it as a graphics editor and that it is for working on images that would display inside a web site. The fact is though, you can create the whole website with Photoshop.

First, you have to split the site up into three main components. The header, the content, and the footer. The reason you do this will become evident eventually.

You then think about the size you want for the site. A good rule of thumb is around 600-700 pixels wide. The length of the site (vertically) will change depending on your content, which is why you create the header, content area, and footer separately.

Using the enormous amount of tools available in Photoshop, you create the actual graphics of how you want the site to look.

Add images to the header, create dazzling text, all of that.

Make sure you leave a nice empty section in the content area. The initial Photoshop file will be around 400-500 pixels high, to allow space for a header and footer, and an area in the middle for content.

You then use the Slice Tool (located in the flyout for the crop tool) to draw slices on the finished Photoshop composition. This lets you specify how the images should be sliced and lets you pick the area for content.

If you cut it right, the content area will grow as your content grows, meaning the template you're making will work for any amount of content.

Then you will save the file in the native PSD format, so that you can edit it later, and then save it again using the option Save for Web and Devices...

This will bring up a dialog that allows you to make selections based on quality and image type. You want JPEG and at least 80 on the quality.

Pick your location for the files and Photoshop will cut your graphic into pieces, based on your slices, and assemble those pieces with an HTML file.

All that is left is to open the HTML file in an HTML editor and add your content in the appropriate section. You will then have a beautiful, eye popping web design, done almost entirely in Photoshop.

Here's a tip: When you open the HTML page, make sure to center the layout and change the background color to match that of your new website.