Design a Blue Corporate Website Layout in Photoshop

Today we’re going to be walking through the process of designing a homepage for a corporate website in Photoshop. This particular design belongs to the Vandelay Corporate Template (HTML/CSS), which is available to members of Vandelay Premier or can be purchased for $10.

Here is a look at what we will be creating (click the image to view in full size):

Step 1: Setting Up the File

Create a new file that is 1200 pixels wide and 1255 pixels high.

Step 2: The Header

Set a horizontal guide at 80 pixels (View > New Guide). Set the foreground color to #5487bb, a medium shade of blue that we’ll use for the header. Use the rectangular marquee tool to select the entire area above the guide, then use the paint bucket tool to fill the selection with color.

Zoom in to about 500% or 600% and select the pencil tool and a square one-pixel brush tip. Add two different one-pixel borders at the bottom of the header using the colors #316395 and #b4d6f6.

Our file is 1200 pixels wide but the content area of the site will be only 960 pixels wide, so set a vertical guide at 120 pixels to set the left edge of the content area. We’ll be using the free font Expressway for the title/logo of the site, but of course you can replace this with your own logo if you have one. We’re using 24 pt Expressway in white.

We’ll add a small drop shadow to the text, so double click on the text layer in the layers palette to open the layer style options. Choose “drop shadow” and 50% opacity with 1 pixel distance and 1 pixel size.

With the drop shadow the text will look like this:

We’re then adding the text “business template” in #f0eb6d, 14 pt italic Georgia, and also with the same drop shadow.

Now for the navigation menu. Set a vertical guide at 1080 pixels to set the right edge of the content area. Then use 14 pt bold Arial in #f0eb6d to create the navigation menu text.

That completes our header, and here is how it looks:

Step 3: The Featured Area

Below the header our design will have an area for a slider and some featured text. We’ll start by setting a horizontal guide at 500 pixels to set the bottom of the featured area. Add a new layer (Layer > New > Layer) and select the fill the featured area with white (#ffffff). Next, we’ll be using a Photoshop pattern from Vandelay Premier that is part of our Pixel Patterns for Photoshop pack. It’s a simple grid pattern, so if you do not have our pattern pack you can create your own. To apply the pattern, double click on the layer in the layers palette and select “pattern overlay”. Choose a small grid pattern and click “ok”.

It will look like this:

Then add another layer on top of the previous one. Select the same featured area with the rectangular marquee tool and fill it with #8ec1f3. This new layer will cover up the grid pattern on the other layer, so will change the fill opacity so that the grid shows through. In the layers palette, double click on the new layer that you just filled with blue. You’ll see the setting for “fill opacity” in the “advance blending” section. Change that to 90%.

It will then look like this:

We’ll then give this featured area a bottom border, so create a new layer and use the rectangular marquee tool to select and area that is 10 pixels in height. Then set the foreground color to #5487bb and use the paint bucket tool to fill it. Then zoom in and use the pencil tool to give it two one-pixel borders at the top in #b4d6f6 and #316395. Here is how it will look at 600%.

For our slider we’re going to be using an image that is 440 pixels wide and 300 pixels high, and we’ll add a 10 pixel border around the image. Set vertical guides at 120 pixels and 580 pixels and horizontal guides at 120 pixels and 440 pixels. Add a new layer and use the rectangular marquee tool to select the area inside the guides, and then use the paint bucket tool to fill it with #86b5e2.

Next, we’ll paste in an image that is 440 pixels by 300 pixels.

On the blue border around the image, we’ll add a light one-pixel border. Use the pencil tool to add the one-pixel border in #b4d6f6. Here is how it looks at 600%:

For the slider controls we’re going to simply use round buttons. To create these, use the brush tool with a round brush tip and a diameter of 10 pixels. The first (active) one should have a color of #f0eb6d and the others are #5487bb.

Next, we can add the text. We’re using 14 pt Arial in #163f6a for the paragraph text and 24 pt bold Arial in white (#ffffff) for the heading. Leave 40 pixels of space between the photo’s border and the left edge of the text.

The last thing to do for this section of the design is to create a call-to-action button. In this case it will say “contact us”, but you could change the text to suit your needs. Using the rounded rectangle tool with a radius of 15 pixels, create the button shape. The color isn’t important because we will be adding a gradient overlay.

Double click on the button shape layer in the layers palette to open the layer styles options. Select “inner shadow” and set it to #f9f7b9, normal blend mode, 90 degree angle, distance of 3 pixels and size of 3 pixels.

Then select “gradient overlay” and set the colors at #f0eb6d and #e3de55.

Then select “stroke” and give it a one-pixel outside stroke in #cec946.

The button will now look like this:

Then add text on top of the button. We’re using 14 pt Arial in #163f6a.

Step 4: The Main Content Area

Below the featured area we will use a 3-column content area. We well use 40 pixels of space between the columns, and the sides will be set by the 120 pixel and 1080 pixel vertical guides. We’ll also leave 40 pixels of whitespace below the featured area and above the sub-headers.

The body text is 14 pt Arial, #191919. The sub-headers are 18 pt bold Arial, #ac1e32, and 14 pt bold Arial, #191919.

The second column uses the same text settings.

The third column is basically the same except that we are adding italic text in #8f8e8e for the dates

That completes the content area, now all we have left is the footer.

Step 5: The Footer

Select the bottom 55 pixels of the canvas with the rectangular marquee tool, add a new layer and fill it with #5487bb.

We’ll add text and navigation to the footer using 14 pt Arial in #ffffff.

That completes our design! Here is the end result, click to see in full size:

This design is available as a coded template at Vandelay Premier.

For more tutorials please see:

• Design a Portfolio Site in Photoshop
• Create a Grunge Texture Brush in Photoshop
• How to Create a Set of Marker Brushes for Illustrator
• How to Create an Adobe Illustrator Brush
• Create a Fun Ink Splatter Vector

Published March 31st, 2011 by Steven Snell