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:

Download PSD Here | Convert Using HTML5/CSS3 *New!*

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)

Stelian Subotin

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Nelson says

    Dainis Graveris pls i really to learn the new html 5 and css 3 but coding is just to difficult for me. Can you link me to a site to download videos Thanks … for the Coming soon page tutorial

  2. Dan Norris says

    Nice tutorial of how to use some basic embossing affects – Very keen on this technique in my designs at the moment. Would be good to have a follow-up article of point of inspiration ;)

  3. says

    Nice tutorial, thanks!

    I might code this page in HTML5/CSS3 and write a tutorial if you’re interested. I’ll let you know.

  4. Andreina Sira says

    wow that’s really cool.. I will definitely take a look at that… good tip!
    thanks

  5. Awais Raza says

    It was a good and clean psd tutorial. Would like you to continue this tutorial in html/css and jquery.

    • says

      We’ll think about it Awais! Now we are thinking to push more on clean coding tutorials than designs since html5 and css3 allows to create stunning designs with fast page load time. Thanks for inspiring us!

  6. says

    Thank you for this very nice tutorial. It could be a great idea to add the php / javascript tuts to create the countdown :)

  7. says

    Nice tutorial, it would be great if download link to PSD file is included. Anyhow, will try it on my own and will share my experience here.

  8. Tim says

    I don’t really understand coming soon pages, unless you have a brand new website. I see many companies that have an existing site take down that site and put up a coming soon page. Why would anyone do that? Why not just leave your current site up until you’re ready to launch the new one?
    I don’t know if people realize that if you do that you can hurt your seo rankings, not to mention that the majority of people that see a coming soon page will never return to your site because there was nothing of interest to them on it.

    • says

      Sometimes it’s a bit different, Tim. When popular page has been taken down with interesting countdown that something great is coming, it gets people curious. They miss that site and they want to understand what’s happening.

      Of course, site should be big enough following to get that traction. Some people do not care so much about SEO as about social side and real people reactions, that’s why I think people choose to do that. And of course, there are benefits for them, that they can focus on what they are building and not worry about site upkeep in meanwhile.

      • Tim says

        There should not be any upkeep on a website other than perhaps approving blog comments or something like that. I work at a company that does a lot of SEO work and these types of pages can indeed hurt your ranking in Google, which can be difficult to get back.

        • says

          Tim, thanks for keeping up with conversation! Did you test it just frequently? Because in that case you must have better information as me, have you tested how many days it takes to hurt google rankings?

  9. says

    Yes I agree, well in year 2000-2005 I seen lots of ‘Under Construction’ icon(s) on website specially a man is in works, but in the last 5-6 years website owners have been more business oriented.