Sleek Coming Soon Page Design: Part 1

What We’ll Be Creating

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.

Adding The Styling To The Ellipse

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

You should have something like this.

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.

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.

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.

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.

You should now have something like this.

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.

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

You should have something like this.

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.

You should have something like this.

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

You now have something like this.

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.

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”.

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.

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

Creating The Progress Bar

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

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

You should have something like this.

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

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.

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.

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

You should have something like this.

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.

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.

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%.

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%.

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.

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

You should have something like this.

Creating The Form

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

Now add the following layer styles to your rectangle.

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

Now add the following layer styles.

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

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.