

Designers read this and developers will love you - sirwitti
http://photoshopetiquette.com

======
jaysonelliot
I love this manifesto. BUT.

This reminds me of a problem I've pondered for a long time now, without coming
up with an answer. Why are web pages designed with Photoshop in the first
place?

Photoshop was never meant to be used for web design, any more than Visio was
meant to make wireframes. It's simply the best tool available for the job, and
requires a lot of workarounds and good behavior on the part of the designer.

Spending days or even weeks designing Photoshop comps that then have to be cut
up, converted, and manually translated into suitable graphics for coders to
work with is inefficient, and often leads to final products that don't match
the designer's work. Text is the most obvious example, but I'm sure anyone can
think of myriad places where this happens.

Is there a tool that lets designers think about the structure coders will have
to build WHILE they're designing the screens? I'm not talking about a WYSIWYG
code generator—those have been tried over and over again, and they all suck.
I'm talking about a tool that lets designers design, lets coders code, but
helps the designer think about what the coder will have to do with the
graphics, including keeping text as text, identifying UI elements that need to
be reused, seeing how layouts will look when the browser resizes, etc.

If this tool doesn't exist, it sure would be a great project for someone to
build.

~~~
feverishaaron
Note to interested developers... there is a HUGE market for a disruptive tool
in this space. If anyone is interested in working on such a tool, I'm game.

This is a constant frustration for web designers. Photoshop allows you to
create fantastic visual effects, but the layout tools are abysmal. Fireworks
is well... Fireworks – Adobe's "redheaded stepchild" in the tool chain. It's
buggy with a slow, horrible UI. While some of Fireworks tools solve some of
the layout problems (nine slice scaling, better vectors, grouping), their lack
of decent masking and the horrible color picker and WTF interface actually
slows designers down to where it become a draw.

~~~
robszumski
The Illustrator-style layer selection is enough of a reason to use Fireworks
over Photoshop. You spend more time trying to navigate the layers in a PSD
than actually designing. Drives me crazy.

------
evincarofautumn
These are basically the same things that make good code.

• Organising files = project structure

• Resource & layer naming = variable naming

• Using templates & sharing common elements = DRY

• Keeping vectors when rasterising = keeping source code when compiling

• Minimising filters, blending modes, colour overlays, etc. = KISS

• Grid = idioms and “design patterns”

• Understanding licensing = understanding licensing

• Proofreading = code review

• Browser compatibility = platform compatibility

• Conservation of file sizes = consideration of performance

------
tzaman
Thank you so much for this, I'll forward the link to a couple of developers I
work with and I always have to explain how things should be done.

The last design I got was in pdf! :S

------
icebraining
In the USE LICENSED ICONS/PHOTOS, try this first:

[http://flickr.com/search/?l=4&q=hamster](http://flickr.com/search/?l=4&q=hamster)

support the Creative Commons!

~~~
untog
"content requiring attribution"

That can be a real pain, design-wise and image-wise (I don't want to look
cheap). Creative Commons is great, but requiring attribution means that it
won't be used in a lot of projects.

~~~
icebraining
Attribution doesn't necessarily mean it has to be in the users' face, just ask
her/him if a line in the footer or in a credits page or even just in the
source is OK.

------
twfarland
A quick win: Instead of Photoshop, which is overkill for web graphics, use
Fireworks or Pixelmator.

~~~
jeffclark
A major high five for Fireworks. It's like the "object"-ness of InDesign and
the "graphic manipulation"-ness of Photoshop had a beautiful baby.

Fireworks' master page is a great way to keep the skeleton of your site
consistent across mocks.

I'm a huge fan of using Fireworks for mockups. A heartily second (and third,
and fourth) of this recommendation.

------
nmcfarl
I like the content - but not the tone - it’s just a bit too snarky to send to
a designer that you have to work with. Particularly if she’s getting much of
it right - and you’ve clashed over this stuff before.

~~~
tedmiston
I started to bookmark it because of the idea, but once I started reading the
descriptions, I cannot agree more. I would be offended if someone sent this to
me.

------
bricestacey
Can anyone expand on layer comps? Is this something that our designer can use
to show different states? E.g. A list with items / a list without items
(rather than 2 layer groups)

~~~
kapowaz
In a nutshell a layer comp is a saved state for your layers. It can include
any/all of: visibility, position and layer style. A combination of these
should let you create alternative views for practically any sets of states
provided the original layers give you what you need.

For example, a navigation interface, complete with hover and selected states
can be all done with the same text and icons (say) if you have a vector shape
layer for icons, and then apply separate appearances for each interaction
state.

The example you give can be done as simply as toggling the visibility of a
layer you don't want to see, and moving other elements up to fill the void
appropriately, then saving this as a separate comp.

~~~
tedmiston
That's a good description. Layer comps are one of the most underutilized PS
features IMO.

I've used them myself to design alternative navigation styles for a site. For
example, since the bulk of the site is the same, I managed a sample horizontal
navigation in one layer group and a vertical navigation in a separate layer
group. Layer comps allow you to progress on these simultaneously.

I've also used them as "snapshot" states before if I'm trying something
experimental. It's a faster way to rollback than a chain of undos, etc.

------
mgcross
Wonderful list, the only thing I'd add is to convert a PSD to sRGB before
handing off if using a different color space.

Regarding export: the Monitor Color vs. Document Profile popup:
<http://photoshopetiquette.com/#exporting> unless I'm mistaken, this only
pertains to the preview of the optimized image within Photoshop.

And if you must embed a color profile on export, save it for photos only.

------
justjimmy
I know this isn't the gospel and there is no right/wrong way to hand the files
to the developers, but I was wondering if anyone else slice up all the images
and organize them before handing it off to their developers?

Especially when drop shadows for images/png are involved, I tend to slice it
all myself for pixel perfection and organize into appropriately file names for
the developers.

~~~
jurre
I don't think a lot of people are still slicing up photoshop mockups? At least
I hope not as the need for it should be fairly limited with CSS3.

~~~
tomjen3
In practice much of those go away with -- we need to support ie7 (or even
ie8).

Sadly.

~~~
jurre
css3pie[0] fixes most of that!

[0]<http://css3pie.com/>

------
tedmiston
Here are comparable thoughts in a more approachable, useful, and digestible
manner -- <http://methodandcraft.com/articles/streamlining-the-handoff>.

------
derda
FYI its impossible to read on an iPhone, since the sidebar blocks the view. I
tried to click the buttons on top, since they like close/hide buttons, but no
reaction.

------
feverishaaron
All that work to create a responsive layout, then they put an omnipresent,
fixed position social bar that covers the text when viewed on a phone.

~~~
pixelcort
These also often break Page Down on desktop browsers as well. After paging, I
always have to scroll up a little bit to see the line of text where I left
off.

------
deepkut
I absolutely love your sidebar. Permission to mooch? :)

------
atirip
There's only one advice from me - ditch Photoshop and use InDesign. Do not
ever bring PSD to me. Ever.

~~~
jeffclark
When I'm doing print design, I love me some InDesign. But I don't understand
your comment.

How do you (you-you, not the proverbial "you") turn an INDD into good assets
for the web?

------
_johnny
I'm a frontend developer and I think some of these expectations make little
sense. Giving a name to every layer is a lot of work and I don't care about it
that much. I'll do my work with layers like "Layer 0 copy copy" as long as
they're grouped. Having designer rename all the layers is a lot of work that
would be better spent creatively. (Does your boss want to pay the designer for
it?)

Another example: "#34 Be familiar with browser compatibility" - this is just
_your_ , developer's job. I cannot imagine expecting a designer to know about
IE6 limitations (and tons of hacks and techniques to overcome them).

That said, I agree with many points, like naming files properly (which costs
almost nothing) or careful use of blending modes (which are a lot of pain for
the developer). Or careful use of gradients, especially over repeating
patterns (#22).

~~~
unn
"this is just your, developer's job"

Shockingly, it's not. Most places I know of are moving away from a the
designer and frontend developer positions. It's a big cost savings, not just
in salary but in cycle time as well. Our designer sends us his designs in
HTML. There is no bickering over fonts, no pixel perfection, no stupid
photoshop-isms -filters, drop shadows, embossing, etc. I'm pretty sure he
doesn't even have photoshop.

If you're a web designer and you can't do this, it's time to learn. You're a
theoretical web designer drawing pictures of websites.

~~~
zavulon
I couldn't disagree more. Good HTML/CSS/JS code is not easy. It's hard work to
make it look right for all browsers.. and these days you use actual
programming languages (i.e. less/Sass) instead of CSS, anyway. It's hard work
involving programming expertise to implement all JavaScript bells and whistles
a modern website is expected to have. So it requires a good front end
PROGRAMMER to do.

On other hand, a good designer is a creative person. They're not coders and
shouldn't be expected to muck around with code. They're artists, who draw
beautiful designs from blank page. The need for separation of roles couldn't
be clearer to me, and I run a company that makes websites.

~~~
talmand
Right off I wanted to disagree about the preprocessor use for CSS. I just
can't see that something like those has taken off so much that it's on the
same level as something like jQuery.

But then it made me curious, I can't say that since I have no numbers and it's
just an assumption. Are there any indicators of how popular tools like less or
sass have become as opposed to regular CSS?

