Macro Layout

Step 1.

Create a new document that is 770 x 300, and fill the background with: #72828B

Step 2.

We'll start with the buttons, Create a new layer, and using the rectangular marquee tool make a selection across the top of the page like so:

Step 3.

Next smooth the corners of the selection by going to:

Select->Modify->Smooth and smooth the selection by 2.

and fill the selection with #ACB5BB

Step 4.

Now apply these blending options to the layer.

Drop Shadow:

Gradient Overlay:

Here's what you'll end up with:

Step 5.

Create a new layer, and apply the text to your button. I used #000000 (black) Verdana, with a 10pt Size.

Step 6.

Then I just added a 1 pixel divider between each of the buttons, to separate them a bit. Set your foreground color to: #9DA5AA. And draw 1 pixel lines with the pencil tool, as I've done here.

I did this all the way across the image.

Step 7.

Next we'll work on the "search box". Set your foreground color to #000000 (black) create a new layer and get out the pencil tool again, and draw a 1 pixel line like so:

Drop the opacity of this layer to: 33 percent

Then set your foreground color to #FFFFFF (white) create a new layer, and draw another 1 pixel line right beside that as shown:

Drop the opacity of this layer to 68 percent. Here's what you should have if you've followed along:

Step 8.

Next we'll create a small input box that will serve as our search box. Create a selection like so with the rectangular marquee tool:

Fill the selection with #FFFFFF (white), and apply the following blending options to the layer:

Inner Shadow

Stroke

Results:

Step 9.

Next add the account links at the top right corner of the page. The font I used is Verdana with a size of 9pt.

I also threw in a shopping cart icon. You can draw your own, or get an account with: WebsiteIcons.com. It's a great free services with 1,000's of website icons any serious designer shouldn't be without.

Step 10.

Set your foreground color to: #889395 and draw a 1 pixel line with the pencil tool between each of the links like so:

Step 11.

Next add the company name of your site, with a logo if you wish. I used the font Verdana bold, size 16pt, color #FFFFFF

Step 12.

Now we'll begin to create the area for the content of our site. Start off by creating a new layer, and making a large selection using the rectangular marquee tool, like so:

Step 13.

Go to Select->Modify->Smooth with a setting of 4 pixels.

and fill this selection with the color: #F5F5F5

Here's how it now looks:

Step 14.

Create a new layer and once again create another selection with the rectangular marquee tool like so:

Step 15.

Go to Select->Modify->Smooth with a setting of 2 pixels.

Step 16.

Fill this selection with #FFFFFF (white), and apply the following blending options to the layer:

Stroke

Here's how it should look:

Step 17.

Hold down the Ctrl key, and click on this layer (this should make a selection of the content box we just made). Create a new layer. Now with the selection still active, get out the rectangular marquee tool, and hold down the ALT key and deselect the bottom portion of the content box like so:

Fill this selection with: #E8F0F1

Step 18.

Set your foreground color to: #A5B5BE and get out your pencil tool. Draw a 1 pixel line directly under this new "header" for our content box like so:

Step 19.

Now merge these two layers together by pressing Ctrl + E, and duplicate them a couple times to span the width of our content area.

Step 20.

Next add the headers for your content areas. I've used the Verdana Bold font again, size: 11 pt, with a color of #0000.

I also added small arrows to the right of the text:

Now the only thing to do is to slice up the layout and add your content.

I hope you've learned some useful techniques while following this tutorial.