The website design process, like all design processes, is an organic one. It’s full of trial and error, new ideas, and experimentation. The website development process, however, is a bit more exact.
Designers and developers need to work together to create a well-functioning site, but these two groups of people don’t always speak the same language. However, designers who take a bit of time to prepare their files for handing off to a developer often save time and, of course, money, because they eliminate the guesswork of inconsistent files.
Photoshop, or PSD files, are among the most frequently transferred files between designers and developers. Fortunately, spending just a few minutes on each PSD to clean a few things up can go a long way in eliminating guesswork and making the entire project seamless and understandable for everyone involved.
Below are some steps that designers should consider taking before turning PSD files over to developers.
Standardize the File
Keeping files consistent not only cuts out a lot of confusion, but it allows the developer to work more efficiently because he or she will know how the file is set up.
When standardizing a PSD file, take the time to do the below:
- Save a copy of your PSD as a developer file, and note this with a standard suffix. So, if your file were called splash.psd, your new file might be splash-devel.psd or splash-prod.psd. The suffix itself isn’t all that important, but what is important is that you keep it standard and consistent.
- Keep only the guides you need. Designers tend to use lots of guides in Photoshop to keep lines straight, and that’s fine, but to a developer, too many guides can make a file look confusing. Eliminate all but a few key ones.
- Including an invisible color palette layer group is also helpful. Stash this at the top of the layers panel so it’s easy for the developer to find. Each layer should just be a fill layer with a solid color, and name each layer to match their role in the site’s CSS. This may not seem so essential, but taking the time to do this simple step can be immensely helpful for your web developer.
Streamline the Navigation
A designer may see how the navigation will look in his or her head, but this vision needs to be properly indicated to the site’s developer.
Here are some navigation-related things to check for on all PSD files:
- Check to make sure that you have three states of interactivity for the site’s CSS. These are typically inactive, hover, and active, though some designers may want a fourth state for a visited link. Having three or four is up to you, but it’s important to keep it consistent throughout the site’s design.
- Create sprite groups in which state is its own layer and named appropriately. Within the sprite group, be consistent with the order in which you arrange the different states. For example, you might always order them interactive, hover, and active.
- Check to ensure that the heights and widths for each state are consistent as well. This allows the final website build to appear seamless.
Layers and Fonts
Photoshop files can have dozens of layers. For a designer who has been working with a PSD for a little while, the order and purpose of each layer is obvious. However, for a developer looking at a PSD for the first time, the seemingly endless scroll of layers can be dizzying.
Throw in a handful of fonts, some of which may not be web safe or licensed, and the entire file can be a real headache.
To minimize frustration for your developer, think about doing the following before turning over PSD files:
- If you know certain layers are final and won’t need any additional editing, merge them. You don’t need to flatten the entire image (nor should you), but flattening finished layers lets the developer know they’re done plus eliminates the risk of any unintentional changes.
- Even though it may sound obvious, name all of your layers. And, give them names that are simple and useful in identifying their purpose and contents. If you use a personal shorthand for naming layers, you’ll either want to share your system with your developer or come up with something that will make sense to another person.
- If you have several layers that serve similar functions or are part of a certain area of a graphic, put them in layer groups. Organizing PSD layers in this way allows for better navigation for the developer, who will be thankful to not have to wade through a single list of 50 or more layers that may or may not be in the correct order.
- Take the time to go through your font layers. Fonts that are web safe can be left as editable vector text layers. If they’re not web safe, consider flattening them or changing them to web safe. Finally, fonts that are not licensed because you were simply experimenting with them should either be licensed before going live or replaced with licensed fonts.
- Smart objects should be rasterized so they are no longer editable. This not only makes the PSD file smaller for faster load time, but it also prevents any inadvertent clicking and editing by developers.
Check Your Work
Once you’ve gone through these steps, take a minute to make sure you’ve addressed anything that could be misunderstood or misinterpreted.
Try to look at the PSD file from a developer’s point of view. Does everything make sense? Or are some things left unclear? The first few PSDs that you attempt to streamline may take you a little longer to work with, but once you become comfortable with the process, you’ll find running through the checklist to be fairly quick.
Hand Off Properly
While it may be tempting to simply email a PSD or upload it to a common server, it’s best to give the developer your files with some explanation. Meeting in person to do a quick walkthrough of what you’ve done and why can save lots of time and confusion later on. If a face-to-face meeting isn’t possible, an explanation by phone can be adequate, as can a carefully worded email.
It’s especially important to go over files the first few times you send them to a particular developer.
However, if you work with the same developer on multiple projects, you may find that you both understand how each final project is supposed to look and function based on the preparation you make to each site’s PSD files.
