PSD to WordPress Conversion Tips

Converting your Photoshop Design to a working and functional WordPress website has gained so much importance that most designers hire specialists or third-party companies to convert their designs. Their role is to make the design as a live and working WordPress website that are both appealing and interesting in order to make visitors stay and patronize their products and services.

In our experience as a third-party company converting client PSD designs to WordPress, making clients/visitors to like the converted design plays a very crucial part as it needs a powerful and creative vision to convert PSD to WordPress such as converting the design exactly as it is (which we refer to as Pixel Perfect), making the webpage load faster, validating mark-up, css and scripts and many more.

Here are some of the factors we consider when converting PSD to WordPress.

Analyze the PSD File

Analyzing the design is the most important part when converting PSD to WordPress. This is where we study the design in details and cut the design into portions and put labels so that clients will have better understanding as to what we want to do with the conversion and how we will implement the design into a WordPress website. In simpler words, this phase helps us better understand the process involved in the conversion such as splitting mock-up into HTML, Semantic Structure, Header, Footer and the images that we will use for the design.

Break PSD to HTML

After having a better overview of the design, portioning the PSD by part is going to be easier. This is where we actually write the HTML mark-up structure base on the given PSD and the parts we have identified such as the header, content, sidebar and the footer. It is also important in our team that we provide semantic code structure that is compliant to W3C standards and WordPress Theme Development Guidelines.

Slice PSD

In slicing, you may use Photoshop or Fireworks (depending on what the client provided). You may either use the “Slice Tool” and label each slices accordingly, or you may chop each slice one at a time depending on your preference. In my experience, for images (particularly the background images) that are repeating, I use the Photoshop Slice tool since it will make the slicing job faster. But for images that can be used as sprites or images that requires hover states, I always slice them one at a time and stack them into one PNG file.

Create Separate File Structure

Once you are done with the slicing, you may now prepare the file structure of your WordPress theme. For a very basic PSD to WordPress theme that requires a homepage and an inner page, the files that you will usually need to prepare are: header.php, footer.php, style.css, functions.php and index.php. But if you want to extend your theme for more customization, you may add the templates for Pages (page.php), Blog Posts (single.php), Sidebar Area (sidebar.php), Search Result (search.php), Archive Listing (archive.php), and Error Page (404.php).

Integrate HTML to WordPress

After preparing the files, you may now look into your HTML codes and decide which part of your mark-up will be pasted on the WordPress Theme Files. For example, the line starting from the Doctype Declaration down to the opening of the <body> tag will be pasted in the header.php while the line starting from the end tag of the body tag (</body>) will be placed in the footer.php. The rest of the mark-up will be pasted in the index.php, page.php and single.php and will be slightly re-coded to add dynamic functionality.

Validation and Cross-browser Compatibility

After all the conversion, your website must be tested according to the basic WordPress Functionality, Browser Appearance and CSS and Mark-up validity. These are very important factors because all of these affects the overall appearance of your website and the loading speed. For mark-up and CSS validation, you may use W3C Validator (http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ ) to check if your codes conform to the web standards. For WordPress Standards, you may visit their codex: here for the complete list of the functions and features that must be present in your theme or try this alternate link: here

It is also important that your website is browser compatible unless the clients specified a set of browsers to use. For testing cross-browser compatibility, you may use BrowserStack (an online virtual server that offer different sets of operating systems and browsers ranging from desktop to mobile and Mac), IETester for testing website in IE Browsers (from version 6 to 9), Opera Mobile Emulator and Android Emulator. You may also install a virtual O.S. in your local machine using VMWare or Oracle’s VirtualBox.

Converting PSD to WordPress is an easy task provided that you have the knowledge and resources you need to convert your own design. But in times where you can’t do it by yourself or you do not have the enough time to finish the website, our team is open to help you finish the job. 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)

 

To learn more about our services, you may visit our Order Page.

 

 

Leave a Reply

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

BACK TO TOP