Creating Omspace 3D cylinder graphic in Illustrator

Creating Omspace 3D cylinder graphic in Illustrator

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.

01

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.

02

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.

03

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.

04

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.

05

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!

06

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.

07

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.

08

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.

09

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.

10

End Note
Basically this is the end of this tutorial. 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.

Similar Posts:

Comments

  • http://www.photoshopstar.com/ Eli

    Wow! Very nice & extensive tutorial here. I’ll bet it will be very popular on the web this month :)

  • http://Bbyinlife.blogspot.com PrincessBB

    hehehehe….I am new here…wanna meet designer ^^
    I love design too….going to study interior design at sunway ^^
    Nice to meet u….

    From : PrincessBB
    Bbyinlife.blogspot.com

  • macadamia

    Nice tutorial! Thanks..

  • http://www.jay-han.com jayhan

    Thanks Eli, PrincessBB and macadamia ๐Ÿ˜€ . And nice to meet you too PrincessBB ๐Ÿ˜€

  • http://www.tutorial9.net David Leggett

    Excellent Tutorial jayhan! That’s a wonderful effect!

  • http://www.pelangipetang.com Fath

    I 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. :)

  • http://www.none.com Lezzie

    What is this Omspace?? How to make it look like that after you dublicated the 6 smaller circles??

  • http://www.jay-han.com jayhan

    Thanks 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 ๐Ÿ˜‰

  • http://www.gosammy.com Sam

    Great tutorial, the end result is nice and clean.

  • http://vinchng.com vIn

    nice tutorial. usually i seldom use the 3d function in Ai

  • snowflake

    Nice tutorial. Thank you!

  • http://www.jay-han.com jayhan

    Thanks everyone! ๐Ÿ˜€ I also seldom use the 3D function in AI. But it is a very cool tool to explore!

  • http://www.onlinetemplates.org gina michel

    Nice and informative site. Keep up the good work.

  • http://bodybuilding_workout_routine.zoomblog.com/archivo/2009/12/05/hoe-To-Avoid-Bodybuilding-Over-Trainin.html Gorham Yee

    Negged for dishing out serious advice.

  • Joaane

    This 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

  • Mark

    Hey I just used tried this on CS4 and got the same result so CS5 is not needed like said above.

  • http://www.encryption-softwares.com Zachary Graham

    Adobe Illustrator has more features than its competitors ‘

  • http://www.curtain-panels.net Nicole Ellis

    i use adobe illustrator a lot and i really love its great freatures:-.

  • http://www.cooker-hoods.org Cooker Hoods 

    in our office we use adobe illustrator very much.*-

  • http://www.melatoninfaq.com Melatonin Side Effects ยท

    adboe illustrator is feature packed and i love all of its great features “”

  • Parasar

    Thanks for the cool tutorial : )

  • http://www.ebook-review.org/category/languages/ Curt Cring

    Hey
    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

  • http://www.hollister.uk.net/ Hollister

    1. 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!

  • http://www.bitcolo.info เน€เธŠเนˆเธฒ colo

    Thank you for sharing.I love every article of all.I know more something from your website.Very good website and very interested.

  • http://www.saveourhemlocks.net Hemlocks

    Thanks for the post. It was just what I was looking for. ๐Ÿ˜€

  • good but

    My 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 :(

  • good but

    Sorry 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?

  • good but

    If 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).

    • jayhan

      Hi there, did you tick both of the “Use Outside Rectangle as Frame” and “Fill Grid”?

  • http://www.zoz.fr Maxence

    Great tuto, well explained for beginners, thanks for sharing :)

  • Pingback: 3D Illustrator Tutorials - Illustrator 3D Tutorials - Adobe Illustrator Tutorials()