Jan 24
Transforming bad material into suitable illustrations
2005 at 03.18 am posted by Veerle
The past few weeks I have been finalizing a website project about MS (Multiple Sclerosis). Along the way I received drawings from the client that looked like scanned pictures from a fax… or something along those lines.
As we try to maintain a certain level of quality here at Duoh! those weren’t suitable and had to be re-drawn in Illustrator to add a finishing touch in the total design. Maybe if we used the wicked worn look we could have achieved some nice result in Photoshop without much of a hassle.
A before and after:
The step-by-step process:
Place the picture in a separate layer and make it a template layer. Click the right arrow on the Layers palette and select Template. Create a new layer on top and start drawing using the Pen tool. I used a 4px stoke and turned this stroke into a fill (using the Outline Stroke feature: Object > Path > Outline Stroke) and gave that fill a darker thin stroke.
When the wheelchair was done I created a new layer, dragged it below the wheelchair layer and called it ‘body’ since this is my next step. it could as well be the first step, and the chair the 2nd, it doesn’t matter.
Then we need to put the hand on top of the wheelchair, but the body needs to stay behind. I used the Scissors tool and cut the path into 2 parts to achieve this. Next I added the arrows, the text and the dots. For the arrows I simply draw a line and used the Add Arrowheads effect (select the line and choose Effects > Stylize > Add Arrowheads).
Last but not least, a final touch of the surface by using a light gradient. First I drew a circle, filled it with a radial gradient that goes from light green to white. I scaled it to an ellipse and masked halve of it (draw a white rectangle on top, select both ellipse and rectangle and hit command/control + 7 or select Object > Clipping Path > Make). To make the gradient fade into my background color I applied the Multiply mode to the gradient. Finally I drew a darker thin line on top and saved my work. Only thing left is adding a background in the exact same color of my webpage background and it can be saved for web.
To me this was a routine job since most drawing that I do in Illustrator are much more creative, but I thought maybe some of you could learn from it or may find it interesting to learn how this was done. These kind of pictures are functional, they explain things and add value to the website. But what’s the point of using unattractive ones that are detrimental to the design of the website? Maybe it’s me being the designer again, I just don’t tolerate ugly drawings, I get an itchy feeling from them.
23served
1
Nice and neat, I like! I’d be interested to know how you compare Freehand with Illustrator as I have Freehand (bundled with Dreamweaver etc)
I find Freehand is OK, but not so easy when it comes to drawing with the pen tool, is Illustrator easier to use, do you think?
By the way, since your CSS tutorial, I find it very difficult to go back to tables now!
steve
2
Hey, very nice Article. Thanks! :)
3
Nice one…
During 2003… I also got to do the same treatment… Bad scans of line art, produce into a 6-foot standee of a mascot.
I enjoy these kind of things… you could see immediately how your workflow improves from one image/document to the next. I mean, you do one way/shortcut with the old one and then you find a better shortcut or better quality using new methods with the current one you’re editing.
4
very good, please keep ‘em coming. I love reading this kind of practical examples and tutorials.
5
Very interesting walk-through Veerle! I couldn’t agree more when you chose not to use low quality pictures in a high quality design you will certainly deliver to your quality.
I sometimes like to create a vetorial drawing of some pictures sent by the client just because I feel a certain freedom working with vectors.
6
Sorry! I meant “high quality design you will certainly deliver to your client” :-)
7
This looks all too familiar. We do a lot of medical applications and I have a CD with almost a hundred scanned book images that I have been redrawing one by one in Illustrator.
8
Great article Veerle. I’ve never been very good at this, and I’ve always wanted to know what other people did. Thanks!
9
You’re simply amazing!
I really appreciate. As unselfishly your share your knowledge…
Now, advise how I can shave 15 minutes from my time. My marathon racing season is within few weeks. :)
P.S.—Please more CSS tutorials…
10
Veerle; well done and easy to follow along. I have tried for y e a r s to try and learn to use Illustrator and i have yet to produce ONE drawing or anything in illustrator. The damm drawing tool is very difficult to use. How does one draw lines without having it turn into some uncontrollable vector line with all kinds of points, which quickly gets distorted so it is miles from what you are drawing to do!! I wish I could do what you did. PS any chance you can package this example, so tht we can try this at home! again many thx for all yr efforts
11
Great article. Very useful, thanks!
I’ve always wondered about that last background thing. Now I know :D.
12
Oh good gods… Good thing I’m a programmer, that’s utterly confusing.
13
You definately improved it. Wise design move in redrawing the scanned image. It looks fabulous by comparison.
14
Thanks for the article. I can certainly commiserate.
I can’t tell you how many times I’ve been given JPEG versions of client’s logos. It’s especially annoying when they were obviously vectors to begin with, but no, they decided to lose that and send the 300x200 JPEG instead. Who died and made JPEG the standard format for storing/providing images?
(The only thing worse is when they send it embedded in a Word file!)
On a similar note… what are people’s opinions on vectorising software? I realise it wouldn’t have worked in your situation Veerle, but sometimes it’s useful. I used to have to keep Classic around just so I could use Adobe Streamline. I now use Delineate. It’s a little buggy but ok. Does anyone know of any others?
15
Excellent tutorial! Please keep the Illustrator tutorials coming! I especially like how you create them by using real-world examples from your projects.
16
Nice tutorial? Can you tell us the URL of the site, or isn’t it finished yet? Want to see how the images fit into the total design…
17
@nerdcool, not sure but I think Adobe might integrate an advanced tracing feature in the next Illustrator version… Maybe that’s why they don’t update Streamline. Just guessing here ;-)
@Awarnach, indeed the site isn’t finished yet so I can’t show you, sorry.
Thanks for the positive feedback :-)
@ Arthur Bahadourian, I’ll do my best but it won’t be before the end of Februari I think, these tutorials take so much time. These Illustrator design tips and tricks are more doable for me at the moment.
18
Veerle, great article.
You have no idea how helpful it is to clueless Illustrator wannabees like me…
19
Good job,
maybe that’s a rutine job for you, but you really know how to do it :-)
BTW, I’m learning many useful techniques by following your tutorials… Thank you!
Keep on going!
20
@Veerle: I hope you’re right about tracing in the next illustrator. It seems odd that they’ve abandoned it. It don’t need to use it very often, but for some things it’s pretty handy.
Keep up the great articles!
21
I’ve never seen taking photocopied material and converting into clean illustrative work done so gracefully.
The best part (IMHO) is that the material is not only more aestheticly pleasing but conveys the information better too!
22
These are the sort of skills i never really think about using, like drawing my own diagrams, because i know that I’m not that good at doing so. Yet when someone else shows there way of implementing them step by step, all the doors to creativity open up, and are fairly easy to execute. Now i just wish i had time to try these things out! Thanks-again for another great article.
23
I know this is a late comment but i’d like to know why you did a clipping mask with a white rectangle on top of the ellipse. thanks!