Design Blue Corporate Website in Photoshop

by Steven Snell

on October 26, 2009

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

Today we will be working through the process of designing a corporate website in Photoshop step-by-step. For this example we’ll be creating a site for a marketing company, but just about any other type of service business could use this design as well. At the end of the tutorial you will be able to download the PSD file used in the tutorial.

A Preview of the Final Result

Here is what we will be designing.

Design Blue Corporate Website in Photoshop

Preparing the File

Create a new file (File – New) that is 1400 pixels wide and 900 pixels high.

Design Blue Corporate Website in Photoshop

Step 1: The Background

Set the foreground color to #efefef and use the paint bucket tool to fill the background layer with this light gray color.

Design Blue Corporate Website in Photoshop

Add a new layer (Layer – New) and set a horizontal guide (View – New guide) at 50 pixels. Use the rectangular marquee tool to select everything above the guide.

Design Blue Corporate Website in Photoshop

Set the foreground color to #184e84 and use the paint bucket tool to fill the selected area.

Design Blue Corporate Website in Photoshop

Add a new layer and set a new horizontal guide at 398 pixels. Use the rectangular marquee tool to select everything between the two guides and change the foreground color to #d1e6f9. Then use the paint bucket tool to fill the selected are with the light blue.

Design Blue Corporate Website in Photoshop

Add a new layer and select the pencil tool with a square, one-pixel brush tip.

Design Blue Corporate Website in Photoshop

Set the foreground color to #002c5f, a shade of blue that is just a little bit darker than the header. Using the pencil tool, add a one-pixel border below the header. I like to increase the view to about 600% to do this. Start by clicking at one end of the border, then move to the other end and hold shift while click again (that will make a straight line between your first click and your second.

Design Blue Corporate Website in Photoshop

Change the foreground color to #bfd5e9. Now add a one-pixel border to the bottom of the light blue area. (The image below is shown at 600%).

Design Blue Corporate Website in Photoshop

Our background should now look like this.

Design Blue Corporate Website in Photoshop

Step 2: The Header

We will be using a simple header that includes a logo/title at the left and a navigation menu at the right.

For the logo of the site I will be using the font New Cicle. Set a vertical guide at 220 pixels (this will set the left edge of the content area) and use 30 pt New Cicle gordita in #efefef.

Design Blue Corporate Website in Photoshop

Set the foreground color to #efefef and the background color to #ffffff. Double click on the text layer in the layers palette to bring up the layer style options. Click on “gradient overlay” and select the gradient that fades from the foreground color to the background color.

Design Blue Corporate Website in Photoshop

Then select “drop shadow” and change the settings to 55% opacity with a distance and size of 1 pixel.

Design Blue Corporate Website in Photoshop

The logo should now look like this.

Design Blue Corporate Website in Photoshop

We will now be adding four links to create a navigation menu at the right side of the header. Set a new vertical guide (View – New Guide) at 1180 pixels to set the right edge of the layout. The end of our last link will be lining up with this edge. I’m using 14 pt Arial text in #efefef for the links.

Design Blue Corporate Website in Photoshop

Here is how it looks at this point.

Design Blue Corporate Website in Photoshop

And that completes our header.

Step 3: The Slider Area

Our homepage design is going to include an area that can be used with a jQuery slider. For the purposes of this tutorial the slider will include information about four different services that our offered by the company.

Set vertical guides at 220 pixels, 470 pixels and 1180 pixels. Set horizontal guides at 75 pixels and 378 pixels. The navigation that will allow visitors to select the service that they are interested in will sit to the left of the slider. The area that we are blocking off is 303 pixels in height, which will allow for a vertical navigation menu that includes four links that are are 75 pixels in height and one-pixel borders between the links.

Add a new layer and set the foreground color to #e0e0e0. Use the rectangular marquee tool to select the area to the left for the navigation menu, and fill it by using the paint bucket tool.

Design Blue Corporate Website in Photoshop

Add a new layer and change the foreground color to #d7d6d4. Select the top 75 pixels in the navigation menu and fill it with #d7d6d4 by using the paint bucket tool. This will be the active link on the slider, so we’ll give it a slightly darker background color.

Design Blue Corporate Website in Photoshop

Add a new layer and change the foreground color to #bdbdbd. Use the pencil tool to give a border to the navigation menu, and create horizontal lines every 75 pixels that will serve as the borders of the links.

Design Blue Corporate Website in Photoshop

Add text to make the links. I am using 14 pt Arial with #184e84 for the active link and #191919 for the other links.

Design Blue Corporate Website in Photoshop

Add a new layer and use the rectangular marquee tool to select the area for the slider.

Design Blue Corporate Website in Photoshop

Set the foreground color to #98cbfe and the background color to #1e61a4. Select the gradient tool and choose the radial gradient and choose the gradient that fades from the foreground color to the background color.

Design Blue Corporate Website in Photoshop

With the gradient tool active and the slider area selected, click at the top left corner of the selected area, hold down the mouse and drag to the bottom right corner and release the mouse.

Design Blue Corporate Website in Photoshop

And this is how it should look.

Design Blue Corporate Website in Photoshop

Add a new layer and use the pencil tool to add borders to the blue part of the slider area. #2a6ebb for the bottom and the right, and #68ace5 for the top and left.

Design Blue Corporate Website in Photoshop

Add a text box and enter a headline for the service that you are offering. I am using 24 pt italic Georgia in #efefef and applying a drop shadow with 55% opacity, and size and distance of 1.

Design Blue Corporate Website in Photoshop

Then add another text box with some additional copy. I’m using 14 pt Arial in #052648 for this text and centering it.

Design Blue Corporate Website in Photoshop

Now, below this text we will be using three columns so you can set vertical guides to control the edges of the columns. The vertical guides can be set at 500, 700, 725, 925, 950, and 1150 pixels. A horizontal guide can be set at 245 pixels

Design Blue Corporate Website in Photoshop

We’ll be using icons from the Function free icon set (LINK), so you can download that set if you don’t already have it. In this section of the design we will be using three icons: the pie chart, the magnifying glass, and the wrench. Open each of those icons and re-size them to 30 pixels by 30 pixels.

Paste the pie chart icon into the left column at the top. Then paste the magnifying glass in the middle column and the wrench in the right column.

Design Blue Corporate Website in Photoshop

Using 14 pt Georgia in #efefef, add text next to each icon. Set a drop shadow with 55% opacity and a distance and size of 1.

Design Blue Corporate Website in Photoshop

Next, add additional text to each column using 14 pt Arial, #052648. Use the guides to line up the text boxes.

Design Blue Corporate Website in Photoshop

Here is what we have at this point.

Design Blue Corporate Website in Photoshop

Step 4: The Content Area

Below the slider area we will be adding three columns of text. You can clear any guides that you are currently using (View – Clear Guides). Set new vertical guides at 220, 520, 550, 850, 880 and 1180 pixels, and a horizontal guide at 418 pixels (that is 40 pixels below the bottom of the slider).

Design Blue Corporate Website in Photoshop

In the content area we will be using three more icons from the Function icon set: the news icon, the mail icon, and the Twitter icon. Open each icon and increase the view to about 600%. Crop the icons so any of the extra height above and below the icon is removed.

Design Blue Corporate Website in Photoshop

Now, resize all three icons so that they have a height of 30 pixels. Paste the icons in each column – news on the left, mail in the center, and Twitter on the right.

Design Blue Corporate Website in Photoshop

Then add headers to each column with 18 pt Georgia, #184e84 in all caps.

Design Blue Corporate Website in Photoshop

In the left column we will add some filler text for a sample news item in 14 pt Arial, #191919 with a link in #184e84.

Design Blue Corporate Website in Photoshop

In the center column we’ll add some filler text, a company address and phone number, and a link to the contact page.

Design Blue Corporate Website in Photoshop

In the right column we’ll add filler text for 3 recent tweets.

Design Blue Corporate Website in Photoshop

Below the recent tweets we’ll add a “follow us” button that will link to the company’s Twitter profile. Add a new layer and use the rectangular marquee tool to select and area for the button. Use the paint bucket tool to fill it with #184e84 and use the pencil tool to give it a one-pixel border in #002c5f.

Design Blue Corporate Website in Photoshop

Add text to the button in 14 pt Arial, #efefef.

Design Blue Corporate Website in Photoshop

Step 5: The Footer

The last part of the design that needs to be completed is the footer.

Add a new layer and set the foreground color to #184e84. Leave 40 pixels of space below the end of the text and use the rectangular marquee tool to select the area for the footer. Then use the paint bucket tool to fill the selection.

Design Blue Corporate Website in Photoshop

Next, use the pencil tool to add a one-pixel border in #002c5f to the top of the footer. The image below is shown at 600%.

Design Blue Corporate Website in Photoshop

Using 14 pt Arial in #efefef add a copyright and links to the footer, and we’re done. Here is a look at what we have just designed.

Design Blue Corporate Website in Photoshop

You can download the PSD file here (702 KB zip file).

For more Photoshop layout tutorials see:

Powered by Shutterstock

About Steven Snell

Stephen Snell is the owner and editor of Vandelay Design. Connect with Stephen on google+