How to PSD to HTML

PSD to HTML is converting a graphic design to a static interactive website. That means you will take a design, a visual look, and write the code to be exactly as the design, but in the browser. The technologies to do that are usually HTML/CSS and JavaScript – but in these days, there are more technologies we use to make the project faster and the workflow better.

How to think when starting PSD to HTML

It’s important to have a solid base when starting the conversion. You need to get few things in your mind before the start. Such as global styles, which are colours, padding, font-size different templates for page and so on.

I’ll show you my process on how I create the code of an image.

Examine

The first thing that you want to do, examine the whole website. That will help you organize your thoughts on what you might need to code. If you see that something repeats, or there is a specific layout pattern, that’s a good sign you should do something about it.

Wireframe

Instead of images, think about the design as the pure wireframe. Imagine boxes around navigation, slider, sidebar – they all a have one big box. You should divide those into their own components. If you’re using Sass, and you should, you can create a component folder, and put in there such as a slider, tabs, accordion, and so on.

Think about what little things are repeating. You want to set basic styles after you checked the wireframes.

Global Layout

What is repeating? How should I make the container? If the design is centred, all of it, it’s a good idea to wrap the whole website with a container that will centre it. If the design has different components, one centre, the other expands full width of the browser, you might use a unique container for that. What I mean by that is have different containers such as:

container-wide, container-narrow, container, container-fluid and so on…

Is there a hero that repeats? Make sure you have it all covered as well.

When you start to convert, write the HTML first, and forget about the CSS. If you get the HTML right, writing CSS for it will be a breeze.  You can still write some basic CSS for styles, such as defining different background colours to see how it’s going, perhaps make the links display-inline and so on.

Buttons

Most of the times they will be buttons. Make sure that you create a separate object( yes, an object is a button, that you can put on a component like a slider – a component is made of small objects) folder for buttons. There, you will want to make different variations on what you’ll need. Global buttons, small, normal, large and so on. Perhaps you’ll want to create a somewhat custom button – you’ll do that there too.

Let’s keep everything in the place, otherwise, if you create a specific button for the ‘contact page’, and you put it in the contact page file, and then you create another button somewhere else, and then there’s another button, you will have a million buttons that are all over the place. Now, a few weeks from now, you want to change a button, and you have no clue where they are – make sure all the buttons, or at least MOST of them, are in one file.

Managing The colours

Managing the colours is probably one of the easiest tasks. It can be either long or short. It depends on the client you’re working with, and the design itself.

What you want to do, is organize the colours in a manageable manner, using Sass powers. That means you should make a variable for the colour, so if in future the designer decides to change the colour, he can just do it in one place. This will save a lot of time and make things easier to maintain.

Now, sometimes you might have this long list of all sort of different colours.

If you want to see how I do it, check out this article – http://lovetocode.com/css/managing-colors-sass-modular-development

Typography

Make sure you don’t forget about typography. There is a formula on how all of that should look like. However, one of the key things to know is that the line-height of the website should be the font-size and 50% more of the font-size.

If the font-size is 16px, the line height should be 22px.

You want to use ‘rem’ and ’em’ units. For the font, as it’s responsive design. Never use pixels, only in some circumstances that it will make sense to have a pixel value.

Details

There is a secret that I have been holding the entire blog post! If you want to be great at PSD to HTML, have the values to be pixel perfect, no matter what kind of design you get handed, all you need to do is… you’re ready for it?

Practice and use your eye! You should look for all the little things. At the end, if you’re attention to detail is poor, as a number 1, you’re going to have a very hard time to make a conversion from PSD to HTML. There are all the little things such as shadows, borders, border-radius and so on, that you will need to catch up.

Testing

As any website, you should test it. Every browser is slightly different. You want to make sure that the main parts or the critical parts of the website are covered. Browsers like IE, Safari, Opera, Chrome and so on, will display the website slighly different. So don’t worry if everything isn’t 100% as in the design.

If there is a big problem however, you can always target a specific browser by writing the code inside a special code that targets the browser – you can find more about that via google ‘how to target different browsers with css’. Googling is also a skill you must possess, as there will be many thing you won’t know how to do, so you’ll just have to figure it out 🙂

If you have any suggestions, or any thoughs, comment below!

Happy Converting!

Meet the author

Meet the author

Aurelian Spodarec

Front-end WordPress developer that blogs about web development. I like using the right tools for the job. In my spare time, I enjoy cooking healthy food and then eating it. Delicious!

Comments