How to Design A Corporate Website in Photoshop

Today we’re going to walk through the process of designing an example corporate website in Photoshop.
Here is a look at the end result of what we will be creating (click on the image to see it in full size).

Create a New File

In Photoshop, open a new file (File – New) that is 1400 pixels wide and 1025 pixels high.

Step 1: The Background

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

Set horizontal guides (View – New Guide) at 170 pixels and 320 pixels. Add a new layer (Layer – New) and use the rectangular marquee tool to select the area between the two horizontal guides. Set the foreground color to #356406 and use the paint bucket tool to fill the selected area with this green color.

Our content area is going to be 960 pixels wide and centered, so set vertical guides at 220 pixels and 1180 pixels. Set a horizontal guide at 210 pixels. Add a new layer and select everything between the guides, all the way to the bottom of the canvas. Set the foreground color to white (#ffffff) and use the paint bucket tool to fill the selection.

That completes our background.

Step 2: The Header

Add a new layer and set the foreground color to #61645e and the background color to #343b35. Use the rectangular marquee tool to select everything above the green horizontal band.

Select the gradient tool and make sure that the radial gradient is active and that the gradient is fading from the foreground color to the background color.

We’re now going to create a radial gradient in the selected area. Place your cursor above the top of the canvas and about 500 pixels in from the left. Click at this point and drag it straight down into about the middle of the green horizontal band.

After creating the gradient, with the area still selected we will add some noise for a slight texture. Go to Filter – Noise – Add Noise and set it to 1.5% and uniform. You should have something like this.

Add a new layer and set the foreground color to #151615. We’re going to add this dark gray color to the top of the canvas. Set a horizontal guide at 10 pixels and use the rectangular marquee tool to select this area. Then use the paint bucket tool to fill the selection.

Set the foreground color to #757474 and select the pencil tool with a square brush and a 1 pixel diameter. We’re going to add a 1 pixel border under the dark gray that we just created, so increase the view to about 500% so you can see the detail. With the pencil tool, click on the first pixel below the dark gray and all the way to the left of the canvas. Then, hold shift and click the pixel at the right side of the canvas just below the dark gray area. This will create a straight line. Here is how it will look at 500%.

Here is a look at what we have so far (click the image to view in full size).

Now on to the navigation menu. Add a new layer and set the foreground color to #959695. We want to create an area that is 40 pixels high and 960 pixels wide (the same width as the content area). If you’re using guides you can set horizontal guides at 130 pixels and 170 pixels, and vertical guides at 220 pixels and 1180 pixels. Use the rectangular marquee tool to select this area and fill it by using the paint bucket tool.

Our navigation menu is going to have 5 links, and 5 divides nicely into 960 pixels of width (192 pixels each). To create the tabs set vertical guides at 411 pixels, 603 pixels, 795 pixels, and 987 pixels.

Add a new layer and set the foreground color to #bdbebd. Select the pencil tool with the 1 pixel square tip and increase the view to 500%. Use the pencil tool to create a 1 pixel border to the right or the vertical guides. You’ll also want to do the same at the right edge of the navigation menu. Then, change the foreground color to #787a78 and draw a 1 pixel border to the right of the ones you just created (except at the far right edge of the nav menu).

Add a new layer and change the foreground color to #356406. Use the rectangular marquee tool to select the first tab and use the paint bucket tool to fill it with the green color.

Then set the foreground color to #224003 and use the pencil tool to create a 1 pixel border around the top and the sides of the first tab (but not the bottom).

Then add a new layer and use this same dark green color to create a 1 pixel border at the top and the bottom of the green horizontal band. Right below the dark green border at the bottom of the horizontal band, add another 1 pixel border in white.
Here is a blown up view of the top.

And here is a blown up view of the bottom.

Set the foreground color back to #787a78 and use the pencil tool to add a 1 pixel border to the top of the gray tabs on the navigation menu. Here is a blown up look.

Add text into each of the tabs for links. For the active tab I am using 16 pt Arial in #ffffff and on the non-active tabs I’m using 16 pt Arial in #171817.

Here is a look at what we have so far (click the image to see it in full size).

For the title/logo I’m using the free font Qlassik Medium in 42 pt and #d8d7d7.

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

Then select “drop shadow” and set it to 2 pixels for distance and size. Here is how it should look.

Next, we’ll add one line of text in 18 pt below it, and give it a drop shadow with a distance and size of 1 pixel.

That completes the header area. Here is what we have so far (click the image to see it in full-size).

Step 3: The Featured Area

Our home page will include an area with a call to action button, and just below that another area with some with some text about our services.
Add a new layer and set the foreground color to #949493 and the background color to #6e6f6e. The first block is going to be 940 pixels wide and 90 pixels high. Set horizontal guides at 220 pixels and 310 pixels and vertical guides at 230 pixels and 1170 pixels. Use the rectangular marquee tool to select the area between the guides and use the gradient tool to apply a linear gradient to the selected area with the lighter gray at the top.

Change the foreground color to #646464 and use the pencil tool to apply a 1 pixel border around the area where we just applied the gradient.

Set the foreground color to #101e02 and select the rounded rectangle tool. Set the radius to 15 pixels.

Create a rounded rectangle on the right side of this gray area.

Set the background color to #1f3a04, a slightly lighter shade of green. Double click on the shape layer in the layers palette to open the layer style options and select “gradient overlay.” Choose the gradient that fades from foreground to background color with the lighter shade at the top. Then select “stroke” and add a 1 pixel stroke outside in the color #081001. This is what you should have.

Add text to the button with 24 pt Arial, #d7d6d6. Double click on the text layer in the layers palette and add a drop shadow with 60% opacity and 3 pixels for the size and distance.

Next, we’ll add some text to the left of the button in Arial, #171817. The top line is 24 pt and the 2nd line is 16 pt.

Add a new layer and set the foreground color to #575955 and the background color to #3b3934. Create a selection that is 940 pixels wide and 235 pixels high that leaves 10 pixels of white space below the previous gray block. Use the gradient tool to apply a linear gradient to this area with the lighter shade of gray at the top.

In this area we’ll be using an icon from Web Resources Depot that was designed by IconShock. You can download the pack of chart icons and open the one shown below.

Resize it to 200 pixels by 200 pixels and then copy and paste it into the design.

Now we’ll add some text to the left of the chart. The first line is in 30 pt Arial, #f8fcf8. The rest of the text is 16 pt Arial in #cfd1cf. The line height is 30 pt.

Set the foreground color to #5ca217, select the rounded rectangle tool and set the radius to 10 pixels. Create two buttons below the text. Mine are 125 pixels wide and 30 pixels high.

Set the background color to #519111 and double click the shape layer in the layers palette to open the layer style options. Select “gradient overlay” and choose the gradient that fades from foreground to background color. Then select stroke and add a 1 pixel inside stroke in #224003. Last, select drop shadow and change the settings to 40% opacity and 3 pixels for distance and size. Do this to both buttons.

Than add text to the buttons in 16 pt Arial, #f8fcf8. Double click on the text layer in the layers palette and give it a drop shadow with 1 pixel size and distance.

The last thing we are going to do to this area is add a border. Set the foreground color to #312f2b and add a new layer. Use the pencil tool to apply a 1 pixel border.

Here is what we have so far (click on the image to see it in full size).

Step 4: The Content Area

Our content area will be two columns. The main content will be on the left and the sidebar will be to the right. To control the edges of the text set vertical guides at 250 pixels, 830 pixels, 860 pixels, and 1150 pixels. Set a horizontal guide at 595 pixels to control the top of the content.
In the main column we’ll add text in 14 pt Arial, #171817, with a header in 18 pt Arial, #112002.

Step 5: The Sidebar

The sidebar will include links to company news items. We will be using a newspaper icon from the Function free icon set. Open the icon and re-size it to 30 pixels by 30 pixels. Add text “Company News” in 18 pt Arial, #112002, and paste the news icon to the left of it.

Then create a text box that will include the news headlines and dates. The headlines should be in 14 pt Arial, #112002. The dates should be in 12 pt Arial, #43433e.

Step 6: The Footer

Leave 40 pixels of white space below the bottom of the text and use the rectangular marquee tool to select the area for the footer. Add a new layer and set the foreground color to #dde0dd and use the paint bucket tool to fill the selected area.

Add some text for footer links in 14 pt Arial, #112002.

The last thing we’re going to do is add a 1 pixel border around the edge of our content area. Add a new layer and set the foreground color to #cccfcc. Use the pencil tool to add a 1 pixel border around the white content area. Here is a blown up look.

And here is the final result or our work (click the image to see it in full size).

Get the Photoshop File:

if you would like to have the original Photoshop file used for this tutorial you can download it here.