Website design news bites.
The following piece of content was published by Envato Tuts+ Tutorials . Normally I enjoy checking out 1 of their articles as they are actually valuable. I think you’ll get something out of it.
Welcome to How to Draw Isometric Art in Adobe Illustrator! In this tutorial, you will learn the step-by-step process of how to draw isometric vector characters without the use of an isometric grid.
So what is isometric art? The technique is incredibly popular as it allows an illustration to convey all three dimensions at full scale, rather than foreshortening them. An isometric perspective is when a 30-degree angle is applied to the sides of an object. This is best illustrated using an isometric cube (as seen in the image below).
You can create isometric graphics in Illustrator by using an isometric grid (as seen in the image below). This helps you create isometric shapes by following the grid.
For more inspiration on isometric graphics, check out GraphicRiver, where you can find a wide variety of different isometric resources.
Looking for more isometric art tutorials? Check out our roundup for more:
-
Isometric22 Illustrator Tutorials for Creating Isometric Illustration
1. How to Set Up a New Project File
Step 1
Let’s get started by setting up a New Document in Adobe Illustrator (File > New or Control-N). For this tutorial, we will use the settings below:
- Number of Artboards: 1
- Width: 850 px
- Height: 850 px
- Units: Pixels
In the Advanced tab, use the following settings:
- Colour Mode: RGB
- Raster Effects: Screen (72ppi)
- Preview Mode: Default
Step 2
Go to Units and use the settings shown below.
- General: Pixel
- Stroke: Points
- Type: Points
2. How to Create the Head
Step 1
Select the Ellipse Tool (L) and create a circle. Hold the Shift key on the keyboard whilst clicking and dragging with the mouse to create a perfect circle. For the skin color, we will use the settings below, but feel free to select your own colors for your project.
- R: 194
- G: 119
- B: 112
Step 2
Choose the Direct Selection Tool (A) and select the circle. This will reveal the anchor points of the shape and enable you to adjust them with the tool.
Step 3
Use the Direct Selection Tool (A) to select the bottom anchor point and move it to the side to create the chin of your character.
Step 4
Create another perfect circle by using the Ellipse Tool, and this time choose a color for the hair of your character.
- R: 45
- G: 42
- B: 69
Step 5
To create the ears, use the Rounded Rectangle Tool. Draw a small capsule shape using the same skin color used for the head, and move it into place.
Step 6
Use the Rounded Rectangle Tool to create a larger capsule. Use the same color you used for the hair and rotate it slightly at an angle.
Step 7
Use the Selection Tool (V) to place the shape in front of the head.
Step 8
Duplicate the shape by copying it (Control-C) and pasting it (Control-V). Place the new capsule further above the head to create some extra hair volume.
Step 9
Right click on the vector shape representing the ear and select Arrange > Bring to Front.
Step 10
This will place the ear shape on top of the hair.
Step 11
Create two more small capsules and use the Selection Tool (V) to rotate them and move them into place.
Step 12
Create a capsule for the neck and move it underneath the head. Use a slightly darker color for the skin.
- R: 165
- G: 89
- B: 89
Step 13
Create a new layer for the background.
Step 14
On the new layer, use the Rectangle Tool to create a new background and choose a suitable color:
- R: 186
- G: 227
- B: 254
3. How to Create an Isometric Body
Step 1
Use the Rectangle Tool and roughly draw out a long white rectangle. Use the Direct Selection Tool (A) to move the top two anchor points towards each other to create a trapezium. Make sure all four Live Corner Widgets are visible (if not, deselect the shape and select it again by clicking in the middle). Select the widget and drag all four corners towards the center to round the corners.
Step 2
Make sure that the body is selected. Go to Effect > 3D > Rotate.
Step 3
In the pop-up box, make sure to select the following:
- Position: Isometric Right
- Surface: No Shading
Step 4
This will give the body the appearance of an isometric shape. Note that you can still edit the shape as it was when it was 2D, and this will adjust in real time.
Step 5
Make sure that the body is selected. Go to Effect > 3D > Extrude & Bevel.
Step 6
In the pop-up box, make sure to select the following:
- Position: Off-Axis-Front
- Extrude Depth: 50 pt
- Bevel: Rounded
- Height: 4 pt
- Surface: No Shading
Step 7
This will create an isometric 3D object that we can use for the body of the character.
Step 8
Use the Selection Tool (V) to move the head into place on top of the body.
4. How to Create Isometric Legs
Step 1
Use the rounded rectangle tool to create the hips of the character. Choose a new color to use for the legs:
- R: 100
- G: 118
- B: 202
Step 2
Make sure that the hip is selected. Go to Effect > 3D > Rotate. In the pop-up box, make sure to select the following:
- Position: Isometric Right
- Surface: No Shading
Step 3
Make sure that the hip is still selected. Go to Effect > 3D > Extrude & Bevel. In the pop-up box, make sure to select the following:
- Position: Off-Axis-Front
- Extrude Depth: 50 pt
- Bevel: Rounded
- Height: 4 pt
- Surface: No Shading
Step 4
Place the shape below and behind the body. You can do this by right-clicking on the shape and selecting Arrange > Send to Back.
Step 5
Select the Pen Tool (P) and switch to Stroke mode with a Weight of 21 pt.
Step 6
Use the Pen Tool (P) to draw a straight line by holding the Shift key on the keyboard. Duplicate or draw two legs and place them below the hips.
5. How to Create Isometric Arms
Step 1
Use the Rounded Rectangle Tool to create a white capsule for the shirt sleeve. Rotate it at a slight angle using the Selection Tool (V).
Step 2
Place the capsule on top of the character’s shoulder.
Step 3
Duplicate the shape and send it to the back (Right Click > Arrange > Send to Back). Next, you will need to flip the shape (Right Click > Transform > Reflect > Vertical) and then shorten it and place it on top of the character’s shoulder.
Step 4
Choose the Pen Tool (P) and adjust the stroke settings so that the color matches the character’s skin color:
- Weight: 11 pt
- Cap: Round Cap
Step 5
Use the Pen Tool (P) to draw a slightly curved arm and place it underneath the white capsule sleeve.
Step 6
Duplicate the arm by copying it (Control-C) and pasting it (Control-V).
Step 7
Flip the arm by right-clicking on it and selecting Transform > Reflect > Vertical.
Step 8
Use the Selection Tool (V) to send the arm to the back and place it underneath the second white capsule sleeve.
Step 9
Use the Selection Tool (V) to move the shapes around and make any final adjustments to your isometric character.
6. How to Create an Isometric Skirt
Step 1
Now that we have created our first character, we can now make some slight adjustments to create a second character.
Use the Selection Tool (V) to select the whole character and duplicate it. On the second character, use the Direct Selection Tool (A) to remove the hair.
Step 2
Select both legs and change the stroke properties so that the color matches the skin color of the character. Reduce the weight of the legs slightly:
- Weight: 15 pt
- Cap: Round Cap
Step 3
To create the skirt, select the isometric shape that makes up the hip of the character. Then use the Selection Tool (V) and pull the shape down to increase and adjust the length.
Step 4
Use the Direct Selection Tool (A) to adjust the Live Corner Widgets so that the corners become sharp again. This will make it easier to adjust the shape of the skirt by moving the bottom anchor points towards each other.
Once you are happy with the general shape of the skirt, you can use the Direct Selection Tool (A) again to round the corners using the Live Corner Widgets.
7. How to Create Isometric Hair
Step 1
To create the hair of the second character, use the Ellipse Tool (L) and create a perfect circle. Use the Selection Tool (V) to place it in the correct place and send it to the back (Right Click > Arrange > Send to Back) behind the head.
Next, create a smaller circle and place it behind the ear. Press and hold the Shift key on the keyboard whilst using the Ellipse Tool to create a perfect circle shape.
Step 2
Create another circle and place it in front of the forehead of the character. Use the Direct Selection Tool (V) to reduce the height and make any adjustments to the shape.
8. How to Create the Chest
Step 1
Use the Ellipse Tool (L) to create a small round white shape and place it on top of the chest area of the character.
Step 2
Duplicate the shape and place it on the other side of the chest.
Step 3
Group both shapes together (Control-G) and duplicate the new group. You can do this by copying it (Control-C) and pasting it into place (Control-Shift-V). This will paste the new group on top of the previous group. We will call this new group the ‘Shadow Group’.
Choose a slightly darker color for the shadow and apply it to the new group using the Eyedropper Tool (I). You can do this by making sure that the shape group is selected and then using the Eyedropper Tool to click on a color that you want.
Step 4
Move the shadow group behind the two white circular shapes and use the arrow keys on the keyboard to move it down incrementally so that a small, thin shadow appears.
You may also need to select the head and neck group and send it to the front again if it gets covered.
Step 5
Remove any excess shadow area by covering it with a shape (this can be done with the Pen Tool). Select both the shadow shape and the new shape (shown in red) and use the Minus Front mode to remove the excess shadow.
Step 6
Place the shadow underneath the white ellipse.
Awesome! You’re Finished!
Congratulations! You have successfully completed this tutorial. Feel free to share your own creations below! I hope you found this tutorial helpful and that you’ve learned many new tips and tricks that you can use for your future illustrations. See you next time!
Learn More Isometric Art Skills!
If you liked this and are looking to learn some more isometric art skills or anything to do with an isometric view, check out the tutorials below! Expand your expertise by going through these in-depth guides. Happy designing!
-
Quick Tip: How to Create an Isometric Grid in Less than 2 Minutes!
-
Quick Tip: How to Draw Isometric Circles in Adobe Illustrator
-
How to Create an Isometric Text Effect in Adobe Illustrator
-
How to Create an Isometric Pixel Art Room in Adobe Photoshop
-
49 Amazing Isometric Vectors and Icons
-
22 Illustrator Tutorials for Creating Isometric Illustration
Originally posted on this site Envato Tuts+ Tutorials
Trust you found that useful information that they shared. You can find very similar articles on our main website: https://designmysite1st.com
Let me have your reaction just below, share a quick comment and let me know what subjects you want covered in our posts.