Now we're really close to the homestretch. 1
All that's left are the last two things. 2
And in this lesson, we're going to learn how to design and create a custom app icon which will display 3
when we run our app. 4
Now coming back to Xcode, the place where you would add the app icons is inside the folder Assets.xcassets. 5
And we really saw earlier that we have this blank template full of slots for all of our different 6
app icons. 7
Now why are there so many different slots, you might ask? 8
Well, they are used for different purposes. 9
For example, you might have a certain size for the icon that gets shown when you get a notification. 10
You might have one that's in the spotlight area. 11
You might have one that's displayed on the iOS App Store. 12
And if we're creating both iPad and iPhone apps, then there's also different dimensions. 13
And the reason why we're providing lots of different dimensions, rather than just a single large one 14
and get the iPhone or the iPad to scale it down, is because of speed. If while our app is running, it has 15
to run and scale down to all of these different sizes, then it's going to make our app seem a lot 16
slower than it could be. 17
So that's why Apple wants us to create all of the assets and all the sizes that it needs so that it doesn't 18
have to do any scaling to keep our app as fast as possible. 19
Now if you head back to that folder of images that you downloaded in the last lesson, you'll be able 20
to find a whole bunch of icon images. 21
And notice how we've actually named them with the 2x, 3x postfixes. 22
So if you want, you can simply click and drag to select all of these icons, and then drop them into the 23
app icon slots. 24
So it should automatically know where it needs to go because we provided all the size information in 25
the naming of the icons. 26
Now sometimes though it doesn't know where to place something. For example, this 1020 sized icon should 27
actually be in the slot which needs a 1020 image. 28
So you might have to manually adjust things occasionally. 29
Now notice how out iPad slots are missing. 30
Now here's a question. If you were creating your own app with your own app icons, how would you go about 31
making all of these different size assets? 32
Well, one of the easiest ways is using that website that we saw earlier on App Icon Generator and we 33
previously saw that we could use their image set generator to create the 1x, 2x, 3x images and to 34
scale it down automatically. 35
But they also have an app icon feature which is, again, free to use. 36
So the way that this works is that you should start out with a large image size and it should ideally 37
be 1024 pixels x 1024. 38
And then you can select all of the places that you want to use it including iPhone watch or Android. 39
So how do we generate the initial icon image? 40
Well, if you already have a picture or something that can be scaled down to this size using a piece of 41
design software, 42
well, if you're familiar with design software, such as Photoshop, Illustrator, Sketch, or anything that you 43
want to create an app icon with, then you could use that to create your app icon. 44
But the way that I'm going to show you today is probably one of the easiest to learn and it's completely 45
free to use and there's nothing to download. 46
Head over to canva.com and go ahead and sign up. 47
And once you've signed up, you should see a screen that looks like this. 48
Now they have a whole bunch of presized templates. 49
Say, for example, if you wanted to create a presentation or a Facebook cover or an Instagram post. 50
But in our case, we're going to choose custom dimensions and we're going to put in that dimension that 51
we saw earlier on from the App Icon Generator which is 1024 x 1024. 52
And now that creates a blank square for us, ready to add in our design. 53
Now the cool thing about Canva is that they have a whole bunch of professionally designed templates 54
where you can just simply switch out the picture or change the text. 55
So for example, if I just dropped that in, then I can simply change these things and create my own design. 56
But in our case, we actually want to create a app icon. 57
So it's going to be completely different from what they've imagined. 58
So these are pretty much just kind of like Instagram posts or some sort of blog titles or images. 59
Instead I'm going to go over to the elements and I'm just going to start with some really simple shapes. 60
So let's say that I had a circle, maybe, that I'm going to try and place in the center just by dragging 61
it around. 62
I'm going to change it to a nice, let's say, a teal color. 63
So we've now got a circle as our app icon. And you can choose from other things such as charts or different 64
shapes, different gradients, lines, and a whole bunch of vector illustrations that you can pick from as 65
well. 66
But in my case, I'm going to keep it really simple. 67
So I'm going to just add another shape, probably just a triangle, and I'm going to put this 68
right over here, and then make it cover just about half of the screen. And then I'm going to change this 69
to a white color. And then I'm going to change the background to maybe something that's got an 70
interesting gradient. And finally, for our diamond app, I'm just going to search for the word "diamond" and 71
see if they have some nice free assets I can use. 72
So this one looks pretty good. 73
So I'm gonna put that in the middle and then I'm gonna scale it down a little bit, and then center it. 74
Now all I have to do is give my file a name. 75
I'm gonna call it Diamond App Icon. And then go ahead and click download to download it 76
as a PNG. Click download and it should only take just a little while for it to save. 77
And now I can go back to my App Icon Generator, click and drop it here, and only check the ones that I 78
want which is the iPhone and iPad, and then click Generates. 79
And now I've got all of my app icons created. 80
And once you've unzipped that file, you should end up with a folder called Assets.xcassets. 81
Now let me just switch over to this view, 82
so you can see all the levels that the folder contains. Inside that folder, 83
there's something called AppIcon.appiconset. 84
And inside that folder, there's all of the different sizes that our app icon needs to be. 85
So notice how this folder is exactly the same as the name of our assets folder. 86
Well, if we go ahead and right-click on AppIcon and click on Show in Finder, you can see that it 87
mimics exactly the same naming convention as what we have in Xcode. So in Xcode, our app icon set is 88
saved inside a folder called AppIcon.appiconsets. 89
Inside there, there's a whole bunch of icons and a file called Contents.json. 90
Now, this file is the one that arranges each of these icons in their correct place holders. 91
And if you look at the folder that we downloaded from our App Icon Generator, it also got 92
Contents.json. 93
So this means that if we replace this AppIcon folder with the one that we currently have, then we can 94
have all of our images already placed in the right place holders without any extra work on our part. 95
So what I want you to do is to take the folder called AppIcon.appiconset from the assets folder 96
that you downloaded, and then just click and drag into the same area where you've got 97
the AppIcon.appiconset from Xcode. 98
Now once you let it go, it will ask you if you want to replace the existing AppIcon folder and you're going 99
to say, yes, replace. 100
And now notice how we have all of our app icons all ready placed where they need to be. 101
Now there's just usually one extra one that's unassigned which is what's creating the warning here. 102
So if you hit backspace, it will delete that and it will get rid of that warning. 103
We're finally done with our app and we're ready to run it and check it out. In the next lesson, 104
I'll show you how to run the app on a simulator 105
if you don't have a physical iPhone device. And then, later on, I'll show you how to actually run it onto 106
an iPhone or an iPad if you indeed have one. 107
So all of that and more, I'll see you on the next lesson.