Most of the time when having an idea or hiring someone to build the design of a web site it will come as PSD. In the past the steps to convert a PSD to a WordPress theme were very linear. You would get someone to create the PSD, slice it and then someone needs to program a custom theme that includes all the design elements. With this article we want to explore a different way of approaching this, taking out any coding and using the PSD as design guideline rather than as set in stone design.
Doing so has several advantages, one of the most obvious is saving time and cost. There are hundreds of WordPress themes out there that already have all the design and layout elements you need to recreate your PSD so why starting from scratch or hiring out the whole process? Another great thing about doing this on your own is that you have full control and can edit parts of the website at any time without having to forward that to anyone else and having to wait. I know what you’re thinking. This all sounds amazing but can I really do this on my own? Here’s how to do it in a few simple steps.
1. The PSD
This is the obvious one, either create a PSD on your own or get a designer to do it for you. Designing out the process and having a mockup of the actual live site is always a good idea as you will be much quicker in creating your WordPress site that way.
2. The Slicing of The Images
In the PSD you most likely will be having images that you want to use in your Website, if there are some then make sure to slice them and save them individually so you can later include them with ease. If your PSD uses placeholder images then now is the time to go to your favorite stock image site and find photos that go well with your design.
3. The Theme
Nowadays there is an abundance of multi-purpose WordPress themes which all enable you to create literally any style of website without having to touch any code. Still it’s important to choose the right one for your needs. The first question you’ll need to ask yourself is if you want to sell something online or just need a static website. WooCommerce is the recommended eCommerce system for WordPress so if you want to sell something online make sure that the theme is featuring this.
4. The Builder
Most modern themes feature a page builder. For your first website and the overall success of the conversion the page builder will play an essential role that’s why we recommend going with one that features a wide range of functionality combined with an easy to use interface. In this article we’ve chosen our own theme and builder called Pro.
Pro gives you the possibility to uniquely design every header, content and footer which enables you to create any type of design.
5. Getting Started
We won’t be covering the basic steps of choosing a hosting for your WordPress installation and then setting up the theme as most theme providers have dedicated articles about this, but we’ll share some tips on how to get started and get results in the fastest way possible.
Most themes offer demos, Pro has a dedicated Design Cloud that features a wide range of assets and demos which can speed up the process of recreating a PSD significantly. By using a demo as a starting point and then tweaking the sections to your needs you can save time if the demo is similar to your PSD concept. Additionally using content elements like contact forms, team sections, grids and other common section you can speed up bootstrapping.
6. Don’t Forget Performance
While building a site is about the looks the other relevant variable is performance. Always make sure to compress your images before using them and keep the amount of plugins you are using to a minimum to prevent your website to get sluggish.
7. Mobile First
The usage of mobile devices is ever increasing and all the major WordPress themes including Pro feature a responsive design that looks good on any device. Still when creating layouts and adding images make sure to have mobile in mind and check the viewport as columns and arrangement of elements change which will lead to a different way of viewing the site which can have a big impact if content gets stripped or put underneath another.
8. Getting Help
As with any endeavor sometimes you might need a little help and that’s no issue as long as the WordPress theme you are converting your PSD to is providing high quality support. For the rare cases where this is not the case or if you need more help than just some simple questions some theme developers offer services like One or Elite. Now you might ask yourself why we are mentioning this when this article is about how you convert a PSD without hiring someone and the answer is simple: it still comes you way cheaper to just get help on a few things if you did the most work and therefore we want to outline this option.
9. Search Engine Optimisation
SEO is something that is overlooked regularly besides performance having a content hierarchy and using clear headings is key to be ranked on Google. If you are not experiencing or just want to make your life easier we recommend using a free plugin like Yoast SEO that will give you advice on how to tweak pages and content.
10. Keeping Everything Updated
The last step of our recommended PSD to WordPress conversion tips is to keep all your plugins and the theme updated. Security fixes and other important compatibility patched are essential to run a secure website so regularly check for updates and take the time to perform them. Additionally, whenever performing an update make sure to review your whole website for a potential issues that might have been caused by the update.
I hope I’ve showed you a way to convert a PSD in a less traditional more DIY way that I would recommend anyone who wants to have full control of their website and not needing a person that makes all your changes and edits. WordPress themes are powerful tools that enable anyone to build websites without coding experience and if you feel like building something new make sure to give our own theme a try.
What are you waiting for? Give Pro a try today!