making a circuit board website layout in photoshop
TRANSCRIPT
![Page 1: Making a Circuit Board Website Layout in Photoshop](https://reader036.vdocuments.us/reader036/viewer/2022082511/544098dbb1af9f441d8b4609/html5/thumbnails/1.jpg)
Making a Circuit Board Website
Layout in Photoshop – Page 1 of 4
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 in 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.)
![Page 2: Making a Circuit Board Website Layout in Photoshop](https://reader036.vdocuments.us/reader036/viewer/2022082511/544098dbb1af9f441d8b4609/html5/thumbnails/2.jpg)
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.
This page of the tutorial covers the creation of an integrated circuit.
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.
![Page 3: Making a Circuit Board Website Layout in Photoshop](https://reader036.vdocuments.us/reader036/viewer/2022082511/544098dbb1af9f441d8b4609/html5/thumbnails/3.jpg)
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.
![Page 4: Making a Circuit Board Website Layout in Photoshop](https://reader036.vdocuments.us/reader036/viewer/2022082511/544098dbb1af9f441d8b4609/html5/thumbnails/4.jpg)
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.
This page of the tutorial covers the creation of a resistor.
This page of the tutorial covers the creation of a resistor.
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.
![Page 5: Making a Circuit Board Website Layout in Photoshop](https://reader036.vdocuments.us/reader036/viewer/2022082511/544098dbb1af9f441d8b4609/html5/thumbnails/5.jpg)
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.)
![Page 6: Making a Circuit Board Website Layout in Photoshop](https://reader036.vdocuments.us/reader036/viewer/2022082511/544098dbb1af9f441d8b4609/html5/thumbnails/6.jpg)
Gradient Overlay (Blend Mode: Hard Light. Opacity: 70%. Reverse:
Ticked. Style: Reflected.)
Create a new layer.
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.)
This page of the tutorial shows how to put the pieces together, and slice the image
for placement into a website
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.
![Page 7: Making a Circuit Board Website Layout in Photoshop](https://reader036.vdocuments.us/reader036/viewer/2022082511/544098dbb1af9f441d8b4609/html5/thumbnails/7.jpg)
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.
![Page 8: Making a Circuit Board Website Layout in Photoshop](https://reader036.vdocuments.us/reader036/viewer/2022082511/544098dbb1af9f441d8b4609/html5/thumbnails/8.jpg)
Click File > Save for Web and Devices. This will now save each slice as a
separate image.
If you know how to use CSS, then you already know how to turn these images
into a web page.
Otherwise, 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.