photoshop-psd-coming-soon-page

This is the second part of our Clean Coming Soon Page tutorial series. On the first part of this tutorial we created a PSD mock up using Photoshop. On this second part we will convert it into a HTML5 page with a working countdown timer. The purpose of this article series is to show you the techniques needed and provide you with a freebie solution. You will be able to use it as is and you can easily alter it to fit your needs.

Today we will do a couple things like cropping the images, converting the PSD into HTML5, setting up the countdown timer, and validating our HTML file, so get ready and let’s go!
[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);echo $filestr;[/exec]

This is the end result of this tutorial. At the end of the article you can see a demo and download the source code.

Getting started

Start collecting the resources you need.

Create a folder structure like this to hold the files:

– root
– – css
– – images
– – js

Cutting the images

Before we start we will grab some images from the PSD (get it from the first part of this tutorial). Open it in Photoshop and let’s start!

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

[html]

<!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>

[/html]

Article Code

The article section contains the timer. The code is structured as a list with spans for the count down numbers.

[html]

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

[/html]

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.

[html]

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

[/html]

CSS code

[css]

/*  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;
}

[/css]

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.

[css]

/* 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;

}

[/css]

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]
<!– 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>

[/js]

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 😀

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!

[wp-like-locker]

Thanks for liking this article. To be updated whenever we release new freebies and tutorials please like our Facebook page now. You can find the like button on top in the right side. We appreciate your support!

Download the file here.

[/wp-like-locker]

[exec]echo get_avatar( get_the_author_email(), ’80’ );[/exec]

Author : Sanjay Khemlani

[exec]the_author_description();[/exec]

first part of this tutorial

Pin It on Pinterest

Shares
Share This

Share This

Share this post with your friends!

Shares
WordPress Appliance - Powered by TurnKey Linux