Our team at Code My Views has worked on web projects for a long time, over 15 years! We started in back when slicing images from a PSD for backgrounds was still a thing and now do everything from PSD to HTML conversion services to full-stack web and mobile applications. Have a PSD (or Illustrator, Sketch) files ready to be coded in pixel-perfect HTML? Start Your PSD to HTML Project. Front end development is exponentially more difficult than it was even five years ago, with new code requirements, design standards, and the introduction of mobile and responsive web. We’ve converted nearly 3,000 pages in the last year alone, and we’d like to share some of the tips we’ve established from our own experience designing and coding front end development for our customers around the world. This complete step by step guide to converting PSD to HTML is completely free to share with friends and colleagues. Tip: For any front end project, it’s not required at all to have a Photoshop file or any design file for that matter. What’s most important is that you have some rough wireframe or idea of what the content and layout will be on each page you are building. We will help you take it from there. For the sake of this tutorial, we will be working on this Photoshop file.
Should You Use a PSD to HTML Software Converter?
You could be tempted to use software that promises to automate the process. There are several sites online that offer to convert PSD to HTML through automation apps. The problem with these tools is that you can’t provide a truly custom HTML/CSS code using software automation, and these tools don’t always provide the pixel-perfect conversion that can be done through hand-coded interaction with the PSD file and the converted file. Unless you’re good with fixing bugs and know how to write front-end code, conversion software could be more hassle than it’s worth. That isn’t to say that automated conversions don’t have a place in the front end development world. Some site owners benefit from these tools. For some examples, you can use automation software for:
A simple Shopify eCommerce store
A small business site on Squarespace or Basekit
Cratejoy for a subscription box business
In other words, if the goal of the site is to sit on a hosted, template site, then using conversion software could be beneficial. For any other site, the design needs its own personal touch from a designer.
Software You Need to Convert PSD to HTML for Front-End Development
Just like any other job, you need the right tools to get started. You can search the Internet and find numerous utilities, tools, and automation software. Luckily, we’ve tried quite a few of them over the years, so we can narrow it down for you. Nothing is worse than building a site with cumbersome, clunky tools that don’t really do what you need them to do. Here are the tools we suggest you download and purchase before you get started on a PSD to HTML conversion.
Sublime Text: This tool is a step up from the popular Notepad++ (which is an alternative if you don’t like Sublime). This tool color codes your text depending on the language you use, and it converts between Apple and Windows more easily than other text editors.
Adobe Photoshop: Photoshop is the originator of PSD files. Adobe Photoshop is a part of their Creative Cloud Suite. You can get this software at a flat-rate cost or you can pay as low as $19/month to have this software. This is much more affordable than what front end designers had to spend years ago.
CSS Hat (Photoshop Add-on): Save yourself some time and get this Photoshop add-on. This tool will turn a Photoshop layer to CSS instantly.
Avocode: In most front end development assignments, you’ll be working in a team even if your team is you and a developer. Avocode lets you export assets and collaborates with other developers and designers.
PNG Hat: If you’re a gaming designer, this tool helps you slice assets for gaming designs. It also compresses images during export for faster load times without causing the image to suffer from poor quality.
CSS3ps: Similar to CSS Hat, but this is a cloud-based tool that converts your Adobe Photoshop layers to CSS3.
Choose a Framework (or Don’t)
Pros: Frameworks reduce the amount of code used on the site, and they can even reduce coding time if you know how to use them. If used properly, frameworks can increase efficiency and improve the design.
Cons: With hundreds of frameworks on the market, you might be forced to learn while you’re designing, which doesn’t usually produce the best code. The framework must have good community support, or you could be stuck indefinitely with a framework that doesn’t have any upgrades or support.
If you decide to tie yourself to a framework, you might as well go for the best. We’ve worked with a few frameworks, but we find the following two to be the better choices.
Twitter Bootstrap (or just Bootstrap): Bootstrap makes front end development exponentially easier. Plugin the CSS and JS files and get started. It’s even great for back end coders who aren’t very good with front end development. Bootstrap is fully responsive too, so you can inject responsive design easily into your projects.
Foundation: Foundation does basically the same as Bootstrap, but it’s more customizable and offers more components. For instance, the Foundation has form validation.
Whether you choose Bootstrap or Foundation, you can’t really go wrong either way. Both of them will give you a responsive design and grid system you need for development.
Design the Layout Type for the Project
Before you even perform the conversion, you need to determine the layout. You have four main layouts to choose from.
Responsive: You can’t get away from the term “responsive” in the design industry. Responsive designs basically shift the layout of a page to fit the screen. This layout is the foundation for most web apps that cater to mobile devices.
Mobile Only: Some apps aren’t meant to work on desktops. These mobile apps only need a design that fits on a tablet or a smartphone.
Fixed: Fixed layouts are useful for desktop-only designs. Fixed designs have a static width and height, and the elements contained within the layout don’t shift for screen size or when the user minimizes the window.
Fluid: Fluid designs are beneficial for mobile and desktops. The elements within their containers shift as the user minimizes the browser or uses a smaller screen.
You might notice that the Fluid and Responsive web design sounds similar. They are alike, but Responsive is much more useful for targeting mobile devices. The fluid is used more for different browser sizes in desktop apps. Responsive design uses CSS media queries to change the size and location of elements when the screen size changes. Fluid design moves elements around when the screen size changes, but the elements still take the same width and height percentages regardless of the screen size. The result is that Fluid designs don’t always shift elements in a user-friendly way on the screen, so it’s better to stick with responsive for mobile designs. Fixed is a much easier layout to use, but as we mentioned the layout does not shift depending on the screen size. These layouts force users to scroll if the screen is too small and large screens show a lot of white space when the layout is too small.
Start by Slicing Images from Your PSD File
In any PSD file, you have images that you need, like background images for the header, or other things that can’t be replicated with CSS. This is the starting point for your 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. It used to be that you needed to cut out shadows and carefully place them next to your images, but remember that CSS3 has shadow effects. You just need the images, and CSS3 can do the rest of the shadowing.
Write the HTML for Each Section
A good designer knows that one page can be 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. 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. If you’re not an expert in HTML coding, you can read some in-depth tutorials. Here are two links that can get you started. You might even go with a CSS compiler, also called preprocessors. Just like front end frameworks, you have numerous options as well. However, the three main preprocessors are SASS, LESS, and Stylus. Preprocessors in CSS are similar to those used in interpreted languages such as PHP and the older Classic ASP language. Preprocessors have several benefits, but one of the most notable is that you can use variables. Traditionally, CSS didn’t allow you to use variables. The one limitation to using a preprocessor is that your project is then tied directly to that preprocessor without an option. Your whole team must use it, which means if no one knows how to use it, everyone needs to learn. Personally, we prefer SCSS and Bootstrap. SCSS is a preprocessor created in Ruby that generates CSS. We covered Bootstrap. It lets you quickly set up a layout template that’s fully responsive without any effort on your part.
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.
How to Make Sure Your Front End PSD to HTML Conversion is Responsive on All Devices
There are several sites on the market that test your PSD to HTML code for full responsive functionality and support. Sites such as MobileTest.me and Google’s Developer Tools give you ways to automate testing, but you should only use these tools for smaller projects where there aren’t many components. In other words, you should QA your designs for larger enterprise projects before writing a line of code. You can’t buy every smartphone and tablet on the market, but you can use certain strategies to ensure that the design works well for a majority of devices. You should at least have access to one of the smallest screens you support, and preferably the latest iPhone as these are the most widely used devices. This ensures that your layout works on the smallest resolution and the newest phones. You then want to test on gradually larger screens until you meet tablet size. Don’t forget desktops, but chances are that you have a desktop on hand to test with. You can also do initial testing with emulators. Both iOS and Android have emulators that you can work with that let you view your application in the actual size of the screen. These shouldn’t be the only effort you put into QA, but it’s a good start. Remember though, emulators do not do a great job of replicating mobile touch events and other mobile-specific functionality, so you always should be testing on real devices. The issue you’ll eventually run into is that there are dozens of screen sizes to cater to. You can’t possibly purchase them all as a freelancer. When you work with your clients, prioritize the devices you’ll support. Prioritize the screen sizes and even the brands you’ll support. If the app takes off, the client can support other devices as well. If an operating system is not widely used (like Windows phone) consider not supporting it unless there are specific requirements to do so.