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 2 of 5

Step 7.)
Create a new layer
press and hold CTRL and click on the previous layer (to make a selection of it), and fill the selection in with the "dot" pattern just like we did in step 6.

Now drop the opacity down to 20 percent just like before

Step 8.)
Create a new layer and make your foreground color: #414141

Next with the pencil tool, set at 1 pixel (px)
draw a line directly underneath this rectangle
tip: holding shift down while you draw your line ensures that you'll get a perfectly straight line.

Duplicate this new layer by right clicking on it, and selecting "duplicate layer", and bump it down two pixels with the arrow tool as shown.

Duplicate the top layer again by right clicking on it, and selecting "duplicate layer", and bump this one down two pixels with the arrow tool as shown.

Now lets merge those top five layers, we're done playing with them.
With the top layer active, press CNTRL + E, four times to merge those top three layers into 1.

Step 9.)
Make a new layer and with the eclipse marquee tool make a circular selection similar to above.
Tip: holding the shift key while you select will make a perfect circle.

Fill the selection with black

Double click the layer to pull up the "blending options" panel, and add the following settings:

Stroke:
Color: #000000

Gradient Overlay
Colors:
#565656
#AFAFAF

Outter Glow:
Color: #ACACAC

Click okay, we're done with the blending options. You should now have something similar too:

Step 10.)
Make a new layer. Hold CTRL and click on the previous layer, to make an identical circular selection, now with the elliptical marquee tool, while holding ALT deselect the

bottom half the the selection until you have something similar too:

goto select -> modify -> contract and contract the selection by 1 pixel
Press 'D' and then 'X' on your keyboard, to reset the colors to black and white, and then to swap the two of them around, so that white is your foreground color.

Select the gradient fill tool, and select "foreground to transparent" (which should be white).

And fill the selection with a similar fill from the top to the bottom.

press CTRL + D to deselect the area.
Change the layer's blending mode to "overlay"
and drop the opacity down to 60 percent

This should give us nice circular plastic looking "button":
(this will be for the pages search feature incase you were wondering)
Here's what l've got so far:

Step 11.)
Lets make the rest of the buttons, Create a new layer grab the rounded rectangle tool and select the "paths" selection set the radius to 5px

With the rounded rectangle tool make a shape similar to bellow

Right click on this shape, and choose:
Make Selection

Now fill the selection with black and press CTRL+D to deselect the selection.

Double click on the layer to pull up the blending options panel and use the following settings:Gradient Overlay:
Colors:
#3a3a3a
#6b6b6b

Stroke:
Color: #a7a7a7

Drop shadow:
Color: #000000

Result:

Step 12.)
Create a new layer and hold CTRL and click on the previous layer to make a selection identical to the previous. With the elliptical marquee tool, while holding the ALT

key, deselect the bottom half the the selection, with a slight curve as shown bellow:

Set the foreground color to "white", get out the gradient tool and fill it with a white to transparent gradient like we did in step 10.

Set the layers blending mode to "overlay" and set the opacity to: 85 percent

Here's what you should have.

Now lets duplicate both the button, and the button's gloss for our other buttons.

First lets put the two layers into a layer set to make this easy.
click the small "folder" icon at the bottom of the layers window this will create a new layer set.
Name it button.

Next drag both the button, and the button's gloss layer into the folder one at a time, and this will place them into the set.

Now with the arrow tool, while holding the ALT key (to copy/duplicate), and the SHIFT key (to keep it on a straight line while moving it) left-click your mouse and hold, and slide the button to the right, and release when you've got your button copy similar to bellow:

Repeat this process until you've got a set of buttons (EQUALLY SPACED) such as this:

Now let's merge all of the buttons together into one layer.
Go down the line click each "folder" layer, and press CTRL + E to create a merged layer out of the set.

Then go down the line and pressing CTRL + E again on each layer to merge all of the buttons into one layer.

Once this is done, you can center them a little better such as l have done here:
Remember: if you hold down the SHIFT key while moving the line, it will stay perfectly straight for you.