16
Feb
2013

Design under construction layout in photoshop

Posted in: Photoshop , Comments Off

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 that 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 the logo layer.

So, our logo look like this now.

Step: 5

Select rounded rectangle tool with 10px radius.
Rounded rectangle tool

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

Step: 11

Again select Rectangle shape tool and draw a shape as shown below using color #bbbbbb


Inside this box type some text.

Step: 12

Now we will add few social icons of size 64 X 64 px

Our “Under Construction” webpage layout is ready.


download psd file

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati
Both comments and pings are currently closed.

Comments are closed.