Create a Simple Coming Soon Page Design in Photoshop

On 15 Aug, 2012 By With 7 Comments

Before launching a new site, you need to put a coming soon page on your website. We don’t want them to see our buggy site because of the new re-design, that will give them bad experience.

So if you’re wondering how to create one for your website, I created a .psd guide for you. Hope you’re ready!

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

Before we begin, there are things that we need to download

Install those fonts in your computer, below is what we are creating. Let’s get started!

sanjaykhemlani.com coming soon psd1 Create a Simple Coming Soon Page Design in Photoshop

Open your Photoshop and let’s get going.

1 canvas Create a Simple Coming Soon Page Design in Photoshop

Open your canvas and set it up, 980ox for width and 1000px for height.

2 add noise Create a Simple Coming Soon Page Design in Photoshop

Fill your canvas with #D9D8D6 and add noise, go to Filter > Noise > Add Noise and put 1%.

3 header footer Create a Simple Coming Soon Page Design in Photoshop

Grab your Marquee Tool (M), create a new layer (CTRL + SHIFT + N) and draw the header and footer, fill it with #3E3E3E.

4 header drop shadow Create a Simple Coming Soon Page Design in Photoshop

In the header layer, select Blending Options > Drop Shadow and set the foreground color to #b1b0b0. Distance 3px, size is 7px.

5 logo body Create a Simple Coming Soon Page Design in Photoshop

Next is we will create our logo, grab your Rounded Rectangle Tool (U) set the radius to 5px. Fill it with #E34601.

6 logo inner shadow Create a Simple Coming Soon Page Design in Photoshop

In Blending Options > Inner Glow, foreground is #fb6b2b and choke on 100% size 2px.

8 logo body complete Create a Simple Coming Soon Page Design in Photoshop

Here’s our completed logo body.

9 logo text Create a Simple Coming Soon Page Design in Photoshop

Use the Distant Galaxy font, 43pt #3e3e3e.

10 logo text dropshadow Create a Simple Coming Soon Page Design in Photoshop

In Blending Options for the logo text, set the foreground to #fc9856 and distance, size to 1px.

11 logo text inner shadow Create a Simple Coming Soon Page Design in Photoshop

Inner Shadow foreground #353434, distance and size 1px.

12 logo other text complete Create a Simple Coming Soon Page Design in Photoshop

Logo is complete, now add some text. I use the same font from the logo, 88pt #3e3e3e.

13 time body Create a Simple Coming Soon Page Design in Photoshop

Grab your Rectangle Tool (U) and create a rectangle, fill it with #fff.

14 time body stroke Create a Simple Coming Soon Page Design in Photoshop

Add a Stroke and use the foreground color #ababab, size 1px.

15 time shadow Create a Simple Coming Soon Page Design in Photoshop

Create a new layer (CTRL + SHIFT + N) and select Elliptical Marquee Tool (M), draw a elongated shape and position it like the image above.

16 time shadow blur Create a Simple Coming Soon Page Design in Photoshop

Next is Filter > Blur > Gaussian Blur and set to 9.7,  Opacity 50%.

17 time shadow complete Create a Simple Coming Soon Page Design in Photoshop

After that, duplicate the layer (CTRL + J) and position the other end.

18 time complete Create a Simple Coming Soon Page Design in Photoshop

We added the text time inside the body layer, I use League Gothic 88pt #333 for the numbers and Arial 12pt #333 for the words.

19 raising brush gradient Create a Simple Coming Soon Page Design in Photoshop

Now select your Raising Sun Brush and the foreground color is #fff, set it at the center. At the bottom of your layer palette, click the Add layer Mask and Gradient Tool (G). Select to where the arrows are pointing.

Next is open the search bar tutorial .psd and social media buttons from 365psd.com, and add them on our canvas.

sanjaykhemlani.com coming soon psd1 Create a Simple Coming Soon Page Design in Photoshop

 

And we are done with the coming soon page design 🙂

If you’re confused with the steps, give me a shout out in the comments and I’ll help you out. Hope you learned a thing or two about this tutorial 🙂

7 Responses to “Create a Simple Coming Soon Page Design in Photoshop”