Steps To Convert PSD To Wordpress

1
Steps To Convert PSD To Wordpress
2
Contents

• Introduction
• Slicing The PSD File
• Creating the index.html and style.css
• Breaking index.html to Wordpress theme
• Adding Wordpress Tags
• About Markupbox

3
Introduction

• Thankfully, today we have open source website
  building tools and content management systems
  such as WordPress which reduces most of the
  effort and lets us create quality websites in a
  significantly reduced time frame.
• In this powerpoint we will check the conversion
  of PSD to WordPress service in few simple steps.

4
Slicing The PSD File

• This is the primary and one of the most important
  steps for Psd to WordPress conversion.
• It typically represents the cutting and slicing
  of the big images into its smaller components so
  that each small image can be made actionable with
  its own features and functionalities.
• These days there are graphical software which
  make things even more convenient by allowing
  designers to create files which already have
  components presented in different layers.

5
Creating Index.html and style.css

• Creating Index.html and style.css files After
  the slicing of PSD file, next comes the coding of
  these sliced images into HTML and creating its
  style using CSS. Dreamweaver and Fireworks are
  two most important software used for this
  purpose.
• One has to carefully code the functionalities
  over these sliced images by wisely examining the
  perfect pixel placement. One must also refer to
  few online resources such as W3Schools, TutsPlus,
  CSS Basics and others to get comprehensive
  knowledge on these platforms. There are plenty of
  examples and few online compilers to practice CSS
  and HTML.

6
Breaking index.html to Wordpress Theme

• It would interest you to know that creating a
  custom WordPress website actually involves making
  use of PSD files to create a personalized
  WordPress theme. This theme is then uploaded on
  the WordPress software where it is accomplished
  using the available tools and plugins.
• Thus, it is highly essential to design the HTML
  file as per the WordPress theme. For this,
  Index.html (HTML file created in the above steps)
  is broken into multiple html files following the
  WordPress theme structure. This helps in better
  organization of code as the code is chopped and
  kept in different compartments by following the
  WordPress coding assembly. The process of HTML to
  WordPress conversion is a crucial part of the
  theme anatomy.

7
Adding Wordpress Tags

• The magic of WordPress is evident from its huge
  library of functions which are continuously
  updated from time to time. WordPress allows you
  to use hundreds of such functions that can be
  added onto your theme.
• Adding WordPress tags is a very easy task and
  simply adding these tags get you the desired
  functionalities that you are looking in your
  website.
• These tags are pre-coded so once you add them
  WordPress takes care of its workings. You must
  also keep in mind that all the files have to be
  stored in the same folder and this folder must
  have the same name as the name of your theme.
• It must be placed into the /wp-content/themes/
  path so that it is easily found during WordPress
  installation. This step is important as it lets
  you add the WordPress PHP tags to your WordPress
  files so that together they form a completely
  functioning WordPress theme which can be
  activated through the WordPress Dashboard.

8
About Markupbox

• Markupbox provides cross browser compatible and
  responsive theming and conversion services.
  Markupbox is an experienced service provider and
  having features like Non-Disclosure agreement,
  dedicated project manager and reasonable pricing.
  It has worked with 5600 satisfied clients from
  across the globe.