Isometric art is a very trendy style that has become widespread and is used by designers for advertisements, web design, games and in many other fields.
It may seem a challenge to create an isometric object, as you need to build a grid and follow the geometry of the objects, placing the lines in the proper way. But enough of this! In this tutorial we'll see how to make an isometric object in a few clicks with the help of the built-in Adobe Illustrator features, designed specially for creating an isometric view. Let’s get started!
1. Create an Isometric Coin
Step 1
Let’s start by making a bright yellow circle of 100 x 100 px size. Single-click with theEllipse Tool (L) anywhere on your Artboard and set the size in the options window. Add a smaller circle (75 x 75 px) on top of the first one, filling it with darker orange.
Step 2
Now that we have the base of our coin, let’s turn it into an isometric coin! Select both the circles and go to Effect > 3D > Extrude & Bevel and you’ll see the pop-up options window. Open the drop-down Position menu on top of the options window and select Isometric Left.
Step 3
Set the Extrude Depth to 10 pt. As you can see, our coin has become three-dimensional and it looks great, though we don’t actually need all those “realistic” shadows and highlights as we want to make a flat-style coloring. So let’s set theSurface to No Shading.
Step 4
After you've applied the 3D effect, duplicate the coin and keep the copy somewhere nearby as you may need it later. This way you can always return to 3D Extrude & Bevel Options to edit the settings if you decide to change the Position, Extrude Depth, use Map Art or some other parameters. You can do this in a few clicks by reaching the applied effect in the Appearance panel and clicking to Edit Effect.
Object > Expand Appearance of the first coin (the one we’ll be working on), thus turning it into a set of separate elements.
Step 5
Select the edge of the coin and make its Fill color a bit lighter. If the edge is split into several parts after you Expand it, then select all the pieces and Unite them inPathfinder.
Step 6
If you open the Layers panel and look through the objects, you may notice there are a lot of “junk” pieces left. These are hidden behind the front part of our coin and we don’t actually need them. Select these pieces and delete them, leaving only the front part of the coin, the rim and the light-yellow edge.
Step 7
Let’s add a dollar symbol to our coin. I’ve used the Uni Sans Free font to make a bold symbol and then applied the same Extrude & Bevel settings as to our coin. To do so, just go to Effect > Apply Extrude & Bevel. This way you apply the previously used effect just in one click. Object > Expand Appearance of the symbol and fill its front part with lighter yellow.
Step 8
Now we can combine the coin and the dollar symbol by placing it one above the other. Group the objects and duplicate the group several times to make a stack of coins.
2. Create Isometric Playing Cards
Step 1
First of all, let’s form the base of our card from an 80 x 110 px light-grey rectangle with the help of the Rectangle Tool (M). Use the Live Corners feature of Adobe Illustrator CC to make the corners of the card rounded with 10 px Corner Radius. For this purpose, select the card with the Direct Selection Tool (A) (all the corner anchor points must be selected) and pull the tiny circle indicator next to any corner closer to the center of the card, making the corner smooth.
If you’re using an earlier version of Adobe Illustrator, you can achieve the same effect by applying Effects > Stylize > Round Corners, setting the desired Corner Radius of the rectangle from the pop-up options menu.
Step 2
Now let’s form a symbol of the heart suit for the card. Start making a heart from a red circle of 30 x 30 px size. Select the lower anchor point of our circle and convert it to a sharp corner by clicking the appropriate button (Convert selected anchor points to corner) in the top control panel or by single-clicking the anchor point itself with the Anchor Point Tool (Shift-C).
Now squash the shape a bit by moving its upper anchor point down with the down arrow key, and use the Anchor Point Tool (Shift-C) again to pull the handles of the anchor point, as shown in the screenshot below. Hold down the Shift key and drag to move the handles to 45 degree angle.
Step 3
If you can’t make both parts of the heart shape equal by moving the handles, then use the following simple trick: take the Eraser Tool (Shift-E), hold the Alt key and drag, making a white rectangle that covers the right half of your heart shape. Release the mouse button, deleting the piece. Select the remaining piece and use the Reflect Tool (R) to flip the shape over the Vertical Axis. Finally, click the Copybutton to make a symmetrical reflected copy and place it in the proper position, forming an even heart. Use the Unite function of Pathfinder to merge the halves into a single shape.
Step 4
Drag the lower anchor point down a bit, extruding the heart shape.
Step 5
Let’s move on to the spades suit symbol. Make a copy of the heart and rotate it 180 degrees with the Selection Tool (V), putting it upside down and changing the Fillcolor to black. Take the Polygon Tool, single-click on the Artboard to call the pop-up options window and set the Sides value to 3. Create a small triangle and Align it horizontally with the black shape that we’ve created.
Step 6
Take the Curvature Tool (Shift-`) and bend the left side of the triangle by pulling its middle part down, making a smooth arch. Repeat the same with the second side, forming the spades sign.
Step 7
The diamond suit sign is a simple one: form an even square with the Rectangle Tool (M) and rotate it to 45 degrees, either by using the Rotate Tool (O) or by holding down the Shift key and dragging the shape with the Selection Tool (V).
Keeping the shape selected, go to Effect > Distort & Transform > Pucker & Bloatand move the slider to the left, setting it to -20% Pucker value. Object > Expand the shape, forming the diamond suit symbol.
Step 8
Our last symbol is the clubs suit. It consists of three even circles of 15 x 15 px size, placed like a pyramid—two circles at the bottom and one on top. Take the triangle element from the spades symbol to form the bottom part and complete the clubs symbol.
Step 9
Make the letter A for the Ace, using the same Uni Sans Free font (or any other to your liking) and Object > Expand the shape.
Step 10
Place the heart symbol under the letter A and adjust its size to fit the scale of the card. Group (Control-G) the shapes. Use the Reflect Tool (R) to flip the shapes over the Horizontal axis. Now we need to reposition the symbols, putting them in the right place. Firstly, head to the Align panel, using the card base as the Key Object (hold the Alt key and click the card base) to stick the shapes to the corners of the card base.
Step 11
Select the upper group of red symbols and press the Enter key to call the pop-upMove options window and set the Horizontal and Vertical Position values to 10 pxeach. Repeat the same action with the lower group of red symbols, but this time set the Position values to -10 px each.
Step 12
Form the final view of the ace of hearts and render the complete set of aces, using the same technique.
Step 13
Now let's turn our flat cards into isometric objects! Select a card with all its elements and go to Effect > 3D > Extrude & Bevel. Set the Position to Isometric Left, theExtrude Depth to 3 pt (as the card is thinner than the previous items that we made) and the Surface to No Shading.
Remember to keep the copy of the card with the 3D effect applied in case if you want to change some of the settings later. Object > Expand Appearance of the card and Unite its edge pieces in Pathfinder. Then fill the edge with a bit darker color to make the card more three-dimensional.
Step 14
Use the Direct Selection Tool (A) to select the black shapes on the front surface. After you Group (Control-G) them and hide them (together the card base) by clicking the eye icon in the Layers panel, you may notice that there are plenty of unneeded pieces left, which are invisible beneath the card. You can delete these pieces to make your work more neat and organized.
Step 15
Use the same technique to form a stack of aces.
3. Render a Set of Isometric Domino Tiles
Step 1
First of all, let’s form a base of the domino tile from a tall rectangle of 60 x 110 pxsize. Make a tiny black circle of 11 x 11 px and place it in the upper right corner of the domino tile. Select the circle, press the Enter key and use the Move function, setting the Horizontal position to -5 px and Vertical position to 5 px, so that our circle doesn’t stick to the edges of the tile.
Hold down both Shift and Alt, and drag the circle down and to the left along the imaginary diagonal line, forming a copy. Press Control-D to repeat the last action, forming another copy. This way we have three black dots in the upper part of the domino tile.
Step 2
Now let’s form the divider between two halves of the domino tile. Copy the basic part of the tile and place it on top of the base (Control-C > Control-F). Make it half the height of the initial shape, setting the size to 60 x 55 px, and then squash the shape by dragging its lower side up and making a thin line, dividing the domino tile into two halves.
Use the Reflect Tool (R) to flip the copy of the dots over the Horizontal axis, placing the mirrored copy in the bottom part of the tile. Place another mirrored copy in the same place, forming a group of five dots.
Step 3
Form a couple more combinations of dots for our future domino tiles, and put them on the same rectangle base. This way we have three bases ready. Now we can go to Effect and just Apply Extrude & Bevel from top of the drop-down menu, applying the same 3D setting as we had for the playing cards.
4. Make an Isometric Roulette
Step 1
We start by forming the base of our roulette from a brown 200 x 200 px circle. Then add a smaller yellow circle on top of the first one and, finally, a smaller green circle on top of the previous two. Take the Line Segment Tool (\) and put a straight vertical line across the circles, aligning it to the middle. Add a horizontal line, forming a cross on top of the circles.
Step 2
Select the lines that we’ve created, double-click the Rotate Tool (R) to reveal the options menu, and set the Angle value to 18 degrees. Press the Copy button and then Control-D several times to make more copies of the lines.
Duplicate the yellow circle twice, select one of the copies together with the lines and use the Divide function of the Pathfinder panel to slice the yellow circle into pieces, like a pie.
Step 3
Fill the sectors of the divided circle with red and black, and fill one of the pieces with green. Rearrange the shapes, so that we have the green circle on top (Shift-Control-]) again. Swap Fill and Stroke of the green circle, turning it into a line, and create another smaller green circle inside it.
Step 4
Select the outlined circle and the sectors and use the Divide function of Pathfinderagain. Now you have smaller segments closer to the center of the roulette. Select those and add a thin white Stroke to them. Finally, add a white Stroke to the central green circle, which is on top, as well.
Step 5
We still have the yellow circle on the bottom, remember? Let’s select the created segments together with the central part and make this group of shapes a bit smaller, revealing the yellow rim at the edge of the segments. Switch the color of the central part to yellow as well, and make its Stroke thicker, making the design of the roulette more harmonic.
Step 6
Let’s turn the central part of the roulette into a New Symbol by dragging and dropping it on the Symbols panel.
Move on and select the brown base of the roulette and make it three-dimensional with Effect > 3D > Extrude & Bevel. Set the Position to Isometric Left, Extrude Depth to 10 pt and the Surface to No Shading.
While the options window is still open, click the Map Art button at the bottom.
Step 7
Here, in the pop-up Map Art window, select the front part of our roulette from theSurface list (it will be marked with a red outline) and apply our “texture” by selecting the symbol that we’ve created in the Symbol drop-down menu. Click OK to apply the effect and keep a copy of the unexpanded roulette in case you want to change something later.
Step 8
Object > Expand Appearance of the roulette and tweak it a bit by selecting the edge (Unite it in Pathfinder if needed) and filling it with darker brown color to add dimension.
Step 9
Now we need to form the handle of our roulette. Start by placing a light-grey circle of84 x 84 px size, and add two crossing lines beneath it of a darker grey color. Add smaller circles at the tip of each handle, and make the center of the construction more detailed by placing an additional circle there.
Apply the 3D Extrude and Bevel effect with the same settings as we had previously, and Object > Expand Appearance of the handle.
Step 10
Create another set of circles for the handle base, making the larger circle 84 x 84 px in size. Apply the 3D Extrude & Bevel effect with previous settings and move on to the next detail. Form a smaller 30 x 30 px circle and apply the 3D Extrude & Bevel effect with 50 pt Extrude Depth.
Step 11
Let’s make a few final strokes here. Object > Expand Appearance of the handle parts and make the edges darker, creating a gentle shadow and making it more three-dimensional. Combine the parts of the handle together and resize the full construction, scaling it down and making it fit the roulette. Attach the handle to the center of the roulette, making the whole item look finished.
5. Make a Set of Isometric Poker Chips
Step 1
Start with a 50 x 50 px even circle, and use the Rectangle Tool (M) to form a blue vertical stripe, crossing the circle. Keeping the stripe selected, double-click theRotate Tool (O) and set the Angle value to 360/8, so that Adobe Illustrator automatically calculates the proper angle degree for eight copies. Click the Copybutton and then press Control-D several times, creating eight rotated copies of our stripe.
Select the created blue stripes and Unite them in Pathfinder, forming a single shape. Duplicate the circle base of the chip, select both the copy and the merged blue shape, and use the Intersect function of Pathfinder to cut off the unwanted parts of the stripes, making them fit the chip base. Place a smaller blue circle on top of the chip.
Step 2
Create three more copies of the chip and fill their elements with different colors: green, black and red, defining various values of the chips. You can add some more decorative elements, such as the outlined white circle in the center of the chip. Use the Uni Sans Free font to add numbers to our chips (25, 50, 100, 500), and turn each chip into a symbol by dragging and dropping it onto the Symbols panel.
Step 3
Copy the blank chip base (the 50 x 50 px circle) and go to Effect > Apply Extrude and Bevel or Effect > 3D > Extrude & Bevel with the following settings: set thePosition to Isometric Left, Extrude Depth to 10 pt and the Surface to No Shading.
Click the Map Art button and apply the chip symbol to the front surface. Keep the copy of unexpanded chip to make more of those with different colors.
Step 4
Make more chips using the same technique and Object > Expand Appearance of the shapes, filling the edges with darker colors.
6. Render an Isometric Dice
Step 1
First of all, let’s form the base of our dice. Make a black even square of 50 x 50 pxsize. Put a 9.5 x 9.5 px white circle on top and Align it with the square, placing it right in the middle. Make six copies of the square for each of the six sides of our future dice.
Step 2
Form the patterns of the dots from 1 to 6 as shown in the screenshot below. Use theSmart Guides (View > Smart Guides) and the Align panel to make it easier to place the dots in the proper position.
Step 3
Turn the created shapes into symbols. Below is the scheme of the dice, demonstrating which surfaces are neighboring and which are opposite each other when the dice is formed.
Step 4
Now let’s make a three-dimensional base of the dice! Create a larger square of 70 x 70 px size and go to Effect > 3D > Extrude & Bevel. This time set the Extrude Depth to 70 pt to make the shape even.
Step 5
Go to the Map Art options of our dice (remember that you can always go back to the3D Extrude & Bevel options window from the Appearance panel before you expand the shape).
Apply the created symbols to the visible surfaces of our dice, according to the scheme. For example, as you can see below, the three-dots surface on the right side is next to the one-dot surface on top. Keep a copy of the unexpanded dice shape in order to change the position of the surfaces for the next dice, making the set more diverse.
Step 6
Make two more copies of the dice, changing the position of the dots surfaces.Object > Expand Appearance of the objects and play with colors. First of all, edit the black dice, making its top side the lightest, filling it with lighter grey color, and the left side the darkest, filling it with black color.
Fill the two other dice with white and red.
Step 7
Great! We have the full set of gambling objects that we needed. Now we can move them around the Artboard, making more copies and building various compositions.
Step 8
Rotate some of the objects, positioning them horizontally to make the composition more dynamic. We can also add some bright background and connecting elements, such as lines or dashed paths, made with the Pen Tool (P). Use the Stroke panel to edit the appearance of the paths.
Voila! Our Isometric Gambling Set is Finished!
Great job, guys ’n’ girls! I hope you’ve enjoyed this tutorial and discovered some new tips and tricks on creating isometric items in the easy way, using the built-in functions of Adobe Illustrator. These techniques can be used to make any other objects and assets, such as buildings, vehicles and many more. Good luck with your art!
