PSD to Magento Conversion

1
Steps For PSD to Magento Conversion
Magento is one of the most popular web platforms
to develop websites the work for business. The
platform provides features to easily customise
the interface of a website. Here are simple
steps to convert a photoshop file to a Magento
theme.
2
Table Of Contents

• Slicing Out The Template
• Images and Fonts
• Creating a Development Environment
• Understanding the Design Principles
• About MarkupBox

3
Slicing Out The Template

• Slice up the photoshop file into various elements
  
• The templates of all the respective web pages
  must be separated
• These components are in HTML format
• Different design elements are extracted to form
  separate UI elements

4
Images and Fonts

• Use on page elements along with placeholder
  images to make the process simpler
• While you are customising the fonts on the
  website, you will need to keep the font files
  handy too

5

Creating a Development Environment

• To create a development environment for your
  Magento site, you can use MAMP or LAMP
• Proficiency in in PHP, HTML and CSS is a must
• Knowledge of Javascript along with detailed
  knowledge of the Magento platform are equally
  important

6



Understanding the design principles

• While developing a website on Magento, it is very
  important to understand its design principles
• Magento has a main store that is the information
  warehouse and the location for the shopping cart
• Each Magento site can have a multiple number of
  stores

7



Understanding the design principles contd.

• Magento has multiple store and store view options
  to choose from
• This helps in creating multiple businesses for
  varying audiences
• With a single Magento installation, you can host
  multiple websites and businesses

8



Understanding the design principles contd.

• Magento themes are a part of design groups in
  Magento. Each store must have at least one theme
• You can look for the app design directory to find
  the appropriate layout elements for your theme
• The design elements can be found in the skin
  directory
• The frontend folder is the most important one,
  one creating a Magento theme
• The three other important folders include,
  Layout, Template and Locale

9
About MarkupBox

• We are a focussed markup services firm offering
  quality and affordable PSD to HTML conversion
  services to our clients from all over the world.
  We have been in the business for approximately 8
  years now and have delivered over 4000 projects
  successfully for various business houses, digital
  agencies and freelances from all over the world.
• More than 70 of our business comes from our
  existing customers who have enjoyed using our
  services at an affordable cost.
• We would feel privileged to know your
  requirements. Get in touch today