Understanding Vector Shapes in Illustrator

When I posted "Wireframing with Illustrator and InDesign", several people asked about my Illustrator techniques. The simple truth is that I've used Illustrator a lot over the past decade and have learned a quick key for virtually everything I produce, whether it's logos, wireframes, or full-fledged interface designs. If there aren't quick keys for some frequently performed task, I will often create my own.

If you're new to Illustrator, don't fret. I'm starting this post at the beginning, so even if your goal is not to get blazing fast, you'll still get a solid understanding of the basics.

RANDOM PRINT SHOP SOMEWHERE IN SOUTHEAST GEORGIA - DAY (2000)

"Black magic!" I thought to myself, as I witnessed for the first time, someone manipulating vector shapes in Adobe Illustrator. I was a freshman in college and visited a print shop to get a sticker made for the top of my white Ford Mustang's windshield. I'm embarrassed to admit that the sticker was designed to stretch across the entire width and read "Xtreme Customs." At least I didn't go for the "customz" spelling, but unfortunately this was the genius slogan that a group of friends and myself agreed upon as the name of our vehicle clique.

I designed the sticker in MS Paint like a total boss, but of course, the resolution was much too low to be stretched across the windshield of a vehicle. So the guy at the print shop scanned in my sad print out of what I thought was an incredible logotype and pulled it up in Illustrator. He began razzling and dazzling me with his fancy bézier curves and handlebar tweaking techniques. I didn't even know what type of software was capable of producing such awesomeness, let alone that I would one day use it for myself.

I remember the smell of all that fresh new plastic as he swiftly vectorized my bitmap printout and sent it to his giant plotter.

Today's Syllabus

1. Understanding Vector Shapes
2. Selection and Direct Selection Tools
3. Drawing Rectangles and Circles
4. Basic Bézier Curve Modification
5. Real World Use Case - iPhone Sign Up Screen

Understanding Vector Shapes

Before we jump in too deep, you need to have a basic understanding of vector shapes, points, paths, and the tools used to manipulate them.

First, we're going to draw a square in Illustrator. To do this, hit the M key on your keyboard. This is the quick key for selecting the rectangle tool. If you're going to use Illustrator and want to get fast and furious with it, you must learn this quick key along with all of the others I subsequently mention. Don't you dare go clicking on that tool panel without trying to remember the quick key first.

Alright, now that the rectangle tool is selected with the M key, you have two options for drawing a rectangle.

The first: Click and drag on the canvas while holding the shift key to maintain 1:1 proportions. Release your mouse button when you're happy with the size of your square.

The second: Click once anywhere on the canvas. Don't drag. This will open a dialog box where you can enter dimensions for your shape. This is particularly helpful if you are creating buttons for an interface that have a common height. Enter 300 x 300 and watch your shape automatically appear.

Now that the shape is drawn, let's analyze it a bit. Press the A key on your keyboard to select the Direct Selection tool. I'll cover this tool in a moment, but for now you can see that there are four blue squares in each corner of the shape with a tiny line connecting them all. The tiny blue squares are called anchors and the connecting lines are called paths.

Selection Tool

Once you've drawn the shape, you'll notice that the rectangle tool is still selected. Chances are high that you'll want to move that square somewhere, even if it's just a few pixels. Hit the V key on your keyboard to quickly change from the Rectangle Tool to the Selection Tool. This is not an optional shortcut for you to learn. You must use this quick key if you want to get fast with Illustrator.

The Selection Tool selects an entire vector object. Now that it's selected, you can move your square around a bit to get a feel for it.

Resizing

The selection tool can also be used to transform a shape's height and width. Move your mouse over the corner anchor point of the object's bounding box until your mouse cursor changes from the pointer to the expand icon. Hold shift to maintain proportions while scaling the shape. You can also hold option to scale the shape from the center as opposed to a corner.

If the bounding box isn't showing for you hit cmd+shift+B to show it. This is the same as choosing View > Show Bounding Box from the menu bar.

You can also hover the middle section of the bounding box to stretch a shape in one direction.

As a general rule, I only use the Selection Tool to stretch large simple shapes like rectangles, circles, etc. When you get further into more intricate design the Direction Selection Tool is most often preferable.

Changing the Color

In the bottom of the tool panel you'll see a fill and stroke color swatch. The fill is on the left and the stroke is on the right. Fill refers to the solid color of the shape, whereas stroke refers to the line around the shape.

Any shape you create can have both a fill and stroke, one or the other, or neither. With the rectangle selected you can click the small arrow to reverse the fill and stroke, choose additional colors, etc.

All vector shapes, including text, in Illustrator have fill and stroke properties.

Direct Selection Tool

The Direct Selection Tool selects an individual element of a vector object. This allows you to isolate an anchor point and manipulate it separate from the others. The quick key for Direct Selection is A and yes, you must learn and use this quick key.

Pro Tip: Hover your mouse over any of the tools to see the quick key for that specific tool. For example, Direct Selection (A) will appear when you hover the Direct Selection tool in the tool panel.

You can select anchor points in a shape by clicking on them directly or drawing a faux shape around them, much like you would move folders around on your desktop.

The direct selection tool will change slightly when you hover directly over an anchor point. The anchor point will also change into a larger version of itself. See below.

With this method we can manipulate the square by selecting the anchor point and dragging it in any direction.

Selecting Multiple Anchors

You can select multiple anchor points as well, using the same technique. Once you've clicked one anchor point, hold the shift key to select a second one at the same time. With both anchor points selected you can manipulate them simultaneously.

Let's say we want to skew our square. We can either shift-click the top two anchor points or draw a selection around them. Drawing a selection around your anchor points is typically a faster technique.

Pro Tip: With any object or anchor point selected you can move it 1px at a time with your keyboard arrow keys or 10px at a time by holding shift + any arrow key

Bézier Curves

To get a handle on the concept of bézier curves check out these gifs below. Taken from Wikipedia

The insanely awesome gifs show what's happening with those handle bars that extend from a vector shapes anchor points. To simply this concept we can examine a circle or ellipse shape.

To select the Ellipse Tool hit the L key on your keyboard. The tool is otherwise hidden behind the Rectangle Tool (M) in the tool panel. Same as before with the square, you can click an drag on the canvas to create a circle shape.

Optionally, you can click once on the canvas to bring up the Ellipse panel to enter in height and width dimensions.

Once you've drawn a circle on the canvas, hit the A key to bring up your Direct Selection tool. Now draw a selection around one or more of the anchor points.

This will show the handlebars extending from the anchor points. Without those handlebars, this circle shape would be a diamond. The length of the handlebar determines the shape of the path.

Now if you want to manipulate the handlebar of the anchor to change the curve of a path, there are two ways to do it. The first is the Direct Selection (A) tool. Use this tool by selecting an anchor point to reveal its handlebars and selecting the handlebar of your choice to move around. This technique will move both handlebars on each side of the anchor, affecting the path equally on both sides as well.

The second way to manipulate an anchor point's handlebar is by using the Pen Tool (P). Using the Direct Selection Tool (A), select one of the anchor points, then select the Pen Tool by hitting P on the keyboard.

If you hover an anchor point with the pen tool selected you will notice a - appear beside the pen tool icon signifying subtraction. Clicking will remove that anchor point and you'll see the path change based on the remaining anchors.

To manipulate the path without removing the anchor point, hold the Option key (while the Pen Tool is selected). This will change the cursor from the pen icon to an angled /\ icon. With this alternative tool you can grab the point on the end of the handlebar and manipulate it in isolation. This will only modify the path on one side of the anchor point, leaving the other side unchanged.

You can also redraw both handlebars of a single anchor point with the alternate /\ tool.

While holding option with the Pen Tool (P) selected, you can click and hold on top of an anchor point and slowly drag in any direction to redraw new handlebars for that point.

Real World Use

Let's say you want to create a wireframe for an iPhone app's Sign Up screen. Alrighty, let's do that using what you just learned about rectangles, circles and the pen tool.

Here are the steps I performed to create the screen shown in the video above.

1. Create a new document by hitting command+n.
2. Enter 640x1136 (Screen size for iPhone 5 and greater)
3. Select the Rectangle Tool (M) by hitting the quick key, M.
4. Click once anywhere on the canvas.
5. Enter 640x1136 to create a full size background shape.
6. Align the shape with the artboard by clicking and dragging or by using the align tool. (I'll cover this tool in another post.)
7. Click once anywhere on the canvas.
8. Enter 640x128 (Size of a standard iOS 7 header, including the status bar)
9. Manually position the header at the top left of the artboard, or by using the align tool.
10. Hit the T key to select the Type Tool.
11. Click anywhere on the canvas and type "Sign Up".
12. Command + click anywhere on the canvas away from the text to exit the type input.
13. Hit the V key to change to the Selection Tool.
14. Select the "Sign Up" text and hit command+shift+C to center the text.
15. Drag the "Sign Up" text to the center of the header shape.
16. Hit the L key to select the Ellipse Tool.
17. Click anywhere on the canvas. Enter 120x120.
18. Hit the V key to select the Selection Tool.
19. Click and drag the circle just below the header.
20. Adjust the fill to the be transparent and the stroke to have a slightly darker stroke color than the fill. You can give the stroke a dotted line by selecting Dashed Line in the stroke panel.
21. Now hit M and click anywhere on the canvas.
22. Enter 8x48 to draw a rectangle.
    Hit V to change to the Selection Tool.
    Select the 8x48 rectangle and hit command+c then command+shift+v to copy and paste in place. (command+v will paste in the center of your screen)
23. With the top 8x48 rectangle selected, hover the corner of the bounding box until the cursor changes to the rotate icon.
24. Holding shift, rotate the new 8x48 shape 90º.
25. Shift+click the vertical 8x48 so both smaller rectangles are selected at the same time.
26. Hit command+g to group these shapes together. (Side note: command+shift+g while ungroup objects.
27. Hit V and drag the " + " to the center of your 120x120 circle.
28. With the " + " selected, shift+click the circle and hit command+g to group these items.
29. Hit the M key for the Rectangle Tool.
30. Click anywhere on the canvas. Enter 500x100.
31. Hit the T key for the Type Tool. Click anywhere and type "Name"
32. Hit command+return to exit type input mode or command+click anywhere on the canvas.
33. Hit V for the Selection Tool. Grab the "Name" type and position it in the 500x100 rectangle as placeholder text.
34. Select both the 500x100 rectangle and the type and hit command+g to group those objects.
35. With the new group selected. Click and option+drag the group below the original input field, holding the shift key to maintain a 90º axis. When you option+drag it creates a copy of the selected object.
36. Double click on the copied "Name" to enter the text field. Type "Email"
37. Hit M for the Rectangle Tool and click anywhere on the canvas. Enter 500x100.
38. This will be a button, so make it blue (for now). To do this hit V, select the button. Now make sure the fill swatch is in the foreground above the stroke swatch. Go to your color palette and choose blue.
39. Position the button just below the "Email` input field.
40. Hit M, click on the canvas and enter 15x15.
41. Hit A to select the Direct Selection Tool. Click one of the anchor points on the small square and hit Delete. Now you have an equilateral triangle instead of a square.
42. Hit V and select the triangle, if it's not already selected.
43. Position the triangle in the center of the blue button.
44. Hover near one of the corners until you see Selection Tool arrow change into the small rotate icon.
45. Hold shift to maintain angle constraints and rotate 45º.
46. With the rotated triangle selected, choose a transparent fill color (the white swatch with the red slash).
47. Now select the stroke selection in the tool panel to bring stroke to the foreground above the fill.
48. Choose white as the stroke color.
49. From the stroke panel, choose 2px.

50. In the same stroke panel, choose rounded caps and rounded corners.

51. Hit L for the Ellipse Tool, click anywhere, enter 50x50.

52. With the small circle selected, hit I to select the Eyedropper Tool.
53. Click the small arrow with the eyedropper, while the circle is selected. This will give the circle the same fill and stroke properties and the arrow.
54. Hit V to select the arrow and circle, now position them in the center of the blue button.
55. Hit M for the Rectangle Tool, click anywhere, and enter 640x432. This is the size of an iOS keyboard.
56. Position this keyboard shape in the bottom left of the canvas. This serves as reference for how your interface is positioned with the keyboard showing.
57. Now hit L for Ellipse Tool, click on the canvas, and enter 11x11. This is the size of the dot, which indicate phone signal strength.
58. Hit V, click the dot and give it a black fill with a transparent stroke.
59. Move the dot to the top left of the canvas.
60. With the dot selected, option+drag a copy of the dot just to the right of the original.
61. Before hitting any other key or clicking anything else, hit command+d to duplicate your previous action. This short cut key is the jam.
62. Now you have three dots. Hit command+d twice more to give yourself a full five signal dots.
63. We're in a weak service area so let's select the last three dots and, in the tool panel, reverse the fill and stroke.
64. With the same stroked dots selected, change the stroke alignment to the center selection: Align stroke to inside
65. Now hit T for the Type Tool, click near the top and type 11:50 AM.
66. In the character panel (Window > Character Panel) or command+T, change the font size to 23px.
67. Hit V and align the correct position at the top of the screen.
68. Last but not least, let's draw the battery shape. Hit M for the Rectangle Tool, click anywhere and enter 45x19.
69. Now change the shape from a black fill to a black stroke by reversing the fill and stroke in the bottom of the tool panel.
70. Choose Align stroke to inside from the stroke panel.
71. Hit M again, click, and enter 41X15. Choose a black fill and no stroke for this shape.
72. Hit V, select the smaller shape and position in centered within the batter outline.
73. If you're using Adobe Illustrator CC Version 17.1.0, you have the option to add rounded corners to your rectangle shapes, otherwise leave them square and I'll cover rounded corners in another tutorial.
74. Click or select your battery outline anchor points with the Direct Selection Tool (A) and enter 3px in the corner input at the top of the screen.
75. Now click the battery fill shape with the Direct Selection Tool (A) and enter 1.5px in the corner input.
76. Hit M, click anywhere, enter 3x7 for the battery cap shape.
77. Hit A for Direct Selection and select the two outermost anchor points on the opposite side of the battery.
78. With these anchors selected only, enter 2px in the corner input.
79. Hit V, select all of the battery pieces, and hit command+g to group the objects.
80. Position the battery group in the top left of the screen and you're done!

If you want to check out the Illustrator file, download it here.

Summary

Vector shapes in Illustrator may seem foreign and complex if you've never dealt with them before, but after a little practice you'll have the basics down in no time. Stick with rectangles and circles for a while as you think about creating basic interface bits. Force yourself to use the quick keys until you know them without thinking about it. You are essentially building muscle memory the same way you'd learn to type or play the guitar.

Continue ramping up your knowledge of Illustrator and learn tips and tricks to get super fast from both a thinking and design perspective in my new AIUX series.