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
Double click the layer to pull up the "layer options" window gradient overlay:
Colors:
#454545
#575757
Stroke:
Color: # 757575
Drop Shadow:
Click okay, the layer styles for this layer are complete.
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
Interface Vents
