iOS Tutorials: Creating app icon

OVERVIEW

App icons is the last step for you to do before you submit an app. At least it is for me, unless you have a different team working on the app icon design. Most of the time, I design my own app icon because I am a one man team. Let me guide you through what I would do.

I usually use Sketch app which you can check the pricing here, they do offer free trial. Maybe try it first before you purchase it.

Open Sketch and click File > New from Template > iOS App Icon and you will see the following screen which showcase app icons with different sizes. 

Scroll to the right and you’ll see a huge icon and we’ll edit that icon. Sketch has pre-made an icon for you to use but we are going to delete it some of the designs and create our own design.

Make sure you delete Glyph folder on the left and the design will disappear. Next we’ll have to change the background color. Following the image below, you will create an empty white icon for you to design your own icon.

Now that the background is white, you may design however you like. I love how Sketch has the features of letting you add shapes. You can find that on the top left corner. You can create almost anything with the shapes. I’ll create one simple app icon for you to see how easy it could be.

The image below was a mixture of rectangle and oval. You can see that my oval overlap with the end of the rectangle as I intent to create a rounded end instead of a usual rectangle shape.

The next thing you can do is to pick a color for fill and border and it will look appealing. Make sure that the fill and border has the same color. For example, if the fill is white color and the border is black color, you will obviously see the border line. We do not want to see the border line here. 

You could even add image on it and resize it to however you like. 

When you are done, click on Share > Export and tick on only ICON. You may choose to do export all but you’ll only have some of the size. I’ll show you an easier way to get all the sizes you need to submit an app.

Next, go to makeappicon and drag the ICON that was downloaded onto the toaster and let it bake your icon into many different sizes.

All sizes will then be generated and will be sent to the email you input. You may even opt not to receive any email which is what I did.

Download the zip files from the email and start uploading the necessary size for your apps. Some of the files you will see are Icon-App-20×20@2x.png which you may see that it is required on the Xcode. Simply drag and drop onto the Xcode.

The last step is to create an app on iTunes Connect and you are suppose to upload an icon for that. For that icon, the file you will be using is ItunesArtwork@2x.png which is also located in the folder.

This step also generates icon for Android and iMessenger as well. It really does save a lot of time.

  • Article By :
    Founder of DaddyCoding. Studied Computer Science, Information System and Information Technology at BYU-Hawaii. Currently spending most of my time researching and learning on helping to expose making iOS apps.

Random Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*