Web Design Blog | Web Design Fan | Resources for Web Designers and Graphic Designers

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.

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.

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.

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.

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.

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

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.

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.

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

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.

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

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.

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.

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.

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

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

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.

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

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.

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

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.

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.

Change foreground color to (#3D3C3B) and select Horizontal Type Tool (T), choose 14 pt size Arial (Italic) font and write short Twitter-like 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.

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.

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

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.

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.

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.

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.

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

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

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

Final Result

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.