Creating Omspace 3D cylinder graphic in Illustrator
03.06.08Posted by: Jayhan Sim

When entering Omspace, a weblog of Kenny Ren, immediately I was attracted by the huge and interesting 3D graphic header. Then, I wonder how to create the 3D Cylinder looking graphic in Illustrator. Well, actually it’s quite simple to achieve and I have plenty of fun too in the process.
To do this tutorial, Adobe Illustrator CS or above is a must, because we need to use the 3D function and if I’m not mistaken only Illustrator version from CS and above support it. Before preceed, please take a look at the preview below on what we are going to do and learn. Besides 3D, we will touch on creating graphic symbols as well as the 3D Map Art function.

Symbol 1: Top Surface
First, start off by creating the Top Surface graphic symbol. By using the Ellipse Tool, draw out a perfect circle (press Shift while dragging). Then go to Object > Transform > Scale to open up the Scale windows option. Scale the circle by 80% Uniform and click “Copy”. A new smaller circle is created. Then duplicate it (Crtl-D) several times until you have a total of 6 circles.
After that, by referencing Omspace 3D cylinder, scale and move each of the circle to look as closer as Omspace’s. After that, color each circle with color code shown in the picture below.

Looking back at the Omspace 3D cylinder again, there is a white “shine” on the 2nd smallest circle which we are going to create it now. By using the Rectangular Tool, draw out a small rectangular. Then expand the bottom width of the rectangular evenly to left and right.
Place the rectangular on top of the 2nd circle, below the 1st circle. Duplicate the 2nd circle and select it with the rectangular and hit “Divide” on the Pathfinder Palette (Actually, you can use “Intersect” for faster result). Then, ungroup it and delete the unwanted part. Then color the “shine” with white color.

Symbol 2: Cylinder Body
The “Top Surface” is finished! Now proceed to “Cylinder Body”. First, select the Rectangular Grid Tool, click on the canvas once to toggle the tool options. Then fill in the options like example shown below. Click “OK” to finish.

Ungroup the Rectangular Grid created just now and “Divide” it using the Pathfinder palette. Ungroup it again. Now the grid should become 3 individual rectangulars that placed side by side from top to bottom. Then, color each of the rectangular with color code shown below.

Drag “Top Surface” & “Cylinder Body” to Symbols Palette
Finally, two symbols are done. Now, drag them into the Symbols palette. Name them “Top Surface” and “Cylinder Body” respectively. Ok, now the part 1 of the tutorial is now completed. Next, we are going to make the 3D cylinder and map the 2 symbol graphics to it!

Creating 3D cylinder and “Map Art”
You can save the document, hide the graphics that created just now and create a new layer to continue. Now, create a circle again with fill gray color only. By selecting the circle created just now, go to Effects > 3D > and select “Extrude & Bevel…”. Fill in the options shown in picture below. After this, click on the “Map Art” button to open up the Map Art window.

We are going to map the 2 graphic symbols to this 3D cylinder. In the Surface 1, map it with “Top Surface” symbol. Remember to click “Scale to Fit” and tick “Invisible Geometry”. Skip the Surface 2 and proceed with Surface 3. Map the Surface 3 with “Cylinder Body”. Click the “Scale to Fit” too. Well, you can tick Preview to see the transformation of the 3D cylinder.

From the boring gray circle, it becomes an interesting 3D cylinder graphic! I think it looks really close to what’s on Omspace. Well, it’s not finish yet. Duplicate the 3D cylinder to the side as backup. Then select it and click “Expand Appearance” at Object menu. Ungroup it for several times until the Top Surface and Cylinder Body separates.
In this final step, create a rounder rectangular with black fill color and place it at right part of the cylinder. Adjust its transparency to 15% and move it below the Top Surface.

Finally finish! Looks how beauty and cute it is. The 3D and Map Art function are really useful and fun to use. You can use it to create many other cool and interesting 3D graphics with different graphic symbols, extrude thickness and many other shapes. Possibility is endless here.

End Note
Basically this is the end of this tutorial. You will notice that the program I use is compatible to any web host. Hope you find it useful and have fun experimenting with it.
And another thing, I almost exceed the bandwidth allowed last month, so from now on I will host the pictures with Photobucket. It’s nice to have a reliable host, you can check some web hosting companies for your blog.



Wow! Very nice & extensive tutorial here. I’ll bet it will be very popular on the web this month
June 5th, 2008 at 12:10 pmhehehehe….I am new here…wanna meet designer ^^
I love design too….going to study interior design at sunway ^^
Nice to meet u….
From : PrincessBB
June 5th, 2008 at 5:35 pmBbyinlife.blogspot.com
Nice tutorial! Thanks..
June 6th, 2008 at 6:49 am[...] Creating Omspace 3D cylinder graphic in Illustrator By using the Ellipse Tool, draw out a perfect circle (press Shift while dragging). Then go to Object > Transform > Scale to open up the Scale windows option. Scale the circle by 80% Uniform and click “Copy”. A new smaller circle is … [...]
June 6th, 2008 at 9:32 amThanks Eli, PrincessBB and macadamia
. And nice to meet you too PrincessBB
June 6th, 2008 at 10:05 amExcellent Tutorial jayhan! That’s a wonderful effect!
June 6th, 2008 at 11:14 pmI want to learn Illustrator so much but my laptop don’t have enough RAM. So I have to wait a little longer. It’s a nice cylinder. And it’s cute.
June 7th, 2008 at 1:57 pmWhat is this Omspace?? How to make it look like that after you dublicated the 6 smaller circles??
June 10th, 2008 at 1:50 amThanks David and Fath. Lezzie, Omspace is the blog that i refer in this tutorial. And i assume you are talking about Step 2. Well just move the each circles with arrow key will do
June 11th, 2008 at 2:20 pmGreat tutorial, the end result is nice and clean.
June 12th, 2008 at 2:45 amnice tutorial. usually i seldom use the 3d function in Ai
June 15th, 2008 at 11:12 pmNice tutorial. Thank you!
June 17th, 2008 at 2:21 pmThanks everyone!
I also seldom use the 3D function in AI. But it is a very cool tool to explore!
June 21st, 2008 at 10:47 pm[...] 9. Creating Omspace 3D cylinder graphic in Illustrator [...]
March 9th, 2009 at 10:38 am[...] 9. Объемные цветные цилиндры: [...]
March 10th, 2009 at 9:36 pm[...] 9. Объемные цветные цилиндры: [...]
March 11th, 2009 at 9:35 pm[...] Tutorial Link [...]
March 19th, 2009 at 3:23 am[...] Creating Omspace 3D cylinder graphic in Illustrator This tutorial shows you how to create cylindrical shapes using the Extrude & Bevel Tool with [...]
March 20th, 2009 at 2:58 pm[...] 9. Creating Omspace 3D cylinder graphic in Illustrator [...]
March 20th, 2009 at 5:30 pmNice and informative site. Keep up the good work.
May 9th, 2009 at 9:30 pm[...] Creating Omspace 3D cylinder graphic in Illustrator In this tutorial, you will create good-looking 3D cylinders and symbols. [...]
June 16th, 2009 at 11:43 pm[...] Creating Omspace 3D cylinder graphic in Illustrator In this tutorial, you will create good-looking 3D cylinders and symbols. [...]
June 18th, 2009 at 4:19 am[...] Creating Omspace 3D cylinder graphic in Illustrator [...]
June 19th, 2009 at 9:19 am[...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Friday, June 19th, 2009 at 6:56 am and is filed under Illustrator Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]
June 19th, 2009 at 9:26 am[...] Creating Omspace 3D cylinder graphic in Illustrator In this tutorial, you will create good-looking 3D cylinders and symbols. [...]
August 31st, 2009 at 2:51 am[...] 34. Guide in Creating Omspace 3D Cylinder Graphic [...]
September 26th, 2009 at 7:45 pm[...] Creating Omspace 3D cylinder graphic in Illustrator In this tutorial, you will create good-looking 3D cylinders and symbols. [...]
October 23rd, 2009 at 11:49 pmNegged for dishing out serious advice.
December 14th, 2009 at 10:49 pm[...] Creating Omspace 3D cylinder graphic in Illustrator [...]
January 23rd, 2010 at 10:34 am[...] Creating Omspace 3D cylinder graphic in Illustrator [...]
January 26th, 2010 at 3:55 pmThis is so freaking cute!!! I have so many ideas running around my head where I can go with this serving as an inspiration for my mini project. I’ve been trying to design a logo somewhat like this for myself (more or less, in essence) and it did not come out as what I hope it would! I didn’t manage to get it looking right like yours did. Finally, I decided to use the professional services of an online logo design site instead (http://www.logodesignstation.com) and got the logo I wanted at an affordable price and fast too, within 24 hours. I did provide this link for reference and inspiration to my designer as I liked how yours look. I’m not going to design a logo without any professional help anytime soon although it’s fun. And enjoyable too. Thanks for posting this! xoxo
June 2nd, 2010 at 11:05 am[...] Creating Omspace 3D cylinder graphic in Illustrator In this tutorial, you will create good-looking 3D cylinders and symbols. [...]
June 5th, 2010 at 11:50 pmHey I just used tried this on CS4 and got the same result so CS5 is not needed like said above.
June 30th, 2010 at 1:41 am[...] Illustrator里的方法和技巧来制作一个逼真的可乐瓶.9. 做一个Illustrator圆 [...]
July 6th, 2010 at 11:41 am[...] Omspace 3d Cylinder Graphic [...]
July 13th, 2010 at 9:03 pmAdobe Illustrator has more features than its competitors ‘
August 11th, 2010 at 1:39 pmi use adobe illustrator a lot and i really love its great freatures:-.
September 30th, 2010 at 2:05 pm[...] Creating Omspace 3D cylinder graphic in Illustrator [...]
October 17th, 2010 at 2:19 pmin our office we use adobe illustrator very much.*-
October 17th, 2010 at 5:29 pm[...] Road Maps in Adobe Illustrator - Use the power of Illustrator to create cool D infographics - Creating Omspace D cylinder graphic in Illustrator - D Charts in Adobe Illustrator CS - D Graphs - How to make retro/futuristic curves in [...]
October 27th, 2010 at 12:22 am[...] Creating Omspace 3D cylinder graphic in Illustrator [...]
November 6th, 2010 at 2:26 amadboe illustrator is feature packed and i love all of its great features “”
November 7th, 2010 at 4:51 pm[...] Calendar Icon Working with 3D Objects and Transparencies to Make a Vector Cola Bottle Design Creating Omspace 3D cylinder graphic in Illustrator How to Make a Delicious Vector Orange in 9 Decisive Steps Craft a Delicious Chinese Food [...]
November 14th, 2010 at 11:56 am[...] Creating Omspace 3D cylinder graphic in Illustrator [...]
November 23rd, 2010 at 2:02 am[...] 9. Создание цилиндрических диаграмм [...]
January 11th, 2011 at 12:16 pm[...] a Boring Bar Graph into a 3D MasterpieceA Time to ShineCreating Road Maps in Adobe IllustratorCreating Omspace 3D Cylinder graphic in IllustratorCreate a Rotatable Globe in Adobe IllustratorCreate a 3D Push Pin and a Paper Note in IllustratorHow [...]
January 22nd, 2011 at 12:14 pm[...] 9. Criando Omspace cilindro gráfico 3D no Illustrator [...]
January 24th, 2011 at 7:30 pm[...] 9. Creating Omspace 3D cylinder graphic in Illustrator [...]
January 25th, 2011 at 1:22 am[...] 9. Creating Omspace 3D cylinder graphic in Illustrator [...]
March 12th, 2011 at 1:55 pm[...] Creating Omspace 3D cylinder graphic in Illustrator In this tutorial, you will create good-looking 3D cylinders and symbols. [...]
April 7th, 2011 at 7:34 am[...] 9. Creating Omspace 3D cylinder graphic in Illustrator [...]
April 19th, 2011 at 1:18 pmThanks for the cool tutorial : )
May 3rd, 2011 at 6:00 am[...] Road Maps in Adobe IllustratorUse the power of Illustrator to create cool 3D infographicsCreating Omspace 3D cylinder graphic in Illustrator3D Charts in Adobe Illustrator CSSpice up Pie ChartsHow To Create Outstanding Modern Infographics [...]
May 4th, 2011 at 4:29 pm[...] 34. Creating Omspace 3D Cylinder Graphics in Illustrator [...]
May 27th, 2011 at 5:25 am[...] 34. Creating Omspace 3D Cylinder Graphics in Illustrator [...]
May 28th, 2011 at 1:28 am[...] 9. Creating Omspace 3D cylinder graphic in Illustrator [...]
June 22nd, 2011 at 1:01 amHey
I wasent looking for that but still a great post
how did you guys found this information??thank you for your blog I found it on Yahoo And I bookmarked it . I’ll share. Please send me updates
thank you and have a nice day
July 5th, 2011 at 3:01 pm1. This was an amazing site that I had never seen it before. Thanks a lot for the information because I had liked it very much!
July 18th, 2011 at 2:34 amThank you for sharing.I love every article of all.I know more something from your website.Very good website and very interested.
August 30th, 2011 at 9:32 am[...] Creating Omspace 3D cylinder graphic in Illustrator [...]
September 10th, 2011 at 11:27 pmThanks for the post. It was just what I was looking for.
October 15th, 2011 at 1:42 am[...] Creating Omspace 3D cylinder graphic in Illustrator [...]
December 20th, 2011 at 12:06 pm[...] Creating Omspace 3D cylinder graphic in Illustrator [...]
January 7th, 2012 at 3:54 am[...] Creating Omspace 3D cylinder graphic in Illustrator [...]
February 27th, 2012 at 5:05 pm[...] Creating Omspace 3D cylinder graphic in Illustrator [...]
June 4th, 2012 at 1:21 pmMy end results is full of blue lines and also when making the grid you cannot ungroup a rectangular grid, you need to expand it first, not mentioned in tutorial?
Why the blue lines? its not a stroke or anything, its almost like the 3d has added some blue edge lines
June 18th, 2012 at 10:20 amSorry to add to confusion. But point 9 has some errors, it just doesnt split the rectangles up in the order which it says, ungroup does not appear after clicking divide. Also it doesnt state what fill and stroke to have on before you do this which may affect it?
June 18th, 2012 at 10:24 amIf you have a stroke on that number 9 part, it wont ungroup it a second time. That is the error in this tutorial. You need no stroke on the rectangular piece when you first make it otherwise it wont ungroup the second time and wont split up. (in the picture it has a black stroke, this seems to be wrong).
June 18th, 2012 at 11:15 amHi there, did you tick both of the “Use Outside Rectangle as Frame” and “Fill Grid”?
June 19th, 2012 at 3:09 pm[...] 34. Creating Omspace 3D Cylinder Graphics in Illustrator [...]
November 23rd, 2012 at 2:04 amGreat tuto, well explained for beginners, thanks for sharing
December 27th, 2012 at 10:33 am