Complete PC Layout

Step 12

Now we'll create some buttons for this sidebar offering guests the opportunity the ability to click to read more of a given press release, news update.

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

Go to "Select->Modify->Smooth" with a setting of 5 pixels:

Fill this selection with white (#FFFFFF) and press CTRL + D on your keyboard to deslect the area:

Double click this layer and apply the following blending options:

Drop Shadow:

Gradient Overlay:

Stroke:

Result:

Step 13

Next apply some text to the button using a 10pt Verdana Bold.

Next double click your text layer and apply the following blending options:

Drop Shadow:

Result:

Step 14

Next we'll create a splash area for the main content area in the center.

Create a new layer, get out the rectangular marquee tool and make a selection similar to this:

Fill this selection with white (#FFFFFF).

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

Gradient Overlay:

Drop Shadow:

Result:

Next l added a little text to the area using a 19pt Verdana Bold. With the following blending options applied to the layer:

Drop Shadow:

Here's how it looks:

Leaving room for adding stock images later in the design process.

Step 15

Next we'll create a sidebar on the right. Create a new layer, and using the rectangular marquee tool make a selection like so:

Fill this selection with #568298 Press CTRL + D on your keyboard to deselect the selection.

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

Drop Shadow:

Gradient Overlay:

Step 21

Everything is starting to come together pretty nice with the layout. The last thing l feel this layout needs is some header areas above each of our sections ie the right side bar area, the main content area, and the left sidebar area.

Create a new layer, get out the rectangular marquee tool and make a selection similar to the one shown:

Fill this selection with white (#FFFFFF) and press CTRL + D on your keyboard to deselect the selection.

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

Drop Shadow:

Gradient Overlay:

Result:

Step 22

Now press CTRL + J to duplicate this layer. Get out the move tool by pressing 'V' on your keyboard and position the second content header over top of the sidebar on the right like so:

Press CTRL + J on your keyboard again, to duplicate this layer another time, and position the third content header over the center area like so:

Step 23

Now we're ready to start adding stock/product photos to the layout. A good place to get stock images if you don't have a subscription to a professional stock image site is sxc.hu.com.

Here l've added a few stock images to the layout to spice it up a bit:

Step 24

Finally l added a header to the piece simply by pasting a render photo and cropping the pieces away that l didn't need. Once l was happy with the position of the header background l placed the site name and slogan onto the header.

Step 25

Finally the content is added to the layout to complete it, here is how mine ended up after adding the content.

Click to enlarge

I hope you enjoined this tutorial as much as l did writing it!