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.
Open Photoshop and create a new layer with 760px width and 550px height.
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.
Now we will add a simple pattern to the background so click on layer styles> Pattern Overlay.
Select the ‘Rectangle Tool’ and create a small rectangle with color #f4f4f4.
Again we will add a simple pattern to the above rectangle.
Now our background is done so let’s start with the title text. Select ‘Type tool’ and add text with color #ee8144.
Add some drop shadow to the text, so click on layer styles>Drop shadow and keep the settings same as the image.
Select the ‘Type tool’ again and add the tag line with color # c7c7c7 and add the drop shadow.
Now we will create a divider, so select the ‘Line tool’ to draw a line with 2px weight and #dfdfdf color.
Click on Layer styles> Drop shadow, to add some shadow to the above line.
Now let’s start with our timer or clock counter. Select ‘Rounded rectangle tool’ and create a small rectangle frame with color # c1561b.
Create another small rectangle with color # 2f2f2f, then click on layer styles> Inner shadow and keep the settings same.
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.
Now reduce the opacity of the above layer to 5%.
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.
Select the above layer and click on Filter> Blur>Motion Blur and keep the settings same as below.
Now repeat the same process and create rest of the rectangle boxes.
Select the ‘Type Tool’ and add some text to our counter. Keep the style same as above.
Now we’ll start with the subscription area. So first add the heading using ‘Type tool and add the drop shadow.
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.
Create another strip with color #f3fbfb and add stroke.
Now for the button create another rectangle with color # dc7034, then click on layer styles to add bevel and emboss and gradient.
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 DownloadLet's Design an Under Construction UI,
4 Comments to “Let’s Design an Under Construction UI”
Pageviews: 7136 · Back to Top