How to Create a Coming Soon Template in Photoshop

Professional Coming Soon Landing Page

Building a website requires days, sometimes months of planning, coding and retouching. But if you already bought the domain name, there`s no reason why you shouldn`t do something. In this case, a coming-soon template is a must have. For this reason, I created a tutorial which shows you how design a very nice and clean coming-soon template in Photoshop in a very few steps which fits for any needs.

Step #1 – What you’ll need.

You will need to download the social media shapes and the background image below:

facebook-logo-squaremyspace-logorss-basictwitter

awake background

Click here to download all tutorial assets in zip file.

Step #2

Open the background image you downloaded and crop it down to 1200px by 800px, anchoring it to the top as shown below:

coming-soon-template-step2

Step #3

Activate the shape tool by typeing U. Select the rounded rectangle shape and set the radius to 6px as shown below. Open the “Rounded Rectangle Options” box by clicking on the little blue down arrow on the right, set it to a fixed size of 900px by 500px, and check the “Snap to Pixels” option.

coming-soon-template-step3

Step #4

Create two guidelines at 150px on the x-axis and 100px on the y-axis as shown below. Then click once on their intersection and you will end up with something that looks like the image below:

coming-soon-template-step4

Step #5

Activate the layer styles dialog box on your shape layer by double clicking on it or by going to LAYER >> LAYER STYLE >> BLENDING OPTIONS in the menu. Then enter the settings below:

coming-soon-base-layer-style-1coming-soon-base-layer-style-3coming-soon-base-layer-style-2
To create a custom gradient, click on the gradient thumbnail to bring up the “Gradient Editor” dialog box and use the values shown below.

coming-soon-base-layer-style-gradient

Step #6

Create a new layer above the rounded rectangle layer by going to LAYER >> NEW >> LAYER in the menu, activate the text tool by typeing T, then type in your site name using the character palette settings below:
If you want to use the exact same font we used you can download it for free here: http://www.fontsquirrel.com/fonts/DejaVu-Sans.

coming-soon-template-step6

STEP #7

Double click on the rectangle layer you just created in the layer palette to bring up the layer styles dialog box, then enter the settings below:

logo-layer-style-1logo-layer-style-2logo-layer-style-3logo-layer-style-4logo-layer-style-5logo-layer-style-6

STEP #8

Create a new folder by going to LAYER >> NEW >> GROUP in the menu and label it “Social Media.” Within that folder use the rounded rectangle shape tool to draw a rectangle like the one shown below with a radius of 4px, the color set to black, and the dimensions set to “Unconstrained.”

awake-social-media-rounded-rectangle

STEP #9

Activate the layer styles dialog box on the rounded rectangle shape layer, and then enter the layer styles settings below:

social-media-bg-2-2social-media-bg-2

Step #10

Open the four social media images you downloaded in Step #1 and copy/paste them into your document. Then arrange them as shown below:

awake-social-media-shapes

Step #11

Copy the layer styles from the logo by right clicking on its layer in the layer palette and selecting “Copy Layer Style.” Then highlight the four social media shape layers, right click on them, and select “Paste Layer Style” as shown below:

paste-awake-social-media-layer-styles

Step #12

Create a new folder by going to LAYER >> NEW >> GROUP in the menu and name it “Shading.” Create a new layer by going to LAYER >> NEW >> LAYER in the menu. Activate the gradient tool by typeing G, makeing sure the black to transparent gradient is selected and that the gradient tool is in radial gradient mode. Then drag the mouse as seen below:

radial-gradient

Step #13

Reduce the opacity of the radial gradient layer to 8% and transform it into the shape shown below by going to “Edit > Transform > Scale” in the menu.

radial-gradient-transform

Step #14

Activate the shape tool by typeing U. Select the rectangle shape and set the “Rectangle Options” to a fixed size of 900px by 135px as shown below.
Then create a new guideline 315px on the y-axis and click once on its intersection with the guideline from step #4 and you will end up with something that looks like the image below:

shape-layer-shading

Step #15

Activate the layer styles dialog box on the rectangle shape layer you just created and then enter the layer styles settings below:

shading-layer-style-1shading-layer-style-2shading-layer-style-3

STEP #16

Create a new folder and name it “Text.” Activate the text tool by typeing T. Then type “Coming Soon” using the character palette settings below and then drag the text layer until it’s centered like the image below:

coming-soon-text

STEP #17

Activate the layer styles dialog box on the “Coming Soon” text layer you just created and enter the layer styles settings below:

coming-soon-layer-style-1coming-soon-layer-style-2coming-soon-layer-style-3

Step #18

Below the “Coming Soon” title create a new layer and type in some description text using the character palette settings below:

coming-soon-description

Step #19

Activate the layer styles dialog box on the description text layer and enter the layer styles settings below:

description-layer-style

Step #20

In the middle of the shaded rectangle from step #14 create a new text layer and type in your countdown text like we have below, alternating between 18px for the words and 46px for the numbers. Then copy/paste the layer styles from the “Coming Soon” title in Step #17.

count-down-text

Step #21

Activate the shape tool again. Select the rounded rectangle shape with a 4px and open the “Rounded Rectangle Options” box and select a fixed size of 300px by 50px as shown below.

name-form-element

Step #22

Activate the layer styles dialog box on the rounded rectangle shape layer you just created and enter the layer styles settings below:

form-layer-style-1form-layer-style-2form-layer-style-3form-layer-style-4

Step #23

Above the rounded rectangle layer you just created, add a new text layer and type “Name:” with the character palette settings shown below:

name-text

Step #24

Highlight the the rounded rectangle layer and the “Name:” layer in the layer pallet and duplicate them by going to “Layer > Duplicate Layer” in the menu. Then drag the duplicate layers to the right and change “Name:” to “Email:” as shown below:

duplicate-form-element

Step #25

Activate rounded rectangle shape tool with a 4px radius, this time with a fixed dimension of 180px by 50px as shown below and place it alongside the form fields as shown below:

button-shape

Step #26

Activate the layer styles dialog box on the button shape you just created and enter the layer styles settings below:

button-layer-style-1button-layer-style-2button-layer-style-3button-layer-style-4

Step #27

Create a new text layer and type in “Notify Me!” with the layer palette settings shown below:

button-text

Step #28

Activate the layer styles dialog box on the “Notify Me!” text and enter the layer styles shown below:

button-text-style-1button-text-style-2

Thats it!

You should now have something that looks like what you see below.

final-coming-soon-PSD-template

You can download all 25 color variations here:

0 I like it
0 I don't like it