Hey everybody what's going on this is Caleb with Deb's Loeb's dot com and in this video I'm going to
show you how to create your own static stickers using sketch 3 as well as how to cut apart a sprite
sheet to create the images needed to make an aping sequence so go ahead and actually pull open a brand
new sketch 3 document.
And if you don't have sketch three there is a free trial.
And if your free trial is expired you might want to look into using pixel art or another free alternative
program.
So go ahead and pull open a brand new sketched document here and we're going to just simply create a
basic sticker I'm going to create a cup of coffee.
So I'm going to go ahead and create this bigger than I want it to be and then scale it down later so
let's make it.
How about 600 by 600.
OK.
Just to give me a nice big canvas to work with.
And I think I'm going to start by making a rectangle for the base of the coffee cup.
And how about yeah let's go ahead and make it white.
And because of that I'm actually going to change the background color here to be kind of a darker gray
and I'm going to exclude it from being included.
So yeah.
So there's that.
This is cool.
Now I'm going to double click to edit the shape and I'm going to pull these out one two three four five
six seven eight nine 10 11 12 13 14 15.
And for this one we're going to do a much more elegant job and just simply subtract 15.
Very cool.
And you know what I'm actually going to subtract another 10 and maybe another I'll add another 10 here.
All right.
So there's that.
We now have kind of our coffee cup shape which is cool but now I want to add something on the top.
I want to add the actual you know coffee cup thing so I'm going to create a rectangle again and I'm
going to just drop it right on top there and shrink it down a ways and that looks pretty good.
Let's see.
Yeah that sits right on top there.
And now I'm going to go ahead and create another rectangle and put it right there like so now I'm going
to drag it a little bit wider so that it's a little better looking awesome.
And I'm going to double click on it now and I'm going to go ahead and pinch this in maybe 25 and I'm
going to subtract this point 25 as well.
All righty.
Now what I want to do is I want to actually remove the borders from all of these shapes.
Shouldn't have a border and I'm going to go ahead and round a few corners here to make it look a little
less sharp and intense.
So I'm going to select these top two points and I'm going to round them let's try ten.
How does that look.
Yeah that's pretty good.
And I'm also going to go ahead and round these top two corners as well 10 so I'm going actually type
10 this time.
And there's our lead supercool and for the cup I think now you know what I think I'm going to keep it
nice and square because if you think about it a coffee cup is actually actually has hard corners on
the bottom but the lid is the part that actually is you know hard like that.
So next I think what I'm going to do is I'm going to go ahead and put a nice label on the side of this
and to do that I'm just going to create a rectangle that's about the size of a coffee label and I'm
going to try to just kind of line it up here with the with the way it's supposed to be.
And I'm going to just manually create a little bit more with their little more.
Let's just try to thirty eight K that looks pretty good.
Nice.
Let's remove the border and I'm actually going to go ahead and make this dark green.
OK.
I'm going to double click and add these points here and I can actually drag them until they look look
good like so I'm not doing a great job of you know making very pixel perfect work.
But overall this looks pretty OK.
We have a nice image here that will allow us to make a nice sticker.
There is one thing I do want to do.
Going to select all of these and try to center them.
I want to put a nice rounded you know kind of white border around it so it really does look like a peeled
off sticker.
And to do that I'm going to go ahead and just add a border outside and I'm going to make it maybe 20
thick.
Whoa.
That is way too thick.
Maybe 15.
No.
10.
Yeah.
OK.
And I'm going to go ahead and make it white.
Like I said.
And because of that I'm actually going to make the inner shape here maybe a little bit not not gray
definitely not yellow but maybe a little bit off white Yeah.
No that just does not look good.
OK.
Well no you know what let's go with that.
And if I want these corners to be rounded I'm going actually need to select the corners and I'm going
to need to round them as well.
So I think two is good because that makes the border a nice round kind of sticker look which is pretty
sweet.
Let's think what else.
So I want to put it this same border here so I'm actually going to just right click no cause that would
copy the whole style.
I'll just do a border make it white on the outside and make it ten.
Now here's where we're going to run into some issues.
The border is going to bleed over on top of this no matter what shape we add the border to.
Because if you see I'll add a border here.
I'll go outside.
I'll make it ten.
And as you can see it looks OK but you know we're still no matter which one is on top.
We're still going to get that border bleeding over the top and we don't want that.
So that looks pretty good.
I just moved it on top but I don't necessarily want there to be this borderline in the middle.
So what I can do is I can actually go ahead and remove the border from both.
And before you know let's get rid of the border on both there before I move on I'm going to actually
select both of these and click Union and it'll unionize those into a single shape.
And now if I want I can go ahead and add a border to this shape.
I can go ahead and change it to White said it outside and make it 10.
And oops I mean 10.
There we go.
And as you can see we have a nice border that's not getting cut off.
But the issue is now the shape on the inside is totally transparent.
So to fix this one I'm going to do is I'm going to copy these and I'm actually going to go ahead and
paste them above the border there remove the border.
That was given and then I'm actually going to go ahead and increase it by like two percent.
One hundred two percent.
All right now I'm going to drag it underneath that shape that had that kind of clear look to it and
take a look.
Now we have a border that's going around our whole sticker without getting cut off which is pretty neat.
And there we go.
Now we have this awesome border right around our whole shape.
I don't like that this corner is sharp so I'm actually going to select this shape.
Double click on it and I'm going to add rounding to this corner of like to k.
And as you can see now it's nice and round which is pretty sweet.
And what we can do now is we can go ahead and export this as a p n g and we can drag it into our project.
So let's go ahead and let's actually take this whole shape here and let's combine it into one unified
shape.
I'm going to go ahead and reduce the scale like I was saying to have a max height of 128 and I'm going
to go ahead and put this here.
And you know what as I'm looking at this I think the border does need to be a bit wider.
So let's make the border.
How about five.
That might be a little better.
OK let's choose that combined shape and change the thickness to five.
Yeah there we go.
That looks a little better although I am noticing that that little line is there showing which I don't
think it should be.
It appears that there's a bit of an overlap between the shapes which is interesting.
So if I actually zoom out to 100 percent you'll see that it is still showing up but weird.
I wonder why that is because there's not a border that is gray set on these.
So it shouldn't be showing up like that.
But you know what I wonder if I actually reduce this to or increase it to exactly 76 if that.
Oh that's with how about 20 22 and 17.
I wonder if it's just because there's like a point three that's showing up.
Maybe that's part of the problem.
OK so it appears it is still showing up there which is not cool.
And if I move it there creates a border actually you know what.
Ooh I like that better.
I like that a lot actually with a little gap there because then it shows a very clear delineation between
the cap and the the little lip here.
Oh I like when I discover things like that that I like more.
Ok cool.
So it is officially 128 pixels.
We're going to go ahead and reduce our art board here to be 128 by 128.
And you know what it looks like we're having a little bit of sizing issues because the border is not
included in this.
So let's make it 150 by 150 and you'll see I just centered it there.
And now what I can do since the background color is not included.
I can export this at size one acts like so I can call it a coffee cup.
Let's put a dash between coffee and cup.
Save it to my desktop.
And now if I pull open my X code project and go into my sticker pack what I can do is I can just go
ahead and drag it straight on.
OK.
Here it is.
I can drag it in here let's put it right at the front and there we go.
My coffee cup is now totally accessible.
Let's build and run and let's go see how it looks.
That's just one way that you can design an image here in sketch for a sticker which is pretty neat.
Let's see how we did sticker packs loading pulling open here.
And it crashed.
OK.
Interesting.
This is a problem that I have found with the simulator sometimes it's buggy says mobile S-M as quit
unexpectedly.
So to fix this what I've been doing is I've been going in.
I've been going into my apps here and as you can see there is no app loaded but it's saying that it's
crashing so I'm going to go ahead and erase all content and settings.
This takes about you know 20 seconds or more depending on your machine.
But basically it's just going to do a factory reset of the whole phone which is frustrating.
You don't have to do this but.
Yeah.
So it'll load and then we'll try to build and run it again.
OK.
So here we go let's try that one more time.
And you know what let's quit the simulator just for good measure build and run.
Wait for it to pop open here and load and then we'll see if our coffee cup shows up on our sticker pack
the way we're hoping.
K Rigaud it's loading.
There it is.
And yeah let's just see how we did pulling it up.
Their message app opening.
Cool.
Like it's taking its sweet time to load.
All right.
So let's send a message.
Let's get some coffee.
Socky Whoops.
That's different.
All right let's get some coffee.
Awesome.
Boom.
Select our sticker pack and there's our coffee cup.
As you can see it's floating and I can drag and drop it right there.
Boom.
Oh that's so cool.
Super amazing.
Now what I do notice it's hard to see because of the white border.
So I think in sketch I'm going to do some modifications here.
I'm going to add a little bit of a drop shadow.
And now I'm going to export it with that shadow so let's do that again.
I'm going to call it coffeecup.
Save it.
Replace it.
Minimize that and let's go ahead and delete that coffee cup and let's pull in the one we just fixed
with the shadow.
As you can see that's a little easier to see.
So I'm going to stop at here and I'm going to build and run one more time.
A lot of this process is you know kind of trial and error finding out what looks good and what doesn't.
So I'm going to send that message again.
Let's get some coffee.
And I can drag my sticker.
You can already tell it looks way better if I drop it there.
It's very easily visible because of the drop shadow.
Super super cool guys amazing I could send that individually if I wanted to.
And there it is.
So cool.
So this video has actually gone a little bit long so we're going to head over to the next video where
I'm going to show you how to cut apart one of those sprite sheets to create a sequence of animated piano
keys just like that little running character here.
So let's head over to the next video and let's do that now.