Unique Technology Layout

Step 1.

Start a new document in photoshop of any size, I'm using 700 x 670 myself. Fill the background with a mid-grey tone, I used #64675F

Step 2.

We'll start with a simple background, so make a new layer and fill it with #000000 (black). Next go to Filter->Noise->Add Noise and apply these settings:

Change the blending option of this layer to "overlay" and set the opacity to: 14 percent or so

Result:

Step 3.

Create a new layer. Now we'll create the container for the entire page, get out the rectangular marquee tool and make a selection like so:

This selection is about 15-20 pixels away from the top/bottom/left/right side of the canvas

Go to: Select->modify->smooth with a setting of x pixels

Fill this selection with a light grey, I used #ADB1AA. and press Ctrl + D to deselect the area,

Result:

Step 4.

Now double click this layer, and apply the following blending options:

Drop Shadow:

Inner Shadow:

Inner Glow:

Result:

Step 5.

Now create a new layer. Using the rectangular marquee tool, make a selection like so:

Notice that this selection is about 3 pixels inside the previous box:

Fill this selection with #414743

Step 6.

Create a new layer. Using the rectangular marquee tool, make a selection like so:

Note this selection is about 3 pixels inside the base box as well.

Set your foreground color to: #6EA000, and your background color to: #608A02

Get out the Gradient Fill tool and set it up like so:

and fill this selection in with a gradient from bottom to top, result:

Step 7.

Create a new layer, set your foreground color to: #D9D9E1

Get out the pencil tool and set it to 2 pixels in width. and draw a 2 pixel line along the side of the green box we'd just made like so:

Next set your foreground color to #000000 (black) set the pencil tool to 1 pixel this time, and draw a 1 pixel black line in right beside the line you just created like so:

(close up - draw this line all the way down the image)

Step 8.

Create a new layer. With the rectangular marquee tool, make a selection like so:

And fill this selection with white (#FFFFFF)

Result:

Step 9.

Next we'll make a space for our company name, and logo. Create a new layer, and make the following selection with the rectangular marquee tool:

Fill this selection with white (#FFFFFF).

Double click this layer, and add a slight dropshadow to it in the blending options:

Result:

Step 10.

Now we'll create a section for our navigation/links. Create a new layer, get out that handy rectangular marquee tool, and make a selection like so:

Set your foreground color to #000000 (black), and your background color to white (#FFFFFF)

Get out the gradient fill tool, and set it up like so:

Now fill in this selection with the gradient tool, from black to white:

Change the 'blending option' of this layer to "Overlay", and set the opacity down to around 73 percent

Result:

Step 11.

Now we'll put some dividers on the navigation box. Go ahead and create a new layer, get out the pencil tool. Set it to 1 pixel, and set your foreground color to: #000000 (black). Now draw 1 pixel lines across the navigation area. Attempt to make the distances between these lines equal.

Result:

Step 12.

Now set your foreground color to #5B5C5B, and draw another line right bellow each of these lines. This gives us a great looking "bevel effect" on our navigation bar.

Step 14.

We're getting there. Now lets add a sidebar on the right for news updates, a search bar and other information. Create a new layer, get out that rectangular marquee tool again, and make the following selection:

Fill this selection with #E4E9E3

Result:

Step 15.

Now create another layer on top of the last one, and make the following selection with the rectangular marquee tool. This will be an area for the search field.

Fill this selection with: #404642

Result:

Now double click this layer, and apply the following blending options:

Inner Glow:

Stroke:

Result:

Step 16.

Create a new layer, get out the rectangular marquee tool and make a selection like so:

And fill this selection with #69725A

Result:

Double click this layer, and apply the following blending options:

Now double click this layer, and apply the following blending options:

Inner Glow:

Gradient Overlay:

Stroke:

Result:

Step 17.

Next I placed a stock photo of some business people bellow the "logo container" box we'd made earlier in the tutorial.

At this point the layout of the design is pretty much finished. Here I added a logo, company name, and slogan to the layout:

I also decided to add some trendy arrows next to the navigation bar, and lighten the background of the nav bar a bit:

Here's how the overall layout looks:

Click to enlarge

and after adding content, and refining here's the final result:

Click to enlarge

I hope you enjoyed this tutorial, and have learned some good techniques the process.