A
Flower in Illustrator
Skills:
- Transform / Rotate
- Pathfinder
- Gradient Mesh Tool
Drawing the shamrock
We're going to use three identical hearts to
draw the shamrock. In my last tutorial, I showed you how to draw a heart using
the shape and pen tools. There is an even easier way I'll show you this time. (I
know what you're thinking. "Now she tells us!" But a little pen tool never hurt
anybody!) This tutorial uses Illustrator CS, but it will work in
Illustrator 9 or 10 as well, but some of the commands may be in different
places.
Step 1. Start a new document in Illustrator (File
> New) in RGB colour. Turn on the Rulers (View >
Rulers). Right click on the ruler to set the unit of measurement and
choose pixels. I chose pixels since I'm working for the web. In the colour. boxes
at the bottom of the toolbox, I chose no fill and a green outline. This is so
you can see better to line up the diamond and circles we'll be using to make the
heart which will be used for the individual shamrock leaves.
Step 2. Select the rectangle tool from the tool box. Click
the mouse once on an empty space on the artboard to open the rectangle tool
options, and type in 72 for both width and height. Click OK and a 72 pixel
square will appear on the artboard.
Step 3. Go to Object > Transform >
Rotate. Enter 45 for the degree of the angle and click OK. You should
have a diamond shape.
Step 4. Choose the ellipse tool from the tool box and click
once on the artboard to open the tool options. Again, enter 72 for both width
and height. Click OK and the circle appears on the artboard. Make sure
View > Snap to Point is enabled. Drag the circle so it lines
up exactly on the upper left slant of the diamond. You will feel a small "snap"
as the circle snaps into place on the square.
Step 5. Click once on the circle outline to select it.
Because it has no fill, you will have to be careful to click on the outline of
the circle. Go to Edit > Copy, and then Edit
> Paste in Front. Even though you cannot see it, this has placed a
perfect copy of the circle directly on top of the original one, and it will be
selected.
Step 6. Tap the right arrow key repeatedly to move the new
circle to the right until it will snaps into place on the upper right slant of
the diamond.
Step 7. Select all three pieces (Select >
All) and go to the Pathfinder palette. If it isn't open, go to
Window > Pathfinder to open it. Mac: Option + click on the Add to Shape
Area button to combine and expand the shapes at the same time. Windows: Alt + click on the Add to shape
area button to combine and expand the shapes at the same
time.
And here's the resulting heart. Now you have
one leaf of the shamrock.
Step 8. We need to make two copies of the heart and rotate
them to make the other leaves of the shamrock. First select the heart by
clicking on its outline. This heart will be referred to as Heart 1. In the
toolbox activate the Rotate tool
by clicking
on it.
Hold the option key (Mac) or alt key (Windows) and
click the cursor just above the bottom point of the heart. This will set the
point of origin for the rotation, and at the same time open the Rotate options
box. By default, the point of origin is the center of an object unless you
change it.
Step 9. In the Rotate options enter 100 for the angle, and
click the Copy button. This will rotate the heart and make a
copy at the same time. Clicking the preview checkbox allows you to see where the
new heart will be placed.
Heart 1 is copied and rotated so you now
have Heart 1 and Heart 2.
Step 10. The Rotate tool should still be active in the
toolbox. Select Heart 1 again, set the point of origin as before, and using the
option key (Mac) or alt key (Windows), click the cursor just above the bottom point of
the heart. This time set the Angle of rotation to -100°, and click the
Copy button. You should now have three shamrock leaves.
Step 11. Select Heart 2 and Heart 3 (click on one, hold
shift and click the other, making sure to click the outlines to select), and
press the down arrow key about 6 times to move them downward. They will still
intersect, but not quite as much, and they'll make a better shamrock shape.
Step 12. Now we need a stem. Activate the arc tool. It's on
the Line tool popout menu. (If you have Illustrator 9, you'll
have to draw the stem with the pen tool. Make a curved line). Draw an arc about
a inch or so long. In the stroke palette, set the stroke width to 10 and choose
rounded ends for the stroke. (If you can't see the stroke palette, go to
Window > Stroke to show it.)
Step 13. We need to make the stem into an object; right now
it is a stroke. Go to Object > Path > Outline Stroke.
Before you could see the stroke; now you can see points around the
shape.
Step 14. With the stem selected, swap the fill and stroke
colours by typing Shift + X so the stem has no fill and the
stroke is the same colour. as the three hearts.
Step 15. Position the stem over the bottom points of the
hearts as shown. Hover the mouse over the corner of the stem's bounding box to
get the rotate cursor (the small double headed curved arrow cursor) and click
and drag to rotate it if necessary to make it the right orientation for the
shamrock. You can tell from the bounding box I rotated mine
slightly.
Step 16. Select all three hearts and the stem, and hold
Option (Mac) or Alt (Windows) and click the Add to Shape
button on the Pathfinder palette as before. This will combine all of the pieces
into one object.
Step 17. Swap the fill and stroke again (Shift +
X) so your shamrock has a solid green fill and no stroke. If your fill
colour. wasn't green, change it now. I suggest you save now.
Now you can make a simple solid filled
shamrock. Next let's use the gradient mesh tool to make a shaded
shamrock.
Using the Gradient Mesh
Tool
The Gradient Mesh tool lets you selectively
apply colour. using a mesh. Not only can you decide where the colour. is placed on
the image, the mesh is connected by points that can be moved to adjust where the
colour. lies on the image. The curve of the mesh itself can also be adjusted using
bezier handles. This is a great way to add shading or a painted look to the
vector images you draw in Illustrator.
Warning: if you change your mind and
don't want to use a mesh after all, the only way to do that if you can't use the
undo command is by deleting the object. Once it's a mesh object, it's always a
mesh object...so make sure to save a copy first if you might change your mind!
One other very important thing you need to
know about the Gradient Mesh tool is that it only works on objects with a solid
colour. fill. If the object has a stroke, using the Gradient Mesh tool will remove
the stroke. (Note: If you have an object with a gradient fill,
you can't use the gradient mesh tool on the object unless you convert it to a
gradient mesh object. You can convert to a gradient mesh object by going to
Object > Expand.)
Step 1. Command/Control + N (File
> New) to start a new document in RGB colour. mode. Follow
steps 1 through 7 above to make the first leaf of the shamrock.
Shift + X to fill the shamrock with green and remove the
stroke.
Step 2. In the Swatches palette (if you do not see the
swatches palette, open it from Window > Swatches) open the
options menu and choose Open Swatch Library then select
Forest from the list. (In Illustrator 9 or 10, go to
Window > Swatch Library. This particular set of swatches
comes with Illustrator CS, but you can find greens in other swatches included
with Illustrator 9 or 10.) You'll have some nice green shades to choose from.
Set the foreground colour. to one of the darker greens (several shades darker than
the base colour. of the shamrock leaf) by clicking on the chip.
Step 3. The Gradient Mesh tool looks like this:
You can find it in the
toolbox next to the gradient tool. Click on the tool to activate it. By clicking
on the shamrock leaf you add a mesh point. The points are connected by mesh
lines. Each time you click, another mesh point and mesh line will be added.
Colour. a different colour. be added to each of the points after the
mesh is made, or you can add colour. as you make the mesh. Click with the gradient
mesh tool a bit above and below the center points of the heart shape as shown
below to add two mesh points. Notice how the mesh points are joined by mesh
lines, and there are bezier handles that can be used to alter the lines of the
mesh.
Step 4. Click away from the shamrock leaf to deselect.
(Click away means click an empty spot on the artboard). Change the fill colour. to
a lighter colour. of green. After changing the colour., you can select the shamrock
again using the Selection tool (V), and click with the gradient
mesh tool again to add some lighter spots on the shamrock on the right and left
side of the leaf as shown below.
Things to remember:
- If you do not deselect before changing the fill
colour., the whole shamrock will change to the new colour.
- You can change colours of an existing mesh point by
clicking on it with the the mesh tool and clicking a different colour. chip in
the swatches. To make it easier to see you are on a mesh point with the mesh
tool, turn on Smart Guides. (View > Smart Guides). With
Smart Guides enabled, when you hover directly over a mesh point, you will see
a label that says anchor.
Step 5 . Notice you now have even more bezier handles you
can use to adjust the mesh curves as well as the ability to move the points by
dragging them to place the colour. where you want it. If you need to, you can use
the Direct Select tool (the white arrow, keyboard shortcut A)
to click and drag to move the bezier handles to make the mesh fit the shape of
the shamrock. Zoom in if you need to get closer to see well enough to grab a
handle.
Step 6. Change to the selection tool (V).
Make sure the leaf is selected. Activate the Rotate tool in the toolbox, and
Option/Alt + click on the leaf in the same place as you did on
step 8 of the "Drawing the Shamrock" section above.
Step 7. In the Rotate options enter 100 for the angle, and
click the Copy button. This will rotate the leaf and make a
copy at the same time. Clicking the preview checkbox allows you to see where the
new leaf will be placed.
Step 8. The Rotate tool should still be active in the
toolbox. Select the first leaf again, set the point of origin as before, and
using the option key (Mac) or alt key (Windows), click the cursor just above the bottom point of
the leaf. This time set the Angle of rotation to -100°, and once again, click
the Copy button. You should now have three shamrock leaves.
Step 9. Use the selection tool or the arrow keys to move
the leaves into a shamrock formation. Click the first leaf (the top one) with
the selection tool to select it and move it to the front (Object >
Arrange > Bring To Front).
Step 10. Now we need a stem. Activate the arc tool. It's on
the Line tool popout menu. (If you have Illustrator 9, you'll
have to draw the stem with the pen tool. Make a curved line). Draw an arc about
a inch or so long. In the stroke palette, set the stroke width to 10 and choose
rounded ends for the stroke. (If you can't see the stroke palette, go to
Window > Stroke to show it.)
Step 11. We need to make the stem into an object; right now
it is a stroke, the same as when we drew the first shamrock. Go to
Object > Path > Outline Stroke. Before you could see the
stroke; now you can see points around the shape.
Step 12. Use the gradient mesh tool to add some shading to
the stem.
Step 13. Move the stem to the shamrock, and rotate if
necessary as before. Send the stem behind the shamrock. (Object >
Arrange > Send to Back) Select all four pieces and group them
(Object > Group or Command/Control + G).
Step 14. Add some
text, fill with a gradient, and warp it. To do this you will have to follow
several steps. Text can't be filled with a gradient unless it is turned into
outlines.
1. Type the
text.
2. Click the
Selection tool so you have a bounding box around the text and go to Type
> Create Outlines. Now you can fill the text with a gradient the
same as any object.
3. To warp the
text go to Effect > Warp > Arc. This text is set at
Horizontal at 50%. The rest of the settings are left at default.
Happy St.
Patrick's Day!