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.
- New doc 2560×1440
- Create three new swatches: #ce4f57 – #d57869 – #e9c29e
- Create 2560×1440 rectangle and fill with a gradient using the three swath we created. #ce4f57(25% position) – #d57869(50% position) – #e9c29e(75% position)
- Create a 95×95 square
- Go Object>Transform>Shear, Vertical axis at 22º
- Select that shape, go Effect>Distort & Transform>Transform
- Move Horizontally 95px, Reflect X, and make 1 copy.
- Go Object>Expand Appearance and Object>UnGroup
- Turn on Smart Guides
- Grab the Pen Tool and trace along the top edge of these two shape to create half the “top” of the cube
- Use the same Transform effect and move upward vertically the height of the shape and Flip Y
- Expand Appearance and Ungroup and also use Pathfinder to Unite the two shapes
- Fill top of cube with #6a5f5e
- Fill left of cube with #644f50
- Fill right of cube with #5b4646
- Select the three cube faces and duplicate+paste in front
- Fill top with a white40%Opacity – white0%Opacity gradient and set the midpoint to 20% and the angle to 90º
- Sample this gradient into the left side of the copied cube and change the angle to 55º
- Sample it into the right side of the cube and change the angle to 135º
- Grab all these shapes and Group them
- Copy that Cube group and paste it behind
- Lock proportions in the Properties panel and set the width of this group to 310px
- Center up the cube group with this group
- Ungroup and delete the shine shapes
- Select the three remaining shapes and move so the top middle tips are roughly on top of each other.
- Nudge these 3x shapes downward 120px
- Fill top of this cube with #d94c4c
- Fill left of cube with #ba3837
- Fill right of cube with #b43635
- Select top of the red cube and Offset the path -15px and set the fill to white
- 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
- Select the base red top of cube shape and apply an Inner Glow, Normal, White, 15%Opacity, 10pxBlur
- Use the Direct Selection Tool and drag a selection over the bottom anchor points of the two red walls and nudge downward 250px
- Select all the shapes and Group and name the group “Pillar”
- Apply a layer mask and mask away much of the pillar to create a nice fade
- Copy that pillar and dump the layer mask and grab the bottom anchor handles with Direct Selection and pull way down while holding Shift
- Set the width of the group to 65px and drag the bottom down even further
- Arrange the pillars in a way that you think looks cool
- Opacity for shapes closer to the “front” 40%, and 20% for smaller ones
- Select all these pillars and distribute the H-space using the Align panel
- 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.
- Open the Cube group and select both side shines and then lock up the cube group and paste these shines in place
- With both shines selected, set the width to 230px and nudge downward to meet with the diamond-shaped light strip
- Use Direct Selection to grab the top anchor handles and nudge these upward 100px to extend the glow upward 100px
- Select the left shine and set the gradient angle to 75º and boost the white opacity at bottom to 80%
- Select right shine and set gradient angle to 105º and boost white opacity at bottom to 80%
- Use the Paint Brush tool and dab a bunch of dots around the base of the main pillar area
- Select all the dots and Expand their appearance
- Tweak the size of a bunch of them. Some bigger, some smaller.
- Fill all dots with a VERY light yellow
- Create a gradient mask making the top dots to fade a little bit
- Tweak to make look decent
- 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)
- Apply a layer mask to the overall layer and create a 512×512 rounded rectangle with 100px corners
- 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%.
- 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