[Jason Dexter]

Just had a quite successful meeting with a design agency, and they're looking to outsource design work to me.

Yippeeee and all that. But, when I create PSD's, there's a structure but only so I know what is where. However, if I'm sending off PSD's to a developer to attack I'll be needing to ensure it's perfectly structured together.

Anyone got any resources to build the perfect PSD? So I can include fonts and name all the layers proper etc..

Cheers

[J.P]

Grouping layers and using correct layer names are obvious but important.

Usually if we receive design work from someone else they include a PDF of the design with all the measurements on for cutting (width, height, margin, padding) as well as the PSD'S.

[MikeChipshop]

I guess you gotta think like a developer.
I'm pretty sure renaissance posted a good link a while back but i can't find it now. It was basically a list of do's and dont's of what to do when sending a PSD to a developer. I'll keep hunting for it, i didn't agree with all of it but it was a good start.

I guess the obvious ones are make sure you name the layers so someone else would know what it is and make sure to seperate things out in to different groups.
Also making sure they are in a logical order. I don't want to have to search through masses and masses of layers for an icon that's named layer 456 copy (2) and then find it's rasterized etc etc.

[Lieto]

Generally speaking best way to ensure that they are happy is to talk with their coder (different coders may prefer different things)

Few ideas as to what they might like:
— If you create an illustration and you are 100% sure that they wont need to edit it — merge it (less layers = less confusion)
— Try to group things based on how it will be cut. If you know that those 100 layers will end being a background — group them together etc.
— Dont group texts with images even if it creates one block. All texts that are going to be texts in the code are better put in in 1 separate group.
— Supply fonts if they are not standard "just in case".

This post has been edited by Lieto: 24 October 2011 - 11:41 AM

[Gibson]

Yeah crikey the number of psd's I get for slice and dice work that have "Layer 1", "Layer 2" etc. --- lazy buggers.

[porkchops]

http://photoshopetiquette.com/

That should sum it up.

[MikeChipshop]

porkchops, on 24 October 2011 - 12:07 PM, said:

http://photoshopetiquette.com/

That should sum it up.

AH HA!
That's the very link i was talking about!

[Jason Dexter]

porkchops, on 24 October 2011 - 12:07 PM, said:

http://photoshopetiquette.com/

That should sum it up.

Cheers mate! Exactly what I needed

[rallport]

Jason Dexter, on 24 October 2011 - 11:21 AM, said:

Just had a quite successful meeting with a design agency, and they're looking to outsource design work to me.

Yippeeee and all that. But, when I create PSD's, there's a structure but only so I know what is where. However, if I'm sending off PSD's to a developer to attack I'll be needing to ensure it's perfectly structured together.

Anyone got any resources to build the perfect PSD? So I can include fonts and name all the layers proper etc..

Cheers

As a web developer who gets several psd's each day I really appreciate a good one:

• Group similar layers
• Name grouped layers
• Delete unused layers
• Keep a logical structure to your layer ordering

The amount of time I was sometimes is stupid as some designs contain hundreds of layers

[tomsel]

There's some good advice on that website.

I'm glad to say I already do some of the common sense stuff though, but there's quite a few things on there that I hadn't thought of or didn't even know about.

It is a pain in the arse working with poorly constructed PSDs, though. Badly named layers/groups are my pet hate... I've worked with promotional material from some very large companies where layers have just been called 'random sh*t', 'wtf', etc, so it's not just clueless designers making these mistakes. :S

[Gibson]

From 26 October 2011 - 11:27 AM:

• Keep a logical structure to your layer ordering

Do you do it in the way that it would appear in markup? For example, header, nav, content, footer layer groups in that order? Or do you group them in some other way?

[porkchops]

Gibson, on 18 November 2011 - 08:32 PM, said:

Do you do it in the way that it would appear in markup? For example, header, nav, content, footer layer groups in that order? Or do you group them in some other way?

I try to make it as easy for the developer as possible, so I usually organize them into folders like "Header", "Footer", "Page Container", "Content Areas", etc. I also leave folders for things like tooltips in the same PSD since making multiple ones to show the little intricacies of interaction is silly. However, I try to name each interactive element in all caps. So a layer like TOOLTIP would stand out as an interactive element that should still be there, instead of something that needs to be removed.

[Renaissance-Design]

Gibson, on 18 November 2011 - 08:32 PM, said:

Do you do it in the way that it would appear in markup? For example, header, nav, content, footer layer groups in that order? Or do you group them in some other way?

Actually, reverse order makes more sense. In HTML the further down the source order an element is, the greater its z-index, whereas the reverse is true of layers and groups in Photoshop.

[MikeChipshop]

I tend to separate them into the relevant folders but have a global folder at the top and bottom.
Also make use of the 'notes' feature. These psd files are normally only for my use (occasionally Inot) but I never know when I'll be-visiting them in the future.

[Gibson]

Renaissance%26%23045%3BDesign, on 18 November 2011 - 11:41 PM, said:

Actually, reverse order makes more sense. In HTML the further down the source order an element is, the greater its z-index, whereas the reverse is true of layers and groups in Photoshop.

Yeah this is how I reckon I've ended up doing it. So in the layers window of Photoshop I end up with header down the bottom and footer at the top.
I'll usually do it as well bearing the html markup in mind, so I might have a folder called "container" which contains subfolder of everything else like header, content, and footer.

Nice hint about the "notes" feature there Mike. Didn't know about that one.

[BlueDreamer]

Why don't designers just send web ready imagery instead of bloated Adobe files?

It's a pain in the arse to sift through PSD's that have 200+ objects all stacked on each other, just to extract one image - better to send PSD's based on the page element, eg one PSD for the navigation, another for main content area etc
It's a complete pain to find crap measuring of images in PSDs, eg when you need to create a 320px wide image why do graphic designers often make them 321px???

This post has been edited by BlueDreamer: 19 November 2011 - 07:35 PM

[Lev]

I use all caps for the FOLER_NAMEs.

[Lev]

porkchops, on 24 October 2011 - 12:07 PM, said:

http://photoshopetiquette.com/

That should sum it up.

Good link, Dave.

[Jason Dexter]

Thought I'd just update this thread myself.

Some awesome tips here, and the link from porkchops helped me to get started.

I had a meeting with the developers I was going to be send the PSD's to, and asked how they preferred the work to be sent across and how it would be easier for them to work with. After a few designs, we're both starting to get an understanding of how we work and my designs reflect the way they work as well which is all for the better.

Quote

Why don't designers just send web ready imagery instead of bloated Adobe files?

It's a pain in the arse to sift through PSD's that have 200+ objects all stacked on each other, just to extract one image - better to send PSD's based on the page element, eg one PSD for the navigation, another for main content area etc
It's a complete pain to find crap measuring of images in PSDs, eg when you need to create a 320px wide image why do graphic designers often make them 321px???

I get what you say about stacked layers etc, but if it's done in the right way, using folders and some sort of format, then it's much easier to pull out elements.

I asked the developers this, whether they prefer it to just be a web-ready image or a PSD file structure correctly and in an optimised way and they actually preferred a PSD version. They said that if they needed to rip out, lets say a button with a gradient and some sort of styling and increase it in size for whatever reason, then it's better to use it from the PSD than just a PNG.

About the measurements as well, it's really helped me with my alignments and measurements of elements. Instead of whipping up a design which I present to a client, where things might be the odd pixel out, and then coding it myself, I've had to scrutinize my work on a whole different level. Everything is perfectly aligned, and every element it's pixel perfect

[rallport]

Renaissance-Design, on 18 November 2011 - 11:41 PM, said:

Actually, reverse order makes more sense. In HTML the further down the source order an element is, the greater its z-index, whereas the reverse is true of layers and groups in Photoshop.

Yer. It's my pet hate when a center image for a site background has been used and the designer has shoved this at the bottom and simply worked their way up. Total pain in ass if you want to get to the full background image

[rallport]

BlueDreamer, on 19 November 2011 - 07:34 PM, said:

Why don't designers just send web ready imagery instead of bloated Adobe files?

It's a pain in the arse to sift through PSD's that have 200+ objects all stacked on each other, just to extract one image - better to send PSD's based on the page element, eg one PSD for the navigation, another for main content area etc
It's a complete pain to find crap measuring of images in PSDs, eg when you need to create a 320px wide image why do graphic designers often make them 321px???

I remeber suggesting something similar ages ago at work. The designers told me it would make it more time consuming for them.

[MikeChipshop]

BlueDreamer, on 19 November 2011 - 07:34 PM, said:

Why don't designers just send web ready imagery instead of bloated Adobe files?

It's a pain in the arse to sift through PSD's that have 200+ objects all stacked on each other, just to extract one image - better to send PSD's based on the page element, eg one PSD for the navigation, another for main content area etc
It's a complete pain to find crap measuring of images in PSDs, eg when you need to create a 320px wide image why do graphic designers often make them 321px???

I actually totally disagree with this.
The designers don't know how i'll slice it up, they don't know when i'll be re-jigging elements, removing drop shadows, re-purposing text.
What i want is well laid out, well named and tidy PSD files. Where nothing is rasterised and i'm free to amend to fit my needs.