Everybody what's going on is Kayla with Deb's slopes dot com.
And in this video I'm going to show you how to cut a part sprite sheets which is a pretty common way.
Game designers share the you know animations for a certain character in an app.
And I'm going to show you how we can cut those apart to turn them into an animated sequence of pings.
So go ahead and pull open a blank sketch file.
The one I'm going to pull up is not blank but I just want to show you basically how I did this.
So this is the Spryte that I dragged in for the little running character and basically my process is
I go ahead and duplicate the image like so by pressing command D.
So now you can see there's a duplicate layer there.
And then what I do is I double click the image and I drag Whoops I double click the image.
I make sure the selection tool is selected and then I basically you know drag as close as I can to the
border without cutting anything off and then I just crop it.
And then what I did was I created an art board for each frame that was that I knew for sure would be
bigger than all of the images but not by much.
So as you can see some of these are very close to the edge and that took a little bit of trial and error.
But now that I have cut that little layer I can just drag it up into its own art board and then at the
very end I can go ahead and export all these art boards as their own individual punji frame.
So let's go ahead and let's create a new page here and let's call this chest because I have a nice little
treasure chest animation here we're going to do.
So if you go into stickers sprite sheets and you drag in chest you can see it right there.
That looks pretty cool.
And I'm actually going to go ahead and zoom out a bit but it looks like the biggest one is going to
be this guy here so I'm going to try my best to make an art board.
That's a square that can fit that guy.
So looks like 350 should be good.
So let's go ahead and make an onboard that's 350 by 350 and I'm actually going to drag this up there
out of the way.
We have six frames so I'm going to duplicate this six times.
And let's go ahead and actually put those right up next to each other.
They're friendly they're nice.
They know each other so we can go ahead and move those right here.
There we go.
OK so six frames and we have six little pieces of art here to deal with.
So I'm actually.
Well you know what let's be let's be good designers here let's name our boards from one frame to frame
three frame four five and six.
And now we're just going to follow that process.
I was just telling you.
So duplicate the Sprite she double click it.
Do your best to select as much as possible and then crop it.
Then we can drag that layer up here.
And don't worry about centering things we'll do that in a moment.
So now go ahead and duplicate it.
Double click and go ahead and crop it after you select enough.
There we go whoops.
Duplicate the sprite sheet.
Double click it.
Then we're going to go ahead and do our best to get as much of it as we can crop it drag it and just
keep repeating that duplicate double click drag.
Krop and there we go.
OK do it again duplicate double click there we go.
Krop
duplicate one more time and the final time.
I'm going to try to get a little bit more of that there.
That's cutting some of it off I think.
There we go.
That's better.
OK so with that selected crop it drag and drop it.
And now we're going to do is just select each one and select the center horizontally and center vertically
and just do that for all of them.
And the cool thing is with sketch it's going to go ahead and remove any blank space when we create that
little you know cropped file.
And so we know that we're getting exactly centered pieces here which is pretty neat.
Now one thing to bear in mind actually is that if we do this when it opens the chest is basically going
to animate down a little bit like it's opening centered.
But the bottom of the chest should stay the same.
So I think what I'm actually going to do is select all of these and I'm going to give them a common
bottom by selecting all and then selecting that and that gives them like a common bottom place so that
only the top of the chest opens so that it doesn't kind of open to the center which would just look
weird.
So now that these are all in place what I can do is I can select all six art boards like so and I can
go ahead and export them.
Now they're currently 350 by 350 which actually is a little big.
So before that I'm actually going to go ahead and well let's think if I select all of these and then
I go to the scale tool I can scale from center and I can make them a max of let's say a max of 128 height.
Beautiful.
So that looks great.
And you know what I think let's let's try it.
If I export these as is I think it will only pay attention to the art and it'll ignore the blank space
so let's try it.
And if not we can we can adjust the boards.
But trying to save us some time here.
So let's go into documents.
Slopes courses sticker packs assets stickers.
And let's just do animated.
This is HPN G.
And we're going to do a new folder called chest export those.
And then we're going to go find that folder in the Finder and we're going to go ahead and enter it like
so.
And now if I look.
So you can see that there is still that border around them so let's let's actually modify the art boards
here let's just drag these up to the top corner.
We'll fix them in a second.
That's fine.
And we're going to change all of the art boards sizes by selecting all of them and we're going to change
them to be maybe 150 by 150 OK then select each chest center it for now and then we'll give them all
the same bottom alignment.
So we're just going to select them center center or select center center or select center center and
now go through and select all the chests.
It's quite tedious work right.
And give them a common bottom line.
So now let's do this again select all six frames and we're going to export all of these into our chests
folder just go ahead and export.
It'll automatically overwrite them which is neat.
And so now if we look we have an awesome animated sprite animation that's so cool.
So let's go put this into our project pull open X code go into your sticker pack here and we're going
to go ahead and.
Click new sticker sequence and let's go find that bad boy.
There it is.
And now we can go in to our finder here.
You can drag in our frames and now we can test it to see what it looks like.
So here we go.
Awesome.
That looks so cool.
So as you can tell it's not perfect it is kind of skipping over a bit and I think that's just because
I was working quickly I might have accidentally cropped the side of one that I shouldn't have but for
the most part this is good to go.
I don't think I need to build and run this for you to be able to see that this works.
We already know we've done it a million times.
You know you could rename this if you wanted to be chess.
You don't need to the name doesn't show up unless you you know explicitly you know set it to.
But guys this is awesome.
Our sticker pack is now done.
You know what.
Sorry I said I wasn't going to build it.
I want to build it because it's pretty fun to see.
So let's go look at it one last time before we sign off.
And this course is finished.
Here we go.
Let's take a look.
Pull them all open and look at that.
You can drop in our chests there and we get a nice chest animation.
Why don't we all.
Let's let's try something let's try dropping a sticker on a sticker.
Peel it off.
And can we do it.
We can.
So cool.
So we're putting some money in the chest there.
Let's make this guy run after it or we can't unless we drop it directly on it.
Pretty dang cool guys.
Amazing work building this killer sticker pack with static images our own static images our own animations
as well as animations found from free non-attribute sources online.
Super Great work guys.
And I'm so excited to see the kinds of sticker packs that you're going to build.
Thank you guys so much for watching this target topic.
This is Caleb with slopes dot.com.