Have every post delivered to your inbox and get access to hundreds of useful design freebies.
Coming soon pages are generally very simply when compared to regular websites. However, they’re notoriously difficult to get right. The simplicity of the concept can actually overwhelm many designers, as they end up with a boring, lackluster design.
Today, we’ll look at how to design a simple, but effective coming soon page, and some of the theories to bear in mind.
This tutorial is actually inspired by one of our readers, who dropped me an email a couple of days ago:
“Hi I just signed up to get updated on the new site you guys have coming soon http://www.blogs.fanextra.com/ and I really liked the design you guys made for the page right now with the wavy lines and and gradient. Do you guys have a tutorial where you show this technique?”
In case you haven’t seen, we’re launching a new blog as part of our FanExtra Network. Check out Blogs.FanExtra today and sign up to be notified of our launch.
Generally you want to keep your coming soon page as simple as possible. You either want to simply inform people that your site is coming soon, or more often than not allow them to sign up to be notified of your launch. Therefore any other features that depart from these motives are unnecessary. Thus the typical features of a coming soon page are:
Coming soon pages may be very simple in terms of content, but are a perfect example of how you should pay attention to the details. By using good lighting, effective drop shadows and other subtle details you can really make a simple page very eye-catching.
Take note of this whilst reading the tutorial below:
Here is a preview of the image that we are going to be creating:
Create a new document (1000X700px) and fill your background layer with a linear gradient ranging from 11cbef to 0d94cc.
Now create a new layer called ‘highlight’.
Drag out a white to transparent radial gradient from the top-center of your canvas. Then reduce this layer’s opacity to 25% and change the layer’s blend mode to ‘overlay’.
Apply another highlight layer slightly higher up in your canvas, adding further lighting to your background:
Now download the fractal brush set from the resources for this tutorial.
Create a new layer called ‘fractal brushes’. Apply one of the brushes using a white paintbrush, roughly over the top-center of your canvas.
Then reduce this layer’s opacity to 60% and go to layer>layer mask>reveal all. Use a large, soft, black paintbrush to mask off the edges of your fractal brush mark. This should provide a subtle detail for your background.
Now paste in a large version of your logo’s icon design. Position this in the top-center of your canvas.
Then change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 35%.
Create a layer mask, and mask off the edges of this logo shape.
Now paste your complete logo into the center of your canvas.
Apply an outer glow blending option:
Outer Glow Settings:
Blend Mode: Overlay
Now apply some centered text underneath your logo area.
Smaller White Text Settings:
Font Face: DejaWeb
Medium Blue Text Settings:
Font Face: DejaWeb
Then add a subtle drop shadow blending option to your text layer, in order to add definition.
Drop Shadow Settings:
Blend Mode: Multiply
Now apply two rounded rectangles (10px radius) underneath your welcome text. Make sure that these rounded rectangles are 7acce8 in color.
Then apply a 1px stroke blending option to each rounded rectangle layer:
Now create a third rounded rectangle to the right of your form. This rounded rectangle will act as your submit button.
Apply a gradient overlay and stroke blending option to this layer.
Gradient Overlay Settings:
Blend Mode: Normal
Gradient Ranging From: 016386 to 0181af
Create a new layer called ‘button highlight’.
Option+click on your submit button layer in your layer’s palette. This will select the shape of your button.
With this selection in place, create a small white-transparent radial gradient. Then change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 15%. This should create a subtle lighting effect over your submit button.
To finish, just type out some text over your form, and add a basic copyright notice.
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.
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.
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.