Advertisement


What is the PSD to HTML best practices with HTML5?


Question

I'm getting quite confused with all the different methods of converting from psd to html 5. I'm trying to practice converting PSDs to HTML so i get enough experience. There are a ton of complicated multi layer PSDs with tons of grids and rulers and etc. I'm confused by the workflow and need some step by step guides on what exactly the process is. Especially with current standards, most text ends up being shown using css web fonts.

What exactly is still done in psd and why? How do we know exactly where to place the stuff?

2014/09/17
1
3
9/17/2014 1:19:00 PM

I would not continue trying to learn how to slice up a PSD for HTML. This practice is outdated and you're only going to be hurting yourself down the road. In regards to "current standards" people usually code in an IDE. One thing you have to understand with slicing is if you have a responsive website you're going to spend a ton of time trying to cut a slice and your website will be slow with all the images. You should only use an image as its intended use, an image.. With todays CSS3, SVG and jQuery you should be able to code about everything you need instead of using a slice image.

I'm confused by the workflow and need some step by step guides on what exactly the process is.

I doubt you will get a step-by-step tutorial here but we do have:

What exactly is still done in psd and why?

Some still use Photoshop to develop a mockup of the site and if you are doing responsiveness you can design based on your targeted CSS break points. I prefer Illustrator for its Artboard feature and typically when I develop in AI I can just export out as SVG.

How do we know exactly where to place the stuff?

That would depend on the design.

If you are stuck on the grid mentality you could always learn how to use Foundation or Bootstrap which is known for using a grid like structure:

Foundation:

enter image description here

Bootstrap:

enter image description here

13
4/13/2017 12:46:00 PM