0 1 00:00:00,880 --> 00:00:01,170 All right. 1 2 00:00:01,200 --> 00:00:04,260 So at the moment, this is what our app looks like. 2 3 00:00:04,260 --> 00:00:06,540 Now, I want to make a few modifications 3 4 00:00:06,540 --> 00:00:09,420 to the app to maybe jazz it up a little bit. 4 5 00:00:09,480 --> 00:00:15,580 So the first thing I want to do is I want to make that image fill the entire space of the image view. 5 6 00:00:15,840 --> 00:00:20,220 So let's change that image view from Aspect Fit to Aspect Fill. 6 7 00:00:20,640 --> 00:00:27,470 Then I want to change the nav bar color to maybe something that looks a bit more like a garden app, 7 8 00:00:27,650 --> 00:00:35,100 so some form of green, and I'll change the background view as well to some sort of nice light green color. 8 9 00:00:35,150 --> 00:00:38,520 That means I need to change my label to a white text. 9 10 00:00:38,540 --> 00:00:42,110 I'm also going to change that camera to a white camera. 10 11 00:00:42,110 --> 00:00:46,520 All right. So, now I'm going to show you how we can create a neat little app icon for our app. 11 12 00:00:46,580 --> 00:00:52,430 So I'm just going to go onto Freepik, which is a really nice website for graphic resources, and I'll 12 13 00:00:52,430 --> 00:00:57,720 just search for flower. All right. Cool. So we've got loads of different types of flowers, 13 14 00:00:57,730 --> 00:01:02,690 but I want something kind of simple, maybe something like one of these flowers. 14 15 00:01:02,830 --> 00:01:10,300 So let's go ahead and download it and unzip it. As you can see, they include the license, but also a file 15 16 00:01:10,300 --> 00:01:13,070 that we can edit inside illustrator. 16 17 00:01:13,210 --> 00:01:19,900 So that's an EPS file which is, basically, a vector file. So the flower that I'm quite keen on is 17 18 00:01:19,900 --> 00:01:25,270 probably this one. So I'm just going to select it and copy it by command C, and then I'm going to open 18 19 00:01:25,270 --> 00:01:29,340 up Photoshop and make a new canvas. 19 20 00:01:29,350 --> 00:01:35,800 So this is really important because we're going to be making our app icon the easy way by using this 20 21 00:01:35,800 --> 00:01:37,260 website, MakeAppIcon 21 22 00:01:37,330 --> 00:01:42,770 You can see that they want your starting image size to be 1536 x 1536. 22 23 00:01:42,880 --> 00:01:44,110 So super large. 23 24 00:01:44,170 --> 00:01:49,460 So that's what I'm going to make here, 1536 x 1536. 24 25 00:01:49,480 --> 00:01:50,340 Hit enter. 25 26 00:01:50,490 --> 00:01:50,890 All right. 26 27 00:01:50,920 --> 00:01:58,180 And then I'm going to paste my image in as a smart object and I'm going to scale it up, so that it looks 27 28 00:01:58,510 --> 00:02:00,480 reasonably large on screen. 28 29 00:02:00,670 --> 00:02:03,610 So maybe about this size, I guess. 29 30 00:02:03,730 --> 00:02:09,700 Now, I'm pretty bad at centering by eye, so I'm going to use Photoshop to help me do that. 30 31 00:02:09,700 --> 00:02:15,520 So I'm going to select the entire screen, and then I will make it horizontally and vertically centered. 31 32 00:02:15,930 --> 00:02:16,720 Sweet. 32 33 00:02:16,870 --> 00:02:22,600 So the next thing I want to do is add a gradient to the background to make it look nice and apply. 33 34 00:02:23,260 --> 00:02:29,530 So to do that, I'm going to go back into Illustrator, and then I'm going to select some colors from this 34 35 00:02:29,530 --> 00:02:31,090 image that we chose. 35 36 00:02:31,210 --> 00:02:38,110 So I'm going to use the color dropper tool, of course, and I want to use a nice dark purple. 36 37 00:02:38,110 --> 00:02:42,890 So let's copy that hex code and I'm going to add a gradient here. 37 38 00:02:43,150 --> 00:02:47,860 So, as you can see, I've actually already added it in here, but we'll just do it again to show you. 38 39 00:02:47,860 --> 00:02:51,140 So here I'm going to add that color I got from earlier on. 39 40 00:02:51,280 --> 00:02:53,120 And then, the other side of the gradient 40 41 00:02:53,140 --> 00:02:57,700 I'm just going to use a, maybe, a lighter purple, like maybe one of these. 41 42 00:02:57,700 --> 00:03:03,810 All right. So let's copy that and get back into Photoshop and edit this. 42 43 00:03:03,820 --> 00:03:08,230 Let's change that color to this one. 43 44 00:03:08,550 --> 00:03:11,050 All right. Cool. Looking good. 44 45 00:03:11,050 --> 00:03:15,480 Now, I'm going to add my gradient. 45 46 00:03:15,490 --> 00:03:18,280 Maybe I'll just drop it down vertically. 46 47 00:03:18,310 --> 00:03:20,040 Looks, looks all right. 47 48 00:03:20,140 --> 00:03:26,010 I think I could make this a little bit brighter. of a little bit-- 48 49 00:03:27,130 --> 00:03:32,660 bit more purple, but brighter of a color, and hit 49 50 00:03:32,830 --> 00:03:33,240 OK. 50 51 00:03:33,250 --> 00:03:34,480 Yeah, that looks pretty neat. 51 52 00:03:34,690 --> 00:03:36,380 Let's put our image on top. 52 53 00:03:36,550 --> 00:03:37,250 Looking good. 53 54 00:03:37,270 --> 00:03:39,500 So let's go ahead and save this. 54 55 00:03:39,520 --> 00:03:48,580 I'll call it WhatFlowerAppIcon.psd, and I'm going to uncheck the layers and I'm going to save 55 56 00:03:48,580 --> 00:03:51,570 it onto my desktop. All right. Cool. 56 57 00:03:51,580 --> 00:03:55,520 So once that's done, then I'm just going to drop it in here. 57 58 00:03:55,540 --> 00:03:58,120 This is literally the easiest thing ever. 58 59 00:03:58,180 --> 00:04:06,360 So I've got my desk top open and I'm just going to drag this image in PSD format into the toaster. 59 60 00:04:07,120 --> 00:04:12,580 And you will see it going into the toaster, it's s really neat animation, and it's going to bake it for a 60 61 00:04:12,580 --> 00:04:13,330 little while. 61 62 00:04:13,360 --> 00:04:20,230 So it's going to ask you for an e-mail address to send the processed images to you, so you can use whatever 62 63 00:04:20,230 --> 00:04:20,800 you like. 63 64 00:04:20,800 --> 00:04:24,740 I personally have a burner email address just for these kind of purposes. 64 65 00:04:24,790 --> 00:04:29,380 So the icons that I want I don't want it for watch and I don't really want to subscribe. 65 66 00:04:29,410 --> 00:04:33,130 And then all you have to do is just add your email and you'll be able to download it. And you can see 66 67 00:04:33,130 --> 00:04:36,300 that they provide all of the sizes that you need. 67 68 00:04:37,570 --> 00:04:37,860 All right. 68 69 00:04:37,870 --> 00:04:43,750 So let's go ahead and check e-mail. All right, so there's our app icon for MakeAppIcon and I'm just going 69 70 00:04:43,750 --> 00:04:46,590 to download the ZIP file that they've provided. 70 71 00:04:46,720 --> 00:04:47,020 Okay. 71 72 00:04:47,020 --> 00:04:52,190 So I'm going to unzip that app icon and then you can see that you've got three folders: 72 73 00:04:52,360 --> 00:04:57,940 android, imessenger, and ios. The one that we're interested is the ios. And you can see that you've got all 73 74 00:04:57,940 --> 00:04:59,360 the icons that you need 74 75 00:04:59,500 --> 00:05:04,660 and also it's formatted in a way that you can basically just drag and drop it into your folder. 75 76 00:05:04,660 --> 00:05:10,630 If you have a look inside your assets.xcassets folder and you say show in Finder the app icon, 76 77 00:05:10,630 --> 00:05:18,130 you can see that it's named exactly the same, Appicon.appiconset. So all we need to do is just to replace 77 78 00:05:18,490 --> 00:05:19,450 this folder. 78 79 00:05:19,470 --> 00:05:22,180 So I'm--so just to recap. 79 80 00:05:22,180 --> 00:05:27,550 I'm in the assets.xcassets with the AppIcon selected. Currently, it's completely empty. 80 81 00:05:27,550 --> 00:05:30,240 I'm going to right click and say show in Finder. 81 82 00:05:30,250 --> 00:05:31,410 So this is where it is, 82 83 00:05:31,450 --> 00:05:37,570 Assets.xcassets, and then I'm going to delete this, and instead, drag this new one in here. 83 84 00:05:37,570 --> 00:05:41,470 And you'll see that it updates an Xcode and it's all beautifully classified, 84 85 00:05:41,470 --> 00:05:43,550 none of this dragging and dropping. 85 86 00:05:43,550 --> 00:05:48,910 So some of these are not placed because they are of the wrong size. 86 87 00:05:48,910 --> 00:05:51,020 So all we need to do is just to delete them 87 88 00:05:51,190 --> 00:05:52,690 and you're good to go. 88 89 00:05:52,780 --> 00:05:56,350 So let's check out our beautiful app icon on our phone. 89 90 00:05:56,350 --> 00:05:57,730 And there it is. 90 91 00:05:57,730 --> 00:05:59,050 Looks pretty neat, right? 91 92 00:05:59,230 --> 00:06:04,750 So you can go ahead and style your app, however, you like, change the colors, change the layout, change the 92 93 00:06:04,750 --> 00:06:06,610 designs. Basically, go nuts, 93 94 00:06:06,640 --> 00:06:09,910 make it your own, and make it however you want it to be. 94 95 00:06:09,910 --> 00:06:15,420 So I hope you enjoyed learning how to convert various models into a format that we can use with CoreML 95 96 00:06:15,420 --> 00:06:19,120 and creating our flower classification app. 96 97 00:06:19,180 --> 00:06:24,210 So there's loads of places where you can find pre-trained models. 97 98 00:06:24,220 --> 00:06:29,530 The easiest is probably just Googling it for the particular implementation that you want and see if 98 99 00:06:29,530 --> 00:06:30,420 it exists. 99 100 00:06:30,490 --> 00:06:36,160 But for Caffe at least, I know that there's something called Model Zoo where you've got a whole load of 100 101 00:06:36,220 --> 00:06:41,350 pre-trained models that you can basically download and use. And I'll include a link to this 101 102 00:06:41,380 --> 00:06:42,850 in this lesson as well. 102 103 00:06:42,850 --> 00:06:47,100 So onwards and upwards, and I will see you on the next module.