10 Photoshop Tips for Easy PSD to HTML Conversion

10 Photoshop Tips for Easy PSD to HTML Conversion

 

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.

 

Layer with Visit Hopetoun Falls title is rasterized and font characteristics 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. 


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.


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.

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.

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.

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.

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.

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.

 

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.

You Can Also Checkout PSD To HTML Service

Post a Comment

Previous Post Next Post