very humid today and i’m tired. I drew this daikon (Japanese radish) back in March of 2002?! It was intended for a site called Big Daikon, a JET message board.
I get asked this a lot by non-designers, so here is my How to Draw Things for the Web guide:
- Use Adobe Illustrator. For fine control over lines and curves in vector art and just sheer versatility, nothing beats Illustrator (more on the difference between vector and raster art later). Other software like CorelDraw and Freehand may do the job just as well, but Illustrator is the best, in my book.
- I usually start out with the pencil to sketch out a rough shape and then refine with the pen and anchor editing tools. For many objects you can save time by starting out with “primitives” (base shapes: circle, rectangle, oval) and stretch, rotate, and distort them to become other shapes. The bunny on the left for example, started out as a series of ovals for the ears and circles for the head and torso. More points were added to the shapes, and the shapes elongated and curved using Bezier handles.
- Invest in a Wacom tablet. Besides Photoshop and Illustrator, this is the designer’s next best friend. We had them at my second dotcom job out of college and I have not been without one since. Some designers say they can’t stand the Wacom, but I can’t do without mine. It feels just like holding a traditional drawing pen and offers much greater precision than a mouse or trackball. I use a 9×12, but it does tend to become a bit unwieldy if you don’t have a lot of desk space. I put the thing on my lap and I’ve set the input rectangle to about the size of an index card. I rest my keyboard on the top half of the tablet both for space economy and convenience so I don’t have to move my hand very far to type.
- The Intuos line quite pricey ($250 USD and up), but if you’re thinking of buying the cheaper stripped-down Graphire version ($99 USD), I suggest saving that money and putting it towards an Intuos instead. I had the Graphire and isn’t nearly as good.
- GRADIENTS GALORE! Radial and linear gradients are an illustrator’s best friend. For round, organic objects, use radial grads, starting with a bright color in the middle and moving out to a darker shade. Offset the gradient so it’s not centered on the object to give it more realistic lighting and shadowing.
- Plop a shadow under it. Shadows give your drawing three-dimensionality.
If you work a lot with Flash and Illustrator, you no doubt have encountered the notorious text shape import problem. The shapes look fine in Illustrator, but when you try to bring them into Flash via cut & paste or a file import, they end up all wonky, like the image below. As you can see, Flash is especially bad when it comes to curves.
I recently learned a nifty trick to solve this problem from the Creative Director in the office. Previously, I tried many things to get the shape to appear correctly, including converting the text to shape outlines, making a separate shape and cookie-cuttering the text out. Sometimes I can just replace the text with Flash’s text tool, but more often than not, the text is in a special font and I’d have to rework the Bezier curves in Flash.
Here’s the solution: export the file as an Illustrator legacy file (pick the lowest version Illustrator can export to). Then import it into Flash. This did the trick for me.
Flash has several very annoying bugs that, if you’re not aware of the workarounds, can drive you crazy figuring out what you’re doing wrong. When working with small imported raster graphics, Flash sometimes adds a column of pixels at the edge.
I had this issue many years ago and solved it by enlarging the picture’s canvas a few pixels and giving it a transparent or white border (or whatever the background color was). I learned of a much quicker solution several months ago: shrink the graphic from within Flash to 99.9%, or make it 100.1%. Anything but 100% will solve it.
I started freelancing at a new job on Tuesday and they gave me an iMac to work on (except mine isn’t the high end model Apple plasters all over its site). I had initially requested a PC with DreamWeaver and the usual design software (Flash, Photoshop, Illustrator), but they didn’t have a PC license for any of these.
What they showed me for the Mac was Transmit, an FTP client, and textmate, a code editor. I had never used either of these before. I used to use BBEdit a lot before, but then found out it sucks and now prefer to code in Dreamweaver. I asked their HTML guy what Transmit was and he said someone had told them about it also and they started using it. After a few minutes, I started to see why. These two programs are awesome!
With Transmit, you can preview graphics files directly off the server, using a preview pane that slides out. Working in tandem with textmate, you can edit documents right off the server and save them directly. For php, this saves me a lot of time. I no longer have to keep uploading the files each time I want to test the code. I’ve set all the colors to something really garrish, like the Linux geeks in the office. It makes it much easier to differentiate between variables, HTML, php tags, and other types of text. Now, the only thing I’d like to ask for is an AutoFormatting button that retabs the code, like in Flash or Dreamweaver.