Converting PSD to HTML has been a challenge to every designer, you’re progress will depend on a couple of things, complexity of the layout, skills of the designer and how organize the PSD layers.
Today we will continue with our tutorial in which we will convert it to a working HTML / CSS. If you miss the PSD tutorial, you can check it out here.
You can download the PSD at the bottom of this tutorial!
Before we begin, we will download a couple of things:
- League Gothic from fontsquirrel
- Kaushan Script from fontsquirrel
- Icons from here
- Social Media Icons from iconarchive
- Twitter Bird from iconarchive
- Portfolio Layout PSD from here
Here’s the Demo
Open your Photoshop and we will begin to cut the important images.
First we cropped the Mac Book Pro, and saved it as png.
Next is the background, grab the Crop Tool (C) and select a certain area on the content section. Noticed that I used Marquee Tool here, just to show you the screenshot.
Now that we have what we need, we will create our file structure. We will use a free generator for that so we can save some time, head over to instantblueprint.com.
Choose HTML5, and the rest are defaults.
If you open your folder from instantblueprint, you’ll have a folder structure like this. A helpful generator tool 🙂
Next, we will code the HTML first and CSS styling on last. Open your Code editor, mine is sublime text 2 open your index.html.
This is for the header code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div id="container"> <header role="banner"> <div id="inner-header"> <div id="logo">Abbe</div> <nav role="navigation"> <div> <ul id="menu-main"> <li><a href="">Home</a></li> <li><a href="">Portfolio</a></li> <li><a href="">Blog</a></li> <li><a href="">About</a> <ul> <li><a href="">Contact</a></li> </ul></li> </ul> </div> </nav> </div> <!-- end #inner-header --> </header> <!-- end header --> <hr> |
Contect Section
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<div id="content"> <div> <div><!-- intro --> <h2><span>Successful</span> and <span>Compelling</span> Design is what we are after</h2> <p>and your website should do to!</p> <a href="">Get a Free Qoute</a> </div><!-- intro --> <div><img src="images/macbook.png" width="480" height="300"></div> </div> <!-- end #main --> </div> <!-- end #content --> </div> <!-- end #container --> <div><!-- bg --> <div> <div> <img src="images/Elegantly-designed.png"> <h3>Eye Candy Designs</h3> <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div> <img src="images/make.png"> <h3>Browser Compatible</h3> <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div> <img src="images/Attendance.png"> <h3>User Friendly</h3> <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> <!-- end #main --> <div> <div> <h3><span>Latest Projects</span></h3> <div> <img src="images/sleek-navigation.png"> <h4><a href="">Sleek Navigation</a></h4> <h5><em>Tutorials</em></h5> </div> <div> <img src="images/dvd-cover.png"> <h4><a href="">DVD Cover</a></h4> <h5><em>Tutorials</em></h5> </div> <div> <img src="images/form.png"> <h4><a href="">Registration form UI</a></h4> <h5><em>Tutorials</em></h5> </div> </div> <div> <h3><span>Latest Work</span></h3> <div> <img src="images/mini-browser.png"> <h4><a href="">Mini-Browser Frame in Photoshop</a></h4> <p>orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div> <img src="images/iphone-icon.png"> <h4><a href="">Iphone Icon App Tutorial</a></h4> <p>orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div> <img src="images/landingpage.png"> <h4><a href="">Landing Page with Timer in HTML5</a></h4> <p>orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> </div> <!-- end #main --> </div> <!-- bg --> |
Footer Section
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<footer role="contentinfo"> <div id="inner-footer"> <div><!-- right --> <p><b>Abbe</b> <em>is a free template for you who wants to get things done right.</em> </p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div><!-- right --> <div><!-- right --> <p><b>Tweets</b></p> <ul> <li>Lorem ipsum dolor sit amet, consectetuer <a href="">#adipiscin</a></li> <li>Lorem ipsum dolor sit amet, consectetuer <a href="">#adipiscin</a></li> <li>Lorem ipsum dolor sit amet, consectetuer adipiscin</li> </ul> </div><!-- right --> <div><!-- right --> <p><b>Social Connect!</b></p> <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/flikr.png"></a></li> <li><a href=""><img src="images/mail.png"></a></li> </ul> </div><!-- right --> </div> <!-- end #inner-footer --> </footer> <!-- end footer --> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 |
/****************************************************************** GENERAL LAYOUT STYLES ******************************************************************/ body { background:#FFF; color:#777;font:12px Georgia, "Times New Roman", Times, serif;line-height:1.4em; border-top:5px solid #FF6000; } /****************************************************************** GRID STYLES ******************************************************************/ /* 960 Grid System (http://960.gs/ ) */ #container, .wrap { width: 940px; margin: 0 auto; padding: 0 10px; overflow:hidden; } /* layout options ( all have margins right & left of 2.1276596%) */ .col60 { width: 6.3829787%; } /* width 60px / grid_1 */ .col140 { width: 14.893617%; } /* width 140px / grid_2 */ .col220 { width: 23.404255%; } /* width 220px / grid_3 */ .col300 { width: 31.914894%; } /* width 300px / grid_4 */ .col380 { width: 40.425532%; } /* width 380px / grid_5 */ .col480 { width: 48.936170%; } /* width 480px / grid_6 */ .col540 { width: 57.446809%; } /* width 540px / grid_7 */ .col620 { width: 65.957447%; } /* width 620px / grid_8 */ .col700 { width: 74.468085%; } /* width 700px / grid_9 */ .col780 { width: 82.978723%; } /* width 780px / grid_10 */ .col860 { width: 91.489362%; } /* width 860px / grid_11 */ .col940 { width: 100.0%; } /* width 940px / grid_12 */ /* layout & column defaults */ .col60, .col140, .col220, .col300, .col380, .col480, .col540, .col620, .col700, .col780, .col860, .col940 { display: inline; float: left; position: relative; margin-left: 1.0638298%; /* 10px */ margin-right: 1.0638298%; /* 10px */ } /* default styles & fixes */ .first { margin-left: 0; } /* fixes alignment */ .last { margin-right: 0; } /* fixes alignment */ /****************************************************************** COMMON & REUSABLE STYLES ******************************************************************/ /* floats */ .left { float: left; } .right { float: right; } @font-face { font-family: 'KaushanScriptRegular'; src: url('fonts/KaushanScript-Regular-webfont.eot'); src: url('fonts/KaushanScript-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/KaushanScript-Regular-webfont.woff') format('woff'), url('fonts/KaushanScript-Regular-webfont.ttf') format('truetype'), url('fonts/KaushanScript-Regular-webfont.svg#KaushanScriptRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LeagueGothicRegular'; src: url('fonts/League_Gothic-webfont.eot'); src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/League_Gothic-webfont.woff') format('woff'), url('fonts/League_Gothic-webfont.ttf') format('truetype'), url('fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg'); font-weight: normal; font-style: normal; } /****************************************************************** LINK STYLES ******************************************************************/ a, a:visited { color: #333; text-shadow:0 1px #fff;text-decoration:none; } a:hover, a:focus { color: #F37D01; text-decoration:none; } a:active {} /* on click */ a:link { -webkit-tap-highlight-color : rgba(0,0,0,0); /* this highlights links on Iphones / iPads */ } /****************************************************************** TEXT SELECTION STYLES ******************************************************************/ /* Highlighted Text */ ::selection { background: #333; color:#fff; text-shadow : none; } /* Firefox */ ::-moz-selection { background: #333; color:#fff; text-shadow : none; } /****************************************************************** HEADLINES & TITLES ******************************************************************/ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-family:Georgia, "Times New Roman", Times, serif;color:#333;} h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a { text-decoration: none; } h1, .h1 { font-size: 2.5em; line-height: 1.333em; } h2, .h2 { font-size: 2.5em; line-height: 1.4em; margin-bottom: 0.375em; } h3, .h3 { font-size: 1.3em;margin-bottom: 0.375em; } h4, .h4 { font-size: 1.1em; font-weight: 700;margin-bottom: 0.375em; } h5, .h5 { font-size: 0.846em; line-height: 2.09em; color:#999;font-weight:normal; } p{line-height:1.4em;margin-bottom:5px;} /****************************************************************** HEADER SYTLES ******************************************************************/ header[role=banner] {overflow:hidden;} #logo { margin: 1.1em 0 9px;font-family: 'KaushanScriptRegular',Helvetica Nue, Arial, Helvetica, sans-serif;font-size:40px;text-shadow:0 6px 2px #ccc;color:#333; } /****************************************************************** NAVIGATION STYLES (Main Navigation) ******************************************************************/ nav[role=navigation] {float:right; margin-top:30px;font-family: 'LeagueGothicRegular',Helvetica Nue, Arial, Helvetica, sans-serif;;font-size:22px;} nav[role=navigation] .menu { margin:5px 0 0 10px; } nav[role=navigation] .menu ul { } nav[role=navigation] .menu ul li { display:inline;float:left; } nav[role=navigation] .menu ul li a { color: #333; padding: 5px; margin-right:10px; text-decoration: none; float:left; text-shadow:0 0; } nav[role=navigation] .menu ul li a:hover { color: #FF6000; } nav[role=navigation] .menu ul li:first-child a {} nav[role=navigation] .menu ul li:last-child a {} nav[role=navigation] .menu ul li.current-menu-item a, nav[role=navigation] .menu ul li.current_page_item a, nav[role=navigation] .menu ul li.current-page-ancestor a {} /* sub menus */ nav[role=navigation] .menu ul li ul, nav[role=navigation] .menu ul li ul li ul { position: absolute; padding-left:10px; left: -9999em; top:65px; z-index: 9999; border:1px solid #ccc; width:200px; background: #fff; /* Old browsers */ } nav[role=navigation] .menu ul li ul li ul { margin-left: 200px; top: auto; margin-top: 30px; } nav[role=navigation] .menu ul li ul li:hover ul, nav[role=navigation] .menu ul li:hover ul { left: auto; } nav[role=navigation] .menu ul li ul li a { width: 160px; color:#333; border-bottom:1px solid #ccc; border-top:1px solid #fff; } nav[role=navigation] .menu ul li ul li a {} nav[role=navigation] .menu ul li ul li a:hover {color:#FF6000;} nav[role=navigation] .menu ul li ul li:last-child a {border-bottom:0;} nav[role=navigation] .menu ul li ul li ul.sub-menu { } nav[role=navigation] .menu ul li ul li:hover ul.sub-menu { } /****************************************************************** FOOTER STYLES ******************************************************************/ footer[role=contentinfo] { padding: 1.1em 0 3.3em; margin-top: 2.2em; } /* footer menu */ footer[role=contentinfo] nav { float: left; margin: 1em 0; } .footer-links {} .footer-links ul { margin-top: 0; } .footer-links ul li { list-style-type: none; float: left; font-size: 0.9em; } .footer-links ul li a { margin-right: 10px; text-decoration: underline; } .footer-links ul li:last-child a { margin-right: 0; } .footer-links ul li a:hover, .nav ul li.current-menu-item a, .nav ul li.current_page_item a {} .footer-links ul li ul.sub-menu { display: none; } /* you shouldn't have that many links in the footer anyway so it's set to display none ;P */ .attribution { margin: 1em 0; float: right; color:#333; font-size: 0.9em; } .none{display:none;} #inner-footer{width:940px;margin:0 auto;} /****************************************************************** SLIDE STYLES ******************************************************************/ .intro, .mac{margin-top:20px;} .intro h2{font:34px Georgia, "Times New Roman", Times, serif;font-style:italic;margin-top:30px;} .intro span{color:#FF6000;} .intro p{font-size:26px;margin-left:20px;} .intro-button{background:url(../images/result.png) no-repeat; float:left; height:60px; width:255px; text-indent:-9999px; border:0; margin: 15px 19px 0 80px; cursor:pointer; } .intro-button:hover{background-position: 0px -71px;transition: all 1s ease-in-out;} /****************************************************************** PORTFOLIO STYLES ******************************************************************/ .bg{background:url(../images/bg.png) repeat;margin-top:30px;padding:10px;} .content-main{width:940px;margin:30px auto 30px auto;background:#fff;-moz-box-shadow:0 0 4px #999;-webkit-box-shadow:0 0 4px #999;box-shadow:0 0 4px #999;padding:10px;overflow:hidden;} .content-main-text{text-align:center;} h3.heading { background: url("../images/dot.png") repeat-x scroll center center transparent; font-size: 18px; font-weight: normal; margin: 0 0 25px; text-align: left; } h3.heading span { background: none repeat scroll 0 0 #FFFFFF; padding: 0 20px; } .content-main-work{border-bottom:1px solid #ccc;text-align:center;} .content-main-work:hover{border-bottom:1px solid #D0ECFF;} /****************************************************************** BLOG POST STYLES ******************************************************************/ .main-content{overflow:hidden;margin-bottom:30px;} .border-bottom{border-bottom:1px solid #ccc;padding-bottom:5px;} /****************************************************************** TWEETS STYLES ******************************************************************/ .tweets li{ list-style-type:none;padding:0 0 10px 35px;background: url(../images/ZkxaLL.png) left no-repeat; vertical-align:middle;} .social li{list-style-type:none;display:inline;margin-right:20px;} |
One more thing before we call wrap this, we need to check if we pass the W3C validator.
We pass! We have a warning, but it’s minor 🙂
Hope you guys learned something new about this conversion, next part is using Bones Theme to convert this into full pledge WordPress Theme. So stick around and we will cover how to create a wordpress theme on the next part.