Mega Tech Layout

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

Outer 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

Fill it with:#6A6A6A

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 Ctrl + 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

Outer 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 I'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 I have done here:

Remember: if you hold down the Shift key while moving the line, it will stay perfectly straight for you.

Result:

Step 13.

Next make a selection with the rectangle marquee tool similar to what I 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

Color: #7a7a7a

Stroke:

Color: #494949

Inner Glow:

Color: #6B6A6A

Result:

Step 14.

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.

Step 15.

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 I have done.

Using the flood fill tool, fill this selection with: #717171

Double click on the layer to add a blending option.

Stroke:

Color: #3a3a3a

Step 16.

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.

Step 17.

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:

Color: #3a3a3a

Gradient Overlay:

Colors:
#575757
#959595

Inner Shadow:

Color: #000000

Result:

Step 18.

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

You should have something similar to: