Designing and establishing a site involves a distinct group of activities. Both, however, are dependent on one another to deliver the finished product. Your design activities involve your aesthetic and creative genius to help you deliver a spending beautiful website using Photoshop, the popular image editing tool from Adobe. On the other hand, your design in order to be developed into an online site needs to be converted into an CODE file. Let us take a peek into the basics of finding out 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 out on the conversion process is to possess a PSD file in place. A PSD is the default file extension given to all files created in Photoshop. This will be the base so that you can start off on the transformation.

Additionally you will desire a basic understanding of HTML5 in order to plan the layout. Get a grasp of basic CODE concepts like tags, characteristics and syntax.

Setting upwards the Repository Structure

Before you begin, ensure you hold the repository structure in place. Configure the structure of the location where the files and directories will be hosted. You need to develop a main or the root folder which will hold all the sub folders. Generate separate sub folders for each factor of your design, namely, scripts, CSS, images, text and so on. In addition to this create an index. html which will hold your whole CODE mark-up. This is the key file which will be retrieved by browsers centered on user requests.

Slice and Dice Image

That is quite apparent to your uninitiated that the PSD file in their entirety cannot be included in the HTML file. Consequently , it needs to be sliced into smaller sizes. You can choose involving the two image formats, PNG-24 bit and JPEG, for saving the sliced images. However, while the PNG-24 bit is certainly the better option in conditions 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

Allow us to now understand how you can weave in the sliced images into your HTML 5 code. Place the logo prominently on the HTML 5 webpage. Include a header marking within your body tag. Within the header, add a div with a Wrapper as its school value. Include the image tag with the image path in its source attribute. Make the logo design clickable by introducing the anchor tag and backlinking it to any section or page of your Website. Usually the Logo is linked to the home page to be able to allow users with easy navigation. Your current 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 add the menu options. Append a unique class name “active” to the firs
label which is often used in the CSS. You would also need to add an anchor tag to link individual menu options to a specific destination on the web page. 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 significantly reduce your manual work and also deliver good results.

Share it with your friends

Facebook

Twitter

Linkedin