Written by
Tomáš Zúbrik
on
October 19, 2015

Photoshop Etiquette: QA & Exporting

The final part of Photoshop ethical rules. Follow them and you will have well organized workflow.

QA

Ever hear of the term “being too close to a design”? While knee-deep in pixels, it’s easy to miss some glaring mistakes. Employ some quality assurance.

Proofread:

Get someone else’s eyes on your comp before it goes out to eyes who will undoubtedly find your grammatical mistakes. It’s easy for a designer to overlook things like misspelled headlines when you’re focused on individual pixels.

Screen Shot 2015-10-05 at 19.52.45

Compare against Wireframes:

Client: “Where’d my logo go?” You: “Oh, so you wanted that to stay?” = compromised expectations = no-no. It’s easy to go in to auto-pilot when you’re in Photoshop. Just make sure you’re not forgetting anything that was originally agreed upon in the wireframes.

Screen Shot 2015-10-05 at 21.22.53

Account for all Images:

A website using watermarked stock photos is like leaving the tag on a shirt you just bought.

Screen Shot 2015-10-05 at 21.25.50

Be Familiar w/ Browser Compatibility:

Knowing browser limitations should come standard with the “Web Design 101” package. Browsers each render content differently, but more importantly, there are some that don’t take advantage of CSS3, or basic PNG transparency (ahem, IE6).

Screen Shot 2015-10-05 at 21.58.53

Be Consistent:

Are you unintentionally using 3 slightly different blues? Is your red the same one as their logo? Unless intentional, it’s painstaking to have to eyedrop 10 different blues all trying to be the same value, but aren’t.

Screen Shot 2015-10-05 at 22.07.16

exporting

One thing’s for certain: if your job is to export images from your PSD, it’s something you only want to have to do once. Don’t overlook this step in the process.

Save for Web:

Simply choosing ’Save As > JPEG’ will get you bigger files, color issues and a world of hurt from your dev. Save for Web (& Devices) is geared towards properly compressing your image to be used on the web. “Save As” is not.

Screen Shot 2015-10-05 at 22.15.29

Conserve File Size:

Go old school: negotiate quality/colors used to make smaller files. Yep, it’s still relevant. With your images being delivered over all kinds of networks to all kinds of devices, proper compression and small file sizes are incredibly important.

Screen Shot 2015-10-05 at 22.19.04

Name Files for Function:

“blue_square3.jpg” doesn’t give the developer much indication where it should go. Except the trash. This goes along with “Name Files Appropriately”, since the goal is to be as clear as possible with what the file is, as simply as possible.

Screen Shot 2015-10-05 at 22.23.34

No Unnecessary Space:

No need to build in extra margin or padding for layout purposes. That’s what CSS is for. CSS excels at being easy to adjust positioning. Photoshop’s workflow (Open –> Nudge –> Save for Web)? Not so much.

Screen Shot 2015-10-05 at 22.25.52

Make a Retina Version:

When possible, make sure you’ve got those fancy hi-dpi screens covered. iOS devices are almost exclusively “Retina”. More devices are sure to follow.

Screen Shot 2015-10-05 at 22.29.40

Source:

http://photoshopetiquette.com

userstorebriefcasecrossmenutext-align-left