Convert PSD to Magento

Very often clients who already has ready-made design ask us: if I want you to integrate my design into Magento, what information I need to provide? So we decided to prepare some kind of checklist, i.e. what you should prepare for smooth and trouble-free PSD to Magento design conversion.

1. What materials I need to provide to Magento design integrators/developers?

- First of all, Photoshop (*.PSD) source files which has clearly separated layers. This is an obvious thing, but just in case.

For best result, you need to prepare PSD design sketches for all key pages:

  • Home page
  • Category page
  • Product details page
  • Cart page

Also, it may be a good idea to prepare a design sketch for 404 page.

- Favicon image.
Very often web designers do not care about this, and customer notice that the site uses default Magento favicon only after store launch.
You can easy do this step yourself. We recommend http://www.favicon.cc/ service for favicon generation.

- Source files (*.TTF) of the non-standard fonts you plan to use.
This is very important part, because the first impression of your site will depend from fonts used. For best result, we highly recommend to ensure that your fonts are licensed for Web usage.
We recommend to use licensed fonts from https://www.google.com/fonts or http://www.fontsquirrel.com/, these fonts are 100% licensed to use in the Web.

- Placeholder image for products.
If your product has no image, Magento will show default placeholder on product listing/details pages. It is a good idea to replace default Magento image with your own.

- Store logo in printable format.
There are 2 important logos in Magento (you can find them in skin/frontend/{your package}/{your theme}/images/ folder):
- logo_print.gif - this logo used on all printed materials, such as invoices.
- logo_email.gif - this logo used for all emails sent from your store.

Ask your designer to prepare a printer-friendly version of your company logo, and all invoices and automatic emails from your store will look more professional.

2. How to choose a company for PSD to Magento conversion service?

When all materials are ready and design is approved, you should find a right Magento development company to convert your PSD design to Magento theme. I recommend you the following:
- Check that company has  certified developers in-house
- Check that company is an official Magento partner
- Check company portfolio and testimonials to ensure that they provide quality services

3. The result of PSD to Magento service

Magento theme creation is not only a coding work, it is always very important to remember that good Magento theme should be:
- W3C valid: CSS and XHTML
- SEO friendly
- Support Google Rich Snippets standard (http://schema.org/Product)
- Cross-browser compatible (tested in Firefox, Chrome, Explorer, Opera and Safari)
- Speed optimized
- Theme should have professional jQuery/Prototype implementation
- Magento theme should be upgrade friendly

Quality of Magento theme will have a positive impact on SEO and future Magento upgrades.

Additional information:

http://jigsaw.w3.org/css-validator/
http://validator.w3.org/
http://schema.org/Product

Favicons:
http://en.wikipedia.org/wiki/Favicon
http://www.favicon.cc/
http://www.magentocommerce.com/blog/comments/from-the-support-team-changing-the-magento-favicon/

Web fonts:
http://www.alistapart.com/topics/design/web-fonts/
http://blog.typekit.com/2010/10/29/web-font-licensing/

How to set Magento placeholder images:
http://www.magentocommerce.com/knowledge-base/entry/configuration-catalog-product-image-placeholders