How to Design an Under Construction Page



In this tutorial you will learn how to create a simple under construction page design in Photoshop. We will be using simple techniques to create a clean under construction page from scratch. You will see how to create a simple background and how to use blending options to stylize typography. Hope you will find this tutorial useful and you’ll learn something new. Please share your thoughts about this tutorial and the final result in comments section below.

Source File

To download the source file, you must be a member of the Web Design Fan Club. Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. Read more about our club here.
under-construction.zip (632 KB)

Tutorial Resources

Fonts: Bebas Neue and Arial

Icons: Social Media Sleek Icons: Icon Pack

Preview

Click on the image below to see the work in full scale.

Preview

Step 1: Create a new document

Open Adobe Photoshop and start by creating a new document CTRL+N. Then make the document 1200 px by 650 px with a white background.

Create a new document

Step 2: Guidelines

We need to add some guidelines. Go to View > New Guide… and add following guidelines: vertical at 200 px, 220 px, 980 px and 1000 px, horizontal at 100 px and 600 px.

Add guidelines

Step 3: Background

At first create a new group (Layer > New > Group…) called “Background”. After that click twice on background layer and unlock it, then move it inside the group and set foreground color to dark grey (#3A3938) and fill your background with it by clicking Alt+Backspace. After that go to Filter > Noise > Add Noise… and set Amount value to 1%, Distribution set to Uniform and check Monochromatic option if not checked.

Noise

Step 4: Header

Now minimize “Background” group by clicking a small grey arrow next to the group name. After that create a new group (Layer > New > Group…) and name it “Header”. After that pick Horizontal Type Tool (T), choose 36 pt size Bebas Neue font and write your website title.

Website title

Now click right mouse button on website title layer and choose Blending Options… then apply following options.

Drop shadow

Gradient overlay

Website title with style

Step 5: Body

Now minimize “Header” group by clicking a small grey arrow. After that create a new group (Layer > New > Group…) and name it “Body”. Then create a new layer (Ctrl+Shift+N) called “Body” and set foreground color to (#F6F6F6). Pick Rounded Rectangle Tool (U) with 5 px of Radius and draw a rounded rectangle between the horizontal and vertical guidelines as shown on the example below.

Rounded rectangle

Now go to Filter > Noise > Add Noise… and set Amount value to 0,5%, Distribution set to Uniform and check Monochromatic option if not checked.

Add noise

Now click right mouse button on “Body” layer and select Blending Options… after that apply Outer Glow option.

Outer glow

Now pick Horizontal Type Tool (T), choose 48 pt size Bebas Neue font and write “THIS WEBSITE IS CURRENTLY UNDER CONSTRUCTION”. After that place it 30 px below the first horizontal guideline.

Under construction

Click right mouse button on just created text layer and select Blending Options… and then apply Gradient Overlay option.

Under construction gradient overlay

Now create another group inside the “Body” group. Go to Layer > New > Group… and name it “Lines”. After that create a new layer (Ctrl+Shift+N) and name it “Light”. Then change foreground color to (#FBFBFB) and pick Pencil Tool (B), set Brush size to 1 px and holding Shift button draw horizontal line between the first and the fourth vertical guidelines. Finally move it 31 px below the text.

Light line

Now change foreground color to (#EBEBEB) and create a new layer (Ctrl+Shift+N) called “Dark”. Then choose Pencil Tool (B) again and draw another 1 px size line above the first one.

Light and dark lines

Minimize “Lines” group by clicking small grey arrow next to the group name and change foreground color to (#3D3C3B). After that pick Horizontal Type Tool (T), choose 14 pt size Arial font and write a short description between the second and the third vertical guidelines. Finally move description text 30 px below the lines.

Short description

Now click right mouse button on description text layer and select Blending Options… then apply Drop Shadow option.

Description drop shadow

Click right mouse button on group called “Lines” and select Duplicate Group… then move duplicated lines group 30 px below description text.

Duplicated lines

Create a new layer (Ctrl+Shift+N) and name it “Time”, then grab Rectangular Marquee Tool (M) and make 800×130 px size selection as shown on the example below.

Make selection

Change foreground color to black (#000000) and fill selected space by clicking Alt+Backspace. After that reduce layer Opacity to 6%.

Time opacity

Now change foreground color to (#3D3C3B) and pick Horizontal Type Tool (T), choose 48 pt size Bebas Neue font and write how much time left.

Time left

Click right mouse button on time text layer and select Blending Options… after that apply following options.

Time drop shadow

Time gradient overlay

Time left with style

Now click right mouse button on “Lines” group and select Duplicate Group… after that move duplicated lines below the “Time” layer. Then move “Light” line above the “Dark” one. An example shown on the picture below.

Time left lines

Now go to Social Media Sleek Icons: Icon Pack and download these beautiful icons. After that pick 32 px size twitter.png file and drag it to your Photoshop window. Then using Move Tool (V) drag this icon to your current document and place it 30 px under the lines.

Twitter

Change foreground color to (#3D3C3B) and select Horizontal Type Tool (T), choose 14 pt size Arial (Italic) font and write short Twitter-like message.

Twitter message

Find description text layer and click right mouse button on it and select Copy Layer Style. Then go back and click right mouse button on Twitter message and select Paste Layer Style.

Twitter message with style

Change foreground color to (#E8E8E8) and pick Rounded Rectangle Tool (U), set Radius to 5 px and draw 305×32 px size shape as shown on the picture below. Place it 30 px below the lines.

Shape

Click right mouse button on shape layer and select Blending Options… after that apply Stroke option.

Shape stroke

Shape with stroke

Change foreground color to (#3D3C3B) and pick Horizontal Type Tool (T), choose 13 pt size Arial font and write “Enter Your Email Address…”. After that find Twitter message text layer and click right mouse button on it and select Copy Layer Style, then go back and click right mouse button on just created text layer and select Paste Layer Style.

Email address

Create a new layer (Ctrl+Shift+N) and name it “Separator”. Change foreground color to (#D7D6D6) and pick Pencil Tool (B), set Brush size to 1 px and draw short vertical line to separate shape to two parts. An example shown on the picture below.

Separator

Now pick Horizontal Type Tool (T), choose 13 pt size Arial font and write “SUBMIT”. After that find “Under Construction” text layer and click right mouse button on it and select Copy Layer Style. Then go back and click right mouse button on “SUBMIT” text layer and select Paste Layer Style.

Submit

Now click right mouse button on group called “Lines” and select Duplicate Group… after that move new group with lines 30 px under the Twitter message and email field.

Lines

Change foreground color to (#8E8E8E) and pick Horizontal Type Tool (T), choose 14 pt size Arial font and write your copyright information.

Copyright

Finally pick five or more favorite social network 32 px size icons and place them on the right as shown on the example below.

Social icons

Congratulations! We’ve done our under construction website design. Hope you learnt some new techniques that will help you in future projects.

Final Result

Preview

Our fantastic deals of MB6-295 and MB7-842 make your success certain for the final MB5-292. You can get 70-528 easily from our website.



Comments
  1. Hey Tomas
    the final result looks good simple and easy, keep going!
    MEHDI

  2. Hey that’s a great tutorial, I like the way the under construction page has a countdown on it, to be honest I don’t think I have seen one like that before, great idea!

  3. Very useful tutorial thank you for sharing!

  4. Amazing, simple and powerfull. Thank you for shanring

  5. Nice blog. The article has elaborated every step very clearly. It is good tutorial for professionals.

  6. Lesson is clear and understandable Thank you

  7. I like minimalism in web design and I do like your template Tomas. Social icons are the only graphical elements on the overall design so it looks clean and simple.

    I especially love when designers use those giant, majestic types on templates, because they stand out and do not require any additional text effects, just proper typeface.

  8. Good information given. Many Thanks.