Sleek Coming Soon Page Design

Sleek Coming Soon Page Design: Part 1

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

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

28 comments
Lauren frost says

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

Reply
Kunal B salunkhe says

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

Reply
Darky says

Excellent design!.. thanks for sharing!

Reply
Rajesh says

Very Nice Tuts Thanks Richard

Reply
jurgen says

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

Reply
Richard Carpenter says

thanks for your comments, much appreciated

Reply
Rahul Parekh says

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

Reply
Ashish says

Wow, what a beautiful design dude…

This looks really awesome.

thanks… you rock!!

Reply
InfamousLA says

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

Thanks for the tut!

Reply
Richard Carpenter says

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.

Reply
JustADream says

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

Reply
Richard Carpenter says

@justadream:

i dont quite understand your question

Reply
Jack Nguyễn says

Give me you pattern, please

Reply
free Brushes says

Once again a great Tut, many thanks.

Reply
rajesh kumar says

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

Reply
Adnan Ashar says

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

Reply
andrew says

How to do that pattern?!

Reply
andrew says

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

Reply
Jan says

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

Reply
Andrew says

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.

Reply
Nooka says

This is amazing stuff

Reply
Stelios says

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

Reply
Photoshop Tutorials says

Cool coming soon template

:)

Reply
Nikki says

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.

Reply
grafiklearner says

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

Reply
nonStopCars says

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

Reply
Sharri Isackson says

Quite easy as well as outstanding guide

Reply
Saundra Hopkins says

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

Reply
Add Your Reply

Popular posts

css.php