Note technology rapidly evolves and this tutorial is over 3 years old, as a result some of the practices used in this tutorial may be out of date.

Create a Professional Coming Soon Landing Page PSD Template

coming-soon-thumb

Here we’re going to show you how to create the Coming Soon/Under Construction PSD template shown below designed to match the Slate Grey variation of our Awake WordPress Theme.

You can download all 25 color variations here: http://webtreats.mysitemyway.com/awake-coming-soon-template-layered-psds/

final-coming-soon-PSD-template

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-1 coming-soon-base-layer-style-3 coming-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-1 logo-layer-style-2 logo-layer-style-3 logo-layer-style-4 logo-layer-style-5 logo-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-2 social-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-1 shading-layer-style-2 shading-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-1 coming-soon-layer-style-2 coming-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-1 form-layer-style-2 form-layer-style-3 form-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-1 button-layer-style-2 button-layer-style-3 button-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-1 button-text-style-2

Thats it!

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

final-coming-soon-PSD-template

What’s Included in the Download

  • Fully layered source PSD
  • All assets need to complete the tutorial.
Download
You might also like
Construct Wordpress Theme Red and White Pearl Download Icon Coffee Stain Social Networking Icons Tutorial Modular Wordpress Theme Watercolor Social Networking Icons Echelon Wordpress Theme Grunge Yellow Warning Striped Icon & Text Effect Adding Versatile Button Shortcodes to your WordPress Theme 3D Transparent Glass Text Effect Glossy Black Button Icons Glossy Silver Web 2.0 Icon Tutorial Blue Retro Grunge Text Effect and Icons How to use Google Analytics Content Experiments Brushed Silver Reflective Text Effect Matte White Square Check Mark Icon Method Wordpress Theme Persuasion Wordpress Theme Myriad Wordpress Theme Grungy Rusted Carbon Fiber Text Effect Crystal Clear Bubble Icons Dejavu Wordpress Theme Fusion Wordpress Theme Elegance Wordpress Theme Data URI Tileable Transparent Patterns

46 comments on “Create a Professional Coming Soon Landing Page PSD Template

  1. San says:

    You guys truly rock…!

    Can’t wait for part 2…the coding. Hope you guys can get this done soon before we launch… :)

    This looks great and I plan to use it.

    September 21, 2010 1:25 pm
    Reply
  2. San says:

    Hi guys, would love to implement this on my site (infocus). Can you direct me to resources how to code this so it works…or do you have a timeline already when your part 2 (the coding) will come out?

    October 11, 2010 2:35 pm
    Reply
    1. Pamela says:

      Hi San,
      Unfortunately it will probably be awhile before we write the tutorial, and I don’t know of any tutorials that explain how to do this.
      We will probably release a coded version soon though on webtreats.mysitemyway.com.

      October 16, 2010 9:01 am
      Reply
  3. Steve says:

    How is thata abstract background created? pen tool? I cant seem to figure it out how to do it ;(

    November 8, 2010 12:52 am
    Reply
    1. Pamela says:

      Hi Steve,
      It’s actually created with the ellipse shape tool, using outer glow, gradient and stroke layer styles. We hope to have a tutorial for this soon.

      November 10, 2010 10:02 am
      Reply
  4. Josh Ledgard says:

    Great tutorial on building a good template. If someone wants a pre-built one they could also create a free landing page on http://www.kickofflabs.com. You can still use your cool PSD in the background… but let us do all the viral tracking and signup work for you.

    Thanks,
    Josh Ledgard
    Founder KickoffLabs

    September 5, 2011 12:52 pm
    Reply

    September’s Fresh Photoshop Web Layout Tutorials

    Landing Page Robot Review – is This a Scam? - You only get one shot to stick the landing! - LandingPageAnswers.com

    Nice Web Design Tutorial photos « // bVnned

    Fresh Photoshop Web Layout Tutorials | DownGraph - Your Graphic World

    Some useful tutorials to design “Coming Soon” page for beginners | Webgranth

    TUTO – Page de Coming Soon | Webdesign Mag

    Tutorial on How to Create Coming Soon Landing Page | Web Page Status

    Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials

    Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials | 20 One | Designers Blog20 One | Designers Blog

    Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials | FACEBOOKLIFE

    Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials | Ruturaj Pradeep Kohok | Your Web Advisor

    Thien Ho

    Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials | BuildGFX

    Design Beautiful “Coming Soon” Templates & Tutorials | 39Articles

    Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials | All of Cyber

    Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials | Tutorial,Download,Tips & Trick

    Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials | Marketing for Companies

    Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials | free Brushes

    Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials Web Burning Blog

    Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials | Hoabinh Design | Free Download Vector – Stock, Wallpaper, Photos, Free Templates Wordpress Premium, Templates Joomla, Free Fonts, Make Money, Tool Tips

    37 hermosas plantillas y tutoriales de páginas “En Construcción” | Pixaf Blog

    Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials | Best Brushes

    Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials | Indoor Digital Billboards

    Design Beautiful “Coming Soon” Page: 37 Templates | News and Blog

    Create a Sleek Coming Soon Page in Photoshop | CS5 Design

    “Coming Soon” 35+ Amazing Page Templates | DesDevWeb

    37个精美的“即将推出”网页设计模板及教程欣赏 - 爱无涯

    Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials | GeoWorldOnline (GWO) Computing community

    » Template en PSDs

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>