Floating Cube Icon Design – Illustrator Tutorial

First 150 people to use this link will get 2 months of Skillshare for free: https://skl.sh/tutvid2

Learn to create this isometric style app icon design in this Adobe Illustrator CC tutorial!

We’ll create this icon inspired by something seen in the Apple App store and will cover how to use transparent gradients, path tools, masks, and much more.

Tags: adobe illustrator tutorial,illustrator tutorials,iOS icon design,how to design,graphic design,vector artwork,AI,adobe illustrator draw,adobe illustrator tutorials for beginners,adobe illustrator cc 2018,illustrator cc tutorial,illustrator icon tutorial,illustrator icon design,diy,how to,do it yourself,vector illustration,tutvid,graphic design tutorial,iOS icons,nathaniel dodson

Tutorial Recording Notes:

Disclaimer: these are the actual notes I used to record this video and are written in a language you may or may not understand. Hopefully, you find them useful or cool.

1. New doc 2560×1440
2. Create three new swatches: #ce4f57 – #d57869 – #e9c29e
3. Create 2560×1440 rectangle and fill with a gradient using the three swath we created. #ce4f57(25% position) – #d57869(50% position) – #e9c29e(75% position)
4. Create a 95×95 square
5. Go Object>Transform>Shear, Vertical axis at 22º
6. Select that shape, go Effect>Distort & Transform>Transform
7. Move Horizontally 95px, Reflect X, and make 1 copy.
8. Go Object>Expand Appearance and Object>UnGroup
9. Turn on Smart Guides
10. Grab the Pen Tool and trace along the top edge of these two shape to create half the “top” of the cube
11. Use the same Transform effect and move upward vertically the height of the shape and Flip Y
12. Expand Appearance and Ungroup and also use Pathfinder to Unite the two shapes
13. Fill top of cube with #6a5f5e
14. Fill left of cube with #644f50
15. Fill right of cube with #5b4646
16. Select the three cube faces and duplicate+paste in front
17. Fill top with a white40%Opacity – white0%Opacity gradient and set the midpoint to 20% and the angle to 90º
18. Sample this gradient into the left side of the copied cube and change the angle to 55º
19. Sample it into the right side of the cube and change the angle to 135º
20. Grab all these shapes and Group them
21. Copy that Cube group and paste it behind
22. Lock proportions in the Properties panel and set the width of this group to 310px
23. Center up the cube group with this group
24. Ungroup and delete the shine shapes
25. Select the three remaining shapes and move so the top middle tips are roughly on top of each other.
26. Nudge these 3x shapes downward 120px
27. Fill top of this cube with #d94c4c
28. Fill left of cube with #ba3837
29. Fill right of cube with #b43635
30. Select top of the red cube and Offset the path -15px and set the fill to white
31. Offset this new inner white diamond shape by -10px and Minus Front these two shapes to leave behind a diamond light strip on the top fo the cube
32. Select the base red top of cube shape and apply an Inner Glow, Normal, White, 15%Opacity, 10pxBlur
33. Use the Direct Selection Tool and drag a selection over the bottom anchor points of the two red walls and nudge downward 250px
34. Select all the shapes and Group and name the group “Pillar”
35. Apply a layer mask and mask away much of the pillar to create a nice fade
36. Copy that pillar and dump the layer mask and grab the bottom anchor handles with Direct Selection and pull way down while holding Shift
37. Set the width of the group to 65px and drag the bottom down even further
38. Arrange the pillars in a way that you think looks cool
39. Opacity for shapes closer to the “front” 40%, and 20% for smaller ones
40. Select all these pillars and distribute the H-space using the Align panel
41. Group the shapes and apply a mask. Use a perfect ellipse and apply a Radial Gradient and then stretch to roll with the pillars and adjust gradient to get the exact fade you like.
42. Open the Cube group and select both side shines and then lock up the cube group and paste these shines in place
43. With both shines selected, set the width to 230px and nudge downward to meet with the diamond-shaped light strip
44. Use Direct Selection to grab the top anchor handles and nudge these upward 100px to extend the glow upward 100px
45. Select the left shine and set the gradient angle to 75º and boost the white opacity at bottom to 80%
46. Select right shine and set gradient angle to 105º and boost white opacity at bottom to 80%
47. Use the Paint Brush tool and dab a bunch of dots around the base of the main pillar area
48. Select all the dots and Expand their appearance
49. Tweak the size of a bunch of them. Some bigger, some smaller.
50. Fill all dots with a VERY light yellow
51. Create a gradient mask making the top dots to fade a little bit
52. Tweak to make look decent
53. Position the artwork in the center of the document using Guides (1280 width is center, 720 vert is center, remember to lock the Guide layers)
54. Apply a layer mask to the overall layer and create a 512×512 rounded rectangle with 100px corners
55. Copy the mask shape and paste in front once you’re out of masking mode and apply a 1px stroke, aligned INSIDE and set opacity to 20%.
56. For added texture and realism, create a rectangle within the masked layer that covers all the visible artwork and fill with a 50% gray and add a bunch of Film Grain to this shape and then set the shape to Soft Light with 35% opacity.