Tutorial: How to make 2D trees – UI/Game Art for Beginners

Welcome to the sixth tutorial of the UI/Game Art for Beginners series. In this tutorial we will be learning how to make 2D trees in Adobe Illustrator.

BACKGROUND

  1. Create a new document that is 1920 pixels wide and 1080 pixels high
  2. Use the Rectangle Tool (M) and draw out a rectangle that is 1920 pixels wide and 1080 pixels high
  3. Remove the border
  4. Fill the rectangle with a pale gray (#f7f7f7)
  5. Open the Layers Panel and rename Layer 1 as “background” and lock the layer

TREE 1

  1. Create a new layer named “tree 1” above the background layer
  2. Select Ellipse Tool (L) and click once on the Artboard
  3. Make an ellipse that is 300 pixels wide and 300 pixels high
  4. Fill the ellipse with a green color (#85aa00)
  5. Make a copy of the ellipse (CTRL + C) and paste it in front (CTRL + F)
  6. Use the Rectangle Tool (M) and place a rectangle over the left-half of the ellipse
  7. Select both the rectangle and the ellipse
  8. Open the Pathfinder Tool and select “Minus Front” (second icon under Shape Modes)
  9. Change the right-side of the ellipse color to a darker green (#6b8400)
  10. Select all the ellipses and group them together (Object > Group)
  11. Select the Rectangle Tool (M) and click on the Artboard
  12. Make a rectangle 50 pixels wide and 500 pixels high
  13. Fill the rectangle with a brown color (#a87000)
  14. Make a copy of the rectangle (CTRL + C) and paste it in front (CTRL + F)
  15. Use the Rectangle Tool (M) and make a rectangle and place it over the left-side of the rectangle
  16. Select both rectangles
  17. Open the Pathfinder Tool and select “Minus Front” (second icon under Shape Modes)
  18. Change the right-side of the ellipse color to a darker brown (#7a4e00)
  19. Select all the rectangles and group them together (Object > Group)
  20. Align the with the ellipses
  21. Place them behind the ellipses (Right-Click > Arrange > Send Backward)
  22. Lock the tree 1 layer

TREE 2

  1. Create a new layer named “tree 2” above the tree 1 layer
  2. Select Ellipse Tool (L) and click once on the Artboard
  3. Make an ellipse that is 300 pixels wide and 300 pixels high
  4. Fill the ellipse with a green color (#85aa00)
  5. Select the Anchor Point Tool (SHIFT + C) and click on the top anchor point
  6. Use the Direct Selection Tool (A) and select the top anchor
  7. Use the SHIFT key and up-arrow to move the anchor point up 100 pixels
  8. Use the Direct Select Tool (V) and make a copy of the ellipse (CTRL + C) and paste it in front (CTRL + F)
  9. Use the Rectangle Tool (M) and place a rectangle over the left-half of the ellipse
  10. Select both the rectangle and the ellipse
  11. Open the Pathfinder Tool and select “Minus Front” (second icon under Shape Modes)
  12. Change the right-side of the ellipse color to a darker green (#6b8400)
  13. Select all the ellipses and group them together (Object > Group)
  14. Use the Rectangle Tool (M) and make a rectangle 50 pixels wide and 250 pixels high
  15. Fill the rectangle with a brown color (#a87000)
  16. Make a copy of the rectangle (CTRL + C) and paste it in front (CTRL + F)
  17. Make a rectangle and place it over the left-side of the rectangle
  18. Select both rectangles
  19. Open the Pathfinder Tool and select “Minus Front” (second icon under Shape Modes)
  20. Change the right-side of the ellipse color to a darker brown (#7a4e00)
  21. Select all the rectangles and group them together (Object > Group)
  22. Align the with the ellipses
  23. Place them behind the ellipses (Right-Click > Arrange > Send Backward)
  24. Lock the tree 2 layer

TREE 3

  1. Create a new layer named “tree 3” above the tree 2 layer
  2. Select Ellipse Tool (L) and click once on the Artboard
  3. Make an ellipse that is 500 pixels wide and 500 pixels high
  4. Fill the ellipse with a green color (#85aa00)
  5. Select the Rounded Rectangle Tool and click on the Artboard

Width: 72 pixels

Height: 540 pixels

Corner Radius: 180 pixels

  1. Align the rounded rectangle to the horizontal and vertical center of the ellipse
  2. Select the Rotate Tool (R) and holding down the ALT key click on the center of the rounded ellipse
  3. Change the Angle to 10o and select Copy
  4. Duplicate the rounded rectangle (CTRL + D) until the entire ellipse is covered
  5. Select all the sections of the tree
  6. Open the Pathfinder tool and choose Unite (first icon under Shape Modes)
  7. Make a copy of the ellipse (CTRL + C) and paste it in front (CTRL + F)
  8. Use the Rectangle Tool (M) and place a rectangle over the left-half of the ellipse
  9. Select both the rectangle and the ellipse
  10. Open the Pathfinder Tool and select “Minus Front” (second icon under Shape Modes)
  11. Change the right-side of the ellipse color to a darker green (#6b8400)
  12. Select all the ellipses and group them together (Object > Group)
  13. Use the Rectangle Tool (M) and make a rectangle 75 pixels wide and 250 pixels high
  14. Fill the rectangle with a brown color (#a87000)
  15. Make a copy of the rectangle (CTRL + C) and paste it in front (CTRL + F)
  16. Make a rectangle and place it over the left-side of the rectangle
  17. Select both rectangles
  18. Open the Pathfinder Tool and select “Minus Front” (second icon under Shape Modes)
  19. Change the right-side of the ellipse color to a darker brown (#7a4e00)
  20. Select all the rectangles and group them together (Object > Group)
  21. Align the with the ellipses
  22. Place them behind the ellipses (Right-Click > Arrange > Send Backward)
  23. Lock the tree 3 layer

TREE 4

  1. Create a new layer named “tree 4” above the tree 3 layer
  2. Select Star and click once on the Artboard

Radius 1: 300 pixels

Radius 2: 150 pixels

Points: 3

  1. Fill the triangle with a green color (#85aa00)
  2. Make a copy of the triangle (CTRL + C) and paste it in front (CTRL + F)
  3. Use the SHIFT and up-arrow key move the copied triangle up (place it about 75% of the way up the original triangle)
  4. Resize the triangle to 360 pixels wide and 311.769 pixels high
  5. Make a copy of the triangle (CTRL + C) and paste it in front (CTRL + F)
  6. Use the SHIFT and up-arrow key move the copied triangle up (place it about 75% of the way up the middle triangle)
  7. Resize the triangle to 250 pixels wide and 216.506 pixels high
  8. Select all three triangles
  9. Open the Pathfinder tool and choose Unite (first icon under Shape Modes
  10. Make a copy of the triangles (CTRL + C) and paste it in front (CTRL + F)
  11. Use the Rectangle Tool (M) and place a rectangle over the left-half of the triangle
  12. Select both the rectangle and the triangle
  13. Open the Pathfinder Tool and select “Minus Front” (second icon under Shape Modes)
  14. Change the right-side of the ellipse color to a darker green (#6b8400)
  15. Select all the triangles and group them together (Object > Group)
  16. Use the Rectangle Tool (M) and make a rectangle 75 pixels wide and 150 pixels high
  17. Fill the rectangle with a brown color (#a87000)
  18. Make a copy of the rectangle (CTRL + C) and paste it in front (CTRL + F)
  19. Make a rectangle and place it over the left-side of the rectangle
  20. Select both rectangles
  21. Open the Pathfinder Tool and select “Minus Front” (second icon under Shape Modes)
  22. Change the right-side of the ellipse color to a darker brown (#7a4e00)
  23. Select all the rectangles and group them together (Object > Group)
  24. Align the with the ellipses

 

Share

Leave a Reply

<