Wrap a Ribbon Around a Sphere, Using 3D Revolve
Tutorial Details
- Program: Adobe Illustrator CS2
- Difficulty: Intermediate
- Estimated Completion Time: 30 mins
Final Product What You'll Be Creating
In this Quick Tip, you’ll create a Symbol, which you will then map to a 3D globe. The result looks like a ribbon wrapped around a hollow sphere. Let’s get started!
Step 1
Click once with the Rectangle tool (M) and draw a thin rectangle, about 300px x 20px.
Step 2
Switch to the Selection tool (V), then press Return to bring up the Move dialog box. Position the rectangle down 30px and press Copy. Press Command + D four times so you end up with six rectangles
Step 3
Select all the rectangles. Double-click the Shear tool, and enter an angle of 6 degrees on a vertical axis.
Step 4
Draw a rectangle over the sheared objects so that its corners align as in the image below.
Step 5
Select all, then Crop, using the Pathfinder panel.
Step 6
Drag the resulting objects onto the Symbols panel to create a new symbol.
Step 7
Draw a perfect circle using the Ellipse tool (L). It can be any color. Next, draw a line with the Line Segment tool (Backslash) that dissects the circle vertically (turn on Smart Guides to position it exactly down the middle). Select both the circle and the line and click Divide in the Pathfinder panel. Delete the left half of the circle.
Step 8
With the half-circle selected, go to Effect > 3D > Revolve. In the dialog box, enter 360 degrees to form a sphere.
Step 9
While still in the 3d Revolve Options dialog box, click the Map Art button. Choose your symbol from the drop-down menu at the top left, then click Scale to Fit, Shade Artwork and Invisible Geometry.
Conclusion
You’re done! But if you want to modify the sphere and/or the lighting, go to the Appearance panel and click the 3D Revolve effect to bring up the Options dialog again. Experiment with different rotations and shading to create some interesting results.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Cheryl Graham
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Vectortuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
FIRST! Yay!
Ok
Bin looking for how to do this for years now….Thanx for the tut.
thanks for this tutorial, really useful!
i did have one issue – it all worked except that on my sphere it doesn’t show through to the other side like yours does. it’s solid white instead of showing the “inside”. i followed the steps pretty carefully – is there anything i may have missed?
If backside of you spere is not visible try to uncheck “shade artwork” box – that should do.
Sarah, I think you forgot to check ‘Invisible geometry’. Cheryl, nice tut by the way, thanks!
I did check ‘invisible geometry’. (I went back over it three or four times to see if I could figure it out).
(i’m using cs4. maybe i’ll try again from scratch.)
Very handy tutorial!
@Sarah – Make sure that your shape(half circle) does not have a stroke. That’s it.
Make sure that the shape that you used as a symbol doesn’t have a white fill.
Cheryl what can you do about the aliasing? The thumbnail looks very smooth, whereas the “what you’ll be creating” and the “final result” are heavily aliased. It doesn’t appear to be increasing the number of blend steps, and I’m at a loss.
mcneebs, that is a very good question. It does appear that Illustrator handles the aliasing better in some areas than in others. Places where colors overlap, for instance. The rotation angle seems to affect it as well, which is why the green sphere in the preview looks better than the blue. I will try to find an answer for you!
Great neat tutorial, Cheryl! It’s a very tidy result. More related 3D effects can be found in this blog post by PixelRockit: http://pixelrockit.com/create-stylish-3d-shapes-with-adobe-illustrator/
With regards to the anti-aliasing issue, it’s to do with how Illustrator is producing the shading effect in 2D vector. The ribbon isn’t a single object with perfectly matching radial/linear fills, nor gradient meshes. Instead (and to cater for more complex geometry), it’s layering multiple flat fills which are clipped to shape. Due to how Illustrator’s anti-aliasing works, if you stack multiple copies of the same vector shape on top of each other, the edge becomes increasingly “sharper”.
You can examine how the 3D artwork is constructed by selecting the resultant object in this tutorial and opting for Object > Expand Appearance. (Try switching to View > Outline)
It’s possible to easily replicate this anti-aliasing factor by drawing a rectangle (black fill, no stroke color), rotating it 15 degrees (the edges should be nicely anti-aliased), copying and then pasting in front (Edit > Paste in Front) multiple times.
This anti-aliasing factor is no problem when it comes to printing the result. If, however, you want this result for on-screen work, first rasterize it either using Object > Rasterize or the live Effect equivalent, in either case ensuring that the anti-aliasing option is correctly set.
Hope this is of help!
Great tutorial for people who’s looking to learn more about the 3D tools in Illustrator! :)
Nice one. luvin illustrator more n more
Haha I guess Cheryl is one of the few designers who hasn’t missed geometry classes :D
Nice wrapping!
Like it!
LMAO!
I’ve been looking for something like this for the past 3 months! I’ll have to try it on other things. Cylinders for starters
Good and simple tutorial, and very practical.
Very nice application of the 3D tools. Totally new to me. Thanks a lot for sharing
nice and easy, thanks!
preety cool stuff
thanks
Its great!! Thanks a lot!
good and simple tutorial :)
—————
kreatif – tworzenie stron www, stron flashowych, prac do druku i grafik komputerowych
very good! thx~
Thanks for this :D
Great tut. I have one question, but i am not sure how to define it. I’ll try:
How can i get editable object from this 3d sphere. Something like “apply” transform and get normal editable 2d object?
Thanx
Edie,
go to Object > Expand Appearance and You`ll get an editable 2D object, so You can modify it the way You want.
Thank you Nikola
Pozdrav :)
Nice..simple and easy tutorials..Tnx..=)
this is really awesome tutorial, i hope there will be more tutorial like this ;)
Nice. I think this could be used for some other fun things too. I will try changing every other strip of green to a different color and make it a double rainbow.
great tutorial.
love it simple and easy to follow.
Nice tut, Cheryl. I’m sure i will use this. Keep up the good work…
i don’t see any images :(
wow! This is awesome! simple and useful tehnique! Thanks for share!
Wow, simply amazing…..so…simple yet so functional!
Love this effect, i will have a lot of fun with this! simple and effective, logo heaven. don’t often use the 3d tool nice to see some use for it now. thanks for the tut
i love you for this tutorial, billion thanks..
Excellent………….!!!!
Wow great stuff!
I’ve unchecked invisible geometry and shading from mine.
Looks great now.
Thanks for sharing!
thank you for this very nice and simple tutorial
great effect with a minimum of effort!
It’s my first time I followed a tutorial of an Illustrator, I used to scare of it as I used to with Photoshop. I’m getting confident and liking it. There are areas you haven’t shown, that’s why it took me several hours to finish it, but done it finally, I’m proud.
Thanks..
Great tutorial….good work…never thought i’d love illustrator but it’s great..thanks.
wow! and the end result is so great, thanks a lot!
Thanks. It is a really very nice 3d tutorial.
it worked perfect for me.
thanks a lot.
Can’t believe this but, I’m stuck at Step 4. I can’t get straight and align retangle that edges meet with sheared line edges. I applied same values as you did.
@latetzki…. try more like 5.75 degrees …it will fit much better.
you can always adjust your mapping in the map art to fit.
Thank you Dude, very accessible described tutorial.
Thanks for that, and good luck in your new tutorials. )
Great! Thanks for sharing :)
Great! For these tutorial you share with us.