In the past we’ve done some tutorials for designing portfolio sites and blogs in Photoshop, and today we’ll focus on designing a corporate website. The example will be for a marketing and SEO company, but it uses a basic layout that could work for just about any type of business.
The End Result:
Here is a look at what we will be creating (click the image to see it in full size).
Creating the File:
The first thing to do is create a new file (File – New) that is 1600 pixels wide and 1275 pixels high.
Step 1: The Background
Our site is going to use a vibrant green background. Using the paint bucket tool, fill the background layer with #638427.
We’re going to use a round brush to add some lighter green at the top center of the background. Select the brush that is called “soft round 300 pixels” and adjust the master diameter to 1100 pixels.
Set the foreground color to #a0ca52 and apply the brush to the top center of the canvas.
Step 2: The Header
We’re going to use a width of 960 pixels for the layout, so you can set vertical guides (View – New Guide) at 320 pixels and 1280 pixels to mark the edges of the layout. We’ll leave 75 pixels at the top of the canvas avobe the header, and the header will be 960 pixels wide and 70 pixels high.
First, add a new layer for the header (Layer – New). Use the rectangular marquee tool to select this area and the paint bucket tool to fill it with #d4d1d1.
For the title/logo of the site I will be using the Anivers font. The color is #344811 and the size is 30 pt. Leave 20 pixels to the left of the logo (if you set a vertical guide at 340 pixels it will help to line up the left edge of the logo).
The navigation menu is 14 pt Arial in #191919, lined up with 20 pixels to the right edge of the header (you can use a vertical guide at 1260 pixels to set the right edge of the nav menu.
Using the pencil tool, add a 1 pixel border to the top of the header in #efefef.
Step 3: The Slider
Below the header we will create an area that can be used with a jQuery slider to display information on several different services. In this example, we’re going to create 4 different tabs which the visitor can select to show basic info about SEO, social media marketing, PPC campaigns, and copywriting services.
To create the area for the tabs, we’ll be adding a new layer and using the rectangular marquee tool to select an area that is 960 pixels wide and 30 pixels high. Use the paint bucket tool to fill it with #b4b0b0.
Using 14 pt Arial add text for four links. The text I’m using is “SEO,” “Social Media Marketing,” “PPC Campaigns,” and “Copywriting.” The first link will be the active tab, so I’m using #efefef as the color. The other 3 are in #4c4b4b.
Using the pencil tool, add a one-pixel border to the top of the tabbed area, and a border to the right of each link/tab. The color for the borders is #a9a4a4.
Use the rectangular marquee tool to select the tab for SEO and use the paint bucket tool to fill it with #868080.
Next, we’ll be creating the area below the tabs for the slider. The width will be 960 pixels and the height of the slider will be 270 pixels. Add a new layer and use the rectangular marquee tool to select the area for a slider (you can use horizontal guides at 175 pixels and 445 pixels to set the height). Use the paint bucket tool to fill it with #191919.
To give this area a textured background I will be using an image from the Cracks Texture Pack that we released several months ago (the image being used can be downloaded from Flickr). Once you have downloaded the image, create a new file that is 960 pixels wide and 270 high. Copy the texture and paste it in this new file. Desaturate the image to remove the color (Image – Adjustments – Desaturate) and use the free transform (Edit – Free Transform) to move the image around so that you get the area you want inside of your canvas.
After you have this completed, select the image (Select – All) and copy it to your clipboard (Edit – Copy). Then, back in your layout canvas, use the rectangular marquee tool to select the area for the slider, and paste the texture (Edit – Paste).
Now, double click on the texture layer in the layers palette to bring up the layer styles. Select “overlay” for the blend mode and change the opacity to 50%.
For the text of this slider area we will be using a text box that is 480 pixels wide (between vertical guides at 340 pixels and 820 pixels). For the headline I am using 24 pt Georgia in #a0ca52, and for the rest of the text it is 14 pt Arial in #efefef.
On the right side of the slider I am using 18 pt Georgia in #efefef for the text “Our SEO Services Include:”, and the rest of the text is 14 pt Arial, also in #efefef.
Before each of the list items I will be adding an arrow for some visual appeal. I’m using one of the icons from Function’s free icon set, which you can download if you are interested. Open the right blue arrow icon and re-size it to 20 pixels by 20 pixels. Copy it and paste it 6 times into the canvas and align one of them with each of the six list items.
The last thing we will be doing for the slider is adding two buttons, one for more information and one to contact us. To create the button, open a new file that is 150 pixels wide and 40 pixels high. With 14 pt Arial #191919, type “Get More Information” in the center of this file. Then set the foreground color to #a0ca52 and the background color to #85a940. Select the rounded rectangle tool with a radius of ten and create a rounded rectangle the full width and height of the canvas. Double click on the shape layer in the layers palette an select “gradient overlay.” Choose the gradient the fades from the foreground to the background color and check “reverse” so that the darker color is at the bottom.
Still in the layer styles, click on “stroke” and add a one-pixel, inside stroke in #67862d. Click “OK.” Make sure that the shape layer is laying behind the text so that the text is visible. Select both layers and merge them (Layer – Merge Layers). Copy the button and paste it into your layout and use the free transform (Edit – Free Transform) to align the button. Repeat this process for a second button that says “Contact Us Today.”
Step 4: The Content Area
Below the slider, use the rectangular marquee tool and the paint bucket tool to fill the content area with #d4d1d1.
The text box we will be creating is 440 pixels wide (from vertical guides at 340 pixels to 780 pixels). Add two headers: “Why Choose Us” and “Our Process”. Each is followed by a few paragraphs of text. The headers are 18 pt Georgia in #344811, and the body text is 14 pt Arial in #191919.
On the right side we will be using another 440 pixel wide column to display customer testimonials. Start by adding a header for “What Our Clients Are Saying” with 18 pt Georgia, #344811. The rest of the text in this column will be 14 pt Arial, #191919.
This area will include 3 testimonials, each with a 100 pixel by 100 pixel image of the person. For this tutorial I will be using a photo that I purchased from Fotolio. I’m using that photo for each of the testimonials to save some time finding other photos.
The text for the testimonial will be in italics and the person’s name, position and company in bold. Leave 20 pixels around each of the photos and 40 pixels between each of the testimonials.
Between the testimonials, add a two-pixel border using the pencil tool. The top pixel in #efefef and the bottom pixel in #b4b0b0.
One last detail to the content area, we’ll be adding a two-pixel border at the top of the content and below the slider. Use the pencil tool with the top pixel being #000000, and the bottom pixel #efefef.
Step 5: The Footer
Leave 40 pixels below the end of the content, then use the rectangular marquee tool to select the bottom of the content area and fill it with #638427. Add a one-pixel border in #efefef to the bottom of the content area. Also, add text in 14 pt Arial #efefef for the copyright and navigation.
The Finished Product:
Here is a look at what we just designed.
If you’d like to work with the original PSD used for this tutorial, it can be downloaded here (2.2 MB zip file).
For more Photoshop layout tutorials see: