Magento has become one of the most popular eCommerce platforms. As a result, it has over 240,000 users around the world. Also, it supports extensive visual and UI customization and this open source software runs in PHP. Here we’ll learn about the basic to convert PSD to Magento.
However, we’re providing Cloud Magento Hosting at a very affordable price minimum of USD 9.99 per month. It includes premium features like SSD cloud storage, Aspiration CDN services, LiteMageCache, and guarantees 100% uptime etc. Enjoy unlimited speed with Aspiration Hosting!!!
Tanzia Farin Chy for Aspiration Hosting
PSD is a photoshop design file, which is a proprietary file type from Adobe. In the first place, PSD to Magento is the simplest process of application development. In fact, it is very much in demand now. As it is very much accepted as an open source shopping cart. Thus introduced as a software program which is used to create easy and flexible online eCommerce stores.
The requirements to convert from PSD to Magento
It takes time and is also complicated to change from PSD to Magento. Hence you will need to be a master of multiple languages. Also, have a full understanding of the Magento platform.
The following things required before the start with PSD to Magento conversion :
Environmental Development: At the start, you have to set up a Magento environmental development. Therefore can use MySQL database management system, PHP development language) and many more.
Fonts and Pictures: Appropriate font files (in *.TTF) is needed if you are using a custom font. In fact, it is better to use Type kit or Google fonts. You will need to have pictures, logo, and favicon for on page elements.
PSD Template: For the Magento theme you need to have an original photoshop file. For every page, we need different templates. For example – contact page, home page, about page and etc.
Besides all these, you should also have good knowledge of PHP, HTML, CSS, and JavaScript as well. Because having knowledge about Magento platform will also help you. Also including its file and directory structure, template requirements, etc.
A complete Magento template shall consist of :
a. HTML tags can ensure a friendly search experience if HTML is SEO friendly.
b. It must have browser compatibility with famous browsers. Such as – Mozilla Firefox, Google Chrome, Internet Explorer and Safari.
c. The theme must be further extension friendly. And it should be fast also so that it maintains a high standard of usability.
Magento Design Principles
The way Magento handles website structures it is difficult to develop themes for Magento. Hence Magento is built in a way that it can host multiple stores on the same installation. Unlike WordPress where each installation is connected with one blog.
Thus Magento has :
Store: It is a categorization tool use to organize different stores better.
Store Views: It is an actual store in Magento. Where you can have multiple store views. Customer information can be shared for different languages with the help of store views.
Website: The store that holds customer information and shopping cart. On the other hand, a website can consist of several or multiple stores inside it. And also share customer information.
Design Packages and Themes
Magento can host multiple websites, stores and store views with each installation. Therefore, each of them can have multiple themes. One website can contain many stores with different languages with the same theme. Stores can also have a radically distinct theme.
Design Packages: It is a group of similar themes and designed packages can have many themes. Thus each website has unique sets of design packages.
Themes: It is made up of elements that control the design and layout. Therefore, one theme inside a design package must be included in a store view.
Magento Theme Structure
We can download a copy of the Magento Community edition from Magento Official site. Hence Unzip it and extract it on your desktop. Then if you open the directory you can see something like this –
Then in this picture, you can see two folders named “app” and “skin”. These are the two important folders for us.
Every theme in Magento consists of two elements:
Design elements: It contains all the files that control the page’s visual element. For example – images, CSS and etc.
Layout elements: It contains files that control page rendering. For example – HTML, PHP and etc. Layout elements are in-app > design directory. Whereas all design elements are in the skin directory.
In Layout Elements, You will see the following three folders if you open the frontend folder in the directoryapp > design.
There are three important folders :
Layout: It controls the Page encode. And this directory also contains the XML files. Which controls the basic block structure of each page.
Template : It controls the page structure and HTML markup necessary for creating template files. By the help of PHTML (PHP + HTML) files.
Locale: It is a “translation” folder of Magento. It has translation strings in different languages for messages and alerts produced by Magento.
Design Elements
In the skin folder, we’ll find all of the design elements. It also has a frontend folder like app > design folder. Which contains folders for three different design packages.
The theme’s default favicon is favicon.ico. Here we can see under the different favicon.ico file for each type of theme. For example, french -> favicon.ico.
Creating themes from PSD templates in Magento has the same process of creating themes for CMS like WordPress. After we’ve completed with slicing the PSD template, modify the basic default theme in a way that satisfies you. Then add appropriate CSS images in the end. Though PSD to Magento coversion is vast process, we tried to summarize the whole idea.