PSD to WordPress: Prepping the PSD for a Developer
I do a lot of PSD to WordPress projects and they continue to be my favorite type of project to do. However, the organization, or lack thereof, within any PSD can mean a world of difference when it comes to the development time of any project. I love to operate at maximum efficiency and I don’t want to have to bill a client for additional hours I’m spending trying to make sense of their design files. An amazing website that gives a detailed overview of the best way to organize a PSD for handoff to a developer is Photoshop Etiquette. The key points I would highlight include:
- Label & group your layers: It makes a big difference in how quickly I’m able to pull necessary pieces from the PSD if I’m able to quickly locate specific elements. Looking for a Header folder and finding the layer with your social icons moves much faster than if everything is ungrouped and I’m trying to make sense of vague labeling like Layer 4. Label those layers, delete out the unused layers and group items appropriately. Your developer will thank you!
- Make sure fonts are licensed for the web: This is one thing that I am honestly surprised gets overlooked so much. If you are not using a standard font in your design (Helvetica, Arial, etc.) then your font should be available via Google Web Fonts or FontSquirrel’s font kits or TypeKit or similar. Just because you personally own the typeface does not mean it is licensed for web use so it’s worth spending a couple minutes to investigate your font choices.
- Include everything that you want: If you want dropdown menus, show an example of what those menus look like on hover. If you want rollover states on the icons, include the rollover state in a layer group.
- Repeatable patterns: If you used a tiled, textured background in your design, supply that independently from the design.
- Responsive design: If you are a designer and you want your design to be responsive (and you should want your design to be responsive), include what the layouts look like at a tablet and mobile level so the developer can see how you want it to break down. There are often a lot of changes, especially from desktop to mobile, so working solely off a desktop design on a responsive build can be difficult, most notably when it comes to pieces the full-size design wouldn’t include like mobile menu styling and behavior. For me personally, I prefer to receive full tablet and mobile breakdowns, whenever possible.
Overall, there are a lot of steps that can be taken to make for an efficient development process. If you are a designer or an agency and you are interested in handing off designs to developers for builds, I would encourage you to take a look at Photoshop Etiquette.
Have organized design files and need them built out in WordPress? Contact me!