Tutorial: How to make a flat 2D background – UI/Game Art for Beginners

 

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

Setting Up
1. Create a new document that is 1920 pixels wide and 1080 pixels high
2. Select the Rectangle Tool (M) and click once on the Paste Board
3. Make a square 110 pixels in width and height
4. Select the Selection Tool (V)
5. Hold down your ALT and SHIFT keys and drag a duplicate of the square below the original
6. Using CTRL + D make three more copies of the original square
7. Select all five squares and remove the border
8. Choose each square individually and fill them with the following colors:
Swatch 1: #464D4D
Swatch 2: #C4D8D9
Swatch 3: #7F8C8D
Swatch 4: #8A999A
Swatch 5: #687373
9. Open the Layers Panel and change “Layer 1” to “swatches”
Background
10. Make a new layer above the swatches layer and name it “background”
11. Choose the Rectangle Tool (M) and draw out a rectangle the same size as the artboard
12. Select the Eyedropper (I) and click on the top swatch to fill the background with that color
13. Lock the background layer in the Layers Panel

Moon
14. Make a new layer above the background layer and name it “moon”
15. Choose the Ellipse Tool (L) and click once on the Artboard
16. Make an ellipse that is 1200 pixels in width and height and center it horizontally on the Artboard (only about 75% of it should be overlapping the background)i
17. Select the Eyedropper (I) and click on the second swatch to fill the moon with that color
18. Make sure the ellipse is selected and then make a copy (Edit > Copy) and paste it in back of the original ellipse (Edit > Paste in Back)
19. Resize the second ellipse to 1300 pixels in width and height
20. Change the Opacity to 50%
21. Make sure the second ellipse is selected and then make a copy (Edit > Copy) and paste it in back of the original ellipse (Edit > Paste in Back)
22. Resize the second ellipse to 1400 pixels in width and height
23. Change the Opacity to 30%
24. Lock the moon layer in the Layers Panel

Stars
25. Make a new layer above the moon layer and name it “stars”
26. Choose the Star Tool and click once on the Artboard
Radius 1: 15 pixels
Radius 2: 30 pixels
Points: 5
27. Fill the star with a light yellow (#DDDA7A)
28. Make multiple copies of the star by holding down the left mouse button while pressing the ALT key and dragging
29. Lock the stars layer in the Layers Panel

Clouds
30. Make a new layer above the stars layer and name it “clouds”
31. Choose the Ellipse Tool (L) and click once on the Artboard
32. Make an ellipse that is 150 pixels in width and height
33. Add other ellipses to the original ellipse to form a cloud shape
34. With all the ellipses selected open up the Pathfinder Tool (Window > Pathfinder) and choose Unite (the first icon under “Shape Modes”)
35. Make multiple copies of the cloud by holding down the left mouse button while pressing the ALT key and dragging
36. Choose all the clouds and, using the Eyedropper Tool (I), fill the clouds with the second color swatch
37. Lock the clouds layer in the Layers Panel

Mountains
38. Make a new layer above the clouds layer and name it “mountains”
39. Choose the Star Tool and begin drawing a star and with your left mouse button held down, use the down arrow key to change the number of sides to three
40. Continue drawing out the triangle holding down the SHIFT key (this will ensure the triangle is sitting on the flat bottom)
41. Using the Eyedropper Tool (I), fill the mountain with the fourth color swatch
42. Move the mountain to the bottom of the artboard
43. Resize and duplicate the mountain and fill the entire width of the Artboard
44. Make a new layer above the mountains layer and name it “mountains front”
45. Place more mountains in front of these original mountains and change their fill color to the third swatch
46. Lock the mountains and mountains front layers in the Layers Panel

Trees
47. Make a new layer above the mountains front layer and name it “trees”
48. Choose the Star Tool and draw out a triangle (Tip: Hold down the SHIFT key to ensure the triangle is sitting on the flat bottom)
49. Make sure the triangle is selected and change the dimensions to 65 pixels wide and 250 pixels high
50. Move the triangle to the bottom of the artboard
51. Using the Eyedropper Tool (I), fill the triangle with the fifth swatch
52. Make a copy of the triangle and using the bounding box rotate the new triangle to make a branch
53. Use the bounding box to resize the new triangle and place it on the trunk
54. Continue to make copies of the triangles, rotating and resizing them as needed
55. Once you have all of your branches completed, select all the branches and the trunk and group the objects (Object > Group)
56. Make multiple copies and place them across the bottom of the artboard

Finalizing
57. Make a new layer above the trees layer and name it “final”
58. Choose the Rectangle Tool (M) and draw out a rectangle the same size as the artboard
59. Unlock all the layers
60. Select the rectangle and all the graphics (excluding the swatches)
61. Make a clipping mask (Object > Clipping Mask > Make)

Share

Leave a Reply

<