A Touch of Class Web Design Tutorial

A Touch of Class Web Design Tutorial



1 – Making a bent selection


In Adobe Photoshop, make a new image. I'd recommend 775 x 600 pixels.
(My example pictures are deliberately smaller, due to space
constraints.)
Click on your background layer and press Ctrl+I, to invert it and
make it black.
Make a new layer.
Zoom right in (Ctrl +)
and use the Selection Tool to select a crooked, one-pixel thick line, as
shown. You'll need to do this in three parts. (Start by making a
selection one pixel tall, and about 200 pixels wide. Then add another
selection, this tme one pixel wide, and about 20 pixels tall. Then the
final selection, one pixel tall, and several hundred wide.)
Remember—hold down Shift to add to your selection.




2 – Gold and grey Lines


As you may already know, most realistic gold effects are a
combination of two colours—brown and yellow. Drag this little image into
Photoshop so you can get the exact colours from it.
Select the Brush
Tool, and choose a diffuse 45-sized brush.
Brush the whole
selected area with brown. Then dab with yellow, then brown, then yellow.
With such a thin selection, the "marching ants" selection line will
cover it and make it impossible to see what you're doing. Use your
imagination. :)
Choose the Selection
Tool again. Nudge the selection down and right by five pixels. To do
this, press the Down Arrow key five times, then the Right Arrow key five
times. Use the Selection tool to extend the selection to the left, so
it touches the edge of the image.
Brush the selected
area with light and dark grey as you did with the yellow and brown. Then
deselect the area (Press Ctrl+D.)
Duplicate the layer,
by dragging it onto the New Layer icon.
To create the bottom set of lines, Click Edit > Transform >
Rotate 180°
Use the Move Tool to
move the layer down.


3 – Selecting a picture order


Find a nice image that represents a page of your site. If there's no
image that represents "Home" on your site, just scour the net for a nice
picture of a house. There's no need to be exact.
To shrink the image, Click Image > Image Size. Make all your
images the same size this way.
Using the Move Tool,
drag the image into your main file.
In the layers list, Hold Ctrl and click on the layer of your picture,
to select that area.
Zoom right in and
deselect all but a one-pixel border. (Alt+Drag deselects an area.) It's
delicate work. Do it in stages if you like. Don't use any of the "Modify
Selection" options. These will give you an anti-aliased (fuzzy and
smooth edges) selection, which will fuzz up the whole selection, because
it's so thin.
Make a new layer.
Brush the area with
yellow and brown, as before.


4 – Giving the Picture a Double Border


The next step is to make the bigger grey border that goes around the
gold one. Click the eyeball next to your picture layer to hide it if it
gets in the way.
Make a new layer.
The gold border should still be selected. Nudge the selection up and
left five pixels, by pressing the Up Arrow key and Left Arrow key five
times each.
With the Paint Bucket
Tool, fill the area with any colour (I've used white.)
Nudge the selection ten pixels to the right, by pressing Shift +
Right Arrow. (Shift makes the object move ten pixels at a time.)
Fill the area with
the Paint Bucket again.
Keep filling and nudging the selection around, until you get a larger
rectangle, like the shape shown in white in the diagram.
Zoom right in and use
the Selection Tool and the Delete key to remove all but the outermost
line.
Ctrl+Click this layer in the layers list to select it.
Brush the area with
the greys as before






1-2

5 – Embedding the pictures


The idea is to make the pictures look like they're recessed into the
image. The double border gives the impression of depth, but an Inner
Glow is necessary to complete the effect.
In Photoshop 6.0 or Photoshop 7.0, double-click the picture layer in
the layers list, or right-click it and select "Blending Options". If
you're using Photoshop 5.5, right-click the layer, and choose "Effects".
Choose "Inner Glow", and set the Choke to 30%, and the Size to 8.
To put in another
picture, just duplicate the gold and grey border layers, by dragging
them onto the New Layer button.
To copy the Inner Glow, right-click the original picture layer, and
select "Copy Layer Style". Then right-click on the new picture, and
choose "Paste Layer Style".


6 – Making a web page header and footer


Get a nice, big, new image, and drag it into your main file. Drag it
down almost to the bottom of your layers list, so it's under everything
else. This allows you to position it easily.
Drag the layer onto
the New Layer button, to duplicate it. This is necessary because you're
using the same image twice—once for the header, and once for the footer.
Click the eyeball next to the layer, to hide it.
Use the Move Tool to
move the visible layer around, until it's in the right position for your
header. Make sure you place the image so that it extends at least 5mm
past the top, left, and right edges of your window. This ensures that
when you put an Inner Glow on the layer, it's only visible at the bottom
of the image.
Zoom right in, and use
the Selection Tool and the Delete key to remove any part of the image
that extends below your gold line.
Right-click the layer in the layers list, and select "Paste Layer
Style".
Click the greyed eyeball next to the layer you hid earlier, and
repeat these steps, to make your footer.


7 – Adding gold text


Using your favourite
font, type in your page title.
On
the Character Palette, reduce the Tracking (letter spacing) to around
-50, so that the letters bunch up. As a general principle, use positive
tracking when you're using all capital letters. Otherwise, use a
negative number.
Double-click the layer in the layers list, choose Outer Glow. Change
the following settings: Blend Mode: Normal, Opacity 100%, Colour: Black.
Technique: Precise.
Choose Bevel and Emboss. Change the following settings: Gloss
Contour: Ring. (This creates the nice metallic effect.) If your text
turns black, just change the Angle a bit.


8 – Using the Slice Tool


If you're using
Photoshop 6.0 or Photoshop 7.0, just use the Slice Tool to draw boxes on
your image. Click File > Save for Web, choose Jpeg, Quality 60, and
each box will be saved as a separate image.
If you're using Photoshop 5.5 or earlier, the Slice Tool doesn't
exist. You'll need to go Layer > Flatten Image, and for each area,
you'll need to select it, Crop it (Click Image > Crop), Save it for
the Web, then Undo (Ctrl+Z).

Header
Piece of Title (Slice 02, above) Body Text of site goes here. You can put relevant text in this area for each of the pictures.	Picture 1 Picture 2
Footer

9 – Making the Images into a web page


In your web page editor, create a table of width 775 pixels (or
whatever your image width is.) Create a table of three rows, and split
the middle row into three columns, as shown. Insert the pictures and
text in the appropriate places.
Other than that, it's all done! You may now rest your fingers.



2-2