Creating a PSD Design File for a WordPress theme

Many people who have a design in their hands

Many people who have a design in their hands, either created by themselves or through a professional have often questioned on how to use and apply the design to their website. Most of them, who use WordPress, have some fundamental knowledge of HTML along with coding web layouts. They believe that creating a PSD design file for a WordPress theme is simple. However, this is not so. It is a lot more complicated due to the fact that often the layout is handled by the CSS and not the tables. Moreover, the main content, header and footer areas are mostly not contained in one single file.

What is PSD?

PSD is the short form of “Photo Shop Data file” and is a commonly established file format. It supports all existing image modes (Grayscale, CMYK, Duotone, Indexed Color, Bitmap, RGB, Lab, and Multichannel). This format is enormously functional as it supports duotones, clipping paths as well as channels. In addition, PSD offers an exclusive feature – it can support layers even as every other format must be compressed on export. Whichever program supports PSDs openly can influence this layer information. Saving an image as layered images is rather helpful as it enables you to edit different parts of an image easily whenever you choose.

Creating a PSD Design File

If you are starting a big project, it would be always better to start with two PSDs; one for the first set of layouts and the other to act as a draft or crude style guide for the designing elements.

Your starting point should be the layout template. The layout template is the foundation that can be expanded later. It has a toolbox folder that contain the guidelines which are based on the 960 Grid, column helpers, shapes for simple measurement of the ordinary elements and spacing sizes, also guides for the ordinary browser sizes easily checking the “above the fold” spot. It, in addition, has normal folders and sub-folders to get you on the track.

The style guide template on the other hand has pre-loaded folders. You should put this PSD on a different monitor and turn on and off the folders for avoiding scrolling. As you go on designing, fill it with essentials that can be reused again. It consists of the Icons, Button styles, typography, and the basics such as the color palette.

How to use the layout template

Initially you should copy the file in a folder and rename it with some common name like comps.psd. After that you should open it and perform some tailoring before starting designing. You should pre-load it with a starter set of columns and folders and that you commonly use, but in case the folders is not useful for every project you can either edit or delete it as needed to fit the website you have to design. The layer structure will look as under prior to tailoring:

In case you do not want color-coding you can turn it off by right-clicking on the folder and select “None” for color.

Before starting to design, you should rely on the items available in the toolbox folder. The main cols folders include sizing options for ordinary layout scenes. The folder for measurements contains many measuring guides. The 30px square, for instance, is commonly used for spacing between columns. The 75px and 100px boxes are useful for thumbnail photos.

As you design, you should keep on organizing things. Each time you make a layer you should name it right away.

The buttons should be sliced, hover states should be created, and accurate column widths should be calculated. You should then chop the whole thing into parts namely, the header, footer, sidebar and content. As your style sheet forms collectively you can find out where some exceptions were made, any lapses in the consistency also become extremely clear. Now you need to move a number of the structural thoughts into the design process for making it well-organized.

As soon as you get to know some Layer palette keyboard shortcuts, grouping and naming and becomes a normal ingredient of the process.

The top level folders matches strongly with HTML markup structure and are known as Header, Content, Sidebar, Footer and Background. Now you should modify these to fit the WordPress theme that you are designing. Inside the folder like the “primary nav” where fundamentals have many visual states you will trace subfolders labeled hover, on, and off. Again in the contents folder you will find some sub-folders named “text” which makes it easy to change all the fonts found in groups. In the same way, in buildout you can easily turn all the fonts in a segment off if they are found in a single folder.


The procedure described above may look somewhat complicated to the layman and they can opt for an expert in WordPress Theme pros who will create the designs in Photoshop, Gimp or Adobe Illustrator and then them into a well-designed WordPress theme. It should also be noted that if creating a PSD Design File for a WordPress Theme is coded properly, the graphics will be separate from the content, which in turn will make your WordPress website very appealing.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.