Posted by : Magnus Tuesday 30 October 2012

photoshop-psd-coming-soon-page
Having a coming soon page is a great way to create interest and buzz about an upcoming product or service, but also for informing about planned maintenance. If it’s done well your visitor will bookmark, subscribe to your newsletter or follow your social profile. With this in mind, one should consider a coming soon page as any another landing page that server an important purpose and need to convert visitors into the funnel.
The end result for this tutorial, the PSD is available for download at the bottom of this article:
How to Create Clean Coming Soon Page in Photoshop

Things we need before we begin

Let’s Begin

Open your Photoshop and create a new canvas, set it to 980 by 600. For the sake of this tutorial, the width would 639opx.
Duplicate the background pattern (CTRL + J) and fill the entire canvas.
Use Arvo font on our header text, bold 53pt #313132. For the second font is Arial 13pt
For the font Blending Options drop shadow, set the blend mode to normal #FFFFFF, distance and size to 1px.
Grab your Rounded Rectangle Tool (U) and set the radius to 5px, draw the same shape as above. Name this as holder
Set the stroke foreground color #a4bfd1 and set the size to 1px
Inner glow foreground color is #FFFFFF, and size 4px
Duplicate the holder layer 2 times, press the down arrow key 2 times so it will move 2px per layer.
Hold CTRL + Click on holder layer for the last two below, press CTRL + T to resize and hold CTRL as you resize the layer.
You’ll have an image as above
Group the holder layer (CTRL +G) and duplicate the group (right click > duplicate group) and line them like the one above
Add the text, font used is Arial Bold 13pt #598fa6
For the font drop shadow, blend mode is set to normal color is #FFFFFF, distance and size to 1px
For the number font we used Arvo, 51pt #598fa6
Next is to put the numbers and words on the layer. Make a group folder (CTRL + G) call it time.
Select Marquee Tool (M) and draw the same shape as above, fill it with #FFFFFF
For the stroke foreground #bababa and size to 1px
Duplicate the layer and do the same step we did for the holder layer, name this email holder
Next is to select Marquee Tool (M) inside the email holder layer and fill it with #FFFFFF
Create a new layer, and use Marquee Tool (M) fill it with #c8e0ea. Name this layer button
Next is to delete the excess layer, to do that hold CTRL + Click on the input layer while button layer was selected and press DELETE
On button layer stroke #598FA6 size 1px
We added a text, font used was Arial 14pt #598fa6
For the font drop shadow, blend mode is normal color #FFFFFF, distance and size to 1px
Next is to add a text on input field, font is Arial regular 17pt #d3d3d3
How to Create Clean Coming Soon Page in Photoshop

Now we need

Create a folder structure like this to hold the files:
- root
- – css
- – images
- – js

Cutting the images

Select your images from earlier
We will start with the holder layer, disable the time and seconds text and use the crop tool (C). Make sure that when you crop it you will only leave a small margin, and disable the bg folder too. I am just showing you a preview of crop tool. Save the images as “holder.gif”.
Disable input layer and button, crop the form holder. Save it as “form-bg.gif”
Disable form holder and enable the button layer, make sure you leave a little room for margin, like 1px on each side. Save it as “button.gif”
Here are the cropped images as they should look; make sure you save this in images folder.

PSD to HTML – coding it

Next, we will start our coding. Go to InstantBluePrint.com and select html5 as a doc type, and click done. You can follow the screenshot below. Reason for using this service is to get started faster with a well formed HTML5 page.
We will start the HTML5 first, so our structure is already set up before we move to CSS. We will break it down into three parts, header, article and footer. As for the CSS it’ll be one part.

Header Code

<!DOCTYPE HTML>
<head>
<meta name="generator" content="Instantblueprint.com - Create a web project framework in seconds.">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Tripwire Magazine Coming Soon Page with Countdown Timer</title>
<meta name="description" content="Add your sites description here">
<meta name="keywords" content="Add,your,site,keywords,here">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/print.css" media="print">
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
 
</head>
<body>
 
<div id="wrapper"><!-- wrapper -->
 
<header>
<h1>Coming Soon!</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</header>

Article Code

The article section contains the timer. The code is structured as a list with spans for the count down numbers.
<article>
<div><!-- timer -->
<div>
<ul id="countdown">
<li>
<span>00</span>
<p>days</p>
</li>
<li>
<span>00</span>
<p>hours</p>
</li>
<li>
<span>00</span>
<p>minutes</p>
</li>
<li>
<span>00</span>
<p>seconds</p>
</li>
</ul>
</div> <!-- end timer-area -->
</div><!-- timer -->
</article>

Footer Code

The get notified form was added to the footer. It could as well have been placed in the article section, but for the purpose of the tutorial it is not important. Keep in mind though that to have a working submit form you need to insert an HTML form around the input tags.
<footer>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<div>
<input type="email" placeholder="Email here.." value="">
<input type="submit" value="submit">
</div>
<div>
<ul>
<li><a href=""><img src="images/facebook.png"></a></li>
<li><a href=""><img src="images/twitter.png"></a></li>
<li><a href=""><img src="images/linkedin.png"></a></li>
<li><a href=""><img src="images/skype.png"></a></li>
<li><a href=""><img src="images/youtube.png"></a></li>
<li><a href=""><img src="images/rss.png"></a></li>
</ul>
</div>
</footer>
 
</div><!-- wrapper -->
 
</body>
</html>

CSS code

/*  Main  */
body {
background: url(../images/bg-1.jpg) repeat;
color:#313132;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
text-shadow:0 1px 1px #fff;
}
 
#wrapper {
margin:60px auto 0 auto;
width:800px;
}
 
header h1{
font-family: 'ArvoBold';
font-size:80px;
text-transform:uppercase;
text-align:center;
margin-bottom:10px;
}
header p{
text-align:center;
}
 
article{}
 
.timer ul{
overflow: hidden;
margin:30px auto 0 auto;
width:450px;
}
.timer-area{
overflow:hidden;
}
.timer li{
display: inline;
float: left;
margin-right:10px;
width:80px;
height:115px;
background:url(../images/holder.gif) no-repeat;
padding:5px;
}
.timer li:last-child{margin-right:0;}
.timer li .big{
font-family: 'ArvoBold';
font-size:50px;
color:#598FA6;
text-align:center;
padding-left:10px;
position:relative;
top:20px;
}
 
.timer li .small{
font-family: Arial;
font-size:12px;
text-transform: uppercase;
text-align: center;
position:relative;
top:35px;
color:#598FA6;
}
 
footer{}
footer p{text-align:center;margin-top:20px;}
 
.subscribe{
overflow: hidden;
margin: 10px auto 0 auto;
width: 529px;
height: 80px;
background: url(../images/form-bg.gif) no-repeat;
}
.subscribe input[type="email"] {
background: none repeat scroll 0 0 transparent;
border: 0 none;
height: 42px;
margin-left: 18px;
margin-top: 16px;
width: 330px;
padding-left: 3px;
color:#d3d3d3;
font-size:20px;
border:1px solid #BABABA;
}
 
.subscribe input[type="submit"] {
background: url(../images/button.gif) no-repeat;
height: 48px;
width:152px;
text-indent: -9999px;
margin-top:13px;
border:0;
cursor: pointer;
}
.social{
float:right;
width:400px;
margin:30px 0 0 0;
}
.social ul{
list-style-type:none;
}
.social li a{
display:inline;
float:left;
width:48px;
}
.social li a:hover{
margin-top:-2px;
}

To add our @font-face, we will put this code at the beginning of body. Make sure our font folder is inside the css folder.
/* Fonts */
@font-face {
font-family: 'ArvoRegular';
src: url('fonts/Arvo-Regular-webfont.eot');
src: url('fonts/Arvo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Arvo-Regular-webfont.woff') format('woff'),
url('fonts/Arvo-Regular-webfont.ttf') format('truetype'),
url('fonts/Arvo-Regular-webfont.svg#ArvoRegular') format('svg');
font-weight: normal;
font-style: normal;
 
}
 
@font-face {
font-family: 'ArvoItalic';
src: url('fonts/Arvo-Italic-webfont.eot');
src: url('fonts/Arvo-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Arvo-Italic-webfont.woff') format('woff'),
url('fonts/Arvo-Italic-webfont.ttf') format('truetype'),
url('fonts/Arvo-Italic-webfont.svg#ArvoItalic') format('svg');
font-weight: normal;
font-style: normal;
 
}
 
@font-face {
font-family: 'ArvoBold';
src: url('fonts/Arvo-Bold-webfont.eot');
src: url('fonts/Arvo-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Arvo-Bold-webfont.woff') format('woff'),
url('fonts/Arvo-Bold-webfont.ttf') format('truetype'),
url('fonts/Arvo-Bold-webfont.svg#ArvoBold') format('svg');
font-weight: normal;
font-style: normal;
 
}
 
@font-face {
font-family: 'ArvoBoldItalic';
src: url('fonts/Arvo-BoldItalic-webfont.eot');
src: url('fonts/Arvo-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Arvo-BoldItalic-webfont.woff') format('woff'),
url('fonts/Arvo-BoldItalic-webfont.ttf') format('truetype'),
url('fonts/Arvo-BoldItalic-webfont.svg#ArvoBoldItalic') format('svg');
font-weight: normal;
font-style: normal;
 
}

The countdown timer

For the countdown timer, put the jCounter plugin file inside the js folder, file should be jquery.jCounter-0.1.2.js. Next is to attached the code inside the header of our HTML file where it says “js here”. Code should look like this:
<!-- JS -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.jCounter-0.1.2.js"></script>
 
<script>
 
    $(document).ready(function(){
        $("#countdown").jCounter({
          date: "25 december 2012 12:00:00",
          timezone: "Europe/Bucharest",
          format: "dd:hh:mm:ss",
          twoDigits: 'on',
          fallback: function() { console.log("Counter finished!") }
        });
    });
 
</script>

If you want to change the countdown date, look for date: “25 december 2012 12:00:00″, right now I set it up until Christmas. So we have a little countdown for the season :)

Markup Validation

After that, we will check it on our W3C markup validator to make sure the HTML is well formed.
html5-w3c
Great! We passed :D
Here is the demo page if you want to see a working example.

And we are done!

Converting a PSD to HTML is really an easy job, you just have to make sure that cropping images is a way to go instead of slicing them, and also practice a lot so you can remember different HTML5 elements. Hope you learned something new, and don’t forget to share it with your friends!


Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © Bjonk Design -