Sleek Coming Soon Page Design: Part 1

Hello Photoshop Plus fans, in todays tutorial I’ll be showing you how to create a cool coming soon web page design. The designs features a dark feel with a cool count down timer. Lets get started…

In Interface, PSD Conversion

What We’ll Be Creating

Coming Soon Page Website Design

Preparation

Create a new document (Ctrl + N) 1200 x 600 pixels with a white #ffffff background. Select the “Ellipse Tool” (U) then drag out a big ellipse which exceeds the canvas area, we only want a small portion of the ellipse to be shown on the canvas.

Coming Soon Page Website Design

Adding The Styling To The Ellipse

Label your new layer “Half Circle” then add the following layer styles.

Coming Soon Page Website Design

Coming Soon Page Website Design

Coming Soon Page Website Design

You should have something like this.

Coming Soon Page Website Design

Creating The Custom Pattern

In the preview image you will notice there is a lot of small dots within the ellipse area, this is the pattern we’ll be making. Create a new document (Ctrl + N) 16 x 16 pixels, select the “Zoom Tool” (Z) then zoom in 3200%. Now Select the “Pencil Tool” (B) with a 1px black #000000 brush and replicate the image below.

Coming Soon Page Website Design

Once you’ve replicate the image above go to “Edit > Define Pattern”, save your pattern then head back over to your original canvas. Load a selection around your ellipse layer.

Quick Tip:

To load a selection around an element click the little thumbnail inside of your desired layer whilst holding down the CTRL key on the keyboard.

Once the selection has been loaded create a new layer and label it “Pattern” then select the “Fill Tool” (G), in the options panel at the top change the fill type to pattern then select your pattern from the list.

Coming Soon Page Website Design

Now fill (G) the loaded selection with your pattern. Once the pattern has been added to the canvas add the following layer styles to your pattern layer.

Coming Soon Page Website Design

Coming Soon Page Website Design

You should now have something like this.

Coming Soon Page Website Design

Creating The Count Down Timer

Select the “Rounded Rectangle Tool” (U) with a radius of 10px (10px By Default) then drag out a rectangle about 130px by 130px.

Coming Soon Page Website Design

Label your new layer “Days Outer” then add the following layer styles.

Coming Soon Page Website Design

Coming Soon Page Website Design

Coming Soon Page Website Design

You should have something like this.

Coming Soon Page Website Design

Duplicate your “Days Outer Layer” by right clicking the layer and going to “Duplicate Layer”. Once duplicated rename the layer “Days Inner” then right click and go to “Clear Layer Styles”. Were now going to resize the duplicated layer so go ahead and select the “Free Transform Tool” (Ctrl + T), select one of the corner anchor points then hold down “Shift and Alt” on the keyboard and drag down.

Quick Tip:

Holding down the shift key and alt key on the keyboard whilst resizing the shape will resize the shape from the middle.

You should have something like this.

Coming Soon Page Website Design

Now add the following layer styles to the “Days Inner Layer”.

Coming Soon Page Website Design

Coming Soon Page Website Design

Coming Soon Page Website Design

Coming Soon Page Website Design

You now have something like this.

Coming Soon Page Website Design

Select the “Rectangular Marquee Tool” (M) then make a 1px selection across the “Day Inner” rectangle. The line should be the same width as the rectangle and 1px in height. Fill (G) the selection with the color black #000000 then move the line down 1px and then fill (G) the selection with the color white #2f2f2f.

Coming Soon Page Website Design

Using the “Pen Tool” (P) create a curved path from the bottom left corner over to the top right corner of the inner rectangle. Fill the path with the color white #ffffff then set the opacity to 2%. Label this new layer “Days Shine”.

Coming Soon Page Website Design

Finally add a number inside the inner rectangle using the color #545454 then add the word days above the outer rectangle. When adding the number to the inner rectangle make sure the layer is beneath the two colored line layer.

Coming Soon Page Website Design

Repeat the steps above and create 3 more rectangles, one for hours, minutes and seconds.

Coming Soon Page Website Design

Creating The Progress Bar

Select the “Rounded Rectangle Tool” (U) then create a small long rectangle underneath the count down timer rectangles.

Coming Soon Page Website Design

Label your rectangle “Progress Bar Outer” then add the following layer styles.

Coming Soon Page Website Design

Coming Soon Page Website Design

Coming Soon Page Website Design

You should have something like this.

Coming Soon Page Website Design

Now select the “Rectangular Marquee Tool” (M) and make a selection across your progress bar rectangle in which we created in the previous step.

Coming Soon Page Website Design

Fill (G) the selection with the color white #ffffff then deselect the selection (Ctrl + D). Now load a selection around your “Progress Bar Outer” layer.

Quick Tip:

To load a selection around an element click the little thumbnail inside of your desired layer whilst holding down the CTRL key on the keyboard.

Once the selection has been loaded highlight the white rectangle layer and go to “Select > Inverse” then hit the delete key on the keyboard, you should be left with something like this.

Coming Soon Page Website Design

Label the white inversed layer “Progress Bar” then add the following layer styles.

Coming Soon Page Website Design

Coming Soon Page Website Design

Coming Soon Page Website Design

Coming Soon Page Website Design

You should have something like this.

Coming Soon Page Website Design

Creating The Diagonal Pattern

On the progress bar we have a diagonal pattern to make this first create a new document (Ctrl + N) 25×25 pixels, select the pencil or brush (B) tool with a 1 pixel brush then replicate the image below.

Coming Soon Page Website Design

Once you’ve replicated the image go to “Edit > Define Pattern”, save your pattern then head back to your original canvas. Load a selection around your “Progress Bar” layer.

Quick Tip:

To load a selection around an element click the little thumbnail inside of your desired layer whilst holding down the CTRL key on the keyboard.

Now select the “Paint Bucket Tool” (G) then select your pattern from pattern list, create a new layer above your “Progress Bar” layer then label the new layer “Lines Pattern”. Fill (G) the pattern inside the selection then set the opacity to 10%.

Coming Soon Page Website Design

To finish off the progress bar simply add a white #ffffff rectangle across the progress bar, inverse the selection like i showed you earlier then set the opacity to 8%.

Coming Soon Page Website Design

Adding The Content

Select the “Text Tool” (T) then begin to add some content to the page, add a title and slogan on the top left corner then add some text underneath the progress bar.

Coming Soon Page Website Design

Once you’ve added some text add the following layer styles to the page title and the progress status (58% Complete).

Coming Soon Page Website Design

Coming Soon Page Website Design

Coming Soon Page Website Design

You should have something like this.

Coming Soon Page Website Design

Coming Soon Page Website Design

Creating The Form

Select the “Rounded Rectangle Tool” (U) then drag out a small text field.

Coming Soon Page Website Design

Now add the following layer styles to your rectangle.

Coming Soon Page Website Design

Coming Soon Page Website Design

Next to your text field add another rectangle but a lot smaller (Button Size) again using the “Round Rectangle Tool” (U).

Coming Soon Page Website Design

Now add the following layer styles.

Coming Soon Page Website Design

Coming Soon Page Website Design

Coming Soon Page Website Design

Finally label your text field and submit button then finish off the page with some social buttons.

Coming Soon Page Website Design

Learn To Code This Layout (PSD Conversion)

If you would like to transform this template into a working CSS template then please stay tuned, I’ll be releasing a follow up tutorial in the coming weeks. Stay up date by following Photoshop Plus on twitter, subscribe to our RSS Feeds or become a fan on facebook.

Continue To Part 2

Conclusion

Thanks for taking the time to try this tutorial, I’ll look forward to your results & comments.

Coming Soon Page Website Design

Purchase Psd Now

  1. Lauren frost
    March 23, 2011 at 2:58 PM

    Great tutorial, thanks for sharing.
    Look forward to Part 2 working this in CSS.

  2. Kunal B salunkhe
    March 25, 2011 at 10:28 AM

    its very fantastic but basic knwledge should be there.lets try.

  3. March 26, 2011 at 4:10 AM

    Excellent design!.. thanks for sharing!

  4. Rajesh
    March 26, 2011 at 5:04 AM

    Very Nice Tuts Thanks Richard

  5. jurgen
    March 26, 2011 at 9:16 PM

    complicated for evarage internet user,need some background wich is short off for unspecialised in field

  6. March 27, 2011 at 10:38 AM

    thanks for your comments, much appreciated

  7. March 27, 2011 at 4:59 PM

    Great tutorial, mate. Got to learn how to make some simple but stunning patterns through this.

  8. March 28, 2011 at 6:36 AM

    Wow, what a beautiful design dude…

    This looks really awesome.

    thanks… you rock!!

  9. InfamousLA
    March 28, 2011 at 7:15 PM

    Wow great outcome – can’t wait for part 2. Will you be implementing some Jquery as well?

    Thanks for the tut!

  10. March 28, 2011 at 7:54 PM

    Thanks for all your comments, much appreciated.

    Part 2 of the tutorial will be more of a guide than a tutorial and wont include any jquery coding unfortunetly. BUT i have added some scripts for you to use.

    You’ll just have to wait and see tomorrow.

    i will definetly be releasing more detailed PSD Conversion tutorials in the future.

  11. JustADream
    March 31, 2011 at 6:47 AM

    Hi I have a question. Creating The Count Down Timer Step, the distance is 1 with 0 size , how does it affect. I am new to this, your post is awesome. Thanks

  12. March 31, 2011 at 4:20 PM

    @justadream:

    i dont quite understand your question

  13. April 10, 2011 at 12:59 PM

    Give me you pattern, please

  14. April 11, 2011 at 12:55 PM

    Once again a great Tut, many thanks.

  15. rajesh kumar
    April 16, 2011 at 5:32 AM

    hi Richard Carpenter nice one great tutorials Thanks Richard Carpenter for taking time for like us guys

  16. Adnan Ashar
    April 20, 2011 at 4:06 PM

    Great, Richard you have done a excellent work.waiting for more tutorials.

  17. andrew
    April 24, 2011 at 11:39 PM

    How to do that pattern?!

  18. andrew
    April 25, 2011 at 2:04 AM

    I did it, it wasn’t that hard being a beginner, thanks Richard, you’re a Genius!

  19. Jan
    April 27, 2011 at 12:58 PM

    I am totally brand new in this game. Can some one give me some tips in how and where to start to learn how to use Photoshop, and how to code them into CSS/HTML

    Thanks

  20. Andrew
    April 30, 2011 at 2:45 PM

    Well, just try to find some tutorials in things that you want and you love to do and start working on them little by little on your pace, at the beginning you’ll be following the tutorials letter by letter ignoring why you’re doing this or that, by after a while you’ll understand the principals by seeing the results and then you’ll be applying you own ones, so practice makes perfect that’s it.

  21. July 4, 2011 at 7:51 AM

    This is amazing stuff

  22. Stelios
    July 13, 2011 at 11:01 PM

    Excellent work. If you can put the code or some directions how to code the countdown will be perfect!!!

  23. October 14, 2011 at 7:56 AM

    Cool coming soon template

    :)

  24. January 28, 2012 at 4:56 PM

    Hi Richard. That pattern looks great on that scale, But I’m curious on how you
    would create that same pattern for something half the size? I have tried everything and cant seem to keep the proportions.

  25. grafiklearner
    March 24, 2012 at 5:42 PM

    its really nice man ! but i was trying to found how to convert it into html page
    can u please post it if possible
    Appreciable

    Regards,
    Chandra

  26. April 6, 2012 at 3:17 AM

    Thanks for tut … I follow your instructions, but results were not as expected.

  27. June 21, 2012 at 6:16 AM

    Quite easy as well as outstanding guide

  28. June 24, 2012 at 8:52 AM

    Thank you! I just added your site for the blogroll. Meow!

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 28 Comments On Sleek Coming Soon Page Design: Part 1, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Auto Scroll To The Top
css.php