Creating App Icons

Contents

keyboard_tab
Design Practice
1
Home Icon
PREVIEW5m 12s
2
4
Faces
8m 15s

The course is part of this learning path

Start course
Overview
Difficulty
Intermediate
Duration
47m
Students
3
Description

This course covers how to draw some icons and logos within your iOS app. In order to do that we're going to use Adobe XD one more time and you will see it in practice.

Transcript

Hi, in order to submit your apps to the App Store, you have to have an app icon, right? So, within this lecture we're going to see how we can do that. In order to do that, I'm just going to create an exemplary XCode project and we're going to work on that because we should know how to embed those icons in our XCode. So, I'm just going to go for a single view app and I'm just going to name this weather app, okay? Weather logo app because I will assume that we had a weather app and we're going to create a logo or an icon for that app. So, let me put this under my iOS complete folder and it will create a project for me. And in fact we're not going to do anything in this project, but we're just going to go into the arts folder and just click on that app icon like that, okay? So, when you do that, you can see the necessary icons that you should create for your app. As you can see, it gives us the pixels as well. Like we have to go for 40, 40. We have to go for 60, 60, and so on. So, we have different sizes and we have to create icons for each size over here. So, how do we do that? It's fairly easy, right? We can just open a new Adobe XD project, okay? So, let me open the Adobe XD one more time and we're going to go for custom size because we're going to create the same pixels. We're going to use the same pixels that XCode wants from us. For example, I'm just going to start with 40-40. So, let me zoom in and in my app icon, I want to have a blue background and on the blue background, I want to have a sun, okay? So, let me create this background first. So, let me lose this, actually I'm not going to use any border but I'm just going to fill this in with some nice blue color like that, okay? So, let me make this a little bit dark like that. So, yes, this is good. And over here I'm just going to go for a perfect circle and in the circle, I'm just going to lose the borders one more time but rather I'm just going to fill this up with something yellow like that. So, it's going to be our sun. And of course we need some lines for our sun like that, okay? So, I'm just going to go for this vertical one to begin with. So, this looks good but I need something yellow, okay? So, I need the exact same yellow actually. So, let me do this like that and I need some rounded shape like this. So, maybe we can go for 2 in the thickness and here we go. Now we have some sun-like shape but we have to copy and paste this a couple of times in order to have some other lines over here as well. Yes, I believe they are exactly the same size right now. So, let me copy and paste this and rather than just moving this around, I'm just going to change this like that, okay? So, I'm just going to have a horizontal line right now. So, I believe they're okay. So, let me copy and paste this one more time so that I can have other lines here as well like that and let me bring in the end of this line over here and let me continue copy and pasting this thing. And I believe that's good. So, of course, we have to adjust this spaces a little bit and adjust the size over here as well. So, let me make this a little bit to the left and this one a little bit to the right, and let me copy and paste it one more time and let me make this over here. I believe that's good. So, let me make this a little bit to the right. So, let me copy and paste one more time so that we can have our last line. Of course, we have to adjust this a little bit to make this actually better, okay? So, maybe we can make this a little bit smaller so they have to be symmetrical in order to make this a perfect sun. So, this looks good, right? So, what I'm going to do, I'm just going to export this and see if we can use it on our XCode project. So, I'm just going to name this Sun logo, okay? And by clicking over this little icon or just right clicking over here and say mark for export, you can just mark it for exporting, and if you come over here to file export batch, it will just create this icon for us. So, I'm just going to go for iOS and export this, okay? So, let me see if we can make this in our desktop, nope, so let me go back, and rather than just searching for it, I'm just going to export it one more time and I don't want it in the creative cloud files, I just want  it on my desktop, okay? So, here we go, now we see the PNGs over here. So, this is 40-40 and we have 2X and 3X as well. So, in the 40-40, I'm just going to bring in the first one and drop it over here and here we go. Now we have our first icon, so this should be 80-80, okay? So, do we have something over here like 80-80? So, let me see. Yes, I believe, and as you can see if I make this into another position like that, it won't accept it and it will just display an error message. But if I make it in the right place, it won't display an error or warning, okay? So, let me bring in this as well and do we have something like 120-120? I don't think so. So, let me bring in 140- 40 one more time. And here we go. Now we have some of these icons. So, what can we do is just copy and paste this and try to scale this up or down or we can use some online service as well. So, let me show how it goes. Let me go to Google and I'm going to search for Apple iOS icon generator, okay? So, this will give us some options over here, like millions of options. So, I'm just going to go for the first one which is appiconmaker.co. So, it asks me to choose a file so let me do so. Let me choose the Sun logo, and if I click over here to generate it will generate it for iOS. And if you scroll down, you will see it created so much variations of this file. So, right now, in fact, I can go for that like for 48 and just download it to use it on my app. Let me see if we have something like 48, yeah we have 58. So, let me go for 76 for example, okay? So, let me download that and let me download 60 as well. So, let me just close that down and let me go back. So, let me start with 76, so it should go up here. Yes, that's the one and let me go for 60. So, let me open this and bring in the 60 over here. So, as you can see it works, right? So, let's do a couple more examples and we can just use it for iPhone so that we can try to see if it actually works on the real life phone as well. So, I'm going to go for that and 87 as well, so let me come over here and try to find out this 87 and the other one. Yes, this one and let me go for the 87. So, here we go. Now in order to test this, I'm just going to run this on my simulator, okay? So, if I run this on our simulator you will see the app will actually open and we don't have anything on our app, so we won't be seeing anything on our storyboard or view controller. But if we close down the app on our simulator then we can actually see the icons. So, we're going to test that. So, let me open the simulator so that we can see it and let's see if this is done. So, here we go, it's opening and after it's opened, all you have to do is just close down this app by just dragging this up and here we go. Now we see our icon like that. So, let me test the search as well so let me come over here and search for weather app or weather logo app and here we go, now we see our weather logo app. So, icons actually work. And in this icon generator or app generator, you have to pay attention because let me come over here and let me scroll down. You will see some pixelation on the big sizes. So, in order to avoid this problem you can just go for the biggest icon that you may create in the Adobe XD. And if you actually provide a bigger icon to this website, it will try to scale it down so it won't be pixelated, okay? But if you try something like 40-40 like we did in this lecture, it will be pixelated like that so it won't look good. So, of course, alternative way of doing this is going into the Adobe XD and create everything on your own. So, if you're trying to upload your app to the App Store, I believe this would be very helpful for you if you can come over to your Adobe XD, you can create your app icon like that and you will be good to go to submit. So, let's stop here and continue within the next lecture.

 

About the Author
Students
420
Courses
55
Learning Paths
3

Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.

Covered Topics