Get a jump on Valentine’s Day by building custom artwork for your valentine in Adobe Illustrator! Building on the last technique, this week’s installment of Deke’s Techniques shows how to create the very picture of a couple in love—in pictogram form, of course. Learn how to combine your finished ISOTYPE figures (based on the picture language of the same name designed by Otto and Marie Neurath in 1935) and have them join hands. Follow along with Deke in this week’s free video and use the companion text below to help with each step.
2. First, select the man’s left arm and use the Appearance panel to bend the arm outward, increasing the Vertical Scale, Move, and Angles values in the Transform Effect dialog.
3. Duplicate the white underarm stroke and adjust its Scale, Move, and Angle values.
4. Next, adjust the shoulder by modifying the Scale property, and move it slightly left with Transform Effect.
5. Use the Move command to move the two figures closer to each other.
6. Copy the fill (the head) to start creating the heart shape. Move it between the figures.
7. Create a duplicate of the red circle and move it to the right to complete the top half of the heart.
8. Click Add New Stroke and choose an arrowhead effect (resizing it with Scale and Distort & Transform) to start the bottom half of the heart.
9. Create additional strokes to fill the heart.
10. Expand the effect to make the artwork easier to work with.
11. Use the Pathfinder > Merge command to combine all the paths.
12. Finally, delete any remaining empty paths.
Tune in next week, when Deke takes up with a couple of other universal symbols and combines them into a series of Andy Warhol–like silkscreen treatments. Members of lynda.com can view the entire Deke’s Techniques collection here.
In this week’s installment of Deke’s Techniques, Deke McClelland shows you how to create a pictogram of the universal male symbol, originally created as part of Otto and Marie Neurath’s ISOTYPE, or International System of TYpographic Picture Education, collection. Learn how to create this pictogram with stroke effects applied to a single vertical path outline in Adobe Illustrator. Follow along with Deke in this week’s free video and use the companion text below to help with each step.
1. Create a new file for your artwork and use the Line tool to draw a vertical line segment.
2. Choose Window > Appearance to bring up the Appearance panel, which allows you to stack multiple fill and stroke effects on a single path.
3. Create the right leg first.
a. Click the Stroke option in the Appearance panel and change the Weight to 28 pt and the Cap to the middle Round Cap option. Be sure to click on Stroke inside the Appearance panel or Options bar to get to the Cap option.
b. Choose Effect > Distort & Transform > Transform. This command allows you to create and alter the stroke independently of the path outline.
c. In the Transform Effect dialog box that opens, turn on the Preview check box to reveal your changes and change the Vertical Scale value to 70%. Select the bottom point in the reference point matrix. Make sure Scale Strokes & Effects are deselected. Be sure to change the Horizontal Move to 19 pt. This ensures you scale the virtual path that Illustrator is stroking here, but you do not scale the line weight itself. Click OK.
4. Duplicate the right leg to build the left.
a. Select the stroke in the Appearance panel and click the page icon at the bottom of the panel to duplicate the stroke.
b. Twist open the properties of the new stroke and click the Transform property to open the Transform Effect dialog box. Change the Horizontal Move value from +19 pt to –19 pt, turn on Preview, and click OK.
5. Now it’s time to create the body.
a. Select the first stroke in the Appearance panel, click the page icon to duplicate it, and change its stroke to 66 pt.
b. Click the word Stroke to bring up the Stroke panel and change the Cap to Butt Cap to remove the rounded edges from the path.
c. Click Transform to bring up the Transform Effect dialog box and change the Vertical Scale to 40%, the Horizontal Move to 0, and the Vertical Move to 54. Select the top middle point in the reference point matrix and click OK.
6. Create a rounded negative space between the legs with a white stroke.
a. Select one of the leg strokes in the Appearance panel. Option+drag (Mac) or Alt+drag (Windows) it to the top of the stack to duplicate the stroke.
b. Click on the swatch of your new stroke to bring up the Swatches panel and select white.
c. Reduce the stroke to 10 pt.
d. Click Transform to open the Transform Effects dialog box. Click the center point in the reference point matrix to scale the stroke from its center. Change Vertical Scale to 20%, Horizontal Move to 0, and Vertical Move to 54. Click OK.
7. Now to add the arms.
a. Select one of the 28 pt strokes. Option+drag (Mac) or Alt+drag (Windows) it to the top of the stack to duplicate the stroke.
b. Change the weight of the new stroke to 24 pt.
c. Open the Transform Effects dialog box and reset the reference point to the center. Change Vertical Scale to 26%, Horizontal Move to 55 pt, and Vertical Move to –18. Click OK.
d. Duplicate the new arm by clicking its stroke in the Appearance panel and clicking the page icon.
e. Click the Transform property of the newest stroke and change the Horizontal Move value in the Transform Effect dialog box from +55 to –55. Click OK.
8. Create the shoulders.
a. Duplicate one of the arm strokes by selecting it and clicking the page icon in the Appearance panel again.
b. Click the new stroke’s Transform property. This time, change the Rotate Angle to 90 degrees. That rotates the stroke so it’s perpendicular to the path outline.
c. In the Transform Effect dialog box box still, set the Vertical Scale to 28%, the Horizontal Move to 0, and Vertical Move to –56. Click OK to commit your changes.
9. Create negative white space underneath the arms to simulate rounded joints.
a. Select the 24 pt stroke that represents the right arm. Option+drag (Mac) or Alt+drag (Windows) it to the top of the stack to duplicate the stroke.
b. Click on the stroke’s color swatch and change it to white.
c. Change the line weight of the stroke to 10 pt.
d. Click the stroke’s Transform property and change the Vertical Scale to 24%, the Horizontal Move to 38 pt, and the Vertical Move to –16 pt. Click OK.
e. Copy the right underarm stroke to the left by clicking the stroke in the Appearance panel and clicking the page icon to duplicate it.
f. Click the left underarm’s Transform property to open the Transform Effect dialog box. Change the Horizontal Move value from 38 pt to –38 pt and click OK.
10. Now draw the missing head.
a. Move the fill from the bottom of the Appearance panel to the top of the stack.
b. Change the fill color to black by clicking on the swatch and selecting black from the Swatches panel. Note you are not actually going to see anything change immediately because you’re trying to fill an open straight path outline.
c. Click on the fill to make it active and choose Effect > Convert to Shape.
d. Choose Ellipse as the shape in the Shape Options dialog box. Select Absolute from the Options and dial in Width and Height values of 52 pt each. Click OK.
e. The fill needs to be moved upward on the canvas. Choose the fill from the Appearance panel and choose Effect > Distort and Transform > Transform. When the Transform Effect dialog box opens, type in a Vertical Move value of –122 pt. Click OK.
Side note: Positive horizontal values move things to the right; negative values move them to the left. Positive vertical values move things down; negative vertical values move them up. It is a little counterintuitive, but that’s the way it works inside Illustrator.
11. Now you need to convert the strokes to path outlines.
a. Return to the Layers panel.
b. Option+drag (Mac) or Alt+drag (Windows) your man layer to the top of the stack to duplicate it.
c. Double-click the new layer to open the Layer Options dialog box. Change the Name to paths and select a new color for your outlines. Click OK.
d. Choose Object > Expand Appearance.
e. Choose Path > Outline Stroke to convert all the strokes to filled path outlines.
f. Then merge all these path outlines according to their colors. Choose Window > Pathfinder to open the Pathfinder panel and click the Merge icon.
g. Choose Object > Ungroup to ungroup the white paths that are nested inside the black ones.
h. Press V to switch to the Selection or black arrow tool, click off the path outlines to deselect them all, and then click one of the white outlines that represents a void space. Go to the Options bar and click the arrow next to the far right Select Similar Objects icon. Choose Fill Color from the popup menu to select all the paths with white fills. Press Backspace (Windows) or Delete (Mac) to remove them.
i. Now you can rotate, size, or manipulate the figure however you want, as he’s now a single merged path outline.
For members of lynda.com, Deke has another exclusive movie this week called Building a universal woman with strokes, in which he shows you how to create the female companion for your figure. Plus, stay tuned for next week’s tutorial, when Deke shares a special Valentine’s themed project in Illustrator.
In this week’s Deke’s Techniques video, Deke McClelland takes an Adobe Photoshop journey into the eye-bending world of op art, creating a ’60s-inspired twist and bulge of checkerboard contortion. You won’t need a sample file or unsuspecting model to follow along with this one—just Photoshop, some black and white pixels, and a love of (and visual tolerance for) optical illusion.
The project starts with a simple square document, created in the Grayscale color mode to keep the high-resolution file manageable. (You won’t need any colors, so no sense making room for them.)
Next, Deke creates a 2 x 2 checker pattern by using the Rectangular Marquee tool set to a fixed size that’s equal to one-quarter of the total image. Once the upper-left square is filled with black, you can drag a copy to the lower-right corner by pressing the Alt (Option) key while you drag.
With the basic unit of the pattern complete, you can turn it into a reusable Photoshop pattern by choosing Edit > Define Pattern. In this case, Deke aptly named it Checkers:
Deke then applies the Checkers pattern to a new blank 4800 x 3000 document. Click the black/white icon at the bottom of the Layers panel to make a new Adjustment Layer and choose Pattern. Then choose your Checkers pattern from the available patterns and set it to 50 percent to fill the document with small squares.
Saving the pattern layer as a Smart Object allows you to warp it nondestructively with the Transform command. Choose the Warp icon from the options bar and set it to Inflate from the Warp pop-up menu. Then set the Bend to -100. The checkerboard is pinched inward:
The pinching motion of the Inflate transformation has pulled the pattern away from the edges. Deke adds more checkers to the outer edges by opening the Smart Object and doubling its size.
Deke then creates the round, prominent part of the illusion by applying the Spherize filter to a circle selection in the middle of the image.
To achieve the final effect, Deke applies two more doses of the Spherize filter, and the result is a swirling, bulging, some might say hypnotizing bit of Photoshop-created op art.
For lynda.com members, Deke’s got another exclusive video called Op art experiment 1b: Rounded Windows, in which he turns a flat collection of rectangles into a curving wall of optical mystery.
Deke will be back next week with another mind-bending technique.
This week’s Deke’s Techniques video celebrates the New Year by showing you how to create a one-page full-year calendar in Illustrator. The idea for using hexagons in calendars was originally inspired by the 2010 oeuvre of illustrator Germán Ariel Berra, but it seems Gérman has moved on from calendars in the past few years, so it’s Deke’s Techniques and Illustrator to the rescue for 2013.
The project begins by drawing a simple hexagon in the upper-left area of the artboard by using a shape tool set to a Radius of 98 points and a Sides value of 6 (naturally.)
By default, Illustrator draws its hexagons with a flat side up, so Deke uses the Rotate tool to turn the shape 30 degrees:
Since this particular hexagon will eventually become the month of February, Deke sets the fill to medium blue, which he’s chosen to represent that month. He thickens the stroke to 2 points and sets it to white.
Note: You can choose any color you like, as long as it says “February” to you. I’m using the colors that have been stuck in my head since my parents gave me my first cool calendar (with stickers on the back!), likely to have been created in the early ’70s. It just so happens I like medium blue for February, too:
Next, Deke duplicates the first stroke and applies a Transform effect at 95 percent scale to give the hexagon a double ring.
With the entire hexagon selected, Deke then drags duplicates into place to complete a row of four. The trick here is to click and drag the upper-left point of the original hexagon until you sense it snap into place on the right, holding down the Alt key to create a duplicate. After that, you can use Ctrl+D (Command+D) to create duplicates in the correct places. He then sets the colors for March through May accordingly.
Next, he selects three of the four hexagons, and drags a duplicate row into place. These shapes are colored for June and July 2013 respectively. (Deke and I apparently agree that July is red.)
Next, the appropriate number of hexagons are copied into place and colored appropriately to finish the year.
Next, Deke creates the February month title by first clicking inside the “February” hexagon (not on the edge).
To align the month properly, Deke switches to the Outline view, turns on the shape centers, and then aligns the February text to the center of its hexagon and drags out copies to the next three months. After changing the text appropriately for each month, he selects all the month text and uses the Move tool to set them at a distance of –41 points. This way all the months are centered properly and equally positioned from the top of their respective hexagons.
If you’re creating this project on your own, rather than using Deke’s files, you can drag copies of the months out to the other cells, position them using the same commands, and retype each of the names. (A year of Februaries would be short and cold and full of too many Valentine’s Days.)
To make the days of the week and the days, Deke has a very smart and efficient approach that he demonstrates in the second video of the week. (It’s like having two Tuesdays in one week; only it’s Wednesday!) In this video, you’ll see how creating a table of text allows you to quickly adjust each month for its appropriate number of days and starting day of the week. Here’s my completed calendar with my own type choices and color connotations.
For members of lynda.com, there’s yet another exclusive movie this week called Branding your calendar with a field of logos, in which Deke shows you how to create a pattern of your logo to fill out the rest of the calendar.
Deke will be back with another technique next week. Happy Hexagonal New Year!
In this week’s free Deke’s Techniques, Deke McClelland takes the beautiful glowing jewel he created in last week’s technique, and turns it into a beautiful glowing panic button. Because this time of year, if you’re going to freak out, you want it to be pretty and decorative.
Deke begins the project where we left off last week, with the glowing cabochon he created out of pure Photoshop pixels. Since few people wear panic buttons around their necks (although that would be handy), the first step is to turn off the gold necklace layer. The result is that the glimmering jewel becomes a glowing button.
Next, Deke selects the original ellipse that represents the amber part of the button and gives it a white-to-transparent gradient fill.
Using the Transform command, he moves the new gradient-filled elipse up to create a highlight on the top side of the button, which starts to distinguish it from its jewel predecessor.
Deke blends in the highlight by increasing the ellipse’s Feather value to 5 pixels and reducing the Opacity of the adjustment layer to 80 percent.
The text begins life as a simple text layer, to which Deke first applies a Radial Blur so that the edges of the outer letters start to distort.
Then, Deke increases the effect by adjusting the black and white points of the Underlying Layer style. The result is a full-fledged Panic button.
But really, is that what we want to think about this time of year? Panicking? The beauty of this effect is that everything is editable, including the text. So a simple change of letters, hue adjustment, and layer style fine-tuning gives us a button that immediately makes any day a holiday. Now that’s a cure for the holiday panic!
Deke will be back next week with another free technique.
Although tile patterns have been around since the early days, Adobe Illustrator CS6 has a new Pattern Options panel that helps you wrangle your repeating pattern into place. In this week’s free Deke’s Techniques episode, Deke shows you how to use this feature to create a seamless pattern of arithmetically defined spirals (those same spirals he showed you how to create in last week’s free movie.)
Deke begins by arranging the spirals in a cluster that will become the core pattern element, and showing you a few tips for getting that cluster arranged. Once you’ve got your base the way you want it, select it and choose Object > Pattern > Make to enter pattern-editing mode in the new panel.
Deke demonstrates how the panel gives you options for the type of tile you want (a standard grid, an offset brick pattern, or a hexagonally repeating tile) as well as how you want the pattern to offset and overlap. The result is this sea of swirls:
Thanks to the pattern maker’s ability to make copies, this can easily be duplicated with different colors, overlaps, sizing, and more, like this:
There are a couple of qualities to this panel that may not be intuitive (like when to click Done versus when to hit the Esc key). Deke explains all within this week’s episode.
If you’re not working in Illustrator CS6 yet, but would like to explore tile patterns, Deke also has an exclusive movie for lynda.com members this week called Making a hex pattern in CS5 and earlier that shows you how to explore working with tiles in earlier versions of Illustrator.
In this week’s Deke’s Techniques tutorial, Deke will guide you through the process of making a shiny superhero shield in Adobe Illustrator, festooned with all the obligatory gloriousness such an object would need to ward off the most nefarious of villains. But before you can add all that freedom-loving, evil-thwarting sparkle, you’ll need to create the properly aligned shape of the shield first. This is one of those things that Illustrator makes slightly more complicated than you might expect. Never fear, you’ve got your Illustrator-superhero mentor Captain Deke at your side.
Like any good hero’s journey, this adventure begins with a quest for the elusive center of a standard American-shaped star. Unfortunately, Illustrator’s Find Center command doesn’t help because it only reveals the center of the star’s rectangular bounding box, which—due to the laws of geometry—isn’t the center of the actual star. Undaunted, you’ll have to deconstruct your star, find the center of its five inner points, and then combine that center with a copy of your original star (sound confusing? It’s not that bad—after turning Smart Guides on, Deke walks you through it step by step starting at 1:20 in the movie above). After you’ve overcome that challenge, your path to adding the concentric circles that round out the shape is clear.
Once you’ve got the shape, armed with the Flare tool and an emboss effect, you can make your shield properly reflect light (and repel evil villains).
With this technique under your belt, you’ll be well on your way to becoming your own Illustrator superhero.
Happy Fourth of July (a day early) to all our friends in the United States! Stay tuned as Deke will be back next week with another festive technique.
This week’s free Deke’s Techniques episode demonstrates a (fairly ridiculous) method for shrinking a model’s head while leaving his body in standard proportion. Although, at first glance, this seems like another wacky manifestation of Deke’s fertile imagination (or homage to David Byrne’s Stop Making Sense big white suit), there are legitimate reasons (and skills) involved in learning how to transform one part of an image while matching the remaining parts.
Ultimately, Deke shows you how to take the normally proportioned model on the left, shrink his head, and realign his shoulders to match. Using a combination of layer mechanics, the Free Transform command, and of course the tricky, but oh-so-useful Liquify command, the effect is seamless:
The fact is, reducing one part of an image while making the remaining part match up is an exercise in careful use of the Liquify command. In this tutorial, Deke will show you how to work within the Liquify dialog box so that you can accurately see how the edges are going to match up between the layers. In order to keep the suit’s pinstripes aligned, you need to know how to employ the power that resides within the Liquify dialog box. It’s not a quick process, but the result is both whimsical and demonstrative of real Photoshop skill.
If you’re feeling contrary, and you’re a member of lynda.com, Deke also has a member-exclusive new movie this week for increasing the size of a model’s head.
Deke will be back with another free technique next week.
