Let’s Design an Under Construction UI

Hi guys, Today we will create an under construction UI. We all know designing an effective under construction page is very important when you are launching a new site or product. As it helps you connect with your visitors/users, they can subscribe to get the latest news about your site or product.  So today we will use different useful techniques and blending options to create our under constructed UI from scratch. So let’s get started.

Final Result:

Step 1:

Open Photoshop and create a new layer with 760px width and 550px height.

Step 2:

Create a new layer; click the ‘create a new layer’ option from the bottom right panel. Then select the ‘Paint bucket tool’ and fill the background with color #03cad6.

Step 3:

Now we will add a simple pattern to the background so click on layer styles> Pattern Overlay.

Step 4:

Select the ‘Rectangle Tool’ and create a small rectangle with color #f4f4f4.

Step 5:

Again we will add a simple pattern to the above rectangle.

Step 6:

Now our background is done so let’s start with the title text. Select ‘Type tool’ and add text with color #ee8144.

Step 7:

Add some drop shadow to the text, so click on layer styles>Drop shadow and keep the settings same as the image.

Step 8:

Select the ‘Type tool’ again and add the tag line with color # c7c7c7 and add the drop shadow.

Step 9:

Now we will create a divider, so select the ‘Line tool’ to draw a line with 2px weight and #dfdfdf color.

Step 10:

Click on Layer styles> Drop shadow, to add some shadow to the above line.

Step 11:

Now let’s start with our timer or clock counter. Select ‘Rounded rectangle tool’ and create a small rectangle frame with color # c1561b.

Step 12:

Create another small rectangle with color # 2f2f2f, then click on layer styles> Inner shadow and keep the settings same.

Step 13:

Create a new layer, and select the ‘Pen tool’ to create a shape. Right click on it to make the selection and fill it with #ffffff.

Step 14:

Now reduce the opacity of the above layer to 5%.

Step 15:

For the shadow, create a new layer and place it under the frame rectangle layer. Now select the ‘Marquee Tool’ and select a small area. Fill it with color # 202020.

Step 16:

Select the above layer and click on Filter> Blur>Motion Blur and keep the settings same as below.

Step 17:

Now repeat the same process and create rest of the rectangle boxes.

Step 18:

Select the ‘Type Tool’ and add some text to our counter. Keep the style same as above.

Step 19:

Now we’ll start with the subscription area. So first add the heading using ‘Type tool and add the drop shadow.

Step 20:

Select the ‘rounded rectangle tool’ and create a long strip with color # d0eff0. Then click on layer styles> Bevel and emboss and keep the settings same.

Step 21:

Create another strip with color #f3fbfb and add stroke.

Step 22:

Now for the button create another rectangle with color # dc7034, then click on layer styles to add bevel and emboss and gradient.

Step 23:

Simply select the ‘Type tool’ and add some text and we are done.

Hope you guys enjoyed the tutorial, I’ll be back with more fun stuff, till then Have fun!

Source File and Download

Download Source PSD