Go To Page: [ 1 ·
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 3 of 5
Next make a selection with the rectangle marquee tool similar to what l have done here. This selection is about 10 pixels form the right wall, and maybe 70 pixels from the top.
Goto select -> modify -> smooth
Select a radius of 5px
Go down to the bottom layer, and ad a new layer under everything else (other than our grey background).
Next get out the polygon lasso tool, and deselect some of the selection, by holding the ALT key.
Until the selection is similar to the image
Fill this selection with black (#000000).
Double click on the layer and enter the following blending options: Color Overlay
Create a new layer directly above this one. make a selection as pictured with the rectangle selection tool
Now go to select -> modify -> smooth
with a radius of 5px (just like we did in the previous step)
Using the polygon lasso tool, while holding ALT deselect the bottom portion of the selection just like before.
Fill the selection with black. Right click on the previous layer, and choose "copy layer style"
Now right click on the layer we'd just created, and choose "paste layer style".
Now this layer should look exactly like the previous layer.
Make a new layer with the rectangle selection tool, make a selection similar to mine
Get out the polygon lasso tool, and while holding the ALT key, deselect the bottom portion of the rectangle, such as l have done.
Using the flood fill tool, fill this selection with: #717171
Double click on the layer to add a blending option. Stroke:
Make a new layer with the rectangle selection tool, make the following selection
Now with the polygon lasso tool while holding ALT make the following de selections
Fill the selection with: #717171
press CTRL + E to merge with layer with the previous. Doing so should apply the blending options to this shape as well.
Make a new layer with the rectangle selection tool, make the following selection.
Fill it with black (#000000).
Double click on the row, and add the following blending options to the layer: Stroke:
Make a new layer while holding down the CTRL key, click on the previous layer, to make a duplicate selection of it.
Next with your rectangle tool while holding ALT remove most of the rectangle, until you have a similar selection.
Fill the layer with black and drop the opacity down to 13 percent.
So you end up with something similar
Create a new layer get out the pencil tool, and set FFFFFF (white) as your foreground color. Set the brush size of the pencil to 1 pixel
Set the opacity of the pencil tool to 20 percent
Now draw two vertical lines on the right side of each of the "boxes" we just made.
Set your foreground color to black, and add similar vertical lines to the left side of the "boxes".
These will serve as our reusable, scalable content box