Learn Adobe Photoshop - Photoshop Web Templates

By David Peters

Don't let what you might not be overly familiar with such as slices and Javascript rollovers keep you away from creating a web site that will not only support all of your needs, but that you will be proud of at the same time. The following is a Photoshop web tutorial that will help you on your way to this goal by starting out with a simple 2 graphic web page design. Let's Begin

First, lets make a banner and place it in a table containing 5 rows and 1 column. We will place the banner in the top row. The text for your site and any photos you might like to include will be in the next row. Row 3 will contain a separator, row 4 will be set for your text links and a copyright notice, and row 5 will hold a second separator.

For this example we'll name this site My Site. Now we need to find a graphic for the banner. You can find professional level images at sites such as the iStockPhoto galleries and at only $3 or so for most images they are affordable. Free stock photo sites are also available for perfectly good quality images.

One tip is to choose one color from your graphic and utilize various shades of this color for your banner for a clean, coordinating look. For the sake of naming a color for this example, we'll go with green in a dark, medium and then light shade.

I find that by using the opacity slider on a sampled color you can create a nice variation. Open a new document and copy and paste the main graphic you've chosen into it. Now from the toolbox select the eyedropper tool and sample a color by clicking on it in your graphic. This will change the foreground color square in your toolbox.

Now open another new document and in the Background Contents choose White and click OK. Create a new layer by going Layer- New- Layer with this document open. Next go to Edit- Fill and select Contents, Use: Foreground Color. This process will fill your document with the color you just sampled. The trick here is to reduce the opacity using the slider and adjust it until you find an appealing shade. After selecting your shade, flatten the image by going Layer- Flatten Image. Use the eyedropper tool again, only now to change the foreground color square in your toolbox to match your newly created color. Click on the color square and the color picker will appear, and you can make note of the numbers of your new color.

I went through my fonts and settled on Onyx regular. When you find a font that works for you, try playing with the tracking, the leading, and the scale - or a combination. It makes it more personal and unique when you include some tweaks.

Go Window- Character in Photoshop to choose a font. You will see a list of your installed fonts in the palette. To fine tune the settings, pull up the Paragraph palette by going Window- Paragraph.

If it's new fonts you're looking for, I've included a list of just a few free font resources you can use at the end of this tutorial.

Create a new document that is 600 x 300 pixels. You can change this size to suit your own design when you pick your own stock photo and plan the layout accordingly.

Now I'll create a new layer, Layer- New Layer and I'll call it Designer Girl. I'll place the illustration on this layer and shrink it to fit. You shrink your graphic by choosing Edit- Transform- Scale. The bounding box will have handles. Use the Shift Key to constrain proportions, and shrink your image by selecting the top left handle and pulling towards the bottom right. To move the graphic, drag inside the bounding box. Click enter when you're happy with the results.

Now we need a tinted background. I'm going to use the lightest shade of blue.

I select the background layer, Layer 1, and I fill it with the light pink by going Select- All, then Edit- Fill, and in the dialog box in Contents, I select Use: Color and in the Color Picker I enter FBE0EC.

The result is a 600 x 300 banner with a soft background shade and with the graphic placed on the left. It's starting to look like a web page.

I decided to apply a thick stroke to the background layer to make the design more interesting. First make sure the background layer, Layer 1, is active, and create a copy by going Layer- New- Layer Via Copy. Next double-click next to the layer name. This will bring up the Blending Options in the Layers Style dialog box.

Pick and click on the word Stroke in the Styles options on the left side. I changed my settings to Size: 7px, Position: Inside, Blend Mode: Normal, Opacity: 100%, Fill Type: Color, and I clicked the color swatch and entered my color number into the color picker and clicked OK.

The border serves to balance out the design, so you have the option to be as creative as you would like with your own ideas.

We're going to put the names of the major sections right on the banner. These will be the links. Since it will be just one single graphic we will be using image maps.

Create a new layer for your words. Use the type tool to create the section names and then use the move tool to position them exactly to where you want on the banner. Remember to pick a color for your text that is darker than your background color to avoid finding yourself screaming obscenities and suffering major hair loss! Do this by going Window- Character. In the Character palette you'll find a color square. Click on it to change colors.

You'll need an HTML editor like GoLive or Dreamweaver to automate this process. It's really very simple. You make little "maps" over each word and then enter the link destination. If you don't have an HTML editor you'll need to do a Google search on image maps to find a tutorial, or buy a book like Elizabeth Castro's HTML Quickstart Guide to help you out.

Now create a new document. The width should be 600 pixels, and the height should be about 12 pixels and fill this with your background color. Next, with the text tool and a dark color, type some periods, like this:........... and position them centered in the file. Adjust the size and the spacing until it looks perfect and save this as a GIF file.

With your HTML editor of choice build a simple table that contains 5 rows and 1 column. If you're going to use text link navigation below the banner instead of image maps on the banner, create an extra row so you end up with 6 rows in your table. Place your elements into the individual rows of the table and that's it!

If you are pressed for time, have no fear. For those with a deadline or those who just can't deal with any more Photoshop techniques, there are solutions available. You can purchase ready-made templates from sources like Template Monster that you be used as the foundation to creating Photoshop web pages.

The first page of Template Monster will have a pulldown menu where you can select features and then perform a search for a template. The templates are not only affordable, but pretty simple to manage in GoLive or Dreamweaver. In the past I've bought a template just for the color scheme and the images. With certain projects this has proven to be less expensive than buying stock photos. Check out Template Monster to see the large variety of website templates that they have.

I hope this tutorial will help you create something nice, and I wish your new website a thousand years of good luck!

About the Author:

Interested in getting professionally made Learn Photoshop Tips Download this FREE 179 page How To Photoshop Report.