How to Design A Corporate Website in Photoshop

by Steven Snell
on February 1, 2010
in Tutorials

Today were 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.

Were 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. Were 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. Were 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 youre
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. Youll 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 Im 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 Im 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, well 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, well 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 well 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.

Looking for hosting?. We recommend MediaTemple for web hosting. Use Code MTLOVESDESIGN
for 20% off
Now well 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.
Looking for hosting?. We recommend MediaTemple for web hosting. Use Code MTLOVESDESIGN
for 20% off
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 well 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 were 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).