We are reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn more.

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
Author: Tom ClaytonTom loves to write on technology, e-commerce & internet marketing. Tom has been a full-time internet marketer for two decades now, earning millions of dollars while living life on his own terms. Along the way, he’s also coached thousands of other people to success.