Create a Minimal Coming Soon Page in Adobe Photoshop

In this tutorial we are going to create a minimal Coming Soon page using Adobe Photoshop. The trend of using coming soon pages has increased in recent years, as I hardly remember anyone with a splash page in the 2000s. A lot of people and organizations have started using them to give some brief information about their upcoming (website/company/service). This way you can be “prepared” and “ready” for their launch. There is another, equally important, reason behind the coming soon page as well. You can set up a subscription or newsletter form and collect e-mails and use them for your (spam-free!) marketing campaign.

Final Coming Soon Page

Click for full resolution.

Resources for this Tutorial:

• iconSweets 2
• Premium Pixels’ Free Seamless Grid Patterns

Download PSD Here

Step 1

Create a new document 1020 pixels width and 700 high. This size is great for coming soon/error and other similar pages. Make the background a light grey and apply some noise to it (Filter->Noise->Add Noise).

Step 2

Create a 700×400 pixel white shape. Set the Fill to zero and apply any seamless (transparent) pattern.

Step 3

Use Helvetica in two weights (regular and bold) and two sizes (30 and 12pt) place two catch phrases/slogans. The best thing is to write down some info that will describe your upcoming website.

Step 4

By using 12px lowercase Helvetica and icons from the IconSweets2 set, create two horizontal groups of elements. Each element must consist of one icon and one link. I’ll set it with three elements for each row.

Step 5

We move on to creating one of the most important elements in a coming soon page, a countdown counter. By using the Rounded Rectangle Tool (U), create a shape of 140×140 pixels. Apply a Drop Shadow with 15% of opacity.

Step 6

Apply some Inner Shadow. Even if the shape looks blurry at the moment, the Inner Shadow will be visible when we finish the shape.

Step 7

Add a Gradient Overlay effect with the blend mode set to: Soft Light and 55% opacity.

Step 8

Finish the shape by adding a stroke. Set the Fill Type to Gradient and the Angle to 90 degrees.

Step 9

By using the League Gothic font, 92px, input a random number. This will show the number of remaining days until the website launch. Apply some Drop Shadow to the text and numbers.

Step 10

Duplicate these boxes three times and place them accordingly. By using the Elipse Tool (U), you can create small dark circles which would work as dividers for the boxes.

Step 11

Under the countdown widget we will be creating an input form. It will allow visitors to input their email so they can be notified when the site launches. Create the form by using the Rounded Rectangle Tool. Set its color as gray and apply some inner shadow effect.

Step 12

Apply a Gradient Overlay effect. Apply the same blend mode, with an opacity of 20%.

Step 13

Finish the form by adding a gray stroke.

Step 14

We’ll have to finish our “subscribe” widget by adding a button which would submit the information in the form. By using the Rounded Rectangle Tool (U), create a shape which will be the base of our button. Apply some inner shadow effect.

Step 15

We can apply a nice touch to our button by using a bit of Bevel and emboss. This will make the second half of our button a little bit darker, a pretty nice effect. Set the size to 2px, set the opacity for white to zero% and set the opacity for gray to 15%.

Step 16

Apply the same Soft Light Gradient Overlay effect we’ve been using for various elements in this layout.

Step 17

Finish it by applying a stroke effect, with some really dark gray colors.

Step 18

By using the Type Tool and Helvetica font, input some text on the button.

Step 19

Under the button we will place a few social media icons. I grabbed mine from the IconSweets2 icon set. Gave them a really nice bright color. To achieve the “handwritten” effect, we will be using the Journal font. To bend that line, you will have to create a slash and apply the Warp Text feature with an  Arc. It is a lot easier than you can imagine, and it will take you only a couple of seconds to achieve that effect.

Final Result (Click for a Larger Version)