Front-end development is quite challenging than it was even 5-6 years ago, with exclusively new design standards, code demands, mobile & responsive web. We’ve converted 3600+ files in the past year alone & would like to share some of the tips that we have discovered from our own experience in designing.
PSD to HTML is a workflow. First, a web page is designed in a Photoshop Document (PSD) and then converted to code (using HTML, CSS, and JavaScript). You can swap Photoshop with any other image editor (like Pixelmator, GIMP, and so on).Here’s a slightly more detailed step-by-step breakdown:
Design a high fidelity pixel-perfect mock-up in Photoshop of exactly how you want your site to look like.
Use the slice tool to divide your website’s imagery and then export it to the web.
Write HTML and CSS that utilizes the imagery you exported from Photoshop.
At a first glance, this might seems like a good idea. However, it can be difficult to begin with coding if you don’t know how the final result will going to look like. So experimenting in Photoshop first and then “exporting” it to HTML is the most sensible process.
In Photoshop, the slices feature in the save for web dialog is an essential tool for designers for saving assets from PSD. This tool made it easy to “slice” a design into images and then layout in a web page using HTML and CSS.
Moving with this idea, web-design agencies use PSD to HTML as a template for team workflow. In other words, a designer creates the Photoshop mock-up and then hands it over to front-end developer who writes the code. In recent days, the job role of a web designer tends to encompass aesthetics as well as HTML and CSS coding.
PSD to HTML conversion can be time-consuming if not well-planned. Here is the checklist for Photoshop elements before you start coding:
Layers are all named and put into group folders when applicable
Check fonts consistency throughout the design
List the fonts, whether they are web fonts or non-web fonts
Pixels should be used when sizing fonts instead of points
Make sure colors are consistent throughout all PSDs
Hover, Active and/or Visited states are specified for links and buttons
All common images the same size
Any special instructions
Let’s take a deep dive into the entire process
Kick-off by Slicing Images from Your PSD File
In any PSD file, there are images- background images for the header, or other things that can’t be replicated with CSS. It’s actual start of PSD to HTML conversion. Take your PSD file and cut out the images that can’t be re-created using standard CSS exporting tools. Export these assets to PNG or whatever file format you feel is necessary.
Previously we have to cut out shadows and carefully place them next to images, but now CSS3 has shadow effects. So, all you need is just images, and CSS3 can do the rest of the shadowing.
Write the HTML for Each Section
One page is divided up into multiple sections. To keep your designs uniform and easily laid out in terms of HTML code, you should write the HTML sections from top to bottom. HTML5 has made sectioning your code much more efficient.
Header
The very top part of the page is the header. It usually contains the logo and any main menu items that lay horizontally at the top of the page. It also contains a separation line between the header and the main content.
Hero
Not every page has a hero section. This section is a large area at the top that makes a particular image or offer stand out from the rest of the page. It’s located just underneath the header section.
Slideshow
Some site owners prefer a slideshow at the top of the page. You code this section next since it also includes a list of images that slide across the page.
Content
This section is the main text area that contains all of the content including text, images, buttons, and basically any components that make up the dynamic meat of the site.
Footer
The footer section is at the bottom of the page. It usually contains contact information, some links to content such as a blog or about page, and any social media links for the business when you are building marketing pages.
Once you create your HTML sections, you must review it for syntax accuracy. Nothing is worse than building out a site only to find the main HTML is missing a closing tag. It can take hours to troubleshoot a minor syntax error in HTML, but it can cause major usability issues for your users. Take the time now to review the code for any errors.
To help speed up code review, use an HTML validator.
Table of Contents
Front-End Developers Need a Design Eye
Front-end developers coding PSD to HTML need a design eye to catch those small flaws that others wouldn’t be able to catch. If you don’t catch them, your users will. It’s difficult to find out small bugs and issues when you designed and coded the site. It’s even more difficult when you coded and designed the site and you’ve looked at it for several hours a day.
The design eye doesn’t always come naturally, but some of the design processes can be learned through training and practice. It’s important to practice what you’ve learned to hone your craft. Practice will help you develop the design eye. Even networking with designers helps you build your skill set and become a better designer.
PSD to HTML Checklist
If you’ve gone through this whole step by step PSD to HTML manual, you have a good foundation for your project. We still have a few tips for you as you dive into the world of PSD to HTML conversions.
Are your images cut well, and do they represent the quality of the brand and site?
Did you test all aspects of the code including HTML, CSS, and JavaScript (remember you can use a validator)?
Is the code clean so that other designers and developers can pick up where you left off? Enterprise customers usually have other freelancers or internal coders work with your work, so the code should be clean and organized.
Is the code SEO friendly? While it’s always good to code and write for users, it’s important that code is designed in a way that’s friendly for bots. Google has a Fetch as Google tool that helps you review and visualize the way the site looks to bots.
What about user experience? The designer should have a good sense of user experience to create good navigation and intuitive controls.
Don’t forget accessibility for slower connections and users with disabilities. Your images and layouts should account for slower connections especially mobile devices.
Test the load time for the site pages. This is important for mobile and conversion rates. Users won’t wait long for a page to load, so you should test performance. Google has a tool to help you test site performance.
Conclusion
Creating a professional finished website using the code generated by Photoshop is not the ideal way of building a site. However, it can generate code to create the look of a site based on a Photoshop mockup. I hope this read would help you to begin with PSD to HTML conversion, hints to remember & ideal workflow to follow. If you have any query, feel free to ask in the comment section.
