This tutorial goes through the steps of using Adobe Photoshop to create a website template that looks like a circuit board.
This layout is just an aesthetic design, so the technical details are not accurate. If you want to make your layout technically accurate, please feel free to do so.

1 – Creating the web page layout

Click File > New. Enter a Width of around 700, and a Height of around 500. Press OK.

For most of this tutorial, you’ll need to use the grid, so that everything’s evenly spaced out. To turn the grid on, and make tools “snap” to the grid, look on the View menu. You can also press Ctrl+’ to view/hide the grid, and Ctrl+Shift+; to turn snapping on.

With the grid and snapping turned on, use the Polygonal Lasso Tool to click a series of points, to form a shape as shown. (We’ll add the lighter areas and outline next.)

Use the Paint Bucket Tool to fill the area with green. (I used colour #1C4A02 here.)

Create a new layer, and repeat the previous two steps, to create the lighter areas. (I used #307E03 here.)

Right-click the darker green layer, in the Layers window, and click Blending Options. Select the following:

Drop Shadow (Distance: 9px.)
Stroke (Size: 4px. Color: 307E03.)

2 – Holes through the board

Where the metal track passes from one side of the board to the other, there’s usually a hole (or “via”).

It may help to zoom in (Ctrl +) for this step.

Create a new layer.

Select the Elliptical Marquee Tool. While holding Shift, select a small circular area.

Set your foreground colour to a dark grey, and your background colour to a light grey. Drag the Gradient Tool across the selected area.

Select a smaller circular area, within the previous selected area.

Fill the selection with black.

Press Ctrl+D to deselect.

3 – Creating the pin of an integrated circuit

Create a new layer.

Select a rectangular area, then hold shift and select another squarish area below it, to make a “T” shape.

Choose the Gradient Tool. Click the small representation of the gradient (at the top left of the screen), and add some tabs along the bottom of the gradient. At 0%, put a tab (colour #D9D9D9). At 33%, put a tab (colour #E4E4E4.) At 70%, put a tab (colour #626262.) At 100%, put a tab (colour #E4E4E4.) Drag this gradient from the top to the bottom of your selected area. (You can hold Shift, to make it perfectly vertical.)

4 – Creating an integrated circuit in Photoshop

Create a new layer.

Select a rectangular area as shown.

Use the Paint Bucket to fill the area with black.

Right-click this layer in the Layers window, and click Blending Options. Select the following:

Drop Shadow
Bevel and Emboss (Technique: Chisel Hard. Gloss Contour: Sawtooth.)
Gradient Overlay (Opacity: 55%.)

Use the Type Tool to add some white text. (This can just be gibberish. It won’t really be readable once we’ve shrunk this component down.)

Create a new layer set, and drag your black area, your text, and your “T”-shaped pin (that you made in Step 3) into it. This will just help to keep things organised.

Click on the pin’s layer, in the Layers window.

Press Ctrl+T to transform the pin. Hold Shift, and drag the corner in, until the pin is the right size. (See image.)

Click on the pin’s layer, in the Layers window. Hold Alt while you drag it around. This will make more copies of the pin. (I’ve made a total of five copies of the pin.)

Click Edit > Transform > Rotate 180°.

Make more copies of the upside down pin, by holding Alt while dragging with the Move Tool. Then drag all the pins into place, around the black rectangular area, as shown in the diagram. You’ll want to snap to the grid (see Step 1) to do this.

Pages: 1 2

Other News

• Working with Layers Part I: Layer Sets
• Pro JavaScript Techniques
• How to SEO your site: Episode 3 – Keyword density and keyphrase research
• A decent vocabulary is the key to profitable SEO (LSI and hitting the long tail)
• PHP: Hypertext Preprocessor
• EditPlus Version 3
• Discover the Magic Wand for Image Adjusting-part 2
• STOP! 5 seo tips to optimise your titles and get maximum search engine exposure
• Discover Adjustment Layers
• Did McCain snub Palin on Leno?