Go To Page: [ 1 ·
2 ·
3 ·
4 ·
5 ]
In this massive tutorial l will show you how to build a soft tech site from the ground up. There are several techniques covered in this tutorial that you will definitely have to master if you plan on designing web layouts as a profession, or just as a weekend web warrior. In any event, this tutorial should get you off the ground on the road to utilizing photoshops built in utilities for designing web layouts.

Page 1 of 5

Step 1.)
Create a new document 778 x 550 filled with: #616161. Make a new layer

Make a selection about 100 pixels tall, that spans the entire width of the document using the rectangle marquee

Step 2.)
with the selection still active get out your polygon lasso tool, hold down the ALT key (you should notice a small - or minus sign near the lasso) and remove a section of your selection.

Step 3.)
Fill the selection with black, press CTRL+D to deselect the selection

Step 4.)
Make a new layer with the rectangle marquee tool make a square selection

With the polygon lasso tool, again hold down the ALT key, and deselect some of the area until you end up with a similar selection

Fill the selection with black (#000000).

Double click the layer and enter the following layer styles:

Gradient Overlay:
Colors:
#616161
#8E8E8E

Stroke:
Color: #3A3A3A

Outter Glow:
Color: #212121

Click okay, the layer styles for this layer are complete.

Step 5.)
Make a new layer with the new layer active, hold down the CTRL and click on the previous layer. This will make a selection duplicating everything within the previous layer.

we're going to fill this area with a "dotted" pattern. Lets create the pattern.

Press CTRL + N to create a new document.
make the document:
height: 3
width: 3
with a transparent background

Press "D" to reset your colors.
In the very center of the document, make a 1 pixel dot with the pencil, or the paintbrush tool
as shown:

go to Edit->Define Pattern

Name it "dot".
This will save the pattern for you, so you'll never have to repeat this process and you'll always be able to use and reuse this pattern

Now back to the layout document. on the newest layer, (that should have a selection on it still) use the paint bucket tool, and fill the selection with the dot. You do this by changing the "fill" type from "foreground" to "Pattern".

Fill in the selection

drop the layer's opacity to 20 percent

Step 6.)
Make a new layer and make a selection all the way along the top