Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Team Think Labs | Isometric Quick Tips: Extrude & Bevel in Illustrator
single,single-post,postid-1988,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive

Isometric Quick Tips: Extrude & Bevel in Illustrator

Isometric game design can be a little time consuming when it comes to getting your perspective looking right. I discovered a quick way to use Extrude and Bevel in Illustrator to help you set up decent work flow to designing for an isometric view.

Lets start by drawing a simple box, I usually use a 2pt stroke and hold shift to draw a even square. Duplicate those to make a even grid for yourself.

At this point you’ll want to group all of this together.

If you don’t, you’ll end up with this hot mess:

Also I tend to make sure to copy this to another layer and set it to be semi transparent and lock it. This is so have a flat grid to go off of later to line up you’re shapes. So at this point, make sure your grid is selected and apply Extrude & Bevel (Effect > 3D > Extrude & Bevil)

You’ll want to make sure Preview is checked to see your changes visually. Now here is time saver. I used to adjust the 3D position numbers on my own until I got something that looked right, silly me… Up at the top their is a drop-down labeled as Position, and apparently you can select different Isometric views. For this lets select Isometric Top. You’ll notice if you have Preview checked that it made a grid of extruded 3D walls for you. Since we just want a grid to go off of we want to adjust the Extrude Depth option to 0pt. You’ll notice now that it’s angled right but is just a grid now.

At this point you can use your grids to help layout your shapes that you want to use. I won’t get into to much detail on creating design elements for the sake of time but here is a quick example:

As you can see you’ll want to try and think in the sense of extruding 2D to 3D as the name implies, but even still you can end up with some pretty cool results if you take the time to learn how to work this way. If you want to go back in and edit the extrude depth or angle you can use the Appearance panel and click on the 3D Extrude & Bevil option and you can readjust from there.

Here is a rough example of some things I created using this technique.