Tutorial: How to make a lamp and flashlight – UI/Game Art for Beginners

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)

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

FLASHLIGHT (ON)

  1. Create a new layer above the background layer and name it “flashlight on”
  2. Select the flashlight off layer and make a copy (CTRL + C) (select the target – small circle – to the right of the layer name)
  3. Make sure the “flashlight on” layer is selected and paste the copied flashlight (CTRL + V)
  4. Use the Rectangle Tool (M) and click on the Artboard once
  5. Make a rectangle that is 130 pixels wide and 100 pixels high
  6. Remove the stroke and change the fill to a light yellow (#f6f98c)
  7. Align the rectangle to the top of the flashlight
  8. Open the Gradient and add a linear gradient to the rectangle
  9. Change the angle to -90o
  10. Double-click on the white swatch and choose the third swatch from the right in the top row
  11. Change the Opacity to 30%
  12. Double-click on the black swatch and choose the fourth swatch from the right in the top row
  13. Use the Direct Selection Tool (A) and select the right-top anchor point of the rectangle
  14. Use the right-arrow key and move the anchor point 30 pixels
  15. Use the Direct Selection Tool (A) and select the left-top anchor point of the rectangle
  16. Use the left-arrow key and move the anchor point 30 pixels

LAMP

  1. Create a new layer above the flashlight on layer and name it “lamp”
  2. Use the Ellipse Tool (L) and click on the Artboard once
  3. Make an ellipse that is 200 pixels wide and 300 pixels tall
  4. Fill the rectangle with a light gray (#e2e2e2) (make sure color is chosen and not gradient)
  5. Add a dark gray border (#0f0f0f) and change the stroke to 3
  6. Use the Rectangle Tool (M) and click on the Artboard once
  7. Make a rectangle that is 300 pixels wide and 30 pixels high
  8. Align the rectangle with the top of the ellipse (half above and half below the ellipse)
  9. 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)
  10. Select the ellipse and both rectangles
  11. Open the Pathfinder Tool and select Minus Front (second icon under Shape Modes)
  12. Use the Rectangle Tool (M) and click on the Artboard once
  13. Make a rectangle that is 135 pixels wide and 30 pixels high
  14. Align the rectangle with the bottom of the ellipse
  15. Change the fill to a burnt-orange (#915126)
  16. Make a copy of the rectangle and align it to the bottom of the original rectangle
  17. Use the Direct Selection Tool (A) and select the right-bottom anchor point of the rectangle
  18. Use the right-arrow key and move the anchor point 20 pixels
  19. Use the Direct Selection Tool (A) and select the left-bottom anchor point of the rectangle
  20. Use the left-arrow key and move the anchor point 20 pixels
  21. Use the Rounded Rectangle Tool and click on the Artboard once
  22. Make a rounded rectangle that is 175 pixels wide and 20 pixels high with a corner radius of 10
  23. Align the rounded rectangle with the top of the ellipse
  24. Use the Ellipse Tool (L) and click on the Artboard once
  25. Make an ellipse that is 60 pixels wide and 60 pixels high
  26. Make a copy of the ellipse (CTRL + C) and paste it in front (CTRL + F)
  27. Change the copied ellipse to 40 pixels wide and 40 pixels high
  28. Select both ellipses
  29. Open the Pathfinder Tool and choose Minus Front (second icon under Shape Mode)
  30. Use the Rectangle Tool (M) and draw a rectangle over the bottom-half of the ellipse
  31. Select both the rectangle and ellipse
  32. Open the Pathfinder Tool and choose Minus Front (second icon under Shape Mode)
  33. Align the half-ellipse to the top of the lamp
  34. Use the Ellipse Tool (L) and click on the Artboard once
  35. Make an ellipse that is 100 pixels wide and 50 pixels high
  36. Change the fill to a gray (#5e5e5e)
  37. Use the Rectangle Tool (M) and draw a rectangle over the bottom-half of the ellipse
  38. Select both the rectangle and ellipse
  39. Open the Pathfinder Tool and choose Minus Front (second icon under Shape Mode)
  40. Align the half-ellipse with the bottom of the lamp (inside the light-gray section)
  41. Use the Ellipse Tool (L) and click on the Artboard once
  42. Make an ellipse that is 75 pixels wide and 75 pixels high
  43. Use the Anchor Point Tool (SHIFT + C) and click on the top-center anchor point
  44. Use the Direct Selection Tool (A) and select the two middle anchor points
  45. Move the selected anchor points down 20 pixels
  46. Change the fill to a yellow (#f4f44e)
  47. Align the ellipse to the top of the gray ellipse (step #95)
  48. Make a copy of the ellipse (CTRL + C) and paste it in front (CTRL + F)
  49. Offset the copied ellipse (Object > Path > Offset Path … -10 pixels)
  50. Change the fill to an orange (#f9751c)
  51. Align the copied ellipse to the bottom of the original ellipse
Share

Leave a Reply

<