1
00:00:07,050 --> 00:00:11,920
Everybody what's going on says Caleb with deps slopes dot com and I'm here to show you how to create

2
00:00:12,160 --> 00:00:14,710
an I message app icon for your project.

3
00:00:14,710 --> 00:00:15,340
You're going to need it.

4
00:00:15,370 --> 00:00:17,110
If you want to submit this to the App Store.

5
00:00:17,260 --> 00:00:21,600
So pull open your project here and click on Message app icon.

6
00:00:21,850 --> 00:00:26,080
Now if you've ever designed an app icon for an iOS app you'll recognize this.

7
00:00:26,080 --> 00:00:27,390
It should look familiar.

8
00:00:27,730 --> 00:00:32,830
Thankfully you need a lot less know a lot fewer sizes than in Iowa.

9
00:00:33,070 --> 00:00:38,830
But you still do need to have one of each of these 2 x 3 x 1 x etc. etc..

10
00:00:39,070 --> 00:00:42,630
So there is a really helpful Web site that I want to show you.

11
00:00:42,770 --> 00:00:46,930
OK so I'm going to pull it up and it is make app icon dot com.

12
00:00:46,960 --> 00:00:48,310
Now it's totally free.

13
00:00:48,310 --> 00:00:49,800
It's very very amazing.

14
00:00:49,810 --> 00:00:57,400
All you need to do is upload an image they suggest 15:30 6 by 15 36 and what they will do is they will

15
00:00:57,400 --> 00:01:04,960
go ahead and make app icon sizes for all those sizes you need not only for iOS but also for Android

16
00:01:04,960 --> 00:01:10,060
for the Apple Watch but also for message which is really helpful.

17
00:01:10,060 --> 00:01:15,250
But the thing you need to know is that they do not currently support all the right sizes.

18
00:01:15,250 --> 00:01:20,920
K because I think that an X code 9 they added some new sizes so I want to show you in the finder where

19
00:01:20,920 --> 00:01:22,150
you downloaded your assets.

20
00:01:22,150 --> 00:01:26,150
You probably noticed there's a folder that says icon if you double click it.

21
00:01:26,170 --> 00:01:31,080
There's a folder called message icon and inside there's this icon that I created.

22
00:01:31,150 --> 00:01:34,840
I made this rocket using pixel art which is pretty cool and a gradient.

23
00:01:34,840 --> 00:01:42,820
Just in sketch I created an icon that is 1024 by 1024 and this is the biggest size I made.

24
00:01:42,910 --> 00:01:45,880
So watch what happens when I drop it on the little toaster.

25
00:01:45,880 --> 00:01:50,980
It's going to go ahead and bake it and it's going to turn it into all the right sizes we need which

26
00:01:50,980 --> 00:01:52,060
is very cool.

27
00:01:52,150 --> 00:01:54,550
With exception of a few but I'll show you how to fix that.

28
00:01:54,700 --> 00:01:57,670
So let's see dude.

29
00:01:57,820 --> 00:02:01,710
Doo-Doo London takes a little while sometimes.

30
00:02:01,730 --> 00:02:09,220
But essentially what you're going to have to do is put in your email and click send the email the email

31
00:02:09,250 --> 00:02:11,580
a zip file to you full of all the images.

32
00:02:11,740 --> 00:02:16,270
But if you don't want to be a part of their newsletter you can just tick no and then they won't send

33
00:02:16,270 --> 00:02:17,570
you the emails.

34
00:02:17,650 --> 00:02:21,250
So yeah just like I said you enter your email and you can download them.

35
00:02:21,340 --> 00:02:26,770
Until this you won't subscribe to anything but as you can see it creates a preview of your app icon

36
00:02:26,770 --> 00:02:31,660
for the watch as well as for the iPhone and you can also see what it'll look like on Android which is

37
00:02:31,660 --> 00:02:32,550
pretty cool.

38
00:02:32,680 --> 00:02:38,470
So that's make app icon if you click download it will get sent to your e-mail as a zip file.

39
00:02:38,680 --> 00:02:40,090
And let's close these.

40
00:02:40,090 --> 00:02:40,740
Get out of there.

41
00:02:40,760 --> 00:02:41,680
Goodbye.

42
00:02:41,920 --> 00:02:50,230
And when you download it most of the icons will be OK with exception of the 29 by 29 to X and 3 x as

43
00:02:50,230 --> 00:02:54,290
well as the 29 by 29 for iPad settings.

44
00:02:54,370 --> 00:02:56,420
Other than that you should be good to go.

45
00:02:56,420 --> 00:02:58,140
So let's see.

46
00:02:58,150 --> 00:03:04,720
I'm going to go ahead and drag in these K 27 by 20 right there boom that's in place.

47
00:03:04,720 --> 00:03:07,870
Next we have sixty seven by 50.

48
00:03:08,110 --> 00:03:09,410
That's for the iPad.

49
00:03:09,410 --> 00:03:10,500
Messages icon.

50
00:03:10,630 --> 00:03:14,840
Little higher resolution 74 by 55 at 2 x.

51
00:03:14,980 --> 00:03:16,720
Looks great.

52
00:03:16,720 --> 00:03:18,820
What is this 160 by 45.

53
00:03:18,820 --> 00:03:20,070
I don't think we need that one.

54
00:03:20,200 --> 00:03:20,970
Oh yeah we do.

55
00:03:21,160 --> 00:03:23,070
Some of them you may not need.

56
00:03:23,380 --> 00:03:24,110
Oh and you know what.

57
00:03:24,130 --> 00:03:26,880
It doesn't like that because of the file name is not exactly right.

58
00:03:26,880 --> 00:03:30,400
So you need to drag them in one of the time which is a bit annoying.

59
00:03:30,400 --> 00:03:31,560
There you go.

60
00:03:31,930 --> 00:03:35,970
And this is for the icon for the message app store.

61
00:03:36,020 --> 00:03:39,970
This 24 about 124 for the iOS App Store.

62
00:03:39,970 --> 00:03:50,290
Then we have 32 by 24 down here which is for the messages transcript and then 29 by 29 is not accessible.

63
00:03:50,290 --> 00:03:54,200
So what I did was I opened up the icon in Preview.

64
00:03:54,370 --> 00:03:54,890
OK.

65
00:03:55,300 --> 00:03:56,300
And we need what.

66
00:03:56,310 --> 00:04:00,000
Twenty nine by twenty nine but we need 2 x and 3 x.

67
00:04:00,040 --> 00:04:02,570
So what I did was I created a duplicate.

68
00:04:02,590 --> 00:04:08,920
I went to adjust size and then I just changed it to be 29 times 2 which is 58 by 58.

69
00:04:08,920 --> 00:04:09,900
I saved it.

70
00:04:10,120 --> 00:04:18,790
Then I created another duplicate of the 10:24 by 10:24 and I did 24 times three or 29 times during which

71
00:04:18,790 --> 00:04:20,680
as you can tell is 87.

72
00:04:20,680 --> 00:04:23,150
I had to do the math or I didn't have it ahead anyway.

73
00:04:23,200 --> 00:04:25,880
So 87 by 87 and then save it.

74
00:04:26,110 --> 00:04:29,920
So now all I have to do is double click and drag these in.

75
00:04:30,140 --> 00:04:32,410
Whoops that's another one it does not like the name of.

76
00:04:32,410 --> 00:04:35,980
So I have to do them individually but the size is right.

77
00:04:35,980 --> 00:04:36,830
So that's good.

78
00:04:37,030 --> 00:04:41,700
And then finally just drag in the 2 x 29 by 29 for the iPad.

79
00:04:42,040 --> 00:04:46,060
So very cool with this all situated we can build and run this.

80
00:04:46,180 --> 00:04:50,980
And our message map is going to have a lovely icon which is very cool.

81
00:04:50,980 --> 00:04:56,560
So let's go ahead and let it build and run let me pull open the simulator here and when we see it on

82
00:04:56,560 --> 00:04:59,240
the phone we should see a beautiful app icon.

83
00:04:59,290 --> 00:05:01,390
Although it's going to crash on us.

84
00:05:01,390 --> 00:05:02,740
Not cool.

85
00:05:02,740 --> 00:05:04,690
Let's go ahead and erase all content.

86
00:05:05,010 --> 00:05:10,560
And then we'll be able to examine it and see you know how awesome it looks and let me tell you it looks

87
00:05:10,560 --> 00:05:11,530
awesome.

88
00:05:11,550 --> 00:05:16,140
So while this is doing its thing we're going to talk about what's going to happen in the next video.

89
00:05:16,260 --> 00:05:20,700
You're going to see me design my own stickers for iOS which is pretty neat.

90
00:05:20,700 --> 00:05:25,440
I'm going to design a nice little coffee cup icon that you can just drag on and slap on to anything

91
00:05:25,440 --> 00:05:26,760
that comes in message.

92
00:05:26,760 --> 00:05:27,980
Pretty cool stuff.

93
00:05:28,140 --> 00:05:33,300
If you don't have sketch three you could definitely use another program like Photoshop or.

94
00:05:33,390 --> 00:05:36,990
There's plenty of online tools as well that are at your disposal.

95
00:05:37,000 --> 00:05:40,080
So now let's go ahead and build and run this one more time.

96
00:05:40,200 --> 00:05:42,650
Let's see if that solved our problem.

97
00:05:43,020 --> 00:05:47,430
And there we go there's our icon when it pulls open we should also see it there.

98
00:05:47,430 --> 00:05:48,380
Very cool.

99
00:05:48,390 --> 00:05:49,860
And there's our sticker pack.

100
00:05:49,860 --> 00:05:56,120
Amazing amazing work guys so we now successfully have generated an app icon for our project.

101
00:05:56,160 --> 00:05:59,570
This is required if you want to put it on the App Store so it's good to know.

102
00:05:59,670 --> 00:06:04,040
Let's head over to the next video where we're going to start designing our own stickers using sketch

103
00:06:04,040 --> 00:06:04,480
3.

104
00:06:04,480 --> 00:06:05,810
I'll see you there.