Feb201116

By Ravi

Design under construction layout in photoshop

In this Photoshop tutorial we will design a “Under Construction” webpage layout in Adobe Photoshop. You can download the layer PSD file of the layout at the end of tutorial.

Final Preview

Before I start the tutorial, lets see the final image of the template layout we will design in this tutorial.

Step: 1

Create a new document (File >> New) of size 980 X 800 px with white background.

Step: 2

Fill the background with color #747677 color.

Step: 3

Apply noise to background layer.

Step: 4

In this step we will create logo. Put your logo icon in color #3d3a45

Using same color type your company name.

Now apply following layer style to logo layer.

So, our logo look like this now.

Step: 5

Select rounded rectangle tool with 10px radius.

And draw a shape in color #bbbbbb as shown below.

Apply following layer style to this shape layer.

So, it looks like this now.

Step: 6

Create a new layer and using text tool type under construction message in color #3d3a45

Apply following layer style to this text layer.

So, it looks like this now.

Step: 7

Select “Rectangle Tool”.

With color #f2f2f2 draw a rectangle shape as shown below.

Apply following layer style to this rectangle shape.

So, it looks like this now.

Make three more similar boxes as shown below.

Step: 8

Type time left in these four boxes as shown below.

Step: 9

Create new layer. Select text tool. Below time boxes, type some under construction message for site visitors.

Step: 10

Below this text box we will add a email subscription box. Select “Rectangle Tool” and draw a box using color #4c4c4c as shown below.

Now select #383838 color and draw a button as shown below.

Apply following layer style to this button shape.

Our button looks like this now.

On this button type submit.