I hope this isn't the wrong place to post - it seems to be the most appropriate, though.
I need to get some prices for theme development, but I don't have much of an idea of where to start. I see that a lot of theme developers work from PSD templates these days - my assumption was that PSD was a 'lazy' route to theming where the images were sliced up and just put back together wrapped in PHP/ HTML, rather than the theme done from scratch or from a framework, but I guess that's not the case these days.
So what I need to know is, if I'm going to ask several theme developers for prices, what sort of PSDs should I supply? Do I supply one for each type of page I want (eg, front page, article page, product page)? Is there a particular format to the PSDs (eg, how layers are labeled)? What other relevant information should I have ready for a theme developer so they can provide an estimate? As theme developers, what would be helpful to you for me to have thought about before contacting you?
Comments
Yes it will be good if you
Yes it will be good if you can provide PSD for every page. Every PSD should be layered properly so that images can be sliced easily and correctly.
Devender
Ideally you'd have a document
Ideally you'd have a document outlining the needs of the site - what page types you have, any special display needs (e.g. slideshows, drop-down menus, anything requiring JavaScript), any special features like event calendars, image gallery, etc. To do a quote I don't think a full PSD is necessary. Just static PNG's or whatever is fine. The important thing is to be able to see all key page types.
About the process - personally I don't really work that way. It's always necessary to get some assets out of the PSD's, but must of what I do is working with CSS and Drupal templates. I also usually end up doing most of the site implementation, including creating content types, Views, and installing any modules required to implement the design (e.g. slideshow, menu drop-downs, etc.).
Woolwich Web Works: Custom web development
Design + behaviour
Not everyone uses PSD, I guess it depends on the themer. Other apps that can also count are Inkscape, GIMP, Fireworks, Illustrator...
The time when you would take a template and slice it up into table cells or absolutely positioned objects is long gone I think, at least I haven't stumbled upon examples of it. What you need from the graphics file is an easy way to slice up appropriate parts of the design (which are usually only background images, logo, maybe some content images) and export them into the most appropriate format (jpg, png, transparency), then they are assembled into a theme through php templates and CSS.
Whatever software is used, it's best if the themer has access to the original file with all the layers, meaning to use the same software as the designer. It's actually not necessary to have all the layers, the original design template might be reduced to only a handful of layers to make it quicker and easier for the themer to handle but still have enough "layering" preserved for easier slicing. But designers don't always know CSS enough to know how to make that kind of preparation. It also depends a lot on the themer use of CSS, if she uses CSS gradients and not images for modern browsers she will need gradient information... Maybe your themer and designer can collaborate in a way that the themer tells the designer which "slices" he needs and the designer exports them.
It's good to name the layers with meaningful names, don't just use object1, object2 etc so it's easy to navigate through the layer tree even to someone new to the file, but this is also beneficial to the original designer as well. Grouping layers into sets and subsets is also useful if it's done with care.
You also have to think about the behavior and other effects, for example what should the menu buttons look like on hover, or form input elements on focus. Usually those styles come as separate layers or layer sets.
Often some design elements are left out if the designer isn't familiar with Drupal, or for some other reasons, this often includes Drupal tabs (links View, Edit etc you see when logged in if you have enough permissions, but also on /user page for anonymous users), form elements (input fields and submit buttons), favicon. I usually extrapolate from the design to style those if they are missing.
Provide a different design template for every structural part that will look different, you don't have to repeat templates for every content type if they all follow the same design. Usually you have the default "node view" and the front page, but you may also want a template for Views, particular blocks etc.
Do you expect certain elements to "grow" over time, for example number of items in the menu? Sometimes the themer has to adjust the layout to allow for such changes in content. Do you prefer a fixed or fluid page width? What about mobile devices?
Which browsers should the theme support? This usually means how far in the past you want to go for IE, IE6 is rarely asked for these days. Should the website in IE look exactly like in modern browsers or are discrepancies allowed ? This usually happens when using advanced CSS, some properties can be recreated in IE using proprietary Microsoft code that you put in separate CSS files called within conditional comments, it all affects the cost.
Thank you for asking :)
One layered Photoshop file is
One layered Photoshop file is fine. If there are different page layouts, group those elements for easy access. You can include an overlay layer for each group with explanations, flows and other notes.
Keeping the explanations and the graphics together will simplify the process.
Thanks for the replies so
Thanks for the replies so far, everyone.
I'm still a bit unclear about how the theming process works, from a client perspective. As your replies show, there seems to be a range of methods and requirements of themers in what a client supplies.
I do have wireframes that I created and labelled (for explaining behaviours and markup etc), which I initially thought would be enough for a themer to create "from scratch", but he then asked for PSDs.
I suppose what I'm trying to get my head around is, when the only images on page will be a logo, maybe a search 'magnifying glass' icon, social buttons and then the images from content, why would a themer want to use a PSD when they've already been supplied with a wireframe? More or less everything visual would be created in markup - backgrounds, gradients, box headers, text, menus, borders etc. Using images where CSS is available is, to me, something that shouldn't be done. I'm a bit of a purist in that respect.
Do some themers just ask for PSDs (or PNGs etc) as an alternative to using wireframes as a guide?
If anybody knows of where I could see example files of PSDs used to design layouts, I'd love to see them (even better if I can see the finished theme!).
Yeah, that sounds a bit
Yeah, that sounds a bit weird. Unless they wanted to extract those images with transparent backgrounds. If you're expecting your themer to use CSS3 for gradients you should probably say so (personally, I still use images for gradients because of the browser support complications with CSS 3 gradients).
What format are your wireframes in? Personally I would be thrilled if I didn't have to sort through a designer's PSD's! Nobody ever names layers properly, and some tend to use a lot of complicated layer effects that make it difficult to extract the bits you need. And I don't use Windows or Mac so every time i need to work with a PSD I have to start up Virtualbox which kind of sucks...
You're right in that themers all work differently - I don't think there's really a "standard" practice in this respect. Clients also work differently - some will provide a detailed document with specifications, others will just give you a PSD and expect you to work everything out.
Your themer might just be used to working with PSD's for some reason ... or they're not experienced enough to figure out how to re-create things in CSS only. Also, when it comes to Drupal development, you get what you pay for. It's not uncommon for clients to go searching for another developer because the first one doesn't work out.
Woolwich Web Works: Custom web development
Hi Megan, For the wireframes
Hi Megan,
For the wireframes I've been using a program called Pencil, which has been fairly okay. It's unknown to most people I've mentioned it to, so I export the wireframes as PNGs. I've just started an account on LucidCharts, so I expect that I might be using that in future.
Prior to this thread, my assumption was that I could produce a wireframe as a guide of how I'd like my pages to look - I could then pass the wireframes on to a themer and they'd just render it into HTML/ CSS (with the Drupaly bits of PHP wrapped around it). Now it sounds like I need to involve a designer and a themer :/
You speak of wireframes which
You speak of wireframes which is for quick prototyping. This is a great start but what most of the themers are probably expecting is a PSD containing the finished graphical layout/mockup. This can also be a JPG or PNG but if it's a complex mockup with layering then PSD helps for slicing and dicing. Unless you want them to design the look for you based on your wireframes then that's okay. Web designers can usually do both design and theming for you.
I need the .psd file for two
I need the .psd file for two things:
1) Assets
2) Measurements
A proper design will implement a grid, and without the actual .psd file (or a substitute), it's essentially eyeballying and guessing. The designer I do a lot of work with is extremely precise with his design. He's always talking about baselines, leads, column widths, gutters, etc. It's what makes him an excellent designer. But without the .psd file, I make a mess of his design, because I don't have the guides to see how he had fit it all in with a grid to make it work.
Contact me to contract me for D7 -> D10/11 migrations.
The theming process is what
The theming process is what you make of it. You don't need a psd. I did an extremely complex theme from a pdf, single layer. You don't need all the measurements spelled out in exacting detail. Ultimately you judge using the eye anyway, and differences in browser behaviours soon introduce all kinds of variations. Provided that the images you have are of a quality that you deem to be good enough for the site that you are paying for, then that is sufficient.
However, it would appear from your description that your wireframes have no design elements and that what you might be missing is graphic design. For that you need to employ a graphic designer who may well create psds.
You make a good point that a
You make a good point that a .pdf could be laid out to show the various details. I've never done a job like that myself, but if someone gave me one showing the different column widths, gutters etc, then I could definitely use something like that.
I disagree about judging using eyes though, and differences between browsers. I tell my clients ahead of time that due to font rendering differences between browsers, fonts will look different, but other than that I can make sites layouts be the same between browsers, and that's what my clients expect. Margins, paddings, spacing and the like can be unified between each of the browsers. But without knowing what the specific gutter widths, column widths, baselines, leads and the like are, it's eyeballing. That's why some form of document detailing these values needs to be provided.
Contact me to contract me for D7 -> D10/11 migrations.
So presumably I can make some
So presumably I can make some progress if I supply a themer with a grid-based design (either as a layer or some other sort of overlay)?
It would also be helpful if I was to 'mark' elements and supply a document with specific styling requirements (eg, the navbar has a gradient for CSS3 browsers and a solid background for non-CSS3 browsers, with the appropriate hex values supplied) - is that right?
When it comes to 'interactive' elements on the layout, for example, a menu and its different states, how do I show this? Do I supply it as a separate document or just describe it? Are blocks expected as separate documents?
Everyone does it differently
Everyone does it differently really. I personally like my regular designer's style. He gives me a .psd file with a full grid laid out (using guides) so I can see exactly where the columns are, how big the padding between columns is, how high the horizontal columns are, etc. Then I get a separate document with font-styles - which fonts should be used in which areas, what their size should be, and the line-heights again.
But this is a complete design he's given me. A wireframe is what we start with before beginning the design. It's just a rough layout of where things are, and allows for the testing of how elements will link together and whatnot. Then the design is built using the wireframe as a guide, but only a guide. So if you have a wireframe, then you need to get the design done. The wireframe is good though, because a developer can start building the functionality while the design is being finalized. The design is then added overtop the functionality.
Contact me to contract me for D7 -> D10/11 migrations.