Flower app icon Adobe Illustrator tutorial. How to create vector iOS icon
In today’s tutorial, we’re going to take a look at the process of creating an iOS app icon.
Mateusz Jurkiewicz - Flower icon :
https://dribbble.com/shots/1461779-Fl...
Mateusz Jurkiewicz personal website :
http://uiuxdesign.me/
CONTENT:
Document and workplace settings: 1:00
Create rectangles : 2:10
Create vector shadow : 6:00
Create circle : 11:30
Create flower : 15:15
Article:
https://vitorials.net/create-flat-lin...
FREEBIE:
https://vitorials.net/freebie/free-fl...
Music :
Peyruis - Escape - FreeBackgroundMusic ( https://www.youtube.com/watch?v=ip_RZ... );
Promo music:
BrvtVs - Dead Times - Free Background Music No Copyright Music ( • Video )
Set Up a New Document
Since I’m hoping that you already have Illustrator up and running in the background, bring it up and let’s set up a New Document (File | New or Control-N) using the following settings:
Width: 560 px
Height: 400 px
Units: Pixels
Start with rectangle
Grab your rounded rectangle tool, hit on the artboard. In opened dialog box set :
Width and height to 350px
Corner radius to 92px
Give it default gradient, than set black stopwatch on 8% ( double click and drag a slider).
Make smaller copy with inverted gradient
To make smaller copy go to Object|Path|Offset Path.. Set -4px value and click ok.
Go to gradient panel and click icon reverse gradient. This will add a new dimension to our flat object.
Create vector shadow
You can add the vector shadow in several steps:
Create new layer, call it shadow and drag it beneath the rectangle’s layer
Make a duplicate of the original rectangle ( 350×350 ) using shortcut Ctrl+C and Ctrl+B.
Set fill color to black #000
Put it into shadow layer and create one more duplicate with the same shortcut
Your last duplicate should be completely transparent. So visit transparency tool and set opacity to 0%.
Select both black and transparent rectangles and go to Object|Blend|Blend Options. Change spacing to specified distance and set it to 0.2px. Click ok
Use shortcut command Ctrl+Alt+B (Cmd+Alt+B) to make blend. Decrease opacity to 20%.
Go to layers panel and open your blend ( clack on the small shevron icon ). Select transparent rectangle and drag it 10-12px to the bottom left
Create circle
Grab your ellipse tool and hit on the artboard to open dialog box. Set width and height to 258px. Align it to the horizontal and vertical center.
Repeat all previous steps :
Create smaller copy by offsetting path on negative 4px
Create vector shadow with blend tool
Create flower
Select both circles, that you’ve created in previous step and make a copy with Ctrl+C and Ctrl+F shortcut. Put it on the new layer and lock all layers beneath.
Select these circles and scale them down, so diameter of larger circle shouldn’t exceed 60px.
Create petal
Grab your ellipse tool and open dialog box. Set height and width to 62px and click ok. With direct selection tool select bottom point and drag it to the bottom to create seed-like shape.
Place it properly
Grab your rotate tool and holding alt\opt key click on this bottom point. In opened dialog box set 45deg and click copy. This copy we would use to place our shadow
Create petal shadow
Go to polygon tool and open dialog box. Set number of corners to 3 and decrease the width.
Create petal shadow
Delete additional petal ( in my case it’s yellow ).
Give this shadow default gradient and adjust stopcolors:
Black to 50% grey and opacity to 0%
White to 30% grey and opacity to 100%
Set blending mode from normal to multiply at the transparency panel.
Petal shadow
Select both your shadows and your petal. Go to rotate tool, alt click on bottom point and click copy in opened dialog box. Using Ctrl/Cmd + D repeat this operation six more times:
Give every single petal it's own color. Do not forget to set your small circles in to the front of the 8 petals ( use Ctrl+Shift+right bracket shortcut ).
Create solid color shadow