Photoshop Corporate Construction Company Layout

In our latest Adobe Photoshop tutorial, I will show you how to create a professional looking layout for a construction company. This tutorial that will take advantage of simple gradients to produce a nice effect. It is a pretty long tutorial, but it should be simple enough for newer Photoshop users to follow along.

Here is what the finished layout will look like.
Photoshop Corporate Construction Company Layout

First let me include links to all of the files used in this tutorial so that you can gather everything now.

Photoshop Add-ons:
DezinerFolio Ultimate Web 2.0 Gradient Pack

Images (all are available for free, but require you to sign up. It is worth it trust me):
Gears
Blueprint
Construction Site
Cool Building

Ok, so now that you have all of the tools that you need open Photoshop and create a 900×800 pixel image with a white back ground. Create a new layer and use the Rectangle Marquee tool to draw a rectangle like below and fill it in with any color.
Adobe Photoshop Web Layout Tutorial

Now right click on the layer in the panel and select blending options. Apply the following gradient (this is included in the gradient pack):
Photoshop Corporate Construction Company Layout

Here is the gradient. (If I don’t include this I will get flamed because somebody will over look this simple link to download all of the gradients here. That’s a hint guys)
Photoshop Corporate Construction Company Layout

Create a new layer and draw another rectangle using the marquee tool and fill it in with any color.
Photoshop Corporate Construction Company Layout

Right click on your new layer and add the gradient layer style shown below.
Photoshop Corporate Construction Company Layout

Here is the gradient
Photoshop Corporate Construction Company Layout

Create another new layer (we will be doing this quite often) ad draw another rectangle like below. Fill your rectangle with wjite (#FFFFFF).
Photoshop Corporate Construction Company Layout

Make another new layer and another fancy rectangle. This time we will fill the selection with a #697b86.
Photoshop Corporate Construction Company Layout

Next we will add the logo. Create a new layer and go get the gears picture from sxc.hu. Paste the picture into Photoshop. With the image selected choose Edit > Free Transform from the menu in Photoshop.
Photoshop Corporate Construction Company Layout

First we are going to Constrain Proportions by clicking the change link at the top, this keeps the image from becoming distorted. Then grab a corner of the image and shrink it down to size.
Photoshop Corporate Construction Company Layout

Then mouse your mouse out slightly until you get the rotate arrows (looks like a curve double sided arrow). Rotate the image so that it looks like this.
Photoshop Corporate Construction Company Layout

Apply your transformation. Select the layer in the layers pane and change the blend mode to Pin Light.
Photoshop Corporate Construction Company Layout

The gear image should now look like this.
Photoshop Corporate Construction Company Layout

Next we will add our corporate logo. Using the text tool with Arial Black 40 point as you font type the CorporateAmerica logo.
Photoshop Corporate Construction Company Layout

Now apply the following gradient by going to blending options. This gradient is also included in the download I mentioned earlier.
Photoshop Corporate Construction Company Layout

Here is the gradient. Make a note that some of the markers are covered by other markers. Those markers have arrows drawn to them. If you downloaded the gradient kit just click on gradient name “White Gloss 4”.
Photoshop Corporate Construction Company Layout

Now use the text tool again to add the tag to the logo. This time the font we are using is Arial Black 14 point with the color set to #b7d4e6.
Photoshop Corporate Construction Company Layout

Next we will create the menu. Create a new layer and draw another rectangle using the marquee tool. Fill this rectangle with #697b86
Photoshop Corporate Construction Company Layout

Now grab the text tool with Verdana 18pt Bold as your font and #ffffff as your color add the following links. Note that there are 4 spaces in between each sections link.
Photoshop Corporate Construction Company Layout

Select the rectangle layer again. Using the single column marquee tool select a section in between each link and then delete it. Your end result should look like the menu below.
Photoshop Corporate Construction Company Layout

Now use the magic wand tool to select the rectangle behind the home link. Fill the rectangle with #b7d4e6. We are going to use this color to show what page the user is currently on.
Photoshop Corporate Construction Company Layout

Now go back to your text layer for the links. Edit the links and change the color of the home link to #124c6f by highlighting only the word home and clicking the color box on the top menu. The menu should now look like this.
Photoshop Corporate Construction Company Layout

Create a new layer and draw another rectangle like below. Fill the rectangle with the same #b7d4e6 that we used to fill the rectangle for the home link.
Photoshop Corporate Construction Company Layout

Now we are going to add a magazine quote that describes the awesomeness of our company. We will use the text tool and Verdana bold 24pt for this with the color set to #124c6f.
Photoshop Corporate Construction Company Layout

We will also attribute the quote to the magazine using Verdana Bold 10pt in #124c6f.
Photoshop Corporate Construction Company Layout

Ok. Now we have to add the images that show a little bit about what our company stands for. We want to have three images equal in size. The easiest way I find to do this is to first create a new layer and draw another rectangle. Fill it in with any color.
Photoshop Corporate Construction Company Layout

Next break the square into three equal portions. I will use the same technique that I used for the menu. Using the single column marquee I will delete two columns in between each square. You should get something like the picture below.
Photoshop Corporate Construction Company Layout

We will use this as a template for the images we downloaded earlier. First we will add the Blueprint image. We are going to paste the image in Photoshop. Then on the menu go to Edit > Transform > Resize. Constrain the proportions again (click the little chain links) and resize the image so that it is just slightly bigger than the blue square.
Photoshop Corporate Construction Company Layout

Now go back turn off visibility on the layer with the blueprint picture by clicking the eye in the layers panel.
Photoshop Corporate Construction Company Layout

Select the blue square layer and use the magic wand tool to select the first square.
Photoshop Corporate Construction Company Layout

Now on the menu at the top go to Select > Inverse. This will select everything but the blue square.
Photoshop Corporate Construction Company Layout

Now select the layer with the blueprint picture and turn visibility back on. Then make sure the blueprint layer is still selected and hit delete. The image should look like this now.
Photoshop Corporate Construction Company Layout

Now we are going to add a border. Right click on the layer in the layers pane and select blending options. Apply the follow stroke settings.
Photoshop Corporate Construction Company Layout

The image should now have a nice inside border on it.
Photoshop Corporate Construction Company Layout

You will have to repeat those steps with the construction image and the cool building image using the 2nd and 3rd squares as a template. Also remember to apply the same blending effects. You can delete the blue squares layer when you are done. You should get something like this when you are done.

Photoshop Corporate Construction Company Layout

Now we will add a little caption to the images. Create a new layer and make a selection using the rectangle marquee tool on top of one of the images, but inside the border like the one shown below.
Photoshop Corporate Construction Company Layout

Now select # 697b86 as your foreground color. Then select the gradient tool.
Photoshop Corporate Construction Company Layout

On at the top of the screen click the gradient drop down and select “Foreground to transparent”.
Photoshop Corporate Construction Company Layout

Now hold down the shift key if you are on windows (sorry I don’t know Mac shortcuts) and click and drag from slightly inside the left of the box ending outside the right side of the box. The illustration below shows where I started and finished
Photoshop Corporate Construction Company Layout

The fill should look like this
Photoshop Corporate Construction Company Layout

Right click on the layer and duplicate it. Use the arrow keys to position the new layer on the next image. Repeat this for the 3rd image. Your site you now look like this.
Photoshop Corporate Construction Company Layout

Next use the text tool with Verdana 20pt bold as the font. Add the text below to each of the images.
Photoshop Corporate Construction Company Layout

Create a new layer. Make another rectangle and fill it with white.
Photoshop Corporate Construction Company Layout

Go to the blending options for the final rectangle and apply a 1px stroke.
Photoshop Corporate Construction Company Layout

Now use the text tool to add the title to the about page. The font is Verdana Bold 20pt and color is # 4d5359
Photoshop Corporate Construction Company Layout

Next we will add the description. Since I don’t feel like making up a description we will use the lorem ipsum generator (http://www.lipsum.com/ ). If you don’t know what lorem ipsum is. It is supposed to simulate what standard writing would look like. I generate 5 pargraphs and added it to my image using Verdana Regular 12pt as the font.
Photoshop Corporate Construction Company Layout

The last thing we will do is add our tag to the footer so that people will know who the site was designed by. The font is Verdana 12pt regular and the color is # 35393d. The puzzle piece is a default shape that you can find using the shape tool.
Photoshop Corporate Construction Company Layout

We’re finally done. Here is our finished layout. Click the image for the full size.
Photoshop Corporate Construction Company Layout

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join the TeamTutorials mailing list and get the latest tips, tricks, and special discounts for members only.

Thanks! Please click the link in the email we just sent you to confirm.

  • kirikoo

    briliant tutorial

  • wow.. I like this tutorials.. oOoo yea by the way.. Do you know any software that can convert that image files to HTML? I want to know for sure if there is any software that can convert the image files we design to HTML sources.. if you do know please inform me A.S.A.P!!

    ThanX!!!

  • Very basic thechinques but good as it shows many things that the rookie doesn’t know.

  • Brian Cook

    I was very impressed with the tutorial. I plan on sitting down and going through the rest of them in the near future. I like the step-by-step process.

    Thank you for your help.

    -BJC

  • maria

    thank you so much for this tutorials.. you took a lot of trouble to explain everything is detail.. I appreciated it so much.. you tought me a lot of things here! 😀 you made my life easier! Thanks!! 😀

  • very nice and easy to follow instruction, i need to learn more on photoshop to design my own website.

  • i have some basic skills on using photoshop, i will try to read this instruction because, i want to become website designer someday. thank

    – Connie

  • Wow, all tutor in this web is awesome! great… really thanks to you

  • SomaliDesigner

    It is nice tutorial and rich of trick of photoshop and designing as well. Thanks alot for your detailed explanation. I loved it really. It touch me new designing techniques. Thanks more than once.

  • Looks good. Simple to follow & result is very neat & corporate looking.
    Thanks.

  • This is a very good post! Keep them comming!

  • Thanks for your opinion