How to convert designer's Adobe Illustrator files to Drupal templates

January 30, 2011 3:40 PM

I'm a web programmer (LAMP) working on a project where a designer will give me about 30-50 page mockups in Adobe Illustrator, and I'm supposed to build a set of Drupal templates and modules out of them. How do I do so - what's the typical procedure?

I haven't worked with Adobe Illustrator files before; and usually actually get at least a set of XHTML/CSS files to work with when working on a project. I am familiar with Photoshop, Fireworks and Dreamweaver.

I could just outsource the job to someone who specializes in this, but would rather do the work myself. What's the typical procedure for moving from Adobe Illustrator to a set of templates? Are there tools that automate part of the job? Do I need Illustrator to get this done, or would Inkscape be good enough for handling the initial files I get? Is there a good tutorial or two out there that you could recommend I go through?

posted by mistersix to computers & internet (11 answers total)

I've worked with Photoshop mockups before.

What I'd really emphasize

1) 960px is a pretty good maximum width for today's average browser resolution (if you're going fixed-width, that is). Make sure that the text and the images are legible and readable if the entire site is 960 pixels wide. If it isn't, send it back to the designer -- this is their job. And then use the Zen theme in Drupal to create a bare-bones fixed-width subtheme.

2) The rest is just sort of cobbling and recreating it together in CSS and HTML -- figuring out the necessary site structure, what blocks/sidebars/panels you'd need in Drupal, figuring how to do rounded corners, or not, etc. There's not really an automation process, and even if there is, you'd be better off writing it yourself in order to make cleaner, bug-free, more efficient html/css.

Maybe you could elaborate on specific procedures you.re looking for. You're familiar with Drupal already?
posted by suedehead at 4:31 PM on January 30, 2011

My first move would be to open the .ai files in Photoshop, but I'm not saying that's the typical procedure. I just happen to be more comfortable with Photoshop than with Illustrator.

Then drag guides around to all the important boundaries, and take pixel measurements.

What came next would depend on the design. Typically, start with one of these page layouts and then copy the region variables into that from the standard Bluemarine theme.

That's pretty cryptic, but it should get you started. At this point, your own workflow preferences would probably kick in.
posted by bricoleur at 4:34 PM on January 30, 2011

1) Require the designer to generate a static JPEG (or gif, or png) image for each page you'll be building. This is so you can see the desired page with the correct set of layers on. It really helps you make sure that what you delivered matches their intent.

2) Beware of 1px jumps. These happen all the time when going from vector to bitmap. You'll see it most noticeably when you're trying to set up rollovers and onstates. If you can, I'd use a CSS sprite approach for these, so you can tune the pixels and mitigate the jumps.

3) Inkscape won't really do the job at reading AI files (at least, it hasn't for me). I believe Bricoleur has it right- pop it into photoshop and go from there.

4) You may get the most mileage by starting with some sort of blank theme, and then customizing it to match your needs.
posted by jenkinsEar at 4:54 PM on January 30, 2011

It's worth noting that what you're doing is a wholly different set of tasks from your "developer" job description. Being good with PHP or Javascript is not enough to turn the files you've received into a professional site design or template.

You're going to need an intimate understanding of what HTML and CSS can and cannot do, what browsers have limitations or quirks (note: all of them) and what they are. In short: this is a second whole full-time job that someone could be doing.

That's not to say you shouldn't do it -- the learning experience will be valuable -- but this is not a trivial tack-on to your current job. Converting images to XHTML/CSS is something that will take you a substantial amount of time to do (and do well), including lots of tweaking, testing, and revision.

It could conceivably double, or more, the time it takes for you to complete the job, depending on your requirements and how quickly you pick it up.

That said: illustrator is probably not the main roadblock, here. The first step, for me, is to look at the what the page SHOULD look like, and figure out what the HTML and CSS needs to be. Then I'll use the tools I have (AI, Photoshop, or whatever else) to slice out the images I need to make it.

I like to think of it less as "converting" the AI to XHTML/CSS, and more building a site from the ground up to look like the picture, and using the picture to crib the artistic bits I need (color values, font-sizes, images, etc).

To answer one specific question: there are semi-automated ways to do this, and they all suck.

Good luck!
posted by toomuchpete at 5:24 PM on January 30, 2011 [2 favorites]

Wait...30 to 50? That is just crazy, in my opinion. Does this designer have any idea how modern web sites work? Or is there some understood common template that all of these basically fit into, and the 30 to 50 (!?) represent different simple "states" of the web site?

I hope you are estimating a lot of hours if these are not all basically, more or less, the same thing.

First of all, I'd echo what others are saying: this is front-end design-y work, arguably not really development, although using Drupal means you'll probably be doing a bunch of PHP hacking. Depending on the implied functionality there is going to be a mix of module configuring and theme tweaking, to a greater or lesser extent, based on my (admittedly somewhat distant at this point) Drupal experience.

When I've worked with designers I've asked them to provide me with a set of RGB codes for CSS elements, font families, heading categories, etc. etc. Usually, actually, with good designers they'll give me a stylesheet of default font stuff and color schemes to start with, at the least. And usually in my experience, with good designers they'll send me the sliced up images as well as the original psds.

I agree with toomuchpete that this sounds like a ton of work: DO NOT underestimate it (I have, and it's been a nightmare). Get a sense of exactly how many pages you actually have to build, get a sense of what features can be shared between pages, and have a good understanding of the design in terms of how things will change when the user interacts with the site: sure, it looks good when you display 5 items on the page, but if those are going to get added to, what happens when that turns into 20, or 100? Do you know how to allow your divs to scale properly as things change—in a cross-browser-compatible way? A lot of designers are not great at thinking about this kind of thing, unfortunately: they have some sort of "platonic ideal" web site in their head. So try thinking it through and estimating exactly what it's going to take, what may change. Regardless, there will be gotchas: add these unknowns into your estimate.

Figure out exactly which browsers you are going to support. IE 7/8 + FF >3.5 + WebKit...etc. Be conservative with your CSS layout. God, I hate browser compatibility stuff...if you can, use something like blueprint that makes it easy to start from "scratch" and makes it easy to build basic layouts in a cross-browser compatible way.

By the way, there is no way to really tell you the best method without getting a sense of what this site looks like—that said, when doing this kind of work, I've always identified first the areas that will change frequently (dynamic content) vs. those that will stay the same across the site. These give you a sense of what can be part of the default template vs. what may need a few or many different sub-templates. I know this is vague but it's the first place to start.

Seriously, 30-50!?

Oh, I just re-read and saw it says Illustrator. I've never worked with a web designer who has provided images in Illustrator. Maybe it's done, but not in my experience. See if they can put it into Photoshop for you, at the least. As far as I know, Illustrator, being a vector-graphics based program, is not how this is done. You want to be working with bitmaps. Please, correct me if I'm wrong (I'd honestly like to know, but I've never, ever heard of this: every experience web designer I've worked with has used Photoshop, and used layers to toggle different states of the web site—and Photoshop has a lot of built-in facilities for generating web-ready images, from what I know...again, maybe Illustrator does too, I just haven't heard of it).
posted by dubitable at 7:06 PM on January 30, 2011 [3 favorites]

In terms of how you do it... read up about how CSS does layout if you don't already know, figure out what your major blocks are going to be, what you can factor out, and what is going to be an image and what is going to be in CSS. If you haven't done this before, you'll probably get it wrong. It gets better with time though, so if you're going to be doing this a lot don't worry too much about the first page or two.

I'll definitely echo what other people have said though - this is a job in itself, it's not something you can just do in addition to the programming.
posted by devilsbrigade at 7:07 PM on January 30, 2011

I like to think of it less as "converting" the AI to XHTML/CSS, and more building a site from the ground up to look like the picture, and using the picture to crib the artistic bits I need (color values, font-sizes, images, etc).

To answer one specific question: there are semi-automated ways to do this, and they all suck.

I guess this is the answer I was looking for - or the opposite of it; I was hoping there might be some awesome tool out there to take a .ai file and spit out a web page, even a web page that would still require a bit of work on my part.

Wait...30 to 50? That is just crazy, in my opinion. Does this designer have any idea how modern web sites work? Or is there some understood common template that all of these basically fit into, and the 30 to 50 (!?) represent different simple "states" of the web site?

There will be a common template; and probably 5-6 sections of the site which will each have subsections that vary mostly by tabs along the top and the forms users are using to input.

Based on these answers, I'm thinking I'll outsource the creation of XHTML/CSS for a page per section of the site and adapt what I get for the other pages.
posted by mistersix at 11:16 PM on January 30, 2011

As a Drupal person, just wanted to highly recommend that you avoid creating a bazillion templates. This will be extremely tempting but a huge pain down the road. The best thing to do is to use a flexible theme (or build off of an existing one) and then use modules to customize elements of the design. I have found the Context module very useful for creating sections like what you are describing.

In terms of a starter themes, there are a lot you should of alternatives you should consider before going with Zen.

Finally, I'd suggest that you glance at Front End Drupal or one of the other excellent introductory Drupal books before getting started. Depending on where in the world you live, there may also be in-person meetups you can go to get advice.
posted by JuliaKM at 3:19 AM on January 31, 2011

I guess this is the answer I was looking for - or the opposite of it; I was hoping there might be some awesome tool out there to take a .ai file and spit out a web page, even a web page that would still require a bit of work on my part.

Yeah...the problem is just that those things don't even know where to start with building templates—they often organize the page in such a way that, while it may even look right in different browsers, does not reflect the considerations you have to make when designing templates to fit into a dynamic site. And usually they don't use very smart CSS/HTML. CSS/HTML page layout is a black art unto itself, and adding dynamic content turns it into something that a computer is just not remotely smart enough to do.

Actually, I think this is one of the toughest aspects of web development and it is my least favorite thing to do at this stage in my career—I won't even take these sorts of projects on any more.

There will be a common template; and probably 5-6 sections of the site which will each have subsections that vary mostly by tabs along the top and the forms users are using to input.

Ah...gotcha. Makes a lot more sense now.

Based on these answers, I'm thinking I'll outsource the creation of XHTML/CSS for a page per section of the site and adapt what I get for the other pages.

I think you're smart to do that mistersix. Let a front-end CSS hacker who enjoys this sort of thing take it on the base template...I have a buddy like that, he seems to gain some sort of twisted pleasure from knowing how IE7 mangles pixels vs. Chrome...I think he's a masochist...
posted by dubitable at 5:54 AM on January 31, 2011

I am one of those HTML/CSS masochists. :) There is NO automated way, at least nothing that is true to the web, especially if you're going to then be turning them into a Drupal theme! (I've done that, too, BTW.) It's definitely a matter of taking the pictures as a general guide and creating anew in HTML & CSS, using images sliced out of the files only where absolutely necessary.

I didn't realize other people hate this part so much. I LOVE figuring out how to put together a design with just HTML & CSS.
posted by epersonae at 3:38 PM on January 31, 2011

I didn't realize other people hate this part so much. I LOVE figuring out how to put together a design with just HTML & CSS.

I don't understand you or your kind epersonae, but every day I am thankful people like you exist. Bless your masochistic heart.
posted by dubitable at 4:59 PM on January 31, 2011 [1 favorite]