Designing and developing a website involves a distinct set of activities. Both, however, are dependent on each other to deliver the finished product. Your design activities involve your aesthetic and creative genius to help you deliver a clean and beautiful website using Photoshop, the popular image editing tool from Adobe. However, your design in order 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 Prerequisites in place

As a first pre-requisite to start on the conversion process is to have 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 off on the conversion.

In addition to this you will need a basic understanding of HTML5 in order 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 main or the root folder which will hold all the sub folders. Create separate sub folders for every element of your design, namely, scripts, CSS, images, text and so on. In addition to this create an index.html which will hold your entire HTML mark-up. This is the main file which will be retrieved by browsers based on user requests.

Slice and Dice Image

It is quite obvious to even the uninitiated that the PSD file in its entirety 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 so far as size optimization is concerned. Since lighter images are no doubt the first 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 in 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. Within the header, add a div with a Wrapper as its class value. 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 linked to the home page so as to enable users with easy navigation. 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

• tags to include the menu options. Append a unique class name “active” to the firs
• 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 substantially reduce your manual effort and also deliver good results.