Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout How to Create a Coming Soon Template in Photoshop

How to Create a Coming Soon Template in Photoshop


What we'll be doing today! (Click the image to see the original version):

img

Materials Needed:

Social Network Icon Pack

Museo Font

Let's get started! Open Photoshop and create a new project. Set the canvas to 1300x800px because it is a template and has to follow the standard sizes of a real page layout. Make sure that "Background Contents" is set to "Transparent".

img

You notice that in the Layer's Palette(F7) there's one layer. Grab the Paint Bucket Tool(G) and with a gray color (#EEEEEE) paint the blank canvas. Then go to Filter->Noise->Add Noise and add an uniform and monochromatic noise of 3%. This filter will create a nice paper like background.

img

The background will have 2 parts. A dark one situated at the top of the layer and the gray one at the bottom, both calculated following the Golden Ratio rule. What's this Golden Ratio? Is all about proportions...2 elements in golden ratio points out a beautiful balance between them. As a tip, which I considered very valuable when I learned about it, use as much as you can this golden ratio in your designs...it will bring clarity, proportion and beauty to your projects!

Ok, grab the Rectangle Tool and draw a dark rectangle(#4d4d4e) from top to bottom, following the golden ratio. (the rectangle should be 500px high). Again, apply a noise filter to the new layer, but reduce the percentage to 2.5 .

img

With the same Rectangle Tool, draw again a black rectangle high of 5px just under the dark rectangle. Then go to Filter->Blur->Gaussian Blur and add a Gaussian Blur of 1.7px.

img

We've just created a very nice shadow between the 2 elements which compose the background. And with this touch, the background is done and we can proceed to the next step! You can see below how the layers are arranged in order to create the background!

img

Let's build the content area. Being a coming soon template, the content area shouldn't be too large but has to contain enough info in order to update the user with the launching date, maybe social networks and a subscribe form. Select the Rounded Rectangle Tool(U),set the Radius to 5px to create rounded corners and draw a rectangle of 720x450px. Then double-click the new layer and add to it the next layer's styles:

img

img

img

I want to show you how to add a nice shadow under the content box. Select the Ellipse Tool(U) and draw an elipse like in the image. Make sure to choose black when drawing:

img

Now go to Filter->Blur->Gaussian Blur and blur the ellipse with an amount of 6px.

img

Place the layer just under the content-box layer and make sure to reduce the opacity of the ellipse to 40% because is too dark. The shadow is done and the layout is looking better and better!

img

For the content, download the Museo Font from the download list (you can find it at the top of the tutorial) and write something typical for any coming soon template. Then select the Line Tool(U) and draw 2 lines just under the first title. This way, you'll create a nice letterpress effect.

img

Now we're going to build the countdown which will illustrate the days, hours, minutes and seconds until the website will be live. Select the Rounded Rectangle Tool(U) and with a radius of 3px, draw a rectangle of 90x90px. The image below will tell you more:

img

Now apply the next layer's styles:

img

img

img

Now grab the Line Tool(U) and with a weight of 1px, draw 2 horizontal lines inside the box to make a delimitation. You'll see why later img

img

With the Type Tool(T), add some text inside the box.

img

Duplicate the box 3 times and place them one after another. Make the text changes and the countdown is done! Nice, huh?

img

We'll build now the "subscribe form". Select the Rounded Rectangle Tool(U) and with a radius of 3px, draw a rectangle of 540x36px.

img

Apply the next layer's styles by double-clicking on the layer:

img

img

Let's make a small button. Select the Rounded Rectangle Tool(U) and with a radius of 3px, draw a small rectangle inside the subscribe area. Then Select the Custom Shape Tool(U) and add an arrow shape inside the rectangle. That's it, you have a button now!

img

Download the social network icon pack and import into the project some of the social networks you prefer. The small icons of 16px fits better. Add some copyright text too and a logo above the box, just to customize the layout.

img

Believe it or not, we have just finished the coming soon template. I hope you've learned something today, but if you have any questions, drop us a comment into the Comments area. Any feedback is always appreciated. Now, take a look at the final image(Click it to see the larger version):

img



Author's URL: 2expertsdesign.com
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: