Design a Green Corporate Layout in Photoshop

by Steven Snell

October 19, 2009 in Tutorials

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).

Photoshop Layout Tutorial - Corporate Website

Creating the File:

The first thing to do is create a new file (File – New) that is 1600 pixels wide and 1275 pixels high.

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

Set the foreground color to #a0ca52 and apply the brush to the top center of the canvas.

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

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).

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

Using the pencil tool, add a 1 pixel border to the top of the header in #efefef.

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

Use the rectangular marquee tool to select the tab for SEO and use the paint bucket tool to fill it with #868080.

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

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).

Photoshop Layout Tutorial - Corporate Website

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%.

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

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.”

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

Between the testimonials, add a two-pixel border using the pencil tool. The top pixel in #efefef and the bottom pixel in #b4b0b0.

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

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.

Photoshop Layout Tutorial - Corporate Website

The Finished Product:

Here is a look at what we just designed.

Photoshop Layout Tutorial - Corporate Website

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:

Powered by Shutterstock

About Steven Snell

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

  • Paul Randall

    Oct 19th

    A really good design, showing some of the current trends in web design.

  • Web 2.0

    Oct 20th

    Simple design, great tutorial… Thanks

  • Chris

    Oct 20th

    This is really simple, yet boring. As a web designer myself I see that this lacks any oomph or panache to make it catch the users attention. You have to think about what the user might think when he/she goes to the site.

  • Steven Snell

    Oct 20th

    Hey Chris,
    Sorry you don’t like it, but thanks for the feedback. I’m working on a revised version of it that maybe will do a better job of living up to your expectations.

  • Webjohn01

    Oct 21st

    Hello Steven!

    I really love your design because it is very simple and clean.
    you always do the right job, I would like to ask can you make a tutorial
    in converting it into XHTML and CSS?

    More thanks
    -Webjohn01

  • Oliver Web

    Oct 21st

    A nice and clean layout and design. Not every site needs to have a major wow factor, especially corporate sites and I like this design.

    This is a good tutorial with some good tips to create a nice simple design.
    Thanks for sharing.

  • David Beneteau

    Oct 22nd

    Nice work, Steven. And I think Chris, above, really misses the point. This is a tutorial on a solid method for approaching a corporate home page design. I don’t think you intended it to be an eye-popping design. That part is up to the designer who puts your method into practice!

  • Steven Snell

    Oct 22nd

    David,
    Thanks for the feedback. I’m glad you find it to be useful.

  • Deepak

    Oct 29th

    Awesome dude, its very nice!

  • brum

    Dec 1st

    Very nice design. Thx.

  • gambler

    Dec 22nd

    Nice Tutorial, helped me a lot because i could follow every step easily :=)

  • lv bags

    Aug 8th

    Very nice design. Thx.

  • HDR Textures

    Aug 26th

    Great tutorial, but i don’t feel the dark green background is overwhelming and draws the attention away from the content.

  • Max Willian

    May 5th

    Very cool, thanks.

  • Leave a Comment

    Your email address will not be published. Required fields are marked *