A Touch of Class Photoshop Tutorial

Related Articles

If you'd like to design a site that's a bit more elegant than the standard business web design style, follow along with this tutorial.

Use Photoshop's  selection tool

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.

New layer tool Make a new layer.

Selection tool 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. Remember - hold down Shift to add to your selection.

Gold and silver lines

2 - Gold and Grey Lines

Brown and yellow gold effect. Light and dark grey silver effect.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.

Brush tool Select the Brush Tool, and choose a diffuse 45-sized brush.

Brush tool 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. :)

Selection tool 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 tool Brush the selected area with light and dark grey as you did with the yellow and brown. Then Deselect the area (Press Ctrl+D.)

New layer button Duplicate the layer, by dragging it onto the New Layer icon.

To create the bottom set of lines, Click Edit > Transform > Rotate 180?

Move tool Use the Move Tool to move the layer down.

Selecting a picture border

3 - Selecting a Picture Border

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.

Move tool 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.

Selection tool 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.

New layer button Make a new layer.

Brush tool Brush the area with yellow and brown, as before.

Give the picture a double border

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.

New layer tool 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.

Fill tool 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 tool 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.

Selection tool 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 tool Brush the area with the greys as before.

Use borders and inner glow to create depth

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 New layer button 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".

Make a web page header and footer

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.

New layer button 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.

Move tool 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.

Selection tool 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.

Add gold text to your photshop image

7 - Adding Gold Text

Text tool Using your favourite font, type in your page title.

Reduce the Tracking 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.)

Use photoshop's slice tool

8 - Using the Slice Tool

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.

 

 

 

A Touch of Class Web Design Services
  
Welcome to our new website. We offer a
   variety of services, including web design,
   graphic design, and courses in Adobe
   Photoshop.

Web Design Portfolio
  
Feel free to browse through our extensive
   web design portfolio. There your will find
   examples of websites we've designed.

Our Company Motto
  
If your pizza isn't delivered to your door
   within 15 minutes, we charge you double.

10 - The Completed Website

I'd recommend white text, and bold, orange-yellow headers for your text. (Obviously, replace my gibberish sentences with your own gibberish.) :)

Other than that, it's all done! You may now rest your fingers. :)


Publication Date: Sunday 12th October, 2003
Author: Daniel Piechnick View profile

Related Articles