Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk

  • Apr 23 2013

    PSD to HTML Conversion Tutorial: creating folder structure and adding links

    Hello folks! Welcome back to our PSD to HTML conversion tutorial series. This is our second tutorial of the series, you can go also through the first one where we explained how to add image links before moving ahead with this, and we are excited to start with it.. But let’s see what we have in our store for today. So first of all let’s have a look at the PSD given below.

    PSD to Prestashop Project

    Download this PSD to HTML Conversion Tutorial Files Here

    Today we will be converting this PSD into HTML5 webpage using a little bit of HTML5 and CSS3. Before starting out on our journey to convert this design, we must tell you that PSD conversion is a tricky process, and it can take 15 minutes to 5-6 hours to convert a design file into an HTML page, but all depends upon the design. As the more complicated a design would be the more time you will need to convert it. However, as this is a beginner tutorial series, we have used  simple designs  so that you can get involved and understand the process easily.

    Though this series of PSD to HTML tutorials is specifically meant for beginners in web development, but still we assume you are quite aware of the basic HTML5 & CSS3 coding like :what is an HTML tag?, how and where to use the section tag?, what new properties and selectors have been introduced in CSS3 ? etc. Additionally, we also believe that you know where to place the index.html. style.css, and image files. Ah! Don’t feel as if we would take you through the entire process like Ussain Bolt runs, in fact, we will cover each and every code line step by step except the basic things like Doctype & HTML tags. In addition to this, this tutorial will also carry a  Psd to Html 5 Conversion Tutorial Video , which you can watch anytime to see the conversion being done practically.

    Now let’s start with the HTML.

    The HTML

    Let’s Elaborate the Codes

    The page header

    This is just the beginning and a very basic of HTML5. There’s nothing much to explain. In the first line we opened the head section, defined the meta charset in the second line, added the site title in the third, and linked our JavaScript or js for Internet Explorer version 7 & 8 ,Linked style.css file in the fourth and fifth line respectively and closed the head section.

    The Body

    Now comes the main section i.e., the body section, where you need to concentrate a little more to understand each & every bits and pieces of the html code.

    In the first line we just opened the body tag. Next me made the division using the div tag and gave it a class of wrapper, which will come into play in the CSS file. In the third line we introduced the section tag and gave it a property of id=”main”.

    The H1 Tag

    H1 to H6 tags are a very important element of a web page. These tags are used for defining the Headings and Sub-headings in a webpage. As you can see in the PSD design, we have a heading at the top, so here we have used the H1 tag to make our heading stand out in an impactful manner.

    The Image Placement using Unordered List tags

    In our PSD design, we have three images, which include the PSD logo, an Arrow, and the Prestashop logo. Now in order to place our images, we have opened the UL or Unordered list tag. Then we introduced the first list tag where we have mentioned the hyperlink or a website URL that the image points to using the ‘a’ tag, and placed an image using the img tag. We repeated this step two more times for recalling the other two images, and closed the unordered list tag successfully.

    The noticeable thing here is that we have defined a class in two of the <li> tags; namely class=”coll” and class=”last”. These classes will come handy in CSS. So wait for them a bit.

    The Final Part of HTML

    Now as we have made the header section, created the body tag, made a division, introduced the section, and placed the images successfully using the list tags inside an unordered list, we just closed our remaining html tags, which include; Section, Div, Body and HTML. And our HTML is complete now, and we can move on to next level, where we will code the CSS.

    The CSS

    Elaborating the CSS. All Step by Step!

    This is nothing unusual, in fact, a very basic CSS3 where we just set the default margin and padding  using the asterisk or universal selector. Then we set the image and fieldset border to none, and using the ‘:focus’ pseudo selector, we have set the outline to none.

    Stylizing the body

    Here we have just set the default font-family to Arial, Helvetica, and sans-serif, and the font size to 12 pixels for the entire text that would come inside the body section.

    Div Wrapper

    Do you remember that we gave our div a class of wrapper? Yeah we know you do remember all those little things that we did in the HTML. You are just a brilliant mind, aren’t you! Here we have set the width to 580 pixels and margin to 0 pixels from top to bottom and auto from left to right.

    Stylizing the Section

    Remember we used an id=”main” to the section tag? Now we have used the same id to stylize that particular tag. Here we have set it to float to the left, defined its width to 540 pixels, and gave it a padding of 24px 20px 28px 20px from the top to right clock wise.

    The Heading

    Now we have come to the heading part, where we need to give some style to it. The noticeable thing here is that it comes inside the Section tag, so in the css we have defined section tag using its id then stated the heading tag that we used i.e., H1. Then we have set its font size to 20 pixels, line height to 24 pixels, gave it an exact color that was used in the PSD, and aligned it to center.

    The Unordered List

    As we have to arrange all the images placed in a proper left to right sequence, we needed to define the <ul> tag in the css file. So what we have done here is, we have set it to float to the left, defined its width to auto, to get the list in left to right position we have set the list-style to none, and gave it a margin of 21 pixels from the top. Isn’t that easy to do again? Yeah that pretty easy stuff, what you all need to keep with you is FOCUS!

    Defining the list or <li> tags one by one.

    Here we have set the first list tag to float left and set its margin from right to 54 pixels.

    This is the last list tag but to confuse a bit and check your focus we have defined it before the second list tag having a class of “coll”. As this is the last image, we need not to define its float property, so we have just set its width to 168 pixels and set its margin from the right to 0 pixels from top to right clockwise.

    To make the second image fall in its exact position as seen on the PSD, we just needed it to give a margin from top to 62 pixels, and that’s what we did here.

    Now in order to complete the task, we just needed to define the text decoration to none, so that we don’t get to see any blue line that gets generated automatically when you make a hyperlink.

    Hurray! We are done.

    That’s all we needed to do to turn the given design into an HTML5 page. Now you can check your index.html file in the web browser to ensure that it is pixel perfect. However, if you find any error then don’t forget to check the codes.

    If you liked our but detailed tutorial, where we covered each and every code line in detail, then don’t forget to leave your views in the comment section provided below or you can also write an email to our email addresses mentioned in the contact us page.

    Posted by Mudit Posted in: HTML5, PSD to HTML, Tutorials Comments: 0