Any person involved in a web centric job is likely to be using Photoshop. Be it a theme designer, website developer, creative field, it is highly probable that you would be using it. Many people use it on a daily basis. If you are engaged in designing a theme for WordPress or slicing a Photoshop creation while preparing for coding; you need to follow set rules to make the transition smooth and seamless. We will discuss some tips and best practices of converting PSD to WordPress.
Planning
It is crucial that you plan before starting any project. It not only saves time, but also reduces the chance of things going wrong. Planning is all the more important when you deal with multiple projects and clients, and have other team members working with you. Setting a routine will certainly improve your efficiency and result in lesser turnaround time for your projects.
Explained below are some WordPress related things you need to plan for, but you have to be careful to plans separately for each project.
· Real World Situations: The real world situation is quite different from the ideal situation. The design may look very good with two word titles and eye soothing placeholder images, but you should mix content from the clients’ existing website if they have one. Also, if you are developing a commercial theme make sure that it doesn’t break when the clients uses long titles or forgets to add an image.
· Content Types and Containers: WordPress is very flexible CMS that offers multiple options, such as sidebars, widgets, custom posts, and other variable content options. It is, therefore, crucial that you take into consideration all possible situations while designing the theme. How the content would be entered for different sections should also be accounted for and your design should be relevant to the users and entering content should not be a problem.
Communication
Regular communication with all the stakeholders is critical. Instead of getting completely engrossed in designing the theme, you should regularly speak to the stakeholders to understand their expectation of the functionality they are looking for in the theme. You can impress the clients by regularly updating them of the progress by showing them animations, transitions and user-flows between pages. If someone else is developing the site he/she will get a clear idea of what a section is meant for and how it would look. Also, keep interacting with the developer to ensure that your Photoshop design can be implemented with codes within the budgeted amount. Similar designs that are equally appealing can be produced with different difficulty level of codes.
PSD
Photoshop is a huge program with numerous features. Most developers only use a small percentage of its features. But with power comes added responsibility and you need to ensure that whoever is developing the site is able to navigate the PSD to find what they require. Some useful tips for WordPress development services are mentioned below.
·        Use Photoshop CC Libraries for Greater Consistency; Use the libraries as your theme’s style guide while defining the colors, typography and other elements. Defining them at the start and using it in place of duplicate layer method or building from scratch saves a lot of time. And at the same time, helps in maintaining better consistency through the different pages and sections. It also becomes easier for someone else to add to the theme.
·        Generate Asset Exporting Command; Using this command makes exporting of bitmap images inside your layers a lot easier and quick. Also, it is much more accurate than the slicing method. You can reach this command via file > generate > and checking Image asset as it appears in the screenshot.
·        Descriptive Names and Organized Documents: Properly organized documents help everyone working on the project. You should give descriptive names to the layers and groups. It makes it easier to understand which layer group and name is more suitable to describe the purpose of the displayed image and its connection with rest of the design. Even if you are short on time, spend some time on correctly naming and organizing your layers.
Optimize your Images
Irrespective what tool you use, it is extremely important to optimize the images before you make the transition to WordPress. There are different ways of optimizing images, such as a pre-processor like Grunt, or optimization services such as WPMU Dev’sSmush Pro Plugin or Tiny PNG. Optimizing the images will ensure fast loading of the website. Nobody would wait for too long for your images to load, and this could drive traffic away from your site.
The above mentioned tips are valuable and should be given serious consideration when you are converting PSD to WordPress.