How to make a lamp and flashlight | Game UI/Art for Game Designers [Tutorial]

Welcome to the eighth tutorial of the UI/Game Art for Beginners series. In this tutorial we will be learning how to make a lamp and flashlight in Adobe Illustrator.

BACKGROUND

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

FLASHLIGHT (OFF)

6. Create a new layer above the background layer and name it “flashlight off”
7. Use the Rectangle Tool (M) and click on the Artboard once
8. Make a rectangle that is 75 pixels wide and 300 pixels high
9. Fill the rectangle with a blue color (#284193)
10. Add a dark gray border (#0f0f0f) and change the stroke to 3
11. Make a copy of the rectangle (CTRL + C) and paste it in front (CTRL + F)
12. Move the copy above the original rectangle
13. Change the height of the second rectangle to 60 pixels and the stroke to 3
14. Align the second rectangle with the top of the original rectangle
15. Use the Direct Selection Tool (A) and select the right-top anchor point of the second rectangle
16. Use the right-arrow key and move the anchor point 30 pixels
17. Use the Direct Selection Tool (A) and select the left-top anchor point of the second rectangle
18. Use the left-arrow key and move the anchor point 30 pixels
19. Choose the Selection Tool (V) and make a copy of the second rectangle (CTRL + C)
20. Use the Rectangle Tool (M) of draw out a rectangle that covers the top rectangle
21. Remove the stroke and change the fill to a cream color (#fcf1d4)
22. Change the height to 20 pixels and move the rectangle to the top
23. Paste the copied rectangle in front (CTRL + F)
24. Select the cream-colored rectangle and the copied rectangle
25. Right-Click on the selection and choose Make Clipping Mask
26. Select all the rectangles and group them together (CTRL + G)
27. Use the Rounded Rectangle Tool and click on the Artboard once
28. Make a rounded rectangle that is 100 pixels wide and 10 pixels high with a corner radius of 10 pixels
29. Change the color to a gray (#6b6b6b)
30. Add a dark gray border (#0f0f0f) and change the stroke to 3
31. Move the rounded rectangle to the bottom third of the flashlight body
32. Make a copy of the rounded rectangle (ALT + SHIFT) – moving it up about 30 pixels
33. Make a copy of the second rounded rectangle (ALT + SHIFT) – moving it up about 30 pixels
34. Use the Ellipse Tool (L) and click on the Artboard once
35. Make an ellipse that is 45 pixels wide and 45 pixels high
36. Change the fill to an orange (#dd8c22) and the stroke to 3
37. Center the ellipse towards the top of the flashlight body
38. Make a copy of the ellipse (ALT + SHIFT) – moving it down about 30 pixels
39. Change the height and width to 30 pixels

FLASHLIGHT (ON)

40. Create a new layer above the background layer and name it “flashlight on”
41. Select the flashlight off layer and make a copy (CTRL + C) (select the target – small circle – to the right of the layer name)
42. Make sure the “flashlight on” layer is selected and paste the copied flashlight (CTRL + V)
43. Use the Rectangle Tool (M) and click on the Artboard once
44. Make a rectangle that is 130 pixels wide and 100 pixels high
45. Remove the stroke and change the fill to a light yellow (#f6f98c)
46. Align the rectangle to the top of the flashlight
47. Open the Gradient and add a linear gradient to the rectangle
48. Change the angle to -90^o
49. Double-click on the white swatch and choose the third swatch from the right in the top row
50. Change the Opacity to 30%
51. Double-click on the black swatch and choose the fourth swatch from the right in the top row
52. Use the Direct Selection Tool (A) and select the right-top anchor point of the rectangle
53. Use the right-arrow key and move the anchor point 30 pixels
54. Use the Direct Selection Tool (A) and select the left-top anchor point of the rectangle
55. Use the left-arrow key and move the anchor point 30 pixels

LAMP

56. Create a new layer above the flashlight on layer and name it “lamp”
57. Use the Ellipse Tool (L) and click on the Artboard once
58. Make an ellipse that is 200 pixels wide and 300 pixels tall
59. Fill the rectangle with a light gray (#e2e2e2) (make sure color is chosen and not gradient)
60. Add a dark gray border (#0f0f0f) and change the stroke to 3
61. Use the Rectangle Tool (M) and click on the Artboard once
62. Make a rectangle that is 300 pixels wide and 30 pixels high
63. Align the rectangle with the top of the ellipse (half above and half below the ellipse)
64. Make a copy of the rectangle (ALT + SHIFT) and align the copy with the bottom of the ellipse (half above and half below the ellipse)
65. Select the ellipse and both rectangles
66. Open the Pathfinder Tool and select Minus Front (second icon under Shape Modes)
67. Use the Rectangle Tool (M) and click on the Artboard once
68. Make a rectangle that is 135 pixels wide and 30 pixels high
69. Align the rectangle with the bottom of the ellipse
70. Change the fill to a burnt-orange (#915126)
71. Make a copy of the rectangle and align it to the bottom of the original rectangle
72. Use the Direct Selection Tool (A) and select the right-bottom anchor point of the rectangle
73. Use the right-arrow key and move the anchor point 20 pixels
74. Use the Direct Selection Tool (A) and select the left-bottom anchor point of the rectangle
75. Use the left-arrow key and move the anchor point 20 pixels
76. Use the Rounded Rectangle Tool and click on the Artboard once
77. Make a rounded rectangle that is 175 pixels wide and 20 pixels high with a corner radius of 10
78. Align the rounded rectangle with the top of the ellipse
79. Use the Ellipse Tool (L) and click on the Artboard once
80. Make an ellipse that is 60 pixels wide and 60 pixels high
81. Make a copy of the ellipse (CTRL + C) and paste it in front (CTRL + F)
82. Change the copied ellipse to 40 pixels wide and 40 pixels high
83. Select both ellipses
84. Open the Pathfinder Tool and choose Minus Front (second icon under Shape Mode)
85. Use the Rectangle Tool (M) and draw a rectangle over the bottom-half of the ellipse
86. Select both the rectangle and ellipse
87. Open the Pathfinder Tool and choose Minus Front (second icon under Shape Mode)
88. Align the half-ellipse to the top of the lamp
89. Use the Ellipse Tool (L) and click on the Artboard once
90. Make an ellipse that is 100 pixels wide and 50 pixels high
91. Change the fill to a gray (#5e5e5e)
92. Use the Rectangle Tool (M) and draw a rectangle over the bottom-half of the ellipse
93. Select both the rectangle and ellipse
94. Open the Pathfinder Tool and choose Minus Front (second icon under Shape Mode)
95. Align the half-ellipse with the bottom of the lamp (inside the light-gray section)
96. Use the Ellipse Tool (L) and click on the Artboard once
97. Make an ellipse that is 75 pixels wide and 75 pixels high
98. Use the Anchor Point Tool (SHIFT + C) and click on the top-center anchor point
99. Use the Direct Selection Tool (A) and select the two middle anchor points
100. Move the selected anchor points down 20 pixels
101. Change the fill to a yellow (#f4f44e)
102. Align the ellipse to the top of the gray ellipse (step #95)
103. Make a copy of the ellipse (CTRL + C) and paste it in front (CTRL + F)
104. Offset the copied ellipse (Object > Path > Offset Path … -10 pixels)
105. Change the fill to an orange (#f9751c)
106. Align the copied ellipse to the bottom of the original ellipse