How to Convert a PSD to HTML – As Seen Through the Eyes of a Previously Non-Web Developer


Evaluate the Photoshop Document

*even the smallest of details

There will always be some basic requirements to start a project and when it comes to converting a PSD to HTML (or a fully functional website), evaluating even the most minuscule of details is considered to be part of the basics. Why, you ask? Overlooking minor details may lead to bugs in the code which would then lead to revisions that may possibly be out of scope from the original project request. It is a best practice to make sure you have understood the clients’ needs to meet their expectations and limit, if not avoid, revisions.

Slice (and Develop your Projected Timeframe)

*into parts to label elements, can also be a guide to track progress

Upon completely evaluating the PSD and making sure that you have understood the client, next up is slicing the PSD into portions so as to label them and see the overall picture on how the design can be coded semantically or using the best practice as available. Labeling these portions can also provide a projected timeframe for both you and your client wherein you both can estimate partial to complete submission. Slicing is a major help when dealing with PSD since through slicing you can determine the parts of a page and how it affects the overall feel and functionality of the website. There is also an alternative where you can let Photoshop do the slicing and generate the HTML Code for you to later revise into your preferred coding framework.

Tools, tools, and tools!

*for efficiency, unless you are a really hard core programmer who codes from scratch

A lot of tools can be gathered throughout the internet that can help with the process of PSD slicing, HTML slicing, and adapting a Photoshop to a website, but what is important is that you can keep these technologies together to create a clean and simple code. psd-to-html-toolsDeveloper tools like Firebug is helpful with that concern since it facilitates the debugging, editing, and monitoring of any website’s HTML and CSS along with other web development related languages like JavaScript. Another would be systems like 960 Grid and Gridset that could be used for the layout in Photoshop to HTML conversion. Grids have become much of a focal point in design since it provides a mathematically attractive blueprint of the design to your code. As for the environment used for coding, you can use the popular Adobe Dreamweaver or the simple yet sophisticated Sublime Text editors. Whatever tool you decide on using, just remember to KISS (keep it short and simple) everything.

Keep Calm and Code On

*header, content (sections), widgets, footer

Ah, the lifeblood of every developer, the code. Each and every one of us developers follows a different approach when it comes to coding. But it is very !important to keep your code maintainable and readable, it is so to keep it clean and professional. Best practices like using tags correctly and appropriately, always remember to close a tag as soon as you finish typing the opening tag e.g. typing in <html> </html> tags first then inserting the next tags and code in between them. Another best practice is to follow proper indentation and nesting as shown in the screenshot below:


Indentation provides a clean and organized presentation of your code so that you could navigate through the code easily in the case where there is a bug encountered or some other revision has to be made. It is also best to study HTML semantics and cross-browser compatibility including responsiveness since a lot of internet users are already switching from the traditional desktop to laptops and other portable devices.

Test, Submit, & Implement

*test, submit, & implement: mention semantic, w3c, pixel perfect, optimize for web and media responsiveness

Once every requirement is met, it is time to test the whole project of fashioning a design from Photoshop to HTML before submitting this to the Quality Analyst or client. You have to test it first so as to limit or avoid errors as well as minimize the chances of your project being returned to you for revision that may be out of scope from the original request. After testing and your submission passed the QA and satisfied the customer, congratulations! It is time to implement and share to the world the result of your hard work.


Of course after implementation there may come a time that your PSD to HTML client’s site visitor may encounter something where in you may have to look into it, not necessarily revise your code but you may need to debug a misplaced letter or symbol. Your client may also want to make changes or add more content or features to their site as well as maintain it. Remember to keep your code short and simple for efficiency and W3C validated to ensure that your code is browser and search engine friendly as well as faster page load times.

We assembled this modest guideline because we believe that these are vital and should not be missed. Just continue strengthening your coding skills and update what you know. There are a lot of detailed tutorials on creating a PSD to HTML project and soon us at HTML Guys will also post our own tutorial, we will keep you posted!


Related articles

polar loopotz.avetesla

Leave a Reply

Your email address will not be published. Required fields are marked *