One of my favorite things to do in mobile development is make my own icons. Most developers tend to move away from design and illustration and pay designers to make their graphics but really I believe that it is something anyone can do. Just some simple knowledge of Adobe Illustrator allows the creation of some pretty clean graphics for your app!
Adobe Illustrator
I like to use Adobe Illustrator when making graphics. Actually making the graphics requires a little practice to get good at so if you are feeling stuck I would try to look at some professional illustrations or icons for inspiration. Designers often post their work on websites like Dribble.
This is a very simple icon I came up with. It is just three circles and three lines all evenly spaced. Then I made sure to center the entire icon on the art board of Illustrator. (One tip for illustration is to always use basic shapes such as circles, lines, triangles, etc..)
Exporting Different Icon Resolutions
When displaying graphics such as icons on a mobile phone there are certain problems with different resolutions. For example, if I have an image that is 100×100 pixels and I am displaying it on a phone with a screen resolution of 240×240 pixels, the image will take up almost half the screen! However, if I am displaying an image on the new iPhone 7 Plus which has an amazing screen resolution of 1080 x 1920 pixels, then the image will be a lot smaller. iOS takes care of this problem by allowing you to provide different sized images for icons and it will pick the appropriate one for the resolution of the user’s device.
The best thing about Adobe Illustrator is that all of the graphics made within it are pixel independent. This means that the graphics are made up of a series of paths rather than many different pixels. With this system, graphics can be exported in as large of a size as you would like without losing any quality!
To export my icons I use The Magic Illustrator Script AI to iOS and Android script, which lets you export your illustration to the necessary image sizes used in iOS and Android!
To install it simply download the file and add it to /Applications/Adobe\ Illustrator\ CC\ 2015.3/Presets.localized/en_US/Scripts (on a mac). Then when you start up Illustrator again your should see it under File/Scripts/SaveIOSAndDroid. You can easily click on the script and it will generate a series of folders that contain the different resolutions for your image depending on whether you are developing for Android or iOS!
Adding the images as an iOS Image Asset
To add the icon to your Xcode project, navigate to the Assets.xcassets folder and click the + at the bottom to create a New Image Set.
Then you can simply drag the images from the iOS folder that was generated from the Illustrator script and put it in your image set to be used throughout the app!
