PSDFan Extra

Create an Effective Coming Soon Page

Final Image

As always, this is the final image that we’ll be creating:

The Design Theory

I’ve always been a firm believer that it’s often the details that result in a truly great design. Surprisingly, this often applies more to very simple designs, with less content, as these designs are the most likely to appear boring or empty if you don’t pay attention to the details.

In this article I will talk you through how to construct a very usable, applicable coming soon web page. I will also be discussing why I’m doing certain things, and what we’re trying to achieve with each step. This way you’ll not only be able to create a similar design, but you’ll understand the importance of the details, and just how effective they can be.

Step 1

Create a new document (1000X650px).

Fill your canvas with 0b6e8f.

Step 2

Create a new layer called ‘top gradient’. Use your marquee tool to select the top 150px of your canvas. Then drag down a linear gradient ranging from 014c65 to transparent. This dark gradient will help create a sense of depth and variation in your background, and will also help draw your visitor’s eye downwards.

Step 3

Create a new layer called ‘background highlights’. We’re going to create a simple lighting effect to add more detail and depth to our page background.

Start by applies 3 radial gradients (white to transparent) over various areas of your canvas.

Then to make the effect more subtle change your layer’s blend mode to ‘overlay’ and reduce it’s opacity to 30%.

Step 4

Now that we’ve created a cool background design, it’s time to add some content!

Download this awesome Box Icon.

Paste it into the top-center of your canvas:

Step 5

As this icon will be a focal point of our design, we want to make it stand out. However, always be wary of maintaining a degree of subtlety. You don’t want to make anything too bold or obvious or it will ruin the overall cohesiveness of your design.

I apply a drop shadow and outer glow blending option to my box layer:

Drop Shadow:

- Blend Mode: Multiply
- Black
- Opacity: 15%
- Angle: 90 degrees
- Distance: 5px
- Spread: 0%
- Size: 10px

Outer Glow:

- Blend Mode: Overlay
- White
- Opacity: 30%
- Noise: 0%
- Spread: 0%
Size: 32px

Step 6

Now add some centered text underneath your box icon. You can view my text settings below:

Logo Text:

- Font Face: Mido
- Size: 48pt
- Color: White, and also: 4dcbeb
- Kerning: -50

Tagline Text:

- Font Face: Mido
- Size: 18pt
- Color: 1a9aba
- Kerning: -50
- Other Settings: Faux Italics (there was no italics option for this font face, so I had to apply it in my character window).

Now let’s look at what’s going on with this typography. First of all, the font face ‘Mido’ is elegant and professional. This fits well with the theme of the site, and our clean background design. We’re giving visual precedence to our logo text over our slogan, by making our logo text considerably larger, and by making our tagline text color closer to our background color (giving it a faded effect). The white and blue wording in the logo text help distinguish between the two words, and also add variety/detail. The faux italics effect on our tagline helps the visitor instantly recognize this text as a tagline, as many taglines do use italics.


Step 7

Now apply a subtle drop shadow blending option your text.

This will make it stand out more against your background, giving it more impact:

Drop Shadow

- Black
- Opacity: 15%
- Angle: 90 degrees
- Distance: 1px
- Spread: 0%
- Size: 1px

Step 8

Now create a new layer called ‘email form’.

Within this layer create a rounded rectangle underneath and to the left of your logo. Ensure that it has a 5px radius, and is white. Then reduce this layer’s opacity to 25%.

This gives a nice fade effect, and makes your email form fit with your subtle background design.

Step 9

Now create a new layer called ‘sign up button’ and create a 5px radius rounded rectangle to the right of your email form.

Apply the blending options shown below:

Inner Shadow:

- Blend mode: Multiply
- Black
- Opacity: 7%
- Angle: 90 degrees
- Distance: 3px
- Choke: 0%
- Size: 0px

Outer Glow:

- Blend mode: Overlay
- Opacity: 10%
- Color: White
- Spread: 0%
- Size: 15px

Gradient Overlay:

- Blend mode: Normal
- Opacity: 100%
- Gradient: Ranging from 055570 to 01384a

These settings will make your button really ‘pop’ yet still fit in with the rest of your subtle design. The subtle glow and inner shadow add depth to your button, making it appear to be slightly in front of the email form and background. This makes us want to push it naturally, much as we would do with a real-life button.

Step 10

Now we want to add even more ‘pop’ factor to our button.

Create a new layer called ‘button highlight’.

In your layers palette option+click on your button layer, to select it. Then with your selection in place return to your ‘button highlight’ layer and drag down a radial gradient (white to transparent) from the top center of your button.

Then change your ‘button highlight’ layers blend mode to ‘overlay’ and reduce it’s opacity to 25%.

This creates an extra lighting effect on your button, making it stand out even more:

Step 11

Finally, apply some text over your form/button (use the font Mido again).

Your layout is now complete!

Visual Hierarchy

If you look at the diagram below, you’ll see how I’ve structured the visual hierarchy to draw your eye down the page:

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome:

Download Source File for this Tutorial


Get more of our great design content direct to your inbox
Join our newsletter and receive our best weekly content by email. Also get access to hundreds of free design resources via your Designer Toolkit area.

About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment

12 Comments:

  1. This was a very nice tutorial. The outcome looks very good.

  2. Mike says:

    I like the design, very stylish!

  3. MarkT says:

    That’s so simple but so effective. And beautifully explained, Tom.

    (Thanks for showing us the radial-gradients-as-overlaid-highlights trick, by the way. I’d never known to do that until I started reading the tutorials here!)

  4. Amazing stuff… Can’t wait to try it out.

  5. Stuart says:

    Nice tutorial, always wondered how the focal point on a page actually works.

  6. menecio says:

    simple, clean and effective… thank you for sharing!

  7. Amr Boghdady says:

    Awesome tutorial
    Very simply layout, yet extremely effective
    I might use that for one of my site’s that’s still under construction, so people could subscribe to know when the site will officially open :)

  8. Tirath says:

    Awesome tutorial with nice Result
    Thanks so much for Showing us radial-gradients-as-overlaid-highlights trick it’s very fantastic and useful trick
    I learn so much for this
    Keep up good work
    God bless you :-)

  9. Be says:

    THIS IS BEAUTIFUL MADE!!! KEEP UP THE GOOD WORK!!

    :) :) :)

  10. Daniel says:

    Wow very easy to follow steps. This is actually my first photoshop

  11. Alysson says:

    Very nice tutorial

  12. Rob says:

    Nice one!
    Would be great to see how you can turn this into html with jQuery/Ajax. (like the coming soon plugin from CSSJockey does: http://www.cssjockey.com/freebies/custom-coming-soon-pages-wordpress-plugin)

Leave a Comment:

Related Posts

Subscribe to PSDFAN and Get Your Free Designer Toolkit

Have every post delivered to your inbox and get access to hundreds of useful design freebies.

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY