SEARCH
  Tutorials Photoshop Web Layout How to Create a Minimalist Coming Soon Page in Photoshop

How to Create a Minimalist Coming Soon Page in Photoshop

End Product

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!

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.

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.

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%.

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

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.

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.

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.

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.

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%.

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.

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

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.

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.

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.

How to Create a Minimalist Landing Page in Photoshop

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

How to Create a Minimalist Landing Page in Photoshop

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

How to Create a Minimalist Landing Page in Photoshop

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

How to Create a Minimalist Landing 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.

How to Create a Minimalist Landing 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

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!

subscribe to newsletter