How to design a coming soon page in Photoshop

Nov 12th, 2010View Comments

Hello and welcome to another tutorial here on trendyTUTS.com. For today I’ll show you how to create a coming soon page in photoshop. To design a coming soon page is really important if you are about to lunch a new website, and is a pretty good marketing tool.

If it’s the first time when you came on trendyTUTS, I would like to let you know that we have dozens of other cool website layout tutorials on our Website Layout Tutorials section. Here you will find different kinds of psd templates (for various niche) and I’m sure that it will help you a lot!

If you’d like to download this photoshop template you will need to sign-up for a Premium Membership. As a premium member you will have unlimited access to the entire collection of PSD Templates (the source file for our tutorials), Premium Files and PSD to HTML Tutorials.

Here is my final result:

Design Coming Soon PSD Template

Let’s start the tutorial
Open Photoshop and create a new document (Ctrl + N)

Step 1

With  Rectangle Tool I will create a large shape, to cover the entire canvas. As a color I have used #98afb4. In this step you can use Paint Bucket Tool also…

Step 2

I will select Rounded Rectangle Tool with a radius of 10px I will create this shape  (color used : c0c0c0 ) and I will apply the following layer styles:

Step 3

I will select Ellipse Tool and I will create 3 black shapes, than I will apply for each shape a Gaussian Blur (Filter>Blur>Gaussian Blur) of about 11px.

Step 4

On the top of this shapes I will create with Rectangle Tool another 2 shapes. For the first one  (the orange one) I have used this color: # f38630 and for the second one (the blue one) this color: # 94ccd7

Step 5

I will select Type Tool and I will write “we’re coming soon” I have applied the following layer styles:



My result:

Step 6

With Ellipse Tool I will create this black shape and I will apply a Gaussian Blur of about 20px.

My result:

Step 7

With Rectangular Marque Tool, I will make this selection.

Once you have this selection hit Delete on your keyboard to delete that portion and Ctrl +D to unload the selection. I will lower the opacity to 60% also.

Step 8

I will select Type Tool, I will write “Get Notified” and I will apply this layer styles:


Step 10

With Type Tool I will continue to add some text:

Step 11

With Rectangle Tool I will create this shape

Step 12

With Pen Tool I will create this triangle

Step 13

On my Layer Palette is will select this 2 shapes created on Step 11 and Step 12.

I will press Ctrl + E to merge them together and I will apply this layer styles:



With Type Tool I will write “subscribe here”:

Step 14

On the right side, with Rounded Rectangle Tool with a radius of 10px I will create this shape (color: d7f0ef) and I will apply this layer styles:

Step 15

With Rectangle Tool I will create this 3 shapes and I will apply this layer styles:



Step 16

Next I will make a “Call to Action” button. I will select Rounded Rectangle Tool with a radius of 10px and I will create this shape. Color used # f38630, then with Type Tool I will write “Hook me up”

Step 17

Next I will select Type Tool I will write “We’ll be online in :” For this sentence I have applied this layer styles:



Step 18

With Rectangle Tool I will create this shapes and I will apply this layer styles:



Step 19

With Line Tool I will add this 2 lines on the middle of the shapes created on step 18

Step 20

With Type Tool I will add some numbers and I will write “days”. To create all of this I have applied the same layer styles from step 17

Step 21

I will repeat step 18, 19 and 20 for about 3 times
My result:

Here is my final result:

Design Coming Soon PSD Template

Want to Download the Source File?

In order to download the source file you will need to become a Premium Member.

Already a premium member? When you click on the download link please make sure that you are logged in.

The tutorial is finished now. I hope your result is the same with mine, if not better! If you’d like to know when we post a new tutorial, you can follow trendyTUTS.com on twitter.

  • Tirathkumar

    Hellow trendytuts
    Awesome tutorial
    Thanks so much for sharing your all amazing web layouts tutorials
    I learn so much new trick & tips from you
    your all tutorials are so detail and very easy to follows
    your all web layouts are so professionally design with nice color combination
    i appreciate your effort to educating people and sharing your all Amazing ideas
    I am a big friend of you
    keep up good work
    God bless you :-)

  • http://twitter.com/nestdev nestdev

    Nice Tutorial, Thanks For sharing, Submit your post : Nestdev.com :)

  • nate

    Great job… but how do you get the countdown to actually work and not be just static images?

  • http://trendytuts.com admin

    To get the countdown work you need to use a javascript file. Search on google “countdown script” and you will find plenty of them :)

blog comments powered by Disqus