Tips for Learning PSD to HTML5 CSS Conversion

Tips for Learning PSD to HTML5 / CSS Conversion

Designing and developing a website involves a distinct set of activities. However, both depend on each other to deliver the finished product. Your design activities involve your aesthetic and creative genius to help you provide a clean and beautiful website using Photoshop, the popular image editing tool from Adobe. However, your design, to be developed into a website, needs to be converted into an HTML file. Let us take a look into the basics of understanding how to convert a PSD into HTML 5 or CSS for developing a website.

Getting the Pre-requisites in place

A pre-requisite to start the conversion process is having a PSD file in place. A PSD is the default file extension given to all files created in Photoshop. This will be the base for you to start on the conversion.

In addition, you will need a basic understanding of HTML5 to plan the layout. Get a grasp of basic HTML concepts like tags, attributes and syntax.

Setting up the Repository Structure

Before you begin, make sure you have the repository structure in place. Configure the structure of the location where the files and folders will be hosted. You need to create a primary or root folder that will hold all the subfolders. Create separate sub-folders for every element of your design, namely, scripts, CSS, images, text, etc. In addition, create an index.html that will hold your entire HTML markup. This is the main file that browsers will retrieve based on user requests.

Slice and Dice Image

It is obvious to even the uninitiated that the PSD file cannot be included in the HTML file. Therefore, it has to be sliced ​​into smaller sizes. You can choose between the two image formats, PNG-24 bit and JPEG, for saving the sliced ​​images. However, while the PNG-24 bit is definitely the better option in terms of image quality, the JPEG is far superior regarding size optimisation. Since lighter images are no doubt the priority, you may want to compromise on quality in the best interest of your website.

Getting into the Code

Let us now understand how you can weave the sliced ​​images into your HTML 5 code. Position the logo prominently on the HTML 5 page. Include a header tag within your body tag. Add a div with a Wrapper as its class value within the header. Include the image tag with the image path in its source attribute. Make the logo clickable by introducing the anchor tag and linking it to any section or page of your website. Usually, the logo is connected to the home page to enable users to navigate easily. Your code, once completed, should look like this:

Use the Nav tag of HTML 5 to create the navigation bar. Make an ordered or unordered list as required and add

titles to include the menu options. Append a unique class name, “active”, to the first tag, which can be used in the CSS. You would also need to add an anchor tag to link individual menu options to a specific destination on the webpage. Converting a PSD to HTML 5 becomes easy if you have the right tools to help you do it. Using tools like Dreamweaver helps to reduce your manual effort and substantially delivers good results.