Colleen’s posting about Mordy’s license plate thing reminded me of a timely newsworthy conversation I’d had with Mordy a few months ago that went something like this:
Me: Mordy, hi.
Mordy: Hi, Deke.
Me: Hey, just curious. Why is it Adobe Illustrator lacks the ability to make interlocking objects?
Mordy: Crazy. Lay it on me.
Me: You know, like the Olympic rings. I want one Olympic ring to loop into, around, and back out of another. Like in the Olympics.
Mordy: Yeah, Illustrator does that.
Me: Which involves one ring being partially in front of and in back of its neighbors.
Mordy: Yeah, Illustrator does that.
Me: Which is, of course, currently impossible.
Mordy: Except for, Illustrator does that.
Me: I don’t think you quite understand. One ring goes down the bunny hole . . .
Mordy: Which Illustrator does.
Me: . . . and the other goes back up . . .
Mrody: Which Illustrator does.
Me: . . . the other bunny hole.
Mordy: It’s called Live Paint.
And then Mordy proceeded to expand my mind. Oh, he didn’t show me rings; that’s not his sport. But here’s what I took away from the conversation:
Step one: Start with some Olympic-like rings
Draw some rings like the ones below. Notice how the blue ring completely covers the yellow one, which completely covers the black one, and so on. This is a byproduct of standard vector-based stacking order. (To download such a file for your own use, right-click Almost_Olympic.ai and choose Download or Save.)
Step two: Convert the rings to a Live Paint group
Select all the rings. Then get the live paint bucket tool (the one that looks like a bucket of paint). If you can’t find it, press the K key. Press the right-arrow key until the color above the bucket appears as yellow. And click the lower of the two areas where the yellow ring intersects the blue one (as demonstrated below). You now have a live paint group.
Step three: Stroke the edges
Double-click the paint bucket icon in the toolbox to bring up the Live Paint Bucket Options dialog box. Turn on the Paint Strokes check box and click OK. Then move your cursor over the right side of the yellow-over-blue region so you get a brush cursor. Use the arrow keys to advance the color above the cursor to black. Click to change the right stroke to black. Do the same for the left stroke (as seen below).
Step four: Set the interrupting strokes to None
Hover your cursor on the stroke below the boxed-in yellow area. Press the left arrow key a few times to set the swatch above the cursor to None (the red slash) and click to set the make the top stroke invisible. Then click the stroke above (as pictured below) to make it disappear as well. As if by magic, the blue ring now passes into, around, and back out of the yellow one.
Step five: Fill some more intersections
Click with black, green, and red, respectively, inside each of the lower areas where the remaining rings intersect (per the illustration below).
Step six: Trace the good strokes
You now have three new regions of overlapping color, which I’ll call (from left to right) black-over-yellow, green-over-black, and red-over-green. Each has two areas that need stroking with the brush variation of the paint bucket tool (the one we first encountered in Step three), as follows:
- Set the stroke attributes to black with a 4-point weight.
- Stroke above and below the black-over-yellow region.
- Stroke to the left and right of the green-over-black region.
- Stroke above and below the red-over-green region.
The final action appears below.
Step seven: Set the bad strokes to None
Now to make the strokes that interrupt the overlapping rings invisible. Still armed with the brush variation of the paint bucket, do the following:
- Set the stroke attribute to None.
- Click to the left and right of the black-over-yellow region.
- Click above and below the green-over-black region.
- Click to the left and right of the red-over-green region.
The image below shows the final click.
Step eight: Select all, stroke white
Now to switch all the black strokes for white. Press V to get the standard black-arrow selection tool. Click on the rings to select them. Then change the stroke color to white and the weight to 2-point. The result is the picture-perfect interlocking rings shown below.
The great thing about this technique (adjusted from its original form based on Mordy’s input) is that it results in a very close approximation of true interlocking objects. Try this: Get the white-arrow direct selection tool. Alt-marquee (or Option-marquee) the right edges of the red ring, to get the whole thing, then drag it to a new location. Below is my favorite variation, the large medallion-style Olympic necklace. Note that big modifications may results in stray strokes and gaps. Fix them with the live paint bucket tool.
So, hey, 2x-thx Mordy!
If while trying to follow along with these steps, you have a hitch in your get-along, toss us a comment and I’ll try to get back to you. Remember, there are no stupid questions. Well, yes there are. The question that started off this article, for example. But ask ‘em anyway.
And don’t forget to keep the Olympic spirit alive and stuff. Cuz it’s so important that you do. For the children. And remember, Free Tibet! (With the purchase of another Tibet of equal or greater value.)
This is so great.
I always wanted to do intertwining designs like those in illuminated manuscripts, and it always seemed like something Illustrator should do. I’ve used Illustrator since the 88 version, and it just seemed to be something really obvious that got left out. Thanks for figuring it out for me. And thanks to Mordy, too. I can’t wait to try it.
Also, I can’t thank you enough nor contain my enthusiasm for the Lynda.com videos. I had failed to learn newer features since my company switched from Macs to PCs years ago and also decided we didn’t need Photoshop or Illustrator any more (because what could we possibly need to do that we couldn’t do in freakin’ PowerPoint?). Don’t get me started. So I limped along with some really old Windows versions at work until I could afford to buy CS3 for my Mac at home. To get up to speed on all the new features I’d been missing out on, I signed up at Lynda.com. I’ve learned an incredible amount of stuff in a short time, and have also been inspired and greatly entertained in the process.
Now that I’m almost done with all the Illustrator videos, I was wondering where I was going to get my Deke humor fix. So I’m really happy to find out that you also have a Podcast. I look forward to watching each one as soon as it becomes available.
Thanks!
Cindy Loyd
Great Indeed!
I learned about a CS3 tool that I didn’t know about before ^^. When I see these tutorials, I always first look at the end result picture and think “how would I do this?” I figure I’d make each ring from two half circles. From there, make the bottom blue half position under the yellow ring and the top half position over the yellow.
If I had Illustrator at home I’d try to whip it up… maybe at school I’ll find the time to~ if there’s a way I can submit it here some how…
Almost Olympic.ai Link
Not to be a pain in the ass, whiney, crybaby, beotch, but what’s up with this!
(To download such a file for your own use, scroll to the end of this doc and click the “Almost-Olympic.ai” link.)
I don’t think there is a link. Not even an “almost”..
Maybe Darwin knows where it is.
Thanks for the fun and games
Colleen, you are the Queen Bee.
L
The link is above your comment
There was a problem with the link, which is fixed now. And I went ahead and added another link in the context of the article so you don’t have to scroll down.
For some reason, both IE and Safari want to change the extension, so you may need to reset it to “.ai” after downloading to open the file in Illustrator.
Oh, and don’t worry. I like “whiney, crybaby, beotch.” It makes me feel . . . like I’m talking to me!
The link and pahh-henis
So WTF. Safari decides to change the file to .ps
Thanks for the corrected link.
man computers are, like, sooo stooopid.
One more thing, I just read the thread on censorsh*t ooops.
Reminds me of the late George Carlin’s list of words ya can’t say.
Maybe something like the Inconclastic Controversy. (see Byzantine Icons)
Fortunately the more enlightened usually find a way around this sort of myopia.
A friend of mine (who is a Saab expert tech) likes to use the euphemism of Pah Henis. It never fails to elicit a chuckle.
I like Pah Henis
A friend of mine pointed out the most obvious euphemism for a robot: Nuts and bolts. Ug. So obvious!
Oh great, now the penis discussion has carried over into the hallowed Olympic rings. It’s like an insidious virus, that penis. By trying to kill it, my censors have only made it stronger.
I remember that conversation…
About the rings. Yeah. Funny thing. It’s all true—exactly how Deke told the story…
By the way, no need to delete those stroke segments—you can just set their color to none. That way, if you do end up moving the rings around, they update, etc.
I am considering doing a 3-part series on Live Paint. Alas, that feature is sooooooo misunderstood.
Mordy Golding
http://rwillustrator.blogspot.com
Olympic rings update
Mordy’s absolutely right. Per his brilliant insight, I’ve adjusted Steps 4 and 7 as well as the conclusion. It makes a big difference in terms of the flexibility of the technique. If the figures don’t match my descriptions, refresh.
I bow to you, Live Paint Master! And, yeah, thanks for making me work an extra hour on Sunday. But I guess that’s okay cuz you posted your comment on Saturday(!). Please, Lord, don’t be smitin’.
After sundown Deke, after sundown…
Besides, we all know that the live paint geeks only come out at night…
Mordy Golding
http://rwillustrator.blogspot.com
Thanks so much for this
I’ve been doing this another way for too long - effectively: Duplicate Layer (one for fills, one for strokes); Pathfinder>Divide; ungroup; recolor; regroup; pray you never have to reposition any elements…
This way is ace. It’s fast and flexible. I never realized Live Paint could be used for this type of work. Now I’m going to spend the rest of the afternoon drawing Celtic knots! Thanks again.
I wept tears of joy softly into my pillow…
I’ve been doing battle with interlocking shapes for so long… so many years of wanton vector carnage only to find this incredibly easy solution.
Mordy and Deke need to take a trip to the middle east. We’d have that whole mess sorted out in a week.
Gradient Mesh Feedback
Dear Obiwan,
This is the most recent Illustrator article I could find to post this comment. (DekePod has rather become PhotoshopPod lately… not necessarily a bad thing in my book but I think there is a bit more to computer graphics…. I heard that “Amen!”, Mordy). Variety ( = Illustrator Vectory) is the spice of life.
Your work on Gradient Mesh is stunning. I just reviewed your stuff on this on Lynda.com and… Wow! The possibilities you demonstrated amaze me! My jaw is warped and liquified somewhere on the floor and I’m sure I will eventually get around to recovering it sometime or other :-) Thanks enormously (think Amazon + Deke head = supercallafragalisticespe alladociously!) for that. Totally wicked cool dude! :-)
I hope Gradient Mesh makes it into your new Illustrator 1-on-1 book so I can easily work it into my classes… at least as a “Pearl of Wisdom” section, if not as part of a stunning chapter on gradients and patterns.
where did my jaw go anyway?,
Thomas
Thomas Benner
The Art Institute of Austin
I hear ya
And you know, I’m a big Illustrator fan. Well, admirer. Well, masochistic slave boy. B/c let’s face it, no relationship with Illustrator is altogether equitable.
The Illustrator dekePods have had lower views than the Photoshop ones, so at the moment we’re rather pandering to the masses. But we’ll come back to it.
Gradient Mesh will be part of the book. At least, it’s part of the 50-page outline . . .
Great stuff!
Thanks tons both of you :)
INTERLOCKING TEXT
thanks for the article on the rings - i have tried this in illustrator cs4 and it was fine.
however im trying to do the same with overlapping text and get the following message when selecting the paint bucket -
‘the selection contains objects that cannot be converted.live paint groups can only contain paths and compound paths.clipping paths are not allowed’
ive tried the help for converting text but most of the options are greyed out.
could anyone please tell me where i am going wrong before i get in the bath with the toaster
[ only kidding ]
Convert the text to outlines
Looks like all you have to do is convert the text to editable paths.
Go to the Type menu and choose the Create Outlines command.
ive tried the help for
ive tried the help for converting text but most of the options are greyed out.
could anyone please tell me where i am going wrong before i get in the bath with the toaster
accelerated bsn - loan forgiveness for teachers - loan deferment - student loan deferment
Illustrator any more
Illustrator any more (because what could we possibly need to do that we couldn’t do in freakin’ PowerPoint?). Don’t get me started. So I limped along with some really old Windows versions at work until I could afford to buy CS3 for my Mac at home. To get up to speed on all the new features I’d been missing out on!
You share very interesting
You share very interesting tutorial. I work on live paint for 2 years and I did not face any kind of experience like this to make these rings. Now after read your tutorial my mind is now change. I will remake my design portfolio and make rings in it and also change my logo now.
Nice…post
Design Careers, Freeware Software, Engagement Rings
This site has amazing information about painting. I am visiting this website first time & it has strong contents. Any information in future will be appreciated. I will be back after doing some work. Thanks for nice post.
well done to give the
well done to give the experience on live paint.
Danforth Diamond offers engagement rings available in Diamonds,
platinum, palladium and gold and all are solid metal. Look for the HARMONY heart logo throughout our web site when searching for that perfect engagement ring or wedding band.
http://www.danforthdiamond.com
I think that the marriage
I think that the marriage between two sexes should not be approved because the “bride” could not have the joy of getting the green diamond ring , that ring that makes the moment so great and it is a symbol of love .
Photoshop CS5 Tutorials thgrough Lynda
Hi Deke,
I recently purchased an online sunbscription to Lyndia so that I could view your lasted Photoshop CS5 Tutorilas online.
However right from the start of your tutorial you ask us to open a folder full of “welcome psd”
and “Dekekeys” etc ? which you assume we recieved with the DVD (?) (What DVD?)
I was very dissappointed because I felt I had been betrayed and not given an important element of the tutorials because I went through Lynda.com
Is there anyway you could email me those files so that your tutorials make sense to me and I can be included?
I have also put this complaint through to Lynda.com
look forward to hearing from you
Darrell Brown wildvision1@gmail.com
Wonderful peoples come with
Wonderful people come with fantastic talent and I need to say that the webmaster of this blog is actually talented and a great individual too. I do appreciate the difficult work which has been completed on this blog. Me and my son both are producing a PowerPoint presentation on this topic and the pictures and content both are really useful to make our presentation far more powerful. Congratulations for your good work! And please maintain the exact same degree of excellence, with my blessings.
Photoshop cs5 1on1 lesson files.
I have a membership to Lynda.com via my school but can you tell me where I can find the Photoshop 1on1 lesson files. Is this something I have to purchase separately?
You have to be a premium member
To download the exercise files.
Click this link to explore your options.
Weird off-topic question…
Deke, I just found you the other day on Lynda.com and I greatly enjoyed the lessons I have reviewed so far. My weird question is when watching your lesson, it started off with you in the sound booth recording yourself. The audio of your voice was amazing. What was the headset that you were using? I’m trying to find a nice headset to record my voice and the one I just bought isn’t very good. Thanks and I can’t wait to dive into more lessons!
I am expressly forbidden to divulge that secret
Nah, just kidding.
Offhand, I don’t know the brand of headsets we use. But I can tell you, it’s not just the headset. The folks at lynda.com have spent squillions refining the audio process, which relies on a sequence of hardware, software, and—-probably most importantly—-isolated recording booths.
Plus, LDC has spent a lot of energy mastering the sampling and compression. I’m not sure we have it 100% figured out yet. There’s still some audio disconnect between the live-action and screencasts. But for a video-training company, you’d be amazed at how much sheer ingenuity this amazing band of people devote to audio.
So I guess ultimately, it’s proprietary. In fact, I’ve told you too much. Forgive me, but now I will have to kill you.
Guess it’s time to cash in my 401k and enjoy it then!
Thanks for the comments. I didn’t know that video was taken at Lynda. I thought it might have been your setup and would have known the details. I guess I’ll just have to keep looking around then to try to figue out a good audio setup.
Now off to my trip in Europe to enjoy my last few days!