Tutorials ETC

Here we’re going to show you how to create the Coming Soon/Under Construction PSD template shown below designed to match the Slate Grey variation of our Awake Wordpress Theme.

You can download all 25 color variations here: http://webtreats.mysitemyway.com/awake-coming-soon-template-layered-psds/

Step #1 – What you’ll need.

You will need to download the social media shapes and the background image below:

Awake Coming Soon/Under Construction PSD Tutorial Assets
  Coming Soon PSD Tutorial Assets

Step #2

Open the background image you downloaded and crop it down to 1200px by 800px, anchoring it to the top as shown below:

Step #3

Activate the shape tool by typeing U. Select the rounded rectangle shape and set the radius to 6px as shown below. Open the “Rounded Rectangle Options” box by clicking on the little blue down arrow on the right, set it to a fixed size of 900px by 500px, and check the “Snap to Pixels” option.

Step #4

Create two guidelines at 150px on the x-axis and 100px on the y-axis as shown below. Then click once on their intersection and you will end up with something that looks like the image below:

Step #5

Activate the layer styles dialog box on your shape layer by double clicking on it or by going to LAYER >> LAYER STYLE >> BLENDING OPTIONS in the menu. Then enter the settings below:

To create a custom gradient, click on the gradient thumbnail to bring up the “Gradient Editor” dialog box and use the values shown below.

Step #6

Create a new layer above the rounded rectangle layer by going to LAYER >> NEW >> LAYER in the menu, activate the text tool by typeing T, then type in your site name using the character palette settings below:
If you want to use the exact same font we used you can download it for free here: http://www.fontsquirrel.com/fonts/DejaVu-Sans.

STEP #7

Double click on the rectangle layer you just created in the layer palette to bring up the layer styles dialog box, then enter the settings below:

STEP #8

Create a new folder by going to LAYER >> NEW >> GROUP in the menu and label it “Social Media.” Within that folder use the rounded rectangle shape tool to draw a rectangle like the one shown below with a radius of 4px, the color set to black, and the dimensions set to “Unconstrained.”

STEP #9

Activate the layer styles dialog box on the rounded rectangle shape layer, and then enter the layer styles settings below:

Step #10

Open the four social media images you downloaded in Step #1 and copy/paste them into your document. Then arrange them as shown below:

Step #11

Copy the layer styles from the logo by right clicking on its layer in the layer palette and selecting “Copy Layer Style.” Then highlight the four social media shape layers, right click on them, and select “Paste Layer Style” as shown below:

Step #12

Create a new folder by going to LAYER >> NEW >> GROUP in the menu and name it “Shading.” Create a new layer by going to LAYER >> NEW >> LAYER in the menu. Activate the gradient tool by typeing G, makeing sure the black to transparent gradient is selected and that the gradient tool is in radial gradient mode. Then drag the mouse as seen below:

Step #13

Reduce the opacity of the radial gradient layer to 8% and transform it into the shape shown below by going to “Edit > Transform > Scale” in the menu.

Step #14

Activate the shape tool by typeing U. Select the rectangle shape and set the “Rectangle Options” to a fixed size of 900px by 135px as shown below.
Then create a new guideline 315px on the y-axis and click once on its intersection with the guideline from step #4 and you will end up with something that looks like the image below:

Step #15

Activate the layer styles dialog box on the rectangle shape layer you just created and then enter the layer styles settings below:

STEP #16

Create a new folder and name it “Text.” Activate the text tool by typeing T. Then type “Coming Soon” using the character palette settings below and then drag the text layer until it’s centered like the image below:

STEP #17

Activate the layer styles dialog box on the “Coming Soon” text layer you just created and enter the layer styles settings below:

Step #18

Below the “Coming Soon” title create a new layer and type in some description text using the character palette settings below:

Step #19

Activate the layer styles dialog box on the description text layer and enter the layer styles settings below:

Step #20

In the middle of the shaded rectangle from step #14 create a new text layer and type in your countdown text like we have below, alternating between 18px for the words and 46px for the numbers. Then copy/paste the layer styles from the “Coming Soon” title in Step #17.

Step #21

Activate the shape tool again. Select the rounded rectangle shape with a 4px and open the “Rounded Rectangle Options” box and select a fixed size of 300px by 50px as shown below.

Step #22

Activate the layer styles dialog box on the rounded rectangle shape layer you just created and enter the layer styles settings below:

Step #23

Above the rounded rectangle layer you just created, add a new text layer and type “Name:” with the character palette settings shown below:

Step #24

Highlight the the rounded rectangle layer and the “Name:” layer in the layer pallet and duplicate them by going to “Layer > Duplicate Layer” in the menu. Then drag the duplicate layers to the right and change “Name:” to “Email:” as shown below:

Step #25

Activate rounded rectangle shape tool with a 4px radius, this time with a fixed dimension of 180px by 50px as shown below and place it alongside the form fields as shown below:

Step #26

Activate the layer styles dialog box on the button shape you just created and enter the layer styles settings below:

Step #27

Create a new text layer and type in “Notify Me!” with the layer palette settings shown below:

Step #28

Activate the layer styles dialog box on the “Notify Me!” text and enter the layer styles shown below:

Thats it!

You should now have something that looks like what you see below. Make sure you subscribe to our RSS Feed so you’ll know when part 2 on how to code this comes out, as well as a tutorial on how to create the background.

Didn’t get the exact same results? Want to save some time? Download the source files below.

What’s Included in the Download:

• Fully layered source PSD

More PSD’s are available in our shopping cart.

Related Tutorials

Premium

Tags: Awake, Coming Soon Template, Web Element