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?

Answer 1

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 are the steps in designing a website?
• What is the difference between wireframes and mockups?
• What is your ideal workflow for web development?

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:

Bootstrap:

Answer 2

What is the PSD to HTML best practices with HTML5?

There isn't one. Designing in Photoshop is not considered a best practice by much of the industry.

When teams design in Photoshop, they tend to not be designing with HTML--which is ultimately what the site needs to be built in. As such, many argue (as do I) that your design should start in HTML. You may jump back and forth between HTML and Photoshop, but don't try and design the entire site/page in Photoshop before even touching HTML.

Converting from one medium to the other will always introduce inefficiencies. It's best to strive to design in the medium that the product will eventually be delivered on.

Answer 3

I agree with RayC - typically I "slice" and "export for the web," hiding layers and selecting certain slices as I need them. I always use CSS for the background image and/or table images, then rely on HTML for the meat of it. It sounds like the rulers are used for the slicing portion. If you go to Slice > Slice Tool, you'll see a button that says "Slices from guides" - this will cut up your image based on your ruler locations. PSD is design portion only; exporting for the web as HTML and images will give you what you need for Dreamweaver or any other HTML software.