Vector art is somewhat of a touchy subject in the art community. Since most people's familiarity with computers comes from how they're portrayed on television, they naturally assume that anything artistic created on a computer was achieved through mashing key commands, as opposed to talent or skill.
While I'll admit most amateur vector art looks a little too "noodly" for my tastes, when used correctly, it can create crisp colorful illustrations. A perfect example of professional vector art would be POW's very own gallery artists, Ale Giorgini and Jazzberry Blue.
Left to Right: THE ROYAL TENENBAUMS by Ale Giorgini & OUTCAST by Jazzberry Blue
Once you learn to hone in's and out's of vector illustration, if you're savvy enough, you can forgo sketching and create your art entirely within the realm of your computer, cutting your turnaround time in half.
A few years ago when I first purchased an iPad, I checked to see if Adobe had created a vector based drawing program for the iOS since I do 99.9% of my work in Illustrator... unfortunately they had not. I then scoured the internet high and low for a proper substitute (i.e. typing "Vector Art iPad" into Google) and came across iDraw. At first I was a bit leery about forking over $9, but after seeing that the majority of iDraw's reviews were positive, I decided to take the plunge.
While reviewing this app, I'm going to teach you kids at home how to draw Prints On Wood's beer drinking, bar brawling mascot, Owly the Owl! Let's get started...
Once you open iDraw, you'll notice several already existing images which serve as a tutorial on how to navigate through iDraw, as well as a few examples of vector art created in the program. To create a new image, click the Plus symbol in the top lefthand corner of the screen.
After you create a new image file, iDraw provides several backgrounds to choose from such as a lined paper background for a sketchy feel, graph paper & blueprint backgrounds for technical drawings, an image background that allows you to import photos from your camera roll, and finally, a blank white background. Since we're drawing a simple image to print on wood, lets go with the blank background so the woodgrain will be visible.
Now that we selected our background, lets adjust our art board for our wood print. I want my image to have a 1:1 ratio so we can print it on a square piece of wood. To change the dimensions of our art board, simply click the Cog icon on the top right hand corner of the screen.
As you can see here, iDraw offers several different technical options to assist your drawing experience. Right now, lets just adjust the size of our canvas to 864px x 864px (or 12 in. x 12 in. for all you imperialists).
Now that we got our square canvas, let's get down to drawing everyone's favorite anthropomorphic owl. First lets access the Pen tool. For those of you unfamiliar with a vector based Pen tool, this might take a little practice. When using the Pen tool in a vector program, you use points and handles intermittently to direct the shape and flow of your lines.
To use the Pen tool, click the Pen icon on the toolbar to your lefthand side. Then click your first dot and drag downwards. This dot is called an Anchor Point, the lines extending from your anchor point are called Handles. Anchor points are used to connect segments in a line, how you pull on your handles when creating anchor points dictates the shape and flow of the line. For our second anchor point, try to imagine the middle point of Owly's chin and click to plant your anchor point while pulling the handle to your right.
Creating our anchor points / pulling our handles in a counter clockwise direction allows the line to curve into an oval shape. It might take a few tries (and a couple of swear words) to get the hang of the Pen tool, so take your time. Ultimately you want to draw Owly's skull / head in the shape of a sideways tic-tac.
Looking at the image above, you can see that my oval is lopsided. Select iDraw's Direct Selection tool from the lefthand toolbar, it should look like an outline of an arrow (2nd icon from the top). The direct selection tool allows you to individually select anchor points and handles to adjust after drawing your line(s).
There we go, now it doesn't look as derpy. If you noticed, my line looks a bit thicker. When you have your shape/line selected, clicking on the Information icon at the top of your screen allows you to change the appearance of your selection. In this case I made the stroke (outline) thicker since I'm a fan of fat lines.
Now that we got Owly's head drawn, let's move onto his eyes. Drawing multiple assets onto a single layer becomes a nightmare further down the road if you're working on a complex image, so let's create a new layer for his eyeballs.
The Layers icon is located on the top right hand corner of the screen and should look like a stack of papers. When you click on it, a little drop-down menu appears. Clicking on the Plus sign in the drop-down creates a new layer. Double clicking the layer's default name toggles your iPad's on-screen keyboard and allows you to change the name, which can be helpful when you have multiple layers and forget what is where. When more than one layer is created, iDraw automatically locks the unselected layers, which prevents you from accidentally selecting / changing something on a separate layer.
Using a similar technique to how we drew Owyl's head, let's draw one eye first. Using the Pen tool again, draw 4 evenly spaced anchor points while making your best effort to pull all of the handles out an an equal length to each other in a counter clockwise fashion. This should leave you with a (lopsided) circle. Instead of drawing another one, let's just copy and paste the first one to save some time.
Using the Selection tool (the arrow icon at the top of the toolbar), tap on our circle / eyeball. Once selected, tapping on the Paperclip icon at the center left of the screen opens the Edit drop-down menu. Clicking on Copy duplicates your selection, clicking Paste makes your duplication appear on screen. Now that we have our second eyeball on the screen, use the Selection tool to adjust both circles symmetrically on the opposite sides of Owly's head. Your drawing should resemble a pigs snout at this point (and still look kind of boring).
Let's add some personality to this picture by drawing Owly's eyebrows next. After creating a 3rd layer for his eyebrows, use the Pen tool and start by creating an anchor point while pulling the handle upwards.
Draw a second anchor point to the upper right hand side, diagonal to the first anchor point, and pull the handle to your right. This should make an overhand curve.
Draw a third anchor point diagonally above the one before it and pull the handle down, resulting in the second half of your line curving underhand. At this point you should have a wavy line curving upwards.
Double tap on the 3rd anchor point before drawing the bottom half of Owly's eyebrow. Doing so makes a sharp point. You'll know that you have a sharp edge when the handle pointing upward disappears.
Using a technique similar to drawing the top half of his eyebrow, start at the 3rd anchor point and draw a 4th anchor point below the 2nd anchor point while pulling the handle to your left.
Finally, double tap on the first point to connect the line while making a second sharp edge.
BOOM! Now you've got your owl eyebrow(s)! On a related note, for those of you who are about to slam your iPad against the wall in frustration, keep in mind that I've been using illustrator for 10+ years, so once again, it takes a little bit of practice. Just be patient.
Now that we've got Owly's eyebrow drawn, I'm going to draw some lines inside the eyebrow to give the appearance of hair / feathers / texture. First, let's switch our pen tool to only draw a stroke without any fill.
On the bottom left corner of the screen, you should see 2 circles, one that looks like a donut, and one that looks like a full circle. The donut represents the Outline / Stroke color, the full circle represents the Fill color. Selecting either one toggles a color wheel. Since I only want to draw a line, I selected the Fill color to remove it completely. This can be achieved by clicking on the black box with a diagonal grey line at the bottom right of the menu, doing so removes the fill completely. Afterwards, I selected the Outline / Stroke to change it to black.
Now that we can draw only a black line, use a technique similar to drawing the top half of Owly's eyebrow and draw 3 lines inside.
Once you complete his eyebrow, toggle the Selection tool and drag your finger on the screen, you should see a blue box appear. Draw the box big enough to fit everything and take your finger off the screen. This should select the eyebrow shape as well as the 3 interior lines.
Once selected, click on the icon on the top right icon that looks like one rectangle overlapping another, opening a drop-down menu, then click on Group.
This groups your lines / shapes together, so that when we move or rotate this selection (which we're about to do), all of these assets travel and move together. Now with every piece of Owly's eyebrow selected and grouped, copy and paste a second eyebrow onto the same layer.
Once pasted, click on the Ruler icon. On the bottom left of the drop-down menu, you should see two arrows pointing away from each other with a vertical line in between. Clicking this icon flips your selection horizontally. Now with two eyebrows on the screen, adjust them using the Selection tool so that they sit right above Owly's eyes.
We're getting there! Now lets give our feathered friend some eyes and eyelids. Using the pen tool with only a black stroke, draw two opposing diagonal lines on the top of Owly's eyeballs to get the ball rolling on giving him a nice Bill Murray / Slacker gaze.
To draw his eyes, first switch out your Stroke and Fill colors so that the stoke is now empty, and the fill is pitch black. Then select the Elipse tool (the circle icon in the middle of the toolbar on the left) and draw 2 black circles in the center of his eyes, these will be his pupils. If you keep two fingers on the screen when sizing out your circle, it keeps the proportions constrained allowing you to create a perfect circle. After doing so, switch the fill color to white and draw two smaller circles in the top right of his pupils so that he has a twinkle in his eye.
This is were I thought I was going to copy the eyelid lines and use the duplicates to cut off the top of the pupil so they look like they're behind the eyelids, using the Pathfinder tool. Unfortunately iDraw's Pathfinder tool works a little different than Illustrator's.
What is a Pathfinder tool you might ask? Lets access iDraw's version of this tool to go over it.
Click on the overlapping rectangles on the top right and select Combine at the top of the drop-down menu. What you see above is the Pathfinder tool. This tool is used to combine or divide shapes that are selected in unison. I thought clicking Divide would cut my overlapping selections where they converged, but when I selected the eyelid lines and black circles to do just that, the eyelid lines would disappear and my black circles wouldn't slice.
I know I probably lost 90% of you when I mentioned this app cost $9, and another 9% of you bailed when it came time to draw the eyebrows. As for the remaining 1%... you rock!
Just between you and me, I circumvented this issue by using my duplicated eyelid lines to draw full shapes. THEN I used the Pathfinder tool to cut the pupils! THEN I cut and pasted my sliced pupils back into my drawing!! THEN I deleted the leftover shapes!!! THEN I SWITCHED THE FILL TO BLACK!!! BOOYAH!
Where were we? Oh yeah, now that I adjusted my black circles to look like inset pupils in the most convoluted way possible, lets draw this fuzzy freaks bird beak and get this stupid App Review / "How To" over with. If you've followed this jumbled mess up until this point, your skill level in iDraw should be Wizard, so I don't have to go into detail anymore for you to know how to do anything (deal with it). To draw Owly's mouth, just draw an upside-down tear drop and a curved line on the right side for a smirk.
I can't tell if he's laughing at your for spending so much time reading this, or laughing at me for spending so much time writing it. Probably both. Finally, select the skull layer (remember that part of the article from 3 hours ago?) and use the Elipse tool to draw 3 circles for Owly's Mickey Mouse face-mask outline thingy.
Now select all three circles and merge them together using the Pathfinder tool and switch the fill to white and the stroke to black.
Now your done! Not if you're me though. I hate myself just enough where I feel like I need to add more to this Turd de Force. I mean, why stop now!?
Look at that smug bastard, he probably just punched the Paul Frank monkey in the face. But how does he look on wood, hmmmmmmmm?
Great! Now the review.
Yeah... it's that cool. Best $9 you'll ever spend. Seriously.
I love vector illustration, and I went looking for the closest thing I could find to Adobe Illustrator on my iPad. While the actual name of the app itself might trick you into thinking it's banking on the whole lower case "i" prefix fad that most apps and gadgets use to sucker people out of money, I assure you this is the closest app with dignity you'll ever get to Illustrator. Best part is there's a desktop version of iDraw to use on your Mac.
I highly recommend this app to budding young graphic artists. While most of you might not have the ends to fork over $400 for a legitimate copy of Illustrator, iDraw is a great, affordable way to get familiar with the incredibly steep learning curve that vector art requires. iDraw also allows you to export your images in a professional, universal format, such as PDFs, SVGs, PSDs, etc, as well as allowing the ability to set the DPI of the image so that you can print is as big (or small) as you like, should you choose to output a raster version of your work.
While $9 for an app is a bit steep for most people, it's a measly pittance for those wanting to learn how to create vector based illustrations all wrapped up in a fun intuitive mobile app.
For more information on iDraw for the iPad and Mac, please visit: http://www.indeeo.com/idraw/