Today’s guest post is by Tatum Bree Hindman of TBH Creative who shares some tips for web designers on how to use photo shop as part of their design process.
As a web designer it is important to prepare your Photoshop files properly. This is significant for basic knowledge transfer purposes—remember, you may not be the only person working on the project or design changes may be needed from another designer in the future. Labeling and making folders as you work saves time in the long run.
When collaborating with other firms or developers, details are even more important. Unfortunately, many web designers do not follow any rules or etiquette. Even if you understand the file, don’t assume others will. Providing details upfront and organizing your files makes finding elements and making changes easier.
Here is a checklist of suggestions to help you better prepare Photoshop files with high standards.
Name Files Logically
Your file name should contain the client’s name or project code, name of webpage, and version number or date. This is important for designs of multiple webpages and where several rounds of revisions may have been completed. For example “TBHCreative_HomePage_v4.psd”. Typically once a design is finalized, we will store versions in a project subfolder and copy the final version with new name such as “TBHCreative_HomePage_2-15-12.psd.
Name All Layers
Layer naming even more important than file naming. If another team member or future designer is reviewing your Photoshop file, the layers should be named for easy recognition to the visual elements.
Name all layers to match the contents; keep it short but clear. For example the logo layer would be ‘logo,’ the footer background would be ‘footer bg blue.’ ‘Layer 5 copy 5’ does not help anyone.
Delete all unnecessary or unused layers.
Folders are essential to hold groups of layers together and allow to easily turn off/on sections of the design. They can be used to show hover states quickly and turn them off again. They can help demonstrate what movement would look like. They can also be used to show alternative options on the design or graphic treatment.
Store All Design Elements (Assets) with the PSD
Print designers know this all too well, but many web designers do not account for such organization because it is not a requirement. Original copies of all artwork, copy, fonts, wireframes, and other related content should be stored with the final Photoshop file.
For example, original, unmodified photos and graphics should be included In the assets package. Fonts are often overlooked, but consider that other designers or team members will need these to open and view the designs properly. You may even need them again if you change computers, and a redesign is needed several years down the road.
Don’t Stretch Buttons and Shape Elements
This is a common tendency for early designers but it’s a very bad practice, especially for web design. All shapes should be created as vector elements. We strongly recommend to keep them and redraw where other sizes are needed (don’t stretch for resizing because you will lose corner radius). If you must rasterize the shape; keep a layer copy (named appropriately) for the original drawn shape.
Please, please do not stretch type for any reason in web design. First of all, it is a designer 101 “no-no,” and—more importantly—it is not easy to build it in your mark-up/styles. Consistency across browser will be difficult if you modify your type.
Use Vector Smart Objects
Keep vector objects such as logos and icons vector for resizing. Do not rasterize these graphics for any reason or resizing in the future will degrade the quality.
Additionally, as mobile design grows in popularity, vector art is highly recommended. Using vector makes mobile design customization and layout easier for both the designer and developer.
Snap to a Grid and Use Full Pixels/Points
Set up a grid and enable “snap”—you can snap to a grid, a guide, and even a pixel. This will confirm that elements align and will eliminate the oddity of uneven components or being off by just a pixel.
Use full value pixel or point values for all text, graphics, and shapes, Text at 16.34 pixels is not possible, and it will vary from one browser to another.
Consider the Development and Build Requirements for Your Design
The best web designers also understand web coding because they create designs based on an understanding of how the elements will be achieved. They know where to adjust things for best loading. They make design decisions knowing that file size small is still relevant. They also will take into consideration browser restrictions and graphic format usage. If a CMS will be used for implementation, savvy web designers will keep those limitations in mind during the design process.
Considering the build is very important to successful web design–don’t just leave it to the developers; the responsibility is also on the web designer.
There are many additional rules or guidelines to consider, but this list is a great starting point. following these guidelines will earn you respect among your peers and save the whole team from dealing with unnecessary confusion.
About the Author