How to make a scroll | UI/Game Art for Beginners [Tutorial]

Add to favorites

Welcome to the third tutorial of the UI/Game Art for Beginners series. In this tutorial, we will be learning how to make a scroll in Adobe Illustrator.

1. Create a new document that is 600 pixels wide and 600 pixels high
2. Use the Rectangle Tool (M) and draw out a rectangle 600 pixels square
3. Remove the border
4. Fill the rectangle with a dark gray (#383838)
5. Open the Layers Panel and rename Layer 1 as “background” and lock the layer
6. Make a new layer above the background layer and name it “scroll”
7. Use the Rounded Rectangle Tool and draw out a rounded rectangle 50 pixels wide and 175 pixels tall
8. Use the Live Corners option and round the corners to 25 pixels
9. Use the Gradient Tool and fill the rounded rectangle with a Linear Gradient
10. Change the Gradient Angle to -90^o (so the black is on the bottom)
11. Click on the white color stop and change the color to RGB 252 238 33 (third swatch from the right – top row)
12. Click on the black color stop and change the color to RGB 247 147 30 (fifth swatch from the right – top row)
13. Use ALT + SHIFT and make a copy of the rounded rectangle
14. Move it to the left of the original rounded rectangle (make sure it is overlapping the original rounded rectangle by 50%)
15. Move the copied rounded rectangle behind the original rounded rectangle (Object > Arrange > Send to Back)
16. Change the height of the copied rounded rectangle to 150 pixels
17. Open the Gradient Panel
18. Click on the left color stop and change the color to RGB 140 98 57 (fifth swatch from the left – third row)
19. Click on the right color stop and change the color to RGB 96 56 19 (seventh swatch from the left – third row)
20. Select both rounded rectangles and group them (Object > Group)
21. Open the Layers Panel and rename the group “handle”
22. Make a copy of the handle using ALT + SHIFT and move it to the right
23. Rotate the copied handle (Object > Transform > Rotate – 180^o)
24. Double-click the right handle (to enter Isolation Mode)
25. Double-click on the top part of the handle (yellow part)
26. Open the Gradient Panel and swap the color stops
27. Double-click on the bottom part of the handle (brown part)
28. Open the Gradient Panel and swap the color stops (double-click on the Pasteboard to get out of Isolation Mode)
29. Move both handles toward the top of the background and center them horizontally
30. Use the Rectangle Tool (M) and draw out a rectangle between the handles
31. Open the Gradient Panel and change the angle to -90^o (so the lighter color is on top)
32. Use the Direct Selection Tool (A) select the bottom anchor points (use the SHIFT key)
33. Use the down arrow and move the anchor points down to extend the scroll
34. Make a new layer in the Layers Panel above the scroll layer and name it “cutout”
35. Use the Rectangle Tool (M) and click once on the Pasteboard
36. Make a square that is 50 pixels in width and height
37. Rotate the square (Object > Transform > Rotate – 45^o)
38. Move the square over the bottom edge of the scroll
39. Make multiple copies – placing them at random heights along the bottom of the scroll
40. Select all the copies and group the together (Object > Group)
41. Select the square group and the scroll
42. Open the Pathfinder Tool and select Minus Front (second icon under Shape Modes)
43. Lock the cutout layer and move it below the scroll layer
44. Select the scroll layer
45. Select the left handle
46. Add a Drop Shadow to the handle (Effect > Stylize > Drop Shadow)
    • Mode: Multiply
    • Opacity: 35%
    • X Offset: 10px
    • Y Offset: 0px
    • Blur: 5px
    • Color: Black
47. Select the right handle
48. Add a Drop Shadow to the handle (Effect > Stylize > Drop Shadow)
    • Mode: Multiply
    • Opacity: 35%
    • X Offset: -10px
    • Y Offset: 0px
    • Blur: 5px
    • Color: Black