Make awesome iOS app icon in 15 minutes
In this story you will know how to make simple cool icon for your app without waiting for designer. If you are an experienced designer, you may skip this article, but if you are developer — read on!
Many developers know that creating even simple app icon is annoying task and they tried to find any kind of workaround. During my experiments with icons and screenshots I have learned to create stylish app icon in less than an hour. And I am gonna share this with you. Our goal is create simple icon quite fast and easy. May be that will not be a final version of the icon, but anyway will give you a good start for further ideas.
First of all, you need to get Figma installed, because that will be our tool for this task. I will also use a couple of plugins, so please google how to setup plugins for Figma. And let's go!
- Open new tab in Figma and create rectangle
Tip: if you will hold Shift during changing the size, rectangle will keep it's proportions
Set up size 1024x1024 and corner radius 158. Also you may setup fill colour here.
2. Add one more rectangle above with the same size
Now press on Fill button, then chose any gradient type. I choose linear gradient. You may setup start colour, end colour and positions of start and end points. Try to use different colours, opacities to get fancy background for your icon. Of course, we might do it using only one rectangle, but several layers give a bit more flexibility.
3. Add the text
Just select text button and place a text on top of your background. Your text will be small and black, so, set quite big font and contrast colour. Then I applied same colouring feature for text: I used transparent gradient. Also Figma has automatic snapping areas, so you may center your text easily.
4. Add shadow to the text
Tap on Effects section, select effect (I choose drop shadow), set offset and colour for the shadow.
5. Add icon
Here I used plugin with designed vector icons. Chose any icon from plugin you like and place it to background. Be careful, icon may have small size and dark colour. Just update the size holding shift key.
Tip: You may use icons for some symbols (like $, @, % and so on), or use them from text. Just make experiments and chose the one you like.
I added a cat, made elements replacement and added shadow effect. Then you need to group all your layers and export as PNG 1024x1024.
IMPORTANT: revert corner radiuses for background rectangles to 0 before exporting
6. Export iOS icons
I used plugin called "App Icon Exporter for iOS & Android".
Go to Start here page, insert you PNG to main section, than go to page "Exports-iOS" and press export. And here you go! You got full set of icons for your application!
Hope this article was useful in your developer's practice!
