How to Create a Minimalist Coming Soon Page in Photoshop

On 7 May, 2012 By With 8 Comments

Having a Coming Soon page on your newly acquired domain will help your users that you are working on the background of the site. Since you wanted to make an impression for your users, your coming soon page should be designed well.

Today we will create a coming soon page using the minimalist approach, we will also go each step to show you the basic of design and explain how to use simple techniques to create an amazing design. Another thing you should remember is to put an opt-in form or newsletter sign up form, this is another way to build your mailing list.

You can download the PSD at the bottom of this tutorial!

Download and install the brush first;

Rising Sun Brush: Download here.

End Product

comingsoonpage1 How to Create a Minimalist Coming Soon Page in Photoshop

 

As you can see we added a timer so the users will know when is the website launch, newsletter form at the bottom and some textures on our header. Enough chit-chat, let’s start!

1 canvas How to Create a Minimalist Coming Soon Page in Photoshop

Open your Photoshop and create new (CTRL + N), set the width to 980px by 900.

2 header img How to Create a Minimalist Coming Soon Page in Photoshop

Grab your Marquee Tool (M) and select half the layer, create a new layer (CTRL + SHIFT + N) and fill it with #176DA4. After that, go to Filter > Noise > Add noise and set it to 1%, Uniform, Monochromatic.

3 header brush How to Create a Minimalist Coming Soon Page in Photoshop

Set the brush to Rising Sun and use #ffff on your foreground. Make sure that the size of the brush fills everything on the header, set the opacity to 9%.

5 header text How to Create a Minimalist Coming Soon Page in Photoshop

On the header, I added some text. Let me break it down for you, the first one is the name of the site. I used Lobster 13 fill it with #ffffff, size is 48pt regular.For the drop shadow, use the foreground color #0c4163 and set the size and distance to 1px, copy the layer style (to copy, right click on the layer, select Copy Layer Style. Right click on another layer and Paste Layer Style) and paste it for the second text.

Second one is Bebas 27pt same color. Third is Arial 13pt, we try to keep it simple πŸ™‚

6 timer How to Create a Minimalist Coming Soon Page in Photoshop

Next, we will create a timer container. Select Rounded Rectangular Tool (U) and set the radius to 5px, foreground is #171414.

7 timer dropshadow How to Create a Minimalist Coming Soon Page in Photoshop

Right click on the timer layer and select drop shadow, set the blend mode to multiply and color to #9e9c9c.

8 pattern How to Create a Minimalist Coming Soon Page in Photoshop

Now we will create a pattern so we can use it on the timer, create a new canvas (CTRL + N) and set the size to 5px by 5px. Select pencil (B) and draw the a diagonal line same as above.

9 edit pattern How to Create a Minimalist Coming Soon Page in Photoshop

Now, on the menus select edit > define pattern and give it a name, like diagonal pattern.

10 pattern settings How to Create a Minimalist Coming Soon Page in Photoshop

Back at our timer layer, right click and select pattern overlay and look for the pattern we just did. Set the scale to 128% and opacity to 7%.

11 gradient settings How to Create a Minimalist Coming Soon Page in Photoshop

Duplicate the timer layer and named it timer 2, disable the pattern overlay on Blend Modes and set the gradient settings, copy to colors above.

12 gradient overlay How to Create a Minimalist Coming Soon Page in Photoshop

Set the gradient to revers and angle to 90%, blend mode to normal and were good to go πŸ™‚

13 timer margin How to Create a Minimalist Coming Soon Page in Photoshop

Next is to create a margin for the numbers layer, just make sure there are enough spaces.

14 timer text How to Create a Minimalist Coming Soon Page in Photoshop

Here it is, the text for numbers used was Bebas 66pt and for the Day’s words Arial 9pt.

15 timer dropshadow How to Create a Minimalist Coming Soon Page in Photoshop

Here is the drop shadow settings for the Timer Numbers, foreground color is #000000 and distance, size is set to 1px.

16 timer text gradient How to Create a Minimalist Coming Soon Page in Photoshop

Next is the gradient settings, we used #ccbcb and #fffffff.

17 newsletter How to Create a Minimalist Coming Soon Page in Photoshop

Now we will create the newsletter form, grab the rounded rectangle tool (U), radius is set to 5px.

18 newsletter input How to Create a Minimalist Coming Soon Page in Photoshop

Blend mode for stroke, color is #292828 and set the size to 1px opacity 17%.

19 newsletter submit How to Create a Minimalist Coming Soon Page in Photoshop

Create a new layer and select the marquee tool (M) draw a shape before the of the form. Next is to fill it with #186ea5.

20 newsletter complete How to Create a Minimalist Coming Soon Page in Photoshop

Next is to hold CTRL and click the layer of input form, this will select the submit layer and press CTRL + SHIFT + I and hit Delete. This will delete the excess space outside the input form. For the submit text we used Arial 18pt Bold #ffffff.

Final Product

landing page How to Create a Minimalist Coming Soon Page in Photoshop

We are done! We’ve learned a lot today, from creating a coming soon layout and designing it, and creating a pattern that we used on our design. On the next part we will code this using HTML5 / CSS3, so you can use this on your personal projects.

Hope you enjoy our tutorial and watch out for the next part!

8 Responses to “How to Create a Minimalist Coming Soon Page in Photoshop”