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