Design Sleek and Clean Coming Soon Page in Photoshop

Welcome to this tutorial here on Vivid Loaded Designs which you’ll learn how to design your coming soon page for your next website! What we’ll depend on is two main colors, black & yellow … as well as using gradients, patterns, icons and so … let’s see what we can get!

The Final result:

Tutorial Details

Program: Adobe Photoshop

Version: CS6 (you can also do it by CS4, CS5)

Difficulty: Easy

Estimated Completion Time: 1.5 Hour

 

Resources you’ll need:

Weby Icon Set by IconsPedia

Booklovers Media Icons

Fonts Pack (3 Fonts)

Creating the Background and the General Design Look:

Open up a new Photoshop document by going to (File > New) “Ctrl + N” (That is Cmd+N on the Mac)… and let it be with the following settings:

 

Fill your layer up with the color value #0d0a0a … then label this layer “Background” … you may get background like this:

The next step is to go to (View > New Guide), then apply 4 guides with the following values:

200px (vertical), 1000px (vertical), 99px (horizontal), 488px (horizontal), 526px (horizontal), you’ll get something like this:

Note: You can hide the guidelines for now by pressing “Ctrl+;” and show it again in the same way.

Download the pattern (1) I’ve listed in resources above, then add it to your PS, then create new layer by going to (Layer > New > Layer) “Shift + Ctrl + N” and fill it up with this pattern. Set the opacity on 6%.

Another pattern will be added here, download the other one as well then add it and make another new layer, fill it up with this pattern. Set the opacity on 25%.

 

Creating the Header Background:

To create the header background we’ll use some nice PS techniques and we’ll add beautiful icons as well, the first thing to do is to pick up any color then select the “Rectangle Tool” (U) then start drawing the shape (it should be 1200px width & 62px height) just as the following one:

The next step is to select the “Rounded Rectangle Tool” (U) with 5px radius, then draw a shape like the one you see below (it should be almost 550px width & 52px height):

Now select these both shape layers and press “Ctrl+E” to merge them into one, label it “Header_BG”, then rasterize it (click on it by the right mouse button and chose “Rasterize Layer”. Once you did, apply the following “Bevel & Emboss, Color Overlay, Outer Glow” settings (go to Layer > Layer Style):

 

Now it’s done! This is my result:

 

Creating the Top Icons:

Download the icon set by “Minicons by Asher” and add the following icons above the “Header_BG” layer.

Note: use “Ctrl + T” to get handles around the icon so you can control the size as you want.

This is my result:

Use the “Horizontal Type Tool” (T) to type titles using the following character settings:
Font Family: Calibri (it’s default), Size: 20pt, Color: #181818, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

This is my result:

Note: I prefer to keep my document tidy and organized, so I’ll select all icons and text layers then go to (Layer > New > Group from Layers) to gather them into one group, I labeled it “Top Icons”.

Adding Socials Icons:

What we’ll need now is to select the “Line Tool” (U) with weight: 1px, on stroke (solid color) and white color #ffffff.

Start drawing now while you’re holding the “Shift” key from keyboard and be sure to get almost 436px line, and once you’re happy with it, rasterize the layer and reduce the opacity to 62%.

Make a new layer (Layer > New > Layer) then select the “Elliptical Marquee Tool” (M) and make a selection like below:

Fill it with the white color #000000 then label it “Shadow”.

Now go to (Filter > Blur > Gaussian Blur) and apply the following settings:

As you see, we need to remove the unwanted parts (above the line); you can use the “Rectangular Marquee Tool” (M) to select it then press “Del” key from keyboard. Once you finished that, reduce the layer opacity to 42%.

Download “Booklovers media icons” and add the icons you want to your layer. We’ll also use the “Rectangular Marquee Tool” (M) (the same way we already did) to remove a bit parts from each icon bottom, and be sure to remove exactly the same divided part from every icon.

You may get something like this:

 

Creating the Logo and Title:

Set the color on value #625c1f then select the “Polygon Tool” (U) with 4 sides and no stroke (solid color), draw a shape like the following one then rasterize the layer:

Apply the following “Outer Glow” settings (go to Layer > Layer Style):

Now type the letter “V” using the “Horizontal Type Tool” (T) and the following character settings:
Font Family: BankGothic Md BT, Size: 30pt, Color: #f8f8f8, Weight: Medium, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Then apply the following “Outer Glow” settings (go to Layer > Layer Style):

This is what you may have:

It’s time to type the tile “Vivid Loaded Designs” with “Horizontal Type Tool” (T) and using the following character settings:
Font Family: BankGothic Md BT, Size: 30pt, Color: #625c1f, Weight: Medium, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Apply the following “Outer Glow” settings (go to Layer > Layer Style):

This is the result:

 

Typing “Coming Soon” Text:

It’s so easy to do this, all that you need is to set the color on value #ffffff (white) then select the “Horizontal Type Tool” (T) and type it using the following character settings:
Font Family: Garamond Premier Pro, Size: 48pt, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 200.

Apply the following “Outer Glow” settings (go to Layer > Layer Style):

Note: notice that the text should be almost 102px far from top (we use the guidelines for more help).

This is the result:

 

Creating “Who We Are” Box:

Set the color on value #121212 then select the “Rounded Rectangle Tool” (U) with 10px radius and no stroke (solid color). Now draw a shape (800px as width and 120px as height) and rasterize the layer.

Once you’re happy with the shape, apply the following “Stroke and Outer Glow” settings (go to Layer > Layer Style):

 

Use the “Horizontal Type Tool” (T) and type it using the following character settings:
Font Family: Corbel, Size: 18pt, Color: #c8c8c8, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 25.

Use the “Horizontal Type Tool” (T) to type the text “Who We Are?” using the following character settings and be sure to let locate exactly on the edge of background rectangle:
Font Family: Corbel, Size: 24pt, Color: #ecdd36, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 25.

You should get something like this:

 

Creating the Counting:

Select the “Line Tool” (U) with weight: 1px, on stroke (solid color) and white color #ddce28.

Start drawing the line all over your layer (width must be 1200px) while you’re holding the “Shift” key from keyboard.

Note: the line should be 411px far from top (use guidelines for more help).

Once you’re happy with it, rasterize the layer and label it “Counting_line”.

The next step is to draw some circles … and to do that we need to select the “Ellipse Tool” (U) with the same color value #ddce28 and start drawing small one just like below:

Now rasterize the circle layer and duplicate it 4 time … now you’ll have 5 circles, let them locate with various distances … just like below:

Use the “Horizontal Type Tool” (T) to type some numbers using the following character settings:
Font Family: Freefrm710 BT, Size: 60pt, Color: #ffffff, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

This is the result:

Keep selecting the same tool to type the words “Months, Weeks, Days, Hours, Minutes” using the following character settings:
Font Family: Garamond Premier Pro, Size: 24pt, Color: #ffffff, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 50.

And this is what you should get:

 

Creating the Email Notification:

Set the color on white #ffffff, select “Rounded Rectangle Tool” (U) with 5px radius, then draw a shape like the one you see below (it should be almost 288px width & 38px height). Once you’re happy with it, rasterize the layer and label it “Mail_form” then reduce its opacity to 20%.

Note: notice the guidelines (we’ve created at the top of our tutorial and how we use them here).

With the same tool, color and radius draw another shape (112px width & 38px height), once you’re happy with it, rasterize the layer and label it “Notify_button” then apply the following “Gradient Overlay” settings (go to Layer > Layer Style):

This is the result:

Add the email icon from () and use “Ctrl+T” to control the size then let it locate like you see below, and then reduce its opacity to 45%.

Now, use the “Horizontal Type Tool” (T) to type the text “your email here …” using the following character settings:
Font Family: Arial (it’s default), Size: 15.91pt, Color: #6d6d6d, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

And the text “Get Notified!” using the following character settings:
Font Family: Arial (it’s default), Size: 15.91pt, Color: #3b3b3b, Weight: Bold, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

And the text “Be the first one to know when we launch!” using the following character settings:

Font Family: Garamond Premier Pro, Size: 24pt, Color: #8a8a8a, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

 

Conclusion

Our tutorial has done! I hope you find it useful and good-explained … I’ll be happy to see your comments below and know what you think about it, as well as see more results of your work.

Download Source Files

Download the free PSD for this tutorial that is licensed under the Creative Commons license. Of course, attribution is required and appreciated.

Sleek and Clean Coming Soon Page (283 KB, RAR).