Dark and Impressive Coming Soon Page Design

Hello HV-Designs friends! Today I’ll be showing you how to create a cool darken coming soon page design. As you will see in the final result show, the design depends on “Black” color as primary one and use nice colored Adobe products icons as pendulous, secondary background (you may use this layout for designing site or something related to Adobe!). Let’s see how to do that …

The Final result:

(Click on the image to see the full size)

Tutorial Details

Program: Adobe Photoshop
Version: CS5
Difficulty: Intermediate
Estimated Completion Time: 1 Hour

Resources you’ll need:

CS4 Mini Icon Set by Bobbyperux (deviantART).

Mini Social Icon set by design deck.

Metal Mesh Patterns by Axertion (deviantART).

Any email icon you like. (This is nice one from (GraphicsFuel)

Fonts Pack

Setting up the Photoshop Document and Creating the Background:

Create a new document (Ctrl + N) with the sizes 1200 x 600 pixels and fill it up with the color value #0a0a0a. Label your layer “Background”.

Duplicate the layer “Background” (Layer > Duplicate Layer), then go to (Filter > Noise) and add the following noise settings:

Reduce your layer opacity to 14%. Don’t forget to label this layer with “Background Noise” just to keep our final PSD file organized and tidy.

The next thing we have to do is setting some guidelines, so we can keep our final result as exactitude as possible. Go to (View > New Guide) and set your guides as the following:

Creating the Main Container:

In this, we’ll goanna make a nice container to put all content inside it.

Select the “Rounded Rectangle Tool” (U) with 10px radius and the color value: #101010 then draw a shape like the one you see below (try to use guidelines):

Once you’ve happy with the shape, rasterize the layer (click on it by the right mouse button and chose “Rasterize Layer”) then apply the following layer styles “Color Overlay & Stroke” settings (go to Layer > Layer Style):

Now, I’m going to add smooth texture to this layer, make sure to download the textures set that I mention in resources above.

Make a new layer (Shift + Ctrl + N) and fill it with the following pattern you see below by selecting “Paint Pocket Tool” (G) then choose the option “Pattern” from the bar above then add it to your Photoshop.

Now we’ll going to make cool trick now, make sure to place the pattern layer above the container one, next go to the layer “Container” (I mean make it active) then right-click on it while you’re holding down the “Ctrl” from keyboard, you should get a dotted selection around the container just like the one you saw above in the previous screenshot.

On the working space (layout), be sure to select “Rectangular Marquee Tool” (M) and the layer of pattern is activated, left-click by mouse then chose “Select Inverse”, now press the “Delete” key from keyboard … then reduce your layer opacity to 5%. You should get a result like this:

Creating “Hours”, “Days” and “Weeks” Rounded Squares:

Select the “Rounded Rectangle Tool” (U) with 10px radius and the color value: #171717 then draw a shape with almost 198px (width), 107px (height), rasterize the layer (click on it by the right mouse button and chose “Rasterize Layer”), this is the result:

Apply the following layer styles “Outer Glow, Inner Glow & Stroke” settings as we’ve done before:

This layer will be used for weeks; we need two more copies of it for days and hours. Just Duplicate it twice and drop each new layer to be located like this (the distance between the one and the other is 35px):

With “Line Tool” (U) draw a line with 2px radius and the color value: #728c24 (or you can apply it through “Color Overlay” from layer style. Be sure to locate the line layer under the number ones later to get something like this:

Duplicate the line to get two more ones and drop them horizontally … you should get something like this:

It’s time to use the “Type Tool” (T) to add the some numbers; we’re going to add them with the following character settings:

Font Family: Arial Rounded MT Bold, Size: 82pt, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 5.

The color doesn’t matter now because we’ll goanna change it by applying this “Gradient Overlay” effect:

The same way, type other texts for days and hours, as well as apply the same layer styles. This is my result:

Keep selecting the “Type Tool” (T) and add the words “Weeks”, “Days” and “Hours” using the following character settings:

Font Family: Arial Rounded MT Bold, Size: 30pt, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 5.

Apply the following “Outer Glow, “Bevel and Emboss” and “Color Overlay” layer styles on each text layer (you can use copy & paste layer styles by clicking right-click on required layer):

This is my result:

Typing Some Welcome Text:

A big, wonderful “Hello” word will be adding now with “Type Tool” (T) and using the following character settings:

Font Family: Andrew Gothic (get it from resources above), Size: 82pt, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Then apply the following “Outer Glow, “Gradient Overlay” and “Stroke” layer styles:

Now add the text you want to tell visitors about the site or encourage them to wait for launching! I use the following character settings for mine:

Font Family: Arial (it’s default), Size: 24pt, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 5, Color: #a0a0a0.

Once you’ve happy with what you type, apply the following “Stroke” layer style, then give you layer the opacity 58%.

Creating the Email Notification Form:

Select the “Rounded Rectangle Tool” (U) with 10pt as radius. Then draw a shape like the one you see below to be the email notification. Keep the far 329px from the left.

Label you layer “email_notification_bg” then apply the following layer styles “Inner Shadow, Outer Glow, Color Overlay and Stroke”:

Add any email icon you like (I prefer to use the white color for it) then add it and reduce its opacity to 65%, then use the “Type Tool” (T) to add the text “your email here …” inside the rounded email notification rectangle with the following character settings:

Font Family: BenguiatGot Bk BT, Size: 18pt, Weight: Book Italic, Anti-aliasing setting: Smooth, Color: #414141, Leading: Auto, Tracking: 5.

The next step here is to make an obvious text that can be clickable when converting this layout into working XHTML/CSS template, and it’s for insure visitors’ requests and get them notified when the site goes live.

Use the “Type Tool” (T) to add the text “notify me!” with the following character settings:

Font Family: Arial Rounded MT Bold, Size: 18pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #414141, Leading: Auto, Tracking: 5, then apply the following layer styles on your text layer “Outer Glow”, “Gradient Overlay” and “Stroke”:

Once you’ve finished that, reduce the opacity of this layer to 52%.

Use the “Line Tool” (U) with 2px radius, color value #3c3d40 to draw a line under the “Notify me” text then apply the following “Outer Glow” settings:

Creating the Social Networks Links:

Download Mini Social Icon Set by design deck from resources above then add facebook and twitter icons (of course you can add whatever you want), control the size by using “Ctrl + T” and locate them like below then add your facebook page and twitter id using the following character settings to type:

Font Family: Arial Rounded MT Bold, Size: 14.24pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #f5f5f5, Leading: Auto, Tracking: 5.

Creating Title and slogan:

Ok … it’s time to type our site title and slogan! I think this is will be the easiest thing ever! Of course it’s our “HV-Designs” and its pretty slogan. Use the “Type Tool” (T) to type the name “HV-Designs” with the following character settings:
Font Family: Century Gothic, Size: 40pt, Weight: Bold, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 5 (just use any color).

Apply the following “Outer Glow”, “Gradient Overlay” and “Stroke” settings on your text layer:

For slogan, we’re goanna use the following character settings:

Font Family: Arial, Size: 16pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #8e8e8e, Leading: Auto, Tracking: 5.

Adding Adobe Icons for Back:

Download “Adobe CS4 Mini Icon Set” listed in resources above, then add some of these nice icons to your layout and use “Ctrl + T” to control size and make some rotation and locate them above each other for both the two sides. I think this is easy step, I’m sure you won’t find any problems. Be sure to group all layers (as usual) in one group and do the most important thing for this! It’s to locate this group exactly above the “Background” one, i.e. let it be under the container, which will make you get impressive show of specific part of each icon without doing any more steps to hide the other parts.
Also you can see how my PSD File is organized … I hope you keep yours like that too.

Conclusion

Ok … we’re done now! I wish you’ve found this tutorial useful. Feel free to share us your opinion and comments below.

Download Source Files

Download the free PSD for this tutorial that is licensed under the Creative Commons license. Of course, attribution is required and appreciated.