
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
- Create a new document that is 1000 pixels wide and 1000 pixels high
- Use the Rectangle Tool (M) and draw out a rectangle that is 1000 pixels wide and 1000 pixels high
- Remove the border
- Fill the rectangle with a dark gray (#3f3f3f)
- Open the Layers Panel and rename Layer 1 as “background” and lock the layer
FLASHLIGHT (OFF)
- Create a new layer above the background layer and name it “flashlight off”
- Use the Rectangle Tool (M) and click on the Artboard once
- Make a rectangle that is 75 pixels wide and 300 pixels high
- Fill the rectangle with a blue color (#284193)
- Add a dark gray border (#0f0f0f) and change the stroke to 3
- Make a copy of the rectangle (CTRL + C) and paste it in front (CTRL + F)
- Move the copy above the original rectangle
- Change the height of the second rectangle to 60 pixels and the stroke to 3
- Align the second rectangle with the top of the original rectangle
- Use the Direct Selection Tool (A) and select the right-top anchor point of the second rectangle
- Use the right-arrow key and move the anchor point 30 pixels
- Use the Direct Selection Tool (A) and select the left-top anchor point of the second rectangle
- Use the left-arrow key and move the anchor point 30 pixels
- Choose the Selection Tool (V) and make a copy of the second rectangle (CTRL + C)
- Use the Rectangle Tool (M) of draw out a rectangle that covers the top rectangle
- Remove the stroke and change the fill to a cream color (#fcf1d4)
- Change the height to 20 pixels and move the rectangle to the top
- Paste the copied rectangle in front (CTRL + F)
- Select the cream-colored rectangle and the copied rectangle
- Right-Click on the selection and choose Make Clipping Mask
- Select all the rectangles and group them together (CTRL + G)
- Use the Rounded Rectangle Tool and click on the Artboard once
- Make a rounded rectangle that is 100 pixels wide and 10 pixels high with a corner radius of 10 pixels
- Change the color to a gray (#6b6b6b)
- Add a dark gray border (#0f0f0f) and change the stroke to 3
- Move the rounded rectangle to the bottom third of the flashlight body
- Make a copy of the rounded rectangle (ALT + SHIFT) – moving it up about 30 pixels
- Make a copy of the second rounded rectangle (ALT + SHIFT) – moving it up about 30 pixels
- Use the Ellipse Tool (L) and click on the Artboard once
- Make an ellipse that is 45 pixels wide and 45 pixels high
- Change the fill to an orange (#dd8c22) and the stroke to 3
- Center the ellipse towards the top of the flashlight body
- Make a copy of the ellipse (ALT + SHIFT) – moving it down about 30 pixels
- Change the height and width to 30 pixels
FLASHLIGHT (ON)
- Create a new layer above the background layer and name it “flashlight on”
- Select the flashlight off layer and make a copy (CTRL + C) (select the target – small circle – to the right of the layer name)
- Make sure the “flashlight on” layer is selected and paste the copied flashlight (CTRL + V)
- Use the Rectangle Tool (M) and click on the Artboard once
- Make a rectangle that is 130 pixels wide and 100 pixels high
- Remove the stroke and change the fill to a light yellow (#f6f98c)
- Align the rectangle to the top of the flashlight
- Open the Gradient and add a linear gradient to the rectangle
- Change the angle to -90o
- Double-click on the white swatch and choose the third swatch from the right in the top row
- Change the Opacity to 30%
- Double-click on the black swatch and choose the fourth swatch from the right in the top row
- Use the Direct Selection Tool (A) and select the right-top anchor point of the rectangle
- Use the right-arrow key and move the anchor point 30 pixels
- Use the Direct Selection Tool (A) and select the left-top anchor point of the rectangle
- Use the left-arrow key and move the anchor point 30 pixels
LAMP
- Create a new layer above the flashlight on layer and name it “lamp”
- Use the Ellipse Tool (L) and click on the Artboard once
- Make an ellipse that is 200 pixels wide and 300 pixels tall
- Fill the rectangle with a light gray (#e2e2e2) (make sure color is chosen and not gradient)
- Add a dark gray border (#0f0f0f) and change the stroke to 3
- Use the Rectangle Tool (M) and click on the Artboard once
- Make a rectangle that is 300 pixels wide and 30 pixels high
- Align the rectangle with the top of the ellipse (half above and half below the ellipse)
- 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)
- Select the ellipse and both rectangles
- Open the Pathfinder Tool and select Minus Front (second icon under Shape Modes)
- Use the Rectangle Tool (M) and click on the Artboard once
- Make a rectangle that is 135 pixels wide and 30 pixels high
- Align the rectangle with the bottom of the ellipse
- Change the fill to a burnt-orange (#915126)
- Make a copy of the rectangle and align it to the bottom of the original rectangle
- Use the Direct Selection Tool (A) and select the right-bottom anchor point of the rectangle
- Use the right-arrow key and move the anchor point 20 pixels
- Use the Direct Selection Tool (A) and select the left-bottom anchor point of the rectangle
- Use the left-arrow key and move the anchor point 20 pixels
- Use the Rounded Rectangle Tool and click on the Artboard once
- Make a rounded rectangle that is 175 pixels wide and 20 pixels high with a corner radius of 10
- Align the rounded rectangle with the top of the ellipse
- Use the Ellipse Tool (L) and click on the Artboard once
- Make an ellipse that is 60 pixels wide and 60 pixels high
- Make a copy of the ellipse (CTRL + C) and paste it in front (CTRL + F)
- Change the copied ellipse to 40 pixels wide and 40 pixels high
- Select both ellipses
- Open the Pathfinder Tool and choose Minus Front (second icon under Shape Mode)
- Use the Rectangle Tool (M) and draw a rectangle over the bottom-half of the ellipse
- Select both the rectangle and ellipse
- Open the Pathfinder Tool and choose Minus Front (second icon under Shape Mode)
- Align the half-ellipse to the top of the lamp
- Use the Ellipse Tool (L) and click on the Artboard once
- Make an ellipse that is 100 pixels wide and 50 pixels high
- Change the fill to a gray (#5e5e5e)
- Use the Rectangle Tool (M) and draw a rectangle over the bottom-half of the ellipse
- Select both the rectangle and ellipse
- Open the Pathfinder Tool and choose Minus Front (second icon under Shape Mode)
- Align the half-ellipse with the bottom of the lamp (inside the light-gray section)
- Use the Ellipse Tool (L) and click on the Artboard once
- Make an ellipse that is 75 pixels wide and 75 pixels high
- Use the Anchor Point Tool (SHIFT + C) and click on the top-center anchor point
- Use the Direct Selection Tool (A) and select the two middle anchor points
- Move the selected anchor points down 20 pixels
- Change the fill to a yellow (#f4f44e)
- Align the ellipse to the top of the gray ellipse (step #95)
- Make a copy of the ellipse (CTRL + C) and paste it in front (CTRL + F)
- Offset the copied ellipse (Object > Path > Offset Path … -10 pixels)
- Change the fill to an orange (#f9751c)
- Align the copied ellipse to the bottom of the original ellipse