The Most Detailed PSD to HTML Tutorial

In client section by default we give it 10% width to equally divide and position the images correctly, now let’s change it to 100% and add a 30px bottom margin.

  1. Convert a PSD Template to Basic HTML Video Series
  2. Convert a PSD Template to Bootstrap Video Series
  3. Code a Responsive Website with HTML5 and CSS3
  4. Design an Agency Landing Page in Photoshop
  5. Convert the Agency PSD into HTML
  6. Make the Agency HTML Responsive

Unlimited Downloads: 500,000+ Fonts, Web Templates, Themes & Design Assets

This is a personal logo that I’ll be using in this tutorial. For the Burnstudio text I used Myriad Pro 30pt, color #4d9543 and #4a4a4a. Feel free to create your own brand name using these font settings.

1. Convert a PSD Template to Basic HTML Video Series

Finally, we reach the last part of this tutorial, which is to make every section responsive. As a bonus, we will make the banner and testimonial section a carousel.
For just now, we will only cover the HTML tags that are useful to beginners, we will cover the more advanced tags at a later time. Then, we will style the tags using basic CSS properties. Don’t worry, in the next videos we will go more in-depth and learn together.

  • Planning
  • Wireframing
  • Using basic tools and panels in Photoshop
  • Basic HTML and CSS coding
  • How to apply your new knowledge and code your very first website from scratch in Bootstrap.

Result

  • Wireframe Template: Download Here
  • Finished PSD: Download Here

<!doctype HTML> <html lang=”en”> <head> <meta charset=”utf-8″> <title>Burnstudio</title> <link rel=”stylesheet” href=”style.css”> </head> <body> <div id=”header-wrap”> <header> header content goes here </header> </div> <!– end header wrap –> <div id=”container”> <div id=”slides”> slides content goes here </div> <!– end slides –> <div id=”service”> service content goes here </div> <!– end service–> <div id=”media”> media content goes here </div> <!– end media –> </div> <!–! end container –> <div id=”widget-wrap”> <div id=”widget”> widget content goes here </div> <!– end widget –> </div> <!–! end widget-wrap –> <div id=”client-wrap”> <div id=”client”> widget content goes here </div> <!– end client –> </div> <!–! end client-wrap –> <footer> footer content goes here </footer> </body> </html>

Here is the image of the overall markup that we have done.

Part 1: PSD to HTML Tutorial – Wireframing, Photoshop Tools & Panels, and Designing

Planning and Wireframing:

In this 2nd section of the Elegant Landing Page Design tutorial, we will be work on the coding part. Here, we will talk about how to use the popular Bootstrap web framework for transforming our PSD design into a working website.
The Video Series has been split into:
Text size 12pt, paragraph color #666666, distance from top 30px, distance from text 15px.
For the blog img since we just positioned blog div to relative we can now position this absolutely to position the image the same to psd design which is left 18px. For the .title, .date and .readmore they have the same margins from left. For the location the same also in blog where it is positioned relatively and position the inside image absolutely, and for the address I added margin and paddings and give it a 1px border to the right.

Wireframing Tools:


<div id=”footer-right” class=”group”/>


Once you’ve done it. Select Rounded Rectangle Tool(U) and create the same shape as shown in the screenshot below.

Designing in Photoshop:

We will be coding this from scratch and by the end you will have an awesome and fully functional agency layout.


For the location just duplicate the heading and change the text to (Our Location). Add the map Icon. I already customized the map to show where is my exact location so feel free to customize yours. For the text color will be #cccccc and for the line #484848.

Part 2: PSD to HTML Tutorial – Basic HTML Tags, Structure & CSS

Noticed the prev-next.png on the left side this contains the image of prev button and on the right side this contains the image of the next button.
We’re done with the Photoshop part, now onto creating this PSD into working HTML website!
Apply this Blending Option

The Final Product of this HTML Tutorial:

Preparation:

Choose Your Text/Code Editor

Lastly, I styled the search input with a rounded radius, a green background, dark border on top and light border on bottom. Also to target placeholder attribute refer to the CSS which I comment to style place holder this is a part of css3 property.

  • Atom
  • Notepad++
  • Aptana
  • Sublime Text

Table of Contents:

  • Textwrangler
  • Textmate
  • Coda

Basic HTML Tags and Structure:


Let’s code a website!

Basic CSS Properties:

Once you have finished it, place the logo 40px below the green shape.
Next let’s add the text. For the heading title I used the same font as the call to action part, then for the paragraph I use Helvetica 13pt, #555555 and for the read more I made it Italic and used the same color green and added an arrow using Pencil Tool(B) beside it.
@media only screen and (max-width: 524px){styling goes here}


<footer class=”group”> <div id=”footer-left”> Copyright <a href=”#” class=”green”>www.1stwebdesigner.com</a> </br> Designed by <a href=”#” class=”green”>Michael Burns</a> </div> <div id=”footer-right”> <ul> <li><a href=”#”>Home</a></li> <li><a href=”#”>Services</a></li> <li><a href=”#”>About Us</a></li> <li><a href=”#”>Testimonials</a></li> <li><a href=”#”>Contact Us</a></li> </ul> </div> <a href=”#header-wrap”><img src=”images/back-top.png” alt=”back-top” class=”back-top” /></a> </footer>

For the slider controls let’s just move the next to right by change the right value to 0px, for the prev change the value to 25px. Lastly, for the pagination change the left value to 0px.
For the footer-left and footer-right I gave it a width of 50%, floated it left and right. For the copyright text I made it smaller and changed the color to a lighter one. For the links I floated the ul to the right and floated li to left, gave a margin of 30px, for the last-child I removed the margin, for the links I styled it the same with the copyright text and added 2px border when its hovered.

  • Museo Font
  • Pixel Pattern
  • Time and Patience

Design & Inspiration

Finding Inspiration & Wireframing

Apply this Blending Option

  • DeviantArt.com
  • Dribble.com
  • Behance.net


  • MockFlow.com
  • Mockingbird.com
  • Wireframe.cc

Now our layout should look like this.

Wireframe to Photoshop:

Now our layout should look like this.

Applying Styles:

<div id=”media” class=”group”> <div id=”video”> <h4>Quick<strong>Video Tour</strong></h4> <h5>How we Design our works!</h5> <a href=”#” class=”play”><img src=”images/play.png” alt=”play” /></a> </div> <div id=”twitter”> <h4>Twitter <strong><span class=”green”>Feed</span></strong></h4> Mashable Video: Principal Resigns After Allegedly Posing as a Student on Facebook -<a href=”#” class=”t-link”>http://on.mash.to/IVYWYJ</a> 9 hours ago </div> <div id=”facebook”> <h4>Like Us On <strong><span class=”green”>Facebook</span></strong></h4> </div> </div> <!– end media –>

The next thing you will need to do is to create a wireframe based on your ideas.
<div id=”web”> <img src=”images/web.png” /> <h3>Web <strong><span class=”green”>Design</span></strong></h3> Nunc viverttra erat et turpis viverra pellentesque. Maecenas ullamcorper, nibh tristique ullamcorper lacinia, tellus nisi blandit elit, id pulvinar tortor. <a href=”#” class=”readmore”>read more</a> </div> <!– end web –> <div id=”vector”> <img src=”images/vector.png” /> <h3>Vector <strong><span class=”green”>Design</span></strong></h3> Nunc viverttra erat et turpis viverra pellentesque. Maecenas ullamcorper, nibh tristique ullamcorper lacinia, tellus nisi blandit elit, id pulvinar tortor. <a href=”#” class=”readmore”>read more</a> </div> <!– end vector –>


Now if you were looking for a video HTML tutorial and are ready to build a responsive web design with HTML5 and CSS3 – you are in the right place. Just download the source files, view the demo and click play on the video. Let’s make a responsive HTML website!

  • The First will be about marking up the HTML.
  • The Second will be about applying CSS styles.
  • The Third will be on how to make it all responsive.

  • Bootstrap
  • Time and Patience

The HTML Markup:

/* VIEWPORT &lt; 524px */ @media only screen and (max-width: 524px){ header, nav, #slides, #service, #widget, #media, #client, footer, #container{ width: 300px; } header h2 a{ width: 100%; background-position: center top; } nav{ height: auto; } nav ul li{ float: none; border: none; border-bottom: 1px solid #336c2b; border-top: 1px solid #78c368; } nav ul li.home{ border-top: none; } nav ul li.last{ display: block; border-bottom: none; width: 100%; margin: 0; } nav ul li.last div{ margin-left: 15px; } nav ul li a{ text-align: center; } nav ul li.home a:hover{ -webkit-border-top-left-radius: 30px; -webkit-border-top-right-radius: 30px; -webkit-border-bottom-left-radius: 0; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 0; background: #5fae53 url(images/home.png) no-repeat 50% 50%; } #call{ display: none; } .slides_container{ height: 270px; } .slide-heading{ width: 300px; } .slide-right .info{ width: 300px; } #web img{ width: 64px; height: 72px; } #vector img{ width: 76px; height: 69px; } #service{ height: auto; } #footer-right ul{ float: none; width: 285px; margin: 0 auto; } #footer-right ul li{ float: none; margin: 0; } #footer-right ul li a{ padding: 8px 0; } }

Lastly, of course you still need your favorite code editor, debugging tools and lastly the web browser where we can view our coded layout.

Applying the CSS Styles:

All you need to do is first create a 550px by 250px shape and customize the bottom right corner the same in the screenshot below using Direction Tool(A).
Let’s get started!
All li are floated left except for the last li element, also it has a left and right border except for the the home there is no left border and for the last there is no right border.

The Responsive Part:

The use of this is when you are measuring using the ruler; the information will be shown in the information panel. Make sure that this is shown in your panels to the right. If it is not shown you can access this by going to Windows – Info.

Finished!

Now that you have finished positioning the layout structure, you can now proceed to the next part of the tutorial series, which is marking up the HTML.

3. Code a Responsive Website Using HTML5 and CSS3

It is important to test code using different browsers every step of the way so that we can keep on track of our code. I used CSS3 styles in this tutorial, which should work in Chrome and Firefox. For IE6 trust me, it still looks fine.
Looking for a quick coding tutorial? – How to Make a Website Responsive in Just 15 Minutes
Resources you will need for the Photoshop part of this tutorial:
I positioned the .next image to top right, .prev positioned to top-left, and for the hover just change the top to bottom.

4. Design an Agency Landing Page in Photoshop

Last step in this part is to add Drop Shadow on the icons and text to make it more crisp.

The resources you’ll need for this tutorial:

Design an Agency Landing Page in Photoshop

I also added a play icon I created using the Pencil Tool(B) with the same green color.

  • Tutorial Source Files
  • Home Icon
  • Search Icon
  • Map Illustration
  • RSS Icon
  • Macbook Air PSD
  • Web Design Icon
  • Vector Design Icon

Step 1: Setting up the Document

Our header will contain a logo, call to action, navigation, search.
Apply this Blending Option
And that’s it for this slider part.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

For the slide-right which contains the heading, info and read more, all positioned absolutely, 0 out top, and pushed it 385px from left.

DOWNLOAD NOW

Now let’s style all the element, here’s the CSS.

Step 2: Working on the Header

@media only screen and (max-width: 960px){styling goes here}

For the paragraph I gave it a fixed width with a margin, for the image I floated it right and give it a right margin, pretty much the same on vector image and text.

Step 2.1:

Step 2.2:

Sources of Web Inspiration:
Make sure that you followed the previous tutorial where we converted a PSD file into a working HTML/CSS website. Before anything else I want to point out that we need to design how it will look based on our existing design for a different viewport, in this case for a mobile device that has a max-width of 320px.

Step 2.3:

Now our layout should look like this.
In this tutorial we will show you how to create a stylish landing page using Adobe Photoshop and then we will convert it into HTML and then make it all responsive.
Add the following text and Icons as shown in the screen shot below. Note that text sizes and color are all the same so feel free to copy some elements as we did previously. Also the distance from the shape left and above is 30px.
<script> $(function(){$(‘#slides’).slides({preload: true,generateNextPrev: true,});}); </script>

For the back to top button. I create it using Ellipse Tool(U), 30px by 30px shape. I apply 1px #bdbdbd inside stroke and create an arrow facing top using Pencil Tool(B).
Also we need to export the images to be used in the PSD file. For example the The Logo, you will need to select the layer from the layers panel, copy and paste it in a different document and CTRL + ALT + SHIFT + S in order to save for web and devices, the appropriate file type for the logo should be .png. But if you’re tired of doing this you can just download the files and use the images I already exported.

Step 2.5:

  • Stroke

  • Inner Shadow

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

  • Gradient Overlay

Resources you will need to complete this part of the tutorial:

Step 2.6:

Now let’s add the content inside the client element, here’s the HTML.

Step 2.7:

Now let’s add the CSS styling as follows:

  • Stroke

Well, this part is very simple just take some sample Icons and desaturate it by going to Image – Adjustment – Desaturate or by pressing Ctrl + Shift + U. This section will take up 145px of height so, place the icons accordingly and make sure it is centered. Last thing is to add a 1px #c8c8c8 below and we’re done.
For the slide-heading I gave it a fixed width and height equal to the background image, and gave it a padding to make the text align properly, also a margin to give a space and align it correctly.
For the slide-heading I gave it a fixed width and height equal to the background image, and gave it a padding to make the text align properly, also a margin to give a space and align it correctly.
For the slide-heading I gave it a fixed width and height equal to the background image, and gave it a padding to make the text align properly, also a margin to give a space and align it correctly.

  • Drop Shadow

  • Inner Shadow

In web and vector section let’s change the width to 100% to fill up the whole space and by giving the web a 30px bottom margin to give space.

Step 6.5:


/* CLIENT */ #client-wrap{ background: #fff url(images/client-bg.jpg) repeat-x; padding: 40px 0; border-bottom: 1px solid #c8c8c8; } #client{ width: 960px; margin: 0 auto; } #client ul li{ width: 20%; float: left; text-align: center; } /* END CLIENT */


I also added a 1px #c8c8c8 solid line 20px from the right side of the text. You want to align it with the logo.

Step 6.7:

<div class=”slides_container”> <div> <img src=”https://1stwebdesigner.com/wp-content/uploads/2012/09/slide1.png” alt=”slide1″ /> <div class=”slide-right”> <h1 class=”slide-heading”>Artthatworks 1 dolor sit amet, consectetur adipiscing elit.</h1> Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh. <a href=”#” class=”readmore”>read more</a> </div> </div> <div> <img src=”https://1stwebdesigner.com/wp-content/uploads/2012/09/slide1.png” alt=”slide1″ /> <div class=”slide-right”> <h1 class=”slide-heading”>Artthatworks 2 dolor sit amet, consectetur adipiscing elit.</h1> Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh. <a href=”#” class=”readmore”>read more</a> </div> </div> <div> <img src=”https://1stwebdesigner.com/wp-content/uploads/2012/09/slide1.png” alt=”slide1″ /> <div class=”slide-right”> <h1 class=”slide-heading”>Artthatworks 3 dolor sit amet, consectetur adipiscing elit.</h1> Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh. <a href=”#” class=”readmore”>read more</a> </div> </div> </div> <!– end slides container –>

Step 7: Working on Footer

Now let’s style all the element, here’s the CSS.
Text size 12pt, link color #666666, 2px #c8c8c8 bottom line border.

Step 7.1:

I positioned the background by default to top since the normal state image is on top, for the current or the active state we will be going to reverse the positioning from top to bottom and lastly display it as a block level element and hide the text.

Step 7.2:

Step 7.3:

Result
Now let’s add the content inside the media element, here’s the HTML.
For Mac Users:

5. Convert the Agency PSD into HTML

Adding the shadow to the bottom part is very simple. All you need to do is duplicate the base shape and make the fill color #000000, place it below the original shape layer.

Resources You Will Need To Code This Website:

  • PSD Download
  • SlidesJS
  • CSS Tools: Reset CSS
  • Time and Patience 🙂

Step 1: Preparation for the PSD to HTML Tutorial


By the end of this media queries HTML tutorial you will learn how to convert any website into a responsive website.
You’ll learn all of the steps, including:

Step 2: Getting Files Ready

Next, I styled the navigation with a fixed width, height and a gradient, I applied a clear both to clear the above floating elements logo & call.
This is how our website layout will look on screens with a width of 960px and below.

Step 3: Simple Starter Layout

Apply this Blending Option

  • Background: you notice that the background is white.
  • Header: Notice that in this section the header has a green line on the top which covers the whole screen, so in order to do this we need to wrap the header with another container. The header contains logo, call to action, navigation and search.

Also one thing important to note in using the Ruler Tool is the Info(Information) Panel.

/* VIEWPORT &lt; 960px */ @media only screen and (max-width: 960px){ header, nav, #slides, #service, #widget, #media, #client, footer, #container{ width: 768px; } .slide-right{ left: 0; } .slide-heading{ width: auto; height: auto; padding: 0; margin: 0 0 20px 0; background-image: none; color: #333; } .slides_container div img{ display: none; } .slide-right .info{ width: 768px; margin-bottom: 20px; margin-left: 0; } .slide-right .readmore{ margin-left: 0; } .slides_container{ height: 200px; } a.next{ right: 0px; } a.prev{ right: 25px; } .pagination{ left: 0; } #service{ background: none; height: auto; } #vector{ padding-left: 0; width: 369px; } #vector img{ margin-right: 0; } #web{ padding-left: 0; width: 369px; } #web img{ margin-right: 0; } #facebook{ display: none; } #twitter{ margin-left: 18px; } #blog{ clear: both; } #links{ width: auto; margin-bottom: 30px; } #links ul li{ float: left; margin-right: 30px; } }

Apply these Blending Options:

  • Service: this section contains 2 columns for web design and vector design.

So that’s it for the design and inspiration part.

  • Media: this section is divided into 3 columns for video, Twitter, and Facebook.

/* FOOTER */ footer{ clear: both; width: 960px; margin: 0 auto; padding: 30px 0 60px 0; position: relative; } #footer-left{ float: left; width: 50%; } #footer-left p{ font-size: 12px; color: #666666; } #footer-left a:hover{ color: #c8c8c8; } #footer-right{ float: right; width: 50%; } #footer-right ul{ float: right; } #footer-right ul li{ float: left; margin-right: 30px; } #footer-right ul li:last-child{ margin-right: 0; } #footer-right ul li a{ color: #666666; display: block; padding-bottom: 10px; font-size: 12px; } #footer-right ul li a:hover{ border-bottom: 2px solid #c8c8c8; } .back-top{ position: absolute; bottom: 30px; right: 50%; } /* END FOOTER */

  • Widget: this section is divided into 3 columns for links, blog, and location. Also you will notice it is covered with a gray dotted pattern that covers the whole screen.
  • Client: In this section you will notice there is a solid gray border on the bottom that covers the entire screen and a list of clients logo.

  • Footer: Finally, the footer which contain 2 columns for copyright, footer links, and back to top arrow.


Now let’s add the content inside the service element, here’s the HTML.
This is helpful so that we can position the inside elements prev, next, and pagination absolutely which are auto-generated by the JavaScript. For the slides_container I gave it a fixed height of 315px which is equal to the height of the slider image.
Next is the previous and next button. I created this using Pencil Tool(B). Normal state color will be #4f4c4d and for the Active the same green color. Place this as shown in the screenshot below.

Step 4: Working on Header Section

Resources you will need to complete this HTML tutorial:
Next we will hide the call div by adding a display to none. For our logo let’s position it to center by giving it a width of 100% and by adding a background-position center top.
Result
<h1><a href=”index.html” title=”burnstudio”>Burnstudio</a></h1> <div id=”call”> <h3>(012) 345 6789</h3> <h4 class=”green”>Call us <strong>now</strong></h4> </div> <!– end call –> <nav class=”group”> <ul> <li class=”home”><a href=”#”>Home</a></li> <li><a href=”#”>Services</a></li> <li><a href=”#”>About Us</a></li> <li><a href=”#”>Testimonials</a></li> <li class=”last”> <div> <input type=”text” name=”search” placeholder=”search” /> <input type=”submit” name=”search” value=”go” class=”search”/> </div> </li> </ul> </nav>

For the Facebook widget there’s nothing special I just took a screen shot in the widget page.
Now let’s style all the element, here’s the CSS.
In widget section the only thing we need to change is the links, let’s change the default width to auto, then by floating the li elements to left and adding a 30px margin to right.
The slider part will be 300px high and 40px below the navigation, so go ahead and measure it with Ruler Tool(I).
Now that we have all the shapes together let’s fill it with text and add an image. All you need to do is create a new layer above the shape and place your image there, then Right Click and click Create Clipping Mask. Do the same on the ellipse shape. I will leave it up to you what image you use.

Next, Go to Filter – Blur – Gaussian Blur to 7.0, create a mask on the layer and brush over the part that we don’t nee

Lastly, since I positioned the footer relatively, I can position the back-top absolutely to the center which is right 50%.

The total width of this site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px.
Notice also I added the classes green and white, this will be used when we style green or white text that can be seen in the design.

<div id=”service” class=”group”/>

Download the Source Files
Now let’s style all the elements, here’s the CSS.

Step 5: Working on Slider Section

Since the corner is rounded we need to specify another style hover for the home button that’s what I did below the a:hover.
body{ background: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 13px; } /* FONT STYLES*/ h3{ font-size: 24px; font-family: Helvetica, Arial, sans-serif; color: #333333; margin-bottom: 25px; } h4{ margin-bottom: 25px; font-size: 18px; font-family: Helvetica, Arial, sans-serif; } h5{ font-size: 14px; font-family: Helvetica, Arial, sans-serif; } p{ font-size: 13px; color: #555555; line-height: 18px; } a, a:link, a:visited{ text-decoration: none; outline: none; } .green{ color: #509743; } .white{ color: #fff; } strong{ font-weight: bold; } /* END FONTS STYLES */

<!–[if IE]> <script type=”text/javascript”> (function(){ var html5elmeents = “address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video”.split(‘|’); for(var i = 0; i < html5elmeents.length; i++){ document.createElement(html5elmeents[i]); } } )(); </script> <![endif]–>

Now that we’re done marking up our HTML, it is time to overwrite the default styling that Bootstrap provides. What’s good with this is we will not be worrying about the layout structure because Bootstrap already has done it for us by just adding the right classes for each division that we’ve markup in HTML.
Now that we’re done marking up our HTML, it is time to overwrite the default styling that Bootstrap provides. What’s good with this is we will not be worrying about the layout structure because Bootstrap already has done it for us by just adding the right classes for each division that we’ve markup in HTML.
Now that we’re done marking up our HTML, it is time to overwrite the default styling that Bootstrap provides. What’s good with this is we will not be worrying about the layout structure because Bootstrap already has done it for us by just adding the right classes for each division that we’ve markup in HTML.
Now that we’re done marking up our HTML, it is time to overwrite the default styling that Bootstrap provides. What’s good with this is we will not be worrying about the layout structure because Bootstrap already has done it for us by just adding the right classes for each division that we’ve markup in HTML.
Now that we’re done marking up our HTML, it is time to overwrite the default styling that Bootstrap provides. What’s good with this is we will not be worrying about the layout structure because Bootstrap already has done it for us by just adding the right classes for each division that we’ve markup in HTML.
Now that you have the general idea for the website’s layout, it’s time to tone this up and make it more presentable in Photoshop. Let’s make this design as simple as possible.
Using Rounded Rectangle Tool(U) create a 300px by 145px shape as shown in the screen shot below with the same green color.
Next using Ellipse Tool(U) create a 160px by 160px shape. Fill color for this one doesn’t matter because we’ll be masking an image above it later. Place this shape at the center of the bottom right corner.
Once we have our PSD design ready, we will convert it into a working website using the popular Bootstrap web framework. Let’s get started!

6. Make the Agency HTML Responsive

In this part, we will walk you through the basic Tools and Panels in Photoshop, and talk about how important they are and how each tool will help to create your website design in Photoshop.

We will do our best to walk you through everything slowly and clearly. So, are you ready to get started!
/* HEADER */ #header-wrap{ border-top: 10px solid #4d9543; padding-top: 40px; } header{ width: 960px; margin: 0 auto; padding: 0; } header h2 a{ display: block; text-indent: -999999px; background: url(images/logo.png) no-repeat; width: 214px; height: 77px; float: left; margin-bottom: 40px; } #call{ float: right; border-right: 1px solid #c8c8c8; padding-right: 25px; margin-top: 20px; } #call h3{ margin: 0; } #call h4{ text-align: right; margin: 0; } nav{ clear: both; width: 960px; height: 50px; -moz-border-radius: 30px; -webkit-border-radius: 30px; background-color: #3b7c33; /* Fallback */ border-radius: 30px; /* Safari 4+, Chrome 1-9 */ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5fae53), to(#3b7c33)); /* Safari 5.1+, Mobile Safari, Chrome 10+ */ background-image: -webkit-linear-gradient(top, #5fae53, #3b7c33); /* Firefox 3.6+ */ background-image: -moz-linear-gradient(top, #5fae53, #3b7c33); /* IE 10+ */ background-image: -ms-linear-gradient(top, #5fae53, #3b7c33); /* Opera 11.10+ */ background-image: -o-linear-gradient(top, #5fae53, #3b7c33); border: 1px solid #336c2b; } nav ul li{ float: left; border-right: 1px solid #336c2b; border-left: 1px solid #78c368; } nav ul li.home{ border-left: none; text-indent: -9999px; background: url(images/home.png) no-repeat 50% 50%; } nav ul li.last{ border-left: none; border-right: none; float: right; margin-right: 20px; } nav ul li a{ display: block; padding: 0 30px; height: 50px; line-height: 50px; font-size: 15px; color: #fff; text-shadow: 0 1px 0 #387031; } nav ul li a:hover{ background: #5fae53; } nav ul li.home a:hover{ -webkit-border-top-left-radius: 30px; -webkit-border-bottom-left-radius: 30px; border-top-left-radius: 30px; border-bottom-left-radius: 30px; background: #5fae53 url(images/home.png) no-repeat 50% 50%; } nav ul li div input[type=text]{ -webkit-border-radius: 20px; -moz-border-radius: 20px; background: #4b9241; border-left: none; border-right: none; border-bottom: 1px solid #5ead52; border-top: 1px solid #346d2c; color: #fff; text-shadow: 0 1px 0 #387031; padding: 5px 0 5px 20px; width: 200px; } nav ul li div input[type=text]:focus{ outline: none; } /* TO STYLE PLACE HOLDER */ ::-webkit-input-placeholder { color: #fff; } :-moz-placeholder { color: #fff; } nav ul li div input[type=submit]{ background: url(images/search.png) no-repeat 50% 50%; border: none; text-indent: -999999px; margin-left: 15px; height: 50px; width: 16px; } /* END HEADER */

Apply the following Blending Options:

Step 1: Preparation

Now, add your number and Call us now text using Text Tool(T).

Apply these Blending Options
Now let’s work on the links section, the total width for this will be 225px. I used the same font style and size, the links have a distance of 25px from each other.

Step 2: Getting Files Ready

You will learn how to style individual elements and tags using CSS properties by changing width, height, colors, floats, etc. Using these basic properties you can turn your HTML markup into a well-presented website.

Step 3: Adding Meta Tag

When you test it you will have something that looks like the screenshot below.

Step 4: Working < 960 Viewport

Let’s assume that we already know what the goal is of the website we’re going to build. The first step is to gather some inspiration that suits your taste and start doing some rough sketches using pen and paper.
We’re done, Finally!
To position the search bar correctly apply a 15px margin to the left on li.last div. Now let’s position the text to center by applying text-align center. Next, we will change the border-radius to top-left and top-right when we hover to .home.
A wireframe is a visual presentation of how a website’s layout will look when it’s completed. It’s about structuring the overall layout without any graphics or actual content and placing the various web elements where you believe they will look and work best.
A wireframe is a visual presentation of how a website’s layout will look when it’s completed. It’s about structuring the overall layout without any graphics or actual content and placing the various web elements where you believe they will look and work best.
A wireframe is a visual presentation of how a website’s layout will look when it’s completed. It’s about structuring the overall layout without any graphics or actual content and placing the various web elements where you believe they will look and work best.


Required Download: PSD Template
You will need to create a directory folder and inside of it you should have /images directory for images and /js directory for JavaScript. I placed the CSS file in the root folder including the HTML file.
All CSS should be added in the style.css file. Also, make sure you just copy the CSS reset which I provided in the resources and place it in style.css file.
For the pagination, prev, and next buttons this is auto-generated by the JavaScript in order to style this first we need to identify what is the tag or the applied html class attribute.
For the img that displays on our slider we will hide it by changing the display to none. For the slide-right .info .readmore we will zero out the left margin to push it back to the left, also for the .info let’s change the width to 768px and add a 20px bottom margin.
Next we will be adding the slider controls. Using Ellipse Tool(U) create a 3 13px by 13px shape. the normal state color will be #f5f5f5 and for the active is #4e9643. Place it as shown in the screen shot below.

We’re done, Finally!

In part 2, we will talk about the tools you will need before starting to work with HTML and CSS, and then you will learn the most commonly used HTML tags.

Posted by WordPress Guru