Everybody what's going on says Caleb with deps slopes dot com and I'm here to show you how to create
an I message app icon for your project.
You're going to need it.
If you want to submit this to the App Store.
So pull open your project here and click on Message app icon.
Now if you've ever designed an app icon for an iOS app you'll recognize this.
It should look familiar.
Thankfully you need a lot less know a lot fewer sizes than in Iowa.
But you still do need to have one of each of these 2 x 3 x 1 x etc. etc..
So there is a really helpful Web site that I want to show you.
OK so I'm going to pull it up and it is make app icon dot com.
Now it's totally free.
It's very very amazing.
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
go ahead and make app icon sizes for all those sizes you need not only for iOS but also for Android
for the Apple Watch but also for message which is really helpful.
But the thing you need to know is that they do not currently support all the right sizes.
K because I think that an X code 9 they added some new sizes so I want to show you in the finder where
you downloaded your assets.
You probably noticed there's a folder that says icon if you double click it.
There's a folder called message icon and inside there's this icon that I created.
I made this rocket using pixel art which is pretty cool and a gradient.
Just in sketch I created an icon that is 1024 by 1024 and this is the biggest size I made.
So watch what happens when I drop it on the little toaster.
It's going to go ahead and bake it and it's going to turn it into all the right sizes we need which
is very cool.
With exception of a few but I'll show you how to fix that.
So let's see dude.
Doo-Doo London takes a little while sometimes.
But essentially what you're going to have to do is put in your email and click send the email the email
a zip file to you full of all the images.
But if you don't want to be a part of their newsletter you can just tick no and then they won't send
you the emails.
So yeah just like I said you enter your email and you can download them.
Until this you won't subscribe to anything but as you can see it creates a preview of your app icon
for the watch as well as for the iPhone and you can also see what it'll look like on Android which is
pretty cool.
So that's make app icon if you click download it will get sent to your e-mail as a zip file.
And let's close these.
Get out of there.
Goodbye.
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
well as the 29 by 29 for iPad settings.
Other than that you should be good to go.
So let's see.
I'm going to go ahead and drag in these K 27 by 20 right there boom that's in place.
Next we have sixty seven by 50.
That's for the iPad.
Messages icon.
Little higher resolution 74 by 55 at 2 x.
Looks great.
What is this 160 by 45.
I don't think we need that one.
Oh yeah we do.
Some of them you may not need.
Oh and you know what.
It doesn't like that because of the file name is not exactly right.
So you need to drag them in one of the time which is a bit annoying.
There you go.
And this is for the icon for the message app store.
This 24 about 124 for the iOS App Store.
Then we have 32 by 24 down here which is for the messages transcript and then 29 by 29 is not accessible.
So what I did was I opened up the icon in Preview.
OK.
And we need what.
Twenty nine by twenty nine but we need 2 x and 3 x.
So what I did was I created a duplicate.
I went to adjust size and then I just changed it to be 29 times 2 which is 58 by 58.
I saved it.
Then I created another duplicate of the 10:24 by 10:24 and I did 24 times three or 29 times during which
as you can tell is 87.
I had to do the math or I didn't have it ahead anyway.
So 87 by 87 and then save it.
So now all I have to do is double click and drag these in.
Whoops that's another one it does not like the name of.
So I have to do them individually but the size is right.
So that's good.
And then finally just drag in the 2 x 29 by 29 for the iPad.
So very cool with this all situated we can build and run this.
And our message map is going to have a lovely icon which is very cool.
So let's go ahead and let it build and run let me pull open the simulator here and when we see it on
the phone we should see a beautiful app icon.
Although it's going to crash on us.
Not cool.
Let's go ahead and erase all content.
And then we'll be able to examine it and see you know how awesome it looks and let me tell you it looks
awesome.
So while this is doing its thing we're going to talk about what's going to happen in the next video.
You're going to see me design my own stickers for iOS which is pretty neat.
I'm going to design a nice little coffee cup icon that you can just drag on and slap on to anything
that comes in message.
Pretty cool stuff.
If you don't have sketch three you could definitely use another program like Photoshop or.
There's plenty of online tools as well that are at your disposal.
So now let's go ahead and build and run this one more time.
Let's see if that solved our problem.
And there we go there's our icon when it pulls open we should also see it there.
Very cool.
And there's our sticker pack.
Amazing amazing work guys so we now successfully have generated an app icon for our project.
This is required if you want to put it on the App Store so it's good to know.
Let's head over to the next video where we're going to start designing our own stickers using sketch
3.
I'll see you there.