How to Design a Stylish App Icon in Gravit Designer
In the overcrowded app market, the first impression counts and your app icon is usually the first touchpoint with your product.
So they see the icon along with thousands of others. They have no idea how fruitful your app is, how clean and elegant your code is and how much time you spent fixing different bugs and usability issues, but they already made a decision. Why? Because more than 90% of purchasing decisions are emotional and based on subconscious cues you provide within the product design.
Thus, your app icon design should evoke strong positive feelings in your potential customer and be relevant to what your app is supposed to do.
If your icon is clean and well-crafted, it’s reasonably to assume that other parts of your app are well crafted, too.
In today’s tutorial, I am going to show you how to design a clean and professional looking app icon in Gravit Designer.
Step 01. Start with an app icon grid
Now you have your own copy of Gravit Designer up and running, go here to download this iOS app icon grid.
After you have opened the template, you see two layer groups, that look like folders in the layers panel.
The group on top contains the actual grid. Lock this group by clicking on the padlock icon on the layers panel to avoid accidental interactions. You can also enable the outline mode to make sure this grid would stand out against both dark and light backgrounds.
The rear group has a locked squircle clipping mask and is reserved for your design.
Step 02. Create a background
First, let’s cover the entire artboard using the rectangle. Put this rectangle outside the design group.
Set the fill color to #311B49.
Lock it on the layer panel.
Step 03. Create a shape for the icon
Grab the rectangle tool once again and draw a 1024 x 1024 px square holding Shift to constrain the proportions.
Align it both horizontally and vertically to the center.
Set a linear gradient with #FFFFFF as the color at the top left and #F7F7F7 at the bottom-right.
Put the square inside the “Design” group. Unlock the mask and select both layers.
Create a clipping mask using the Clip command in the toolbar. Lock this mask on the Layers panel.
Step 04. Create a circle
Create a 780 x 780 px circle using the Ellipse tool (E). Align it to the center.
Create a duplicate of the circle using the Clone command (Ctrl/Cmd + Shift + D).
Select the circle in the back and navigate to the Modify > Path > Expand/Shrink to expand the circle.
In the following dialog set a value of 24px.
Set a radial gradient for this circle. Click on the gradient slider to add a third color stop. Apply these values to the color stops (from left to right):
- #FFFFFF at the position of 0%
- #FFFFFF at the position of 95%
- #BFBDBD at the position of 100%
Select the circle in the foreground and navigate to the angle gradient. Set #DD51DD at the position of 0% and #EE3FC8 at the position of 100%.
Add four more color stops at the positions of 20% (#F0559E), 40% (#E06AFB), 60% (#7C6DFF), and 80% (#409CBD).
Step 05. Create a stand
Create a 500 x 500 px circle and align it to the center.
Set a radial gradient with these values:
- #FFFFFF at the position of 80%
- #BFBFBF at the position of 81%
- #FFFFFF at the position of 85%
- #E3E3E3 at the position of 87%
- #EFEFEF at the position of 91%
- #FFFFFF at the position of 98%
Step 06. The Play icon
Create a triangle with 160px width using the Triangle tool.
Set the corner radius to the 24px.
Set a linear gradient from the bottom-left (#D95CCF) to the top-right (#7CC9EE). Add the third color stop in the middle (#BC94DF).
Add an inner shadow to the triangle. The values use:
- X=-1
- Y=-1
- Blur=12
- Opacity 50%
Add a second inner shadow with these values:
- X=1
- Y=1
- Blur=12
- Opacity 50%
We’re done with the icon design now. All we need to take care of is to prepare it for exporting.
Step 07. Clean up the design
First, unlock and get rid of the purple background.
Second, unlock and delete the icon grid.
Third, split the mask using the Split icon on the toolbar.
Delete the mask shape. Now you are left with only the necessary design elements and a very slim Layers panel.
Step 07. Proper sizes
Select the canvas by clicking on an empty spot. Choose Trim Canvas to resize the canvas to to the size of containing elements.
Step 08. Exportable assets
In the last step of this tutorial, I am going to show you a great way of exporting all required sizes of your app icon.
First, select your “Design” layer group and navigate to the export options at the bottom-left of the document.
Second, hit this little plus icon to create the first exportable size.
In the opened dialog box you can specify size, suffix and file format. Leaving these values at the default options would create a 1024 x 1024 px icon for the App Store.
Third, click the Export… icon to save the file.
Give a name to this file following these naming conventions.
Repeat these steps to create all icon sizes. Keep in mind that you can set any custom value in the first field.
Thank you for reaching that far. I hope you have learned something new today. Have any questions? Happy to answer to all of them in the comments. Have a good day!
