Tag Archives: etiquette

Photoshop Etiquette: QA & Exporting

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



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.


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


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


Squirrel ChatPostcardClothes Eshop




Photoshop Etiquette: Effects & Practices

Third part of Photoshop ethical rules. You should follow them if you want to have well organized workflow.


Please use effects and filters in moderation. PSD inheritors will have less to sort through, and in most cases, more filters ≠ better design.

Use Color Overlays Appropriately:

It’s much easier to navigate the layer panel with color thumbnails that represent the color of the elements on the canvas.

Nail Tile able Images:

A slightly-off repeating image is incredibly noticeable. It’s worth the time to get it right.

Screen Shot 2015-05-25 at 22.28.05

Easy Does It:

Without knowing how an image translates to CSS, you could be greatly limiting its use by loading it up with effects.

Screen Shot 2015-05-25 at 22.29.52


Gradients are meant to be smooth, and like everything else, it’s better to get it right the first time.

Screen Shot 2015-05-25 at 22.32.14

Know Your Strokes:

Using outside strokes when you really meant to use inside strokes could affect the overall width of a shape.

Screen Shot 2015-05-25 at 22.33.13



Not that any of the following guidelines will automagically make you a better designer, but they’ll help your approach to working in Photoshop for certain. Just five of the many considerations you can be making.

USE a grid:

Grids help guide (pun intended). Establishing a system of heights, widths and alignment for your design is essential.

Screen Shot 2015-05-25 at 22.37.03

Use Drop Shadows Gracefully:

Drop shadows, like other effects, need to be altered from the Photoshop default settings in order to look realistic or sophisticated.

Screen Shot 2015-05-25 at 22.39.45

Use Web fonts:

Besides the amazing selection to choose from, webfonts are the norm. Not the norm? Text as images.

Screen Shot 2015-05-25 at 22.44.34

Consider Device Width:

It’s best to design with the mindset of how things will adapt to different widths, as opposed to hoping everything plays nice after the fact.

Screen Shot 2015-05-25 at 22.46.04

Use Licensed Icons/Photos:

Google Images is *NOT* a resource for stock photography. Examine use agreements before using icons and the like.

Screen Shot 2015-05-25 at 22.47.43


Squirrel ChatPostcardClothes Eshop[/stag_button



Photoshop Etiquette: Images & Type

Another part of Photoshop ethical rules. You should follow them if you want to have well organized workflow.


Working with images is all about being non-destructive. You certainly don’t want to limit the shelf life of a photo or button by recklessly adding irreparable filters or effects.

Don’t stretch or flatten buttons:

Best case scenario: keep your shapes vector. Otherwise, keep a copy of the vector before rasterizing.

Globalize masks:

It’s always better to only have to edit one mask than multiple masks.

Screen Shot 2015-04-18 at 09.37.35


When you’re consistently off by a pixel, somebody has to go in and align things correctly. Shouldn’t it be you?

Screen Shot 2015-04-18 at 09.47.58


Use blending modes:

It’s difficult to figure out what the hex value of your mashed-up color is. Make it easy.

Screen Shot 2015-04-18 at 16.44.26


GO non-destructive:

Use Masks, Smart Objects & Adjustment Layers to avoid forever deleting precious pixels.

Screen Shot 2015-04-18 at 17.02.34



There’s no getting around using type in Photoshop, no matter how dissimilar the text rendering is to what happens in browser. What you can control, however, are the values and areas you use text.

use whole pixel values:

Consistency in your typesetting is key. It rarely makes sense to use fractions and decimals in Photoshop.

Screen Shot 2015-04-18 at 17.18.44

make licensed fonts available:

There’s nothing worse than needing to edit type and not being able to because you don’t have the fonts.

Screen Shot 2015-04-18 at 17.21.11


Don’t stretch type:

Beyond not being able to do it programmatically, I doubt the typographer intended for their type to be squished or stretched.

Screen Shot 2015-04-18 at 17.28.33

Control your text boxes:

Longer-than-necessary text boxes can prohibit selecting text that’s behind it and can be frustrating to work around.

Screen Shot 2015-04-18 at 17.33.17


use separate TEXT BOXES:

It takes more clicks to find the font family and size of multiple types of text within one text box than it does to do so on an individualized, singular text box.

Screen Shot 2015-04-18 at 17.35.57


Squirrel ChatPostcardClothes Eshop



Photoshop Etiquette: Files & Layers

Why is it good to follow Photoshop Etiquette?  It’s the way of improving clarity of your work. If you want to be a high quality designer, it’s very important for you. You will be work with colleagues and they maybe will hate messy PSD’s files (like me :D). It’s important to have some rules to achieve better workflow. Yeah, I can use Command (or Control in Windows) to choose layer what I want to, but I have still feeling that it’s like a “work on junkyard”. It’s stinking, It’s annoying and it’s wasting time when you are looking for layers which you need merge into group, but the layers are far apart.

If you will working with messy PSD, this is the fastest way how work with it. Use move tool (v) and click on layer what you need with this setting in auto-select:

Screen Shot 2015-03-14 at 08.06.11

But Photoshop Etiquette is not only about layers and groups. It’s about all workflow with designing something. It’s about to have clean and clear workflow.


Consolidate your PSD:

Keeping everything in one PSD reduces the confusion of which file to use.

Screen Shot 2015-03-14 at 07.49.30 copy

Name Files Appropriately:

Ironically, absolutes like “Newest” and “Latest” are bound to have edits later. It’s best to just keep a general file name.

Screen Shot 2015-03-14 at 08.42.29 copy

Store Assets Relative to PSD:

PSD inheritors shouldn’t have to go hunting to find original assets. Proximity is key to avoiding wasted time.

Screen Shot 2015-03-14 at 08.49.39 copy

Make a template for UI elements

It’s better to have control over how the UI elements look than using browser defaults. You’re most likely going to be asked to design them at some point anyways.


Files on Server/Share

Having to be asked where you put a file is common, but it shouldn’t be necessary if you learn to put it on a file share before even being asked.



Name Layers & Be Accurate

The quintessential piece of etiquette: naming your layers instantly decreases confusion and improves acclimation to an otherwise unfamiliar document.

Screen Shot 2015-03-14 at 18.50.27


Use Folders

Happy layers have happy homes. Folders group like-items for easier navigation and editing.


Delete Unnecessary Layers

Having too many layers hanging around usually results in an unnecessary bloat of file size and can affect performance.

Screen Shot 2015-03-14 at 18.57.15

Globalize Common Elements

If you use an element (logo, photo, etc.) in multiple layouts within the PSD, only having to edit it in one place makes a lot of sense.

Screen Shot 2015-03-14 at 19.03.53

Use Layer Comps/Smart Objects

Layer Comps & Smart Objects offer a way of showing multiple states or layouts without needing to build (and maintain) another PSD.

Screen Shot 2015-03-14 at 19.05.05


Squirrel ChatPostcardClothes Eshop