Prepping Photoshop Files for Development

If you’re a designer and you’re handing Photoshop files off to a development team, here are six quick tips that will make the production easier. This should in turn save you money since it will take the developer less time.

* Use multiple layers – Much of web development involves turning elements on/off to export transparent images and background graphics. Having multiple items all on the same layer makes this process more difficult and more time consuming.
* Name and group your layers – When creating new layers be sure to give them proper names. If your logo consists of twelve different layers named things like “Layer 4 copy” and “Shape 16” this will make things much harder than if you combine them all into one layer or group named “logo”.
* Delete unused layers – Often times during the design process a designer will try different techniques before settling on a final design. By making sure that you remove all unused layers before sending the PSD to the developer you can ensure there will be no confusion over the final design.
* Create all rollover and active states – If your design has different states for nav buttons, include all of them for each and every item in the nav, preferrably in named layer groups. If you only include one nav item to illustrate the idea then you force the developer to create the other states. Depending on the design and the developer’s Photoshop skills this will often take longer than creating them yourself.
* Include any non-standard fonts – If you’re using a non-web font for things like headers or nav items, include those font files with your PSDs. It’s likely that your developers will need them to create additional graphics and/or to include in sIFR files. OpenType fonts will help ensure that they can be opened on Macs or PCs
* Use the notes feature – If you have JavaScript functionality in mind for things like rotating promos or an accordion nav you can annotate your Photoshop file by adding notes. These can help eliminate confusion and ensure you get what you want without wasted hours.

By following those rules and cleaning up your PSD files before you send them on to development you’ll make sure that the development process goes as smoothly as possible. This saves time, money, and keeps your development team happy.


One thought on “Prepping Photoshop Files for Development

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s