5 – Creating a resistor

Set the foreground colour to a tan colour (I used #FEE7A9.) Use the Rounded Rectangle Tool (with the Radius set to 20px or more, and Shape Layers selected, at the top left of the screen), to make a shape as shown.

Select the Freeform Pen. Ctrl+Click on the shape, and then Ctrl+Click on the edge of the shape, so that the points appear. Click on the path (line) to add more points, until your shape looks like the diagram.

6 – Warping the path

To select a point, Ctrl+Click on it. To nudge it around, use the arrow keys.

Nudge the four innermost points down or up by about 9 pixels. Nudge the two end points in by 3 pixels.

7 – Adding bands, leads, and effects

Type a series of bars (next to the backspace key), with spaces between them. Use the Character Palette to change their spacing and width. Give each one a different colour. (On a real component, these colours represent numbers. Here, they’re just decoration, so feel free to choose any colours you like.)

Create a new layer set, and pile all the pieces of this component into it.

In the Layers window, make sure the layer of the coloured bands is directly above the tan-coloured shape layer. Press Ctrl+Alt+G, to make the coloured bands layer a Clipping Mask. (A Clipping Mask doesn’t extend outside the layer below it.)

Right-click the Shape Layer, and add some Blending Options.

Drop Shadow
Inner Glow (Blend Mode: Normal. Colour: Black. Size: 6px.)
Gradient Overlay (Blend Mode: Hard Light. Opacity: 70%. Reverse: Ticked. Style: Reflected.)

With a solid, round, size 6 brush, draw in two downward-turning leads, as shown. (I used colour #ACACAC here.) You can pick the brush from the Brushes window (F5, or Window > Brushes), and can easily change its size by pressing [ or ].

In the Layers window, drag this layer below the Shape Layer, and give it some Blending Options.

Bevel and Emboss (Depth: 50%. Gloss Contour: Ring.)

8 – Putting everything together, and adding tracks

Hold down Alt, while using the Move Tool, to make more copies of the “hole” you created earlier. (You might also want to put them all into a new Layer Set.) Use the grid to arrange the holes, and make appropriate places for your components to go.

Resize your integrated circuit, by clicking on its layer set, in the Layers window, and pressing Ctrl+T. (Remember to hold Shift while doing so.) Repeat this process for your resistor.

Right-click your resistor layer set, and duplicate it. You can edit the colours of the bands on the new one if you like. (If you rotate it, you’ll need to go into the Blending Options, and change the angle of the Gradient Overlay too. The Gradient Overlay won’t automatically rotate when the layer is rotated.)

Drag the various pieces into place.

Create a new layer.

With the grid and snapping turned on, use the Line Tool to draw a network of tracks on your website design. (I used colour #A8A8A8 here.)

Add some Blending Options to this layer.

Drop Shadow (Blend Mode: Normal. Opacity: 100%. Distance: 1px. Size: 1px.)
Stroke (Size: 1px. Color: #B2B2B2.)

9 – Slicing up the web page layout

Use the Slice Tool to slice the image up as shown. The little slices at the top right and bottom left should be one pixel wide. I’ve made them wider here, just so that you can see them. You may need to zoom right in for this.

Click File > Save for Web and Devices. This will now save each slice as a separate image.

In your web page editor, make a table with one cell, and a width of 100%. Put the header image (01) into it, and set the one-pixel-wide “sliver” image as its background.

Underneath that table, make another table, but with two cells, next to each other. In the left cell, put in image 03, and set the sliver (05) as the cell’s background.

Pages: 1 2

Other News

• Ajax: How To Weave A Faster Web
• What is hindering the development of third-party payment ？
• Say goodbye to SEO as you know it, latent semantic indexing explained
• How to SEO your site: Episode 4 – Social news as an SEO tool
• PHP: Hypertext Preprocessor
• How to write a Wordpress plugin: episode 1 – getting started
• Pro JavaScript Techniques
• Discover the Single Marquee Tools/ Pixel Stretch Technique
• Beginning Google Maps Applications with PHP and Ajax
• How about discover hue and saturation