5 Tips for Creating a Mobile App Icon

You’ve developed an awesome mobile app, and now you need to create your app icon. But what if you’re not a designer? Never fear. Here are five tips to help you create a mobile app icon, even if you’re “only” a mobile app developer, like me. 🙂 Okay, so I got some help from Eric, my husband and CEO of infoGuide Apps, with designing this app icon. But even if you don’t have a designer buddy / spouse, you can do this too. Trust me.

#5

Use Powerpoint to create rounded corners and optionally, to add squiggles. Yes, “squiggles” is a technical term here.

If you want the outline of your app icon to have rounded corners, don’t draw it freehand using Gimp, Paint, or whatever program you use. Drawing the outline freehand means you risk having the iPhone or iPad device adding “black borders” around your app icon if your corners are too round. That’s what happened the first time we attempted to create the app icon, as shown here. (It doesn’t look bad on Android, though. It’s a little blurry here because of the way I captured the screenshot, but it looks fine on the device. )

iPhone app icon, before

iPhone app icon, before

Android app icon, before

Android app icon, before

 

 

 

 

 

 

To create a square with rounded corners, in Powerpoint:
Select the Shapes icon -> Rectangles -> Rounded Rectangle. To add the squiggle like you see in the bottom right corner just above the infoGuide Apps icon, select Shapes icon -> Lines and Connectors -> Curved Connector.

Then, when you’re done working in Powerpoint, go to File -> Save as Pictures … to save it as an image file. You can add the image as a layer into your Gimp file (see #3 below).

iPhone app icon, after

iPhone app icon, after (much better!)

Android app icon, after

Android app icon, after (not too shabby here either!)

 

 

 

 

 

 

To learn more about using shapes in Powerpoint, search for tutorials like this one:
https://support.office.com/en-us/article/Add-shapes-0e492bb4-3f91-43b5-803f-dd0998e0eb89

#4

Learn how to do transparencies in Gimp.

As you can see from this image of a 1966 Ford Mustang, the rear and side windows are transparent. So when you add a background color layer to this image later (see next tip), the color of the background will show through the windows.

1966 FordMustang (copyright infoGuide Apps)

1966 Ford Mustang (copyright infoGuide Apps)

Here’s a tutorial for how to add transparency areas to your image:
http://docs.gimp.org/en/gimp-using-web-transparency.html

#3

Learn how to do layers in Gimp.

Layers will allow you do things like add a background color to your image, or insert additional images on top of your image. They can be a challenge at first, especially if your only graphic design experience is with MS Paint, but a layers tutorial is definitely worth your time.  With layers, you can do things like easily add and remove contents, or put a color layer behind a transparency, as in these images:

App icon with a yellow layer visible

App icon with a yellow layer visible

Same, but with red layer visible

Same, but with red layer visible

 

 

 

 

 

 

Here’s a tutorial on adding layers in Gimp:
http://docs.gimp.org/en/gimp-image-combining.html

#2

Learn how to add gradients in Gimp.

You see how the background color of the app icon gets a little darker from top to bottom, until you get to the “squiggle” area in the bottom right corner? That’s called a gradient, and learning how to add those will make your app icon more interesting.

Here’s a tutorial on adding gradients in Gimp:
http://docs.gimp.org/en/gimp-concepts-gradients.html

#1

Create multiple app icons for different platforms using the Fokke-Matic.

If you are building a mobile app for both the App Store and Google Play market, for example, you will need to make your app icon in different sizes for each platform. There is a tool available, which I call the Fokke-Matic (since it was developed by Fokke Zandbergen), that will generate these app icons for you. Although originally designed for Titanium built mobile applications, I think native Android and iOS developers can find it useful too.

Start with a 2208×2208 version of your app icon and go to this website:

http://ticons.fokkezb.nl/

Follow the instructions and most or all of the default settings should work fine.

And there you have it! 5 tips for creating a mobile app icon. How about you? Do you have some tips to share with everyone else too, on how to create a mobile app icon? If so, please share them in the comments below.

Thanks, and hope you found this blog post to be helpful.

P.S. This app icon is for the Early Mustang Guide app, which has been at 99% complete for the last two months. 😉 But seriously, I am going to release this app soon to both the App Store and Google Play markets as part of the infoGuide Apps catalogue, and it’s going to be awesome!

P.P.S. Since publishing this blog post, I’ve already received comments from a couple of people who wanted to debate the merits of the app icon in this post. I freely admit that I’m not a designer. But also understand that design is subjective and a matter of personal taste and your company’s branding. Please consult the Google Play and App Store icon guidelines to make sure your app icon “follows the rules”. In case you are curious, we made the app icon for the Classic GTO Guide similar to the Early Mustang Guide icon here, and it was easily accepted into both the Google Play and App Store. 🙂

I wrote this blog post mainly for developers who have no idea how to get started creating their own app icon and needed some guidance. My intention was never to start a “flame war” about the design. I do moderate the comments on my blog, so please make them helpful and constructive. Negative or cruel comments will not be displayed here. Thank you for your understanding!

P.P.P.S. The “Early Mustang Guide” powered by infoGuide is now in the App Store and Google Play. 🙂

Advertisements

Leave a Reply. Note that comments are moderated on this blog.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s