Create a Minimal Coming Soon Page in Adobe Photoshop

Posted in Tutorials, Web Interface • Posted on 24 Comments

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)

20 Written Articles

24 Comments Best Comments First
  • mozi

    Thursday, July 26th, 2012 09:48

    1

    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.

    0
    • Dainis Graveris

      Sunday, July 29th, 2012 04:04

      12

      Nowadays much cooler and advanced coming soon pages are created so usually people go more crazy than using just text and icon!

      0
  • Andreina Sira

    Sunday, July 29th, 2012 00:44

    7

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

    0
  • Rudi

    Saturday, July 28th, 2012 14:55

    6

    Simple clean but nice, thx for sharing this

    0
    • Dainis Graveris

      Sunday, July 29th, 2012 03:51

      8

      Thanks Rudi, did you learn anything new yourself?

      0
  • Tim

    Thursday, July 26th, 2012 12:20

    2

    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.

    0
    • Dainis Graveris

      Sunday, July 29th, 2012 04:07

      13

      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.

      0
      • Tim

        Tuesday, July 31st, 2012 15:59

        21

        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.

        0
        • Dainis Graveris

          Tuesday, July 31st, 2012 18:18

          22

          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?

          0
  • John Bash

    Thursday, July 26th, 2012 15:13

    3

    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.

    0
    • Dainis Graveris

      Sunday, July 29th, 2012 03:58

      11

      John, check again, there is PSD download link at the beginning of article.

      0
  • Youyouk

    Friday, July 27th, 2012 02:25

    4

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

    0
    • Dainis Graveris

      Sunday, July 29th, 2012 03:58

      10

      We’ll definitely consider that, good idea!

      0
  • Awais Raza

    Friday, July 27th, 2012 22:59

    5

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

    0
    • Dainis Graveris

      Sunday, July 29th, 2012 03:57

      9

      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!

      0
  • Swamykant

    Saturday, August 4th, 2012 04:52

    23

    Nice tutorial. Next time I will create my own.

    Thanks for sharing the tips.

    0
  • Kevin Callens

    Saturday, August 4th, 2012 11:04

    24

    I love clean layouts. I always try to make my designs as clean as possible. But this is really nice.

    0
  • Nelson

    Monday, July 30th, 2012 18:23

    19

    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

    0
    • Dainis Graveris

      Tuesday, July 31st, 2012 03:37

      20

      Hello Nelson, we don’t provide videos, but we are working now on coding tutorial to this design! Stay tuned!

      0
  • Anli

    Sunday, July 29th, 2012 06:48

    14

    Nice tutorial, thanks!

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

    0
    • Dainis Graveris

      Sunday, July 29th, 2012 08:04

      15

      Thank you, Anli! I would be interested, can you reach out me on email? dainis at 1stwebdesigner com

      0
      • Anli

        Sunday, July 29th, 2012 08:42

        16

        I just sent you an email.

        0
  • Dan Norris

    Sunday, July 29th, 2012 14:56

    17

    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 ;)

    0
    • Dainis Graveris

      Monday, July 30th, 2012 09:52

      18

      Thank you Dan, you mean inspirational roundup or what?

      -1
  • Kevin Callens

    Saturday, August 4th, 2012 11:04

    24

    I love clean layouts. I always try to make my designs as clean as possible. But this is really nice.

    0
  • Swamykant

    Saturday, August 4th, 2012 04:52

    23

    Nice tutorial. Next time I will create my own.

    Thanks for sharing the tips.

    0
  • Nelson

    Monday, July 30th, 2012 18:23

    19

    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

    0
    • Dainis Graveris

      Tuesday, July 31st, 2012 03:37

      20

      Hello Nelson, we don’t provide videos, but we are working now on coding tutorial to this design! Stay tuned!

      0
  • Dan Norris

    Sunday, July 29th, 2012 14:56

    17

    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 ;)

    0
    • Dainis Graveris

      Monday, July 30th, 2012 09:52

      18

      Thank you Dan, you mean inspirational roundup or what?

      -1
  • Anli

    Sunday, July 29th, 2012 06:48

    14

    Nice tutorial, thanks!

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

    0
    • Dainis Graveris

      Sunday, July 29th, 2012 08:04

      15

      Thank you, Anli! I would be interested, can you reach out me on email? dainis at 1stwebdesigner com

      0
      • Anli

        Sunday, July 29th, 2012 08:42

        16

        I just sent you an email.

        0
  • Andreina Sira

    Sunday, July 29th, 2012 00:44

    7

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

    0
  • Rudi

    Saturday, July 28th, 2012 14:55

    6

    Simple clean but nice, thx for sharing this

    0
    • Dainis Graveris

      Sunday, July 29th, 2012 03:51

      8

      Thanks Rudi, did you learn anything new yourself?

      0
  • Awais Raza

    Friday, July 27th, 2012 22:59

    5

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

    0
    • Dainis Graveris

      Sunday, July 29th, 2012 03:57

      9

      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!

      0
  • Youyouk

    Friday, July 27th, 2012 02:25

    4

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

    0
    • Dainis Graveris

      Sunday, July 29th, 2012 03:58

      10

      We’ll definitely consider that, good idea!

      0
  • John Bash

    Thursday, July 26th, 2012 15:13

    3

    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.

    0
    • Dainis Graveris

      Sunday, July 29th, 2012 03:58

      11

      John, check again, there is PSD download link at the beginning of article.

      0
  • Tim

    Thursday, July 26th, 2012 12:20

    2

    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.

    0
    • Dainis Graveris

      Sunday, July 29th, 2012 04:07

      13

      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.

      0
      • Tim

        Tuesday, July 31st, 2012 15:59

        21

        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.

        0
        • Dainis Graveris

          Tuesday, July 31st, 2012 18:18

          22

          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?

          0
  • mozi

    Thursday, July 26th, 2012 09:48

    1

    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.

    0
    • Dainis Graveris

      Sunday, July 29th, 2012 04:04

      12

      Nowadays much cooler and advanced coming soon pages are created so usually people go more crazy than using just text and icon!

      0

Comments are closed.

54.242.231.109 - unknown - unknown - US