Photoshop to HTML Tips

Photoshop to HTML Conversion Tips

The success of any online business is determined by the website they use. Usually, before any website is launched, it all start with a mock-up (mostly created using Photoshop or Fireworks) which is later converted into a functioning website.  Converted PSD to HTML can lead the business to grow faster as it introduces the company to wider range of audience. Here are some tips that will help you convert PSD to HTML.

Study the basic requirements

Number one rule whenever starting a project is to always study the requirements. This is a very basic task but is sometimes overlooked which results to bugs and fixes or to revisions which are all out of scope. This happens when you fail to point out even the minor details of the design. So, before starting with PSD/photoshop to HTML conversion, you have to make sure that you know the technical requirements of the design, the features, and the important elements that need focus in order to limit, if not avoid, revisions. Moreover, it is also important that in this early phase of conversion, you and your client understand each other in order to meet requirements and expectations of both party.

Slice the PSD Layers and complete the list of required elements

Slicing the images into portion is no easy task as you might think it is. Slicing the images correctly will make you work faster; else you might find yourself stuck slicing images that are rather not needed in the design particularly if you have to work on with patterns and repeating images. But for images that can be used as sprites, slicing will be the least thing you should worry about. Alternatively, you may also slice your design into portion and let Photoshop generate the HTML code for you and then later revise the code for semantic coding.

Validate through W3C

You may not bother validating your code or perhaps writing simple and clean code when doing PSD to HTML conversion but if you wanted to enjoy the benefits of your website, you might want to validate first before launching.

Validating your HTML tags is very important now that web technologies have advanced way better than decades ago. Modern web browsers nowadays are more compliant in terms of accepting and rendering your HTML documents correctly particularly in the case of Internet Explorer which strictly requires you to write correctly in order to display your html properly. Moreover, if you want your website to load faster and be ranked better by search engines, then perform a validation first before going live! Just remember that the faster the browser understands your code, the faster it loads the contents correctly (and by extension, it helps you make the website cross-browser compatible) and the better the search engine reads your codes, the better it includes you on the result list.

Check for cross-browser compatibility

Checking for cross-browser compatibility could be the wisest move you can do particularly if you wanted to cater a wide range of audience using different kinds of operating systems and web browsers. But if you have validated your code thoroughly, this can be one of the least things to worry about. But remember, not everyone uses the same browser and operating system, so even if your code is validated, you should still check for cross-browser compatibility.

There are a lot of online tools and software that you can use for checking cross-browser compatibility such as Browser Stack (online virtual operating system that offers different platforms and web browsers), Browser Shots (an online application that allows you to check browser compatibility through screenshot captures using different browsers), Browser Sanbox, Adobe Browser Lab, IE Tester (application used for testing IE 6 to IE 9 compatibility) and Virtual Machines; most of which are available for free.

Use these tools to check if your PSD to HTML conversion displays properly in all major browser.

Semantic Coding

A semantically coded website ensures that all the web pages are clean and all elements are at their right places. This will also allow you to have a better overview of the entire code by giving meaning to your structure and organizing your tags into related HTML elements. Semantic coding includes a well-constructed HTML structure and easy-to-understand naming convention for ID’s and CLASSES. For example, you may use descriptive words in naming the ID’s (or naming the ID by its role) such as “branding”, “main-navigation” and “main-container” and decorative words for classes such as “red button”, “rounded corner”, “small blue button”. You may also add comments to your codes to allow other developer to easily read and understand your codes.

Code by Hands!

In as much as you would like to use Graphical User Interface in building a website such as Dreamweaver, you might want to think over as this application, if not used correctly, will only mess-up your codes. There will be times when the application will automatically write the code for you without you knowing it or even generate codes that are not properly aligned and indented. So if you want to have full control of your html codes and a full understanding of the structure, then you should start doing the conversion by hand.

Make it Pixel Perfect!

One thing that makes client happy, particularly the web designers, is when you were able to capture the exact design/details of their work in your HTML document. This not only makes them feel satisfied but also creates a good impression to them. There are many ways to convert PSD to HTML as exactly as it is. The easiest is to temporarily assigning the design as background of the document to ensure that you are working on with the pixels as close to the design as possible. You may also use browser plugins such as PixelPerfect which allows you to overlay the design with the actual HTML document or you may do it the hard way by computing each pixel using an on-screen ruler.

But whatever method you use, providing an output that is very close to your client’s PSD will give a good credit not only to you as a programmer but also to the entire team and the company.

Optimize for Web

One factor that affects loading speed is HTTP Requests which mostly come from the graphics and illustrations required in a design. In order to lessen these request and make the loading time faster, use images/graphics that are optimized for web contents or in as much as possible, limit the use of images or you may also use CSS sprites for designs that require non-repeating background image. For backgrounds that are using solid color, you may use CSS rules instead and CSS3 gradient for gradient backgrounds.

If in case there is no way to chop images into smaller piece or you can’t substitute these images with CSS, then always make sure to use Photoshop’s “Save for Web” featured which will allow you to compress image sizes without losing its quality.

In order to have a well-functioning website, you must have at least the knowledge to create a basic website otherwise; you may hire people who are highly competent and qualified in maintaining your webpage. There are many companies who can convert your PSD file to HTML and our team is one of those. We are composed of geeks and webheads crazy passionate about HTML/CSS, WordPress Themes and PHP. We focus on building the front-end HTML/CSS and CMS programming so you can focus on growing your business.

Our Services:
– HTML, XHTML, HTML5 Development
– WordPress Theme Development
– Virtual Team (full time virtual employee)

Learn more about our services by visiting our Order Page.

Resources:

PSD to HTML Conversion Tips: Effective for Making a Website User Friendly, http://designtocss.blogspot.com/2012/01/psd-to-html-conversion-tips-effective.html

Five Tips for Successful PSD to HTML Conversion, http://pixelcrayons.articlealley.com/five-tips-for-successful-psd-to-html-conversion-2328946.html

Basic Tips for PSD to HTML Conversions, http://conversion.ezinemark.com/basic-tips-for-psd-to-html-conversions-7d36991a8577.html

Tips for Faster PSD to HTML Conversions, http://www.davidosomething.com/blog/tips-faster-psd-html-conversions

 

Leave a Reply

Your email address will not be published. Required fields are marked *

BACK TO TOP