Floating Cube Icon Design – Illustrator Tutorial

August 24, 2018March 2, 2023By Nathaniel Dodson
1
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.

Leave a Reply

Your email address will not be published.