W3 Spin|Internet news blog

Those unfamiliar with web design are many times overwhelmed by slices and Javascript rollover and cast aside their projects out of aggravation and disappointment. The goal of this tutorial is to stay frustration free by designing a web page using only 2 graphics.

Start off by creating a banner and place it in the top row of a table that will contain 5rows and 1 column. The next row of the table will hold the text for your site along with photos you would like to incorporate into your site. Row 3 will hold a separator, row 4 will contain text links plus a copyright notice, ending with row 5 being a second separator.

For this tutorial, let’s call our site just that “Our Site.” Now to find a graphic for the banner we’re creating. There are plenty of good images to be found at several of the free stock photo sites and for only a small fee, you can find top quality, professional images on some of the online galleries. Try the iStockPhoto gallery for beautiful illustrations or photos that at only a few dollars can add quite an upgrade to the presentation of your site design.

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.

By using the opacity slider on a sampled hue you can create a nice variation. Open a new document and copy and paste the main graphic you’ve selected into it. From the toolbox select the eyedropper tool and sample a color by clicking on it in your graphic. Doing this will change the foreground color square in your toolbox.

Now open another new document and in the Background Contents select White. Click OK. With this document open, create a new layer by going Layer> New> Layer. Then go Edit> Fill and select Contents, Use: Foreground Color. This will fill your document with the color you just sampled. The trick here is to lower the opacity using the slider and to keep playing around with it until you find a nice shade. When you settle on one, flatten the image by going Layer> Flatten Image. Use the eyedropper tool again, this time to change the foreground color square in your toolbox so it is the same as your newly created color. Now click on the color square and the color picker will come up, and you can write down 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 you are looking for new fonts, you have many options. Free font resources are available to you online.

For our example, create a new document that is 600 x 300 pixels. You can adjust this size according to your own design when you choose your own stock photo and plan the layout.

Next create a new layer, Layer> New Layer. We’ll call ours “Web Artist” here. I will place the illustration on this layer and shrink it to fit. 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. Once you have it to your liking, click Enter.

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

Select the background layer, Layer 1, and fill it with the light blue by going Select> All, then Edit> Fill, and in the dialog box in Contents, select Use: Color and in the Color Picker I enter the number you made note of earlier.

The result is a 600 x 300 banner with a gentle background color and with the art placed on the left. We’re getting there.

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. Major Note: pick a color for your text that is darker than your background color!!! Otherwise it will either blend in or you won’t be able to see it at all. Do this by going Window> Character. In the Character palette you’ll find a color square that you can click on to change colors.

You’ll need an HTML editor like GoLive or Dreamweaver to automate this process. This is really very easy. You create little “maps” over each word and enter the link destination. You’ll need to do a Google search on image maps to find a tutorial if you don’t have an HTML editor, or invest in a book like Elizabeth Castro’s HTML Quickstart Guide for help.

Now create a new document with a width of 600 pixels, and a height of about 12 pixels. Fill this with your background color. Then, using the text tool and a dark color, type some periods, like this:……….. and place them in the file, centering them. Change the size and the spacing until it looks perfect. Save this as a GIF file.

In 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. Now place your elements into the individual rows of the table and you’re done.

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.

Hopefully this tutorial will help you create something wonderful that will take your new website in the direction you aimed for. Good Luck