Arrow Down Arrow Right Arrow Down Arrow Right Arrow Arrow Down Arrow Left Arrow Right Articles Case Study Close Facebook GitHub Google+ Menu Information Link LinkedIn x five Interview Location Code Snippet Twitter Tick Timer Users Card Discount Magnifier Time Quote Task

This website uses cookies to ensure you get the best experience on our website. Privacy Policy

Ok

10 Photoshop Tips for easy PSD to HTML conversion

by Stano Dzavoronok on October 8, 2013
Published in Design, UI, UX 6 Comments

As a designer sending files in for PSD to HTML conversion, you have a big impact on whether your files will be converted quickly and accurately.

During many years in the PSD to HTML industry, we have seen thousands of Photoshop designs ranging from those very easy to work with to the ones which nearly doubled standard PSD to HTML production time. The following is our collection of 10 Photoshop tips for time and cost-efficient PSD to HTML conversion.

1. Leave layers intact

Many designers are merging layers to keep files size smaller. This can work in print design, but in PSD to HTML conversion, the developer needs to have all graphic, textual or adjustments layers intact as these carry important information for website development e.g. the font layer defines font families, font sizes, colors, line heights, text transformations and letter spacings.

Tip: When delivering design files, leave the layers intact to preserve all important information for developers.

Tip 1: Leave layers intact

Layer with Visit Hopetoun Falls title is rasterized and font characteristics (font family, size, weight) cannot be identified.

2. Organize your PSD

A well structured and organized entity leads to an effective and successful outcome. The same applies for organization of the PSD files delivered for PSD to HTML conversion. A nicely organized PSD file serves equally to the web coder and layout designer and boosts their productivity. Each minute spent finding the particular graphic layer, text layer or section counts towards developer and designer productivity and increases production time and thus cost of the project.

Tip: Keep the PSD files nicely organized with relevant names to keep productivity high and production time and expenses low.

Tip 2: Organize your PSD

Example of unorganized layers on the left and example of nicely organized layers in groups on the right.

3. Keep your design consistent

Keep your design elements consistent in multiple appearances across the layouts of your website. Globally used elements such as buttons, header, footer, rounded boxes would look more professional with consistent look & feel, e.g. same border radius, padding, height etc. Any exceptions lead to additional HTML or CSS code and increased development time.

Tip: Keep your design consistent to make your design look even more professional and development time shorter.

Tip 3: Keep your design consistent

Log in and Download buttons use the same style but inconsistent padding, this will result in extra CSS code and development time.

4. Place elements on grid

Design grid is vertical set of guidelines that help determine shape, placement of items and overall look of each website. Utilizing the grid allows designers to place website elements in proportional and balanced space to aesthetic look and feel of design. Off grid element placement creates extra steps in PSD to HTML conversion.

Tip: If you use grid for design, make it a rule, keep everything inside the grid and aligned. Even if you don’t work with explicit grid, avoid placing elements outside the implicit grid.

Tip 4: Place elements on grid

Text isn’t aligned with the implicit grid created by the top border of the image. Not only that it doesn’t look good, but this would have to be covered by an additional CSS declaration.

5. Prepare rollovers

When preparing design, think about functionality of links and all call to action elements like buttons, boxes, images, etc. It’s a standard practice to add rollover states to such elements to distinguish among the action states. It often happens that if you don’t provide them right away, you will want to define them later when you start working with live templates. This increases production time.

Tip: Don’t forget to design rollover states for all call to action elements, buttons and standard links.

Tip 5: Prepare rollovers

Hover state for Log in button is created so it can be coded right away.

6. Provide consistent hands-off materials

Hands-off documents (PSD, fonts, JPG previews, PDF specification write-ups) delivered to PSD to HTML conversion team should contain final versions of the designer work. Discrepancies found inside these assets lead to doubts and unnecessary back and forth communication. In some cases the resulting product doesn’t have to match your expectation.

Tip: Keep all hands-off assets consistent. Font sizes, font families, colors and design elements should match in all hands-off documents without differences.

Tip 6: Provide consistent hands-off materials

Title font size shown in the PDF write-up is bigger than the one in PSD. Which one is correct?

7. Consider fonts rendering differences

When using modern fonts, consider different rendering in various browsers and operating systems. Font anti-aliasing and tracking (letter-spacing in CSS) can be displayed differently in Photoshop and in the browsers. Recent versions of Safari and Chrome round letter spacing to whole numbers.

Tip: If you have doubts about how your font will render on live website, check it in various browsers before using it in your design. Do not rely on subpixel values for letter-spacing.

Tip 7: Consider fonts rendering differences

Differences in tracking in Photoshop and letter-spacing in browsers. Merriweather font, size 72px with 50 tracking set in Photoshop translates to 0.05em letter-spacing in CSS. Firefox uses exact calculated value 3.6px, while recent version of Chrome rounds the calculated value to 3px resulting in smaller letter spacing.

8. Do not use Blending modes

Blend modes used in Photoshop are impossible to recreate in CSS. They can produce nice effects and are often used to shorten the time of image processing, however in final effect they return undesired results when turned into website images or HTML / CSS code. Good to use for preview, however not so good for PSD to HTML conversion.

Tip: Prepare your PSD files so that they use just Normal blending mode.

Tip 8: Do not use Blending modes

Although Linear Light blending mode creates an interesting design effect, it’s impossible to effectively reproduce it in CSS.

9. Think about content flexibility

Some designs have a fixed amount of text placed over a specific area (image or graphic element) which doesn’t allow to add more text. Sometimes this could work, however there are often cases when you need to add more text to such area on the live website.

Tip: Always design with content flexibility in mind and assume how design changes when amount of the content is increased or decreased.

Tip 9: Think about content flexibility

Bigger amount of text would overlap from the box. This design is “risky” especially if we don’t know the final content.

10. Design for common resolution

Common browser resolution is a very specific topic, with responsive approach it brings whole lot of new meaning as the screen resolution becomes less important. However the most common browser screen resolution is 1366 x 768px, so if your design is not responsive, you shouldn’t forget about it.

Tip: If your design is not responsive, do not make the layout wider than 1300px so most people can see it without horizontal scrolling.

About the author

Stano Dzavoronok

Stan Dzavoronok has been behind XHTMLized (now Xfive) from its inception, from the initial idea to real life implementation. He actually coined that tongue breaking name which is now a well known brand among the PSD to HTML services. As part of X-Team, he's been engaged in partnerships with FOX and Twitter, and currently works as an Engager at Xfive.

More articles from Stano

Comments

Noman Nizamani November 10, 2013

Nic info BroTheR...........

Mighty Joy June 20, 2014

Good tips to remeber

satish December 30, 2014

Nice Information... Thanks!!

Justin July 10, 2015

I just got to see the blog post you shared. Very easy tips shared for PSD to HTML conversion.

Koren Schmedith May 23, 2017

These tips are really amazing. Thanks a lot for the useful and effective information about conversion.

Koren Schmedith May 30, 2017

These are such amazing and useful tips and tricks showed in this article. These are very effective, useful and well informative. Thanks for sharing this awesome post.

Would you like to add something?

All fields are required. Your email address will not be published.

More from the blog

Work with us