1 00:00:07,210 --> 00:00:10,180 Everybody what's going on is Kayla with Deb's slopes dot com. 2 00:00:10,180 --> 00:00:16,170 And in this video I'm going to show you how to cut a part sprite sheets which is a pretty common way. 3 00:00:16,270 --> 00:00:21,040 Game designers share the you know animations for a certain character in an app. 4 00:00:21,040 --> 00:00:27,290 And I'm going to show you how we can cut those apart to turn them into an animated sequence of pings. 5 00:00:27,310 --> 00:00:29,330 So go ahead and pull open a blank sketch file. 6 00:00:29,350 --> 00:00:35,010 The one I'm going to pull up is not blank but I just want to show you basically how I did this. 7 00:00:35,050 --> 00:00:41,380 So this is the Spryte that I dragged in for the little running character and basically my process is 8 00:00:41,410 --> 00:00:44,830 I go ahead and duplicate the image like so by pressing command D. 9 00:00:45,130 --> 00:00:47,100 So now you can see there's a duplicate layer there. 10 00:00:47,350 --> 00:00:54,220 And then what I do is I double click the image and I drag Whoops I double click the image. 11 00:00:54,350 --> 00:01:00,080 I make sure the selection tool is selected and then I basically you know drag as close as I can to the 12 00:01:00,080 --> 00:01:03,580 border without cutting anything off and then I just crop it. 13 00:01:03,830 --> 00:01:11,240 And then what I did was I created an art board for each frame that was that I knew for sure would be 14 00:01:11,240 --> 00:01:14,360 bigger than all of the images but not by much. 15 00:01:14,360 --> 00:01:19,270 So as you can see some of these are very close to the edge and that took a little bit of trial and error. 16 00:01:19,280 --> 00:01:24,740 But now that I have cut that little layer I can just drag it up into its own art board and then at the 17 00:01:24,740 --> 00:01:30,640 very end I can go ahead and export all these art boards as their own individual punji frame. 18 00:01:30,650 --> 00:01:36,170 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 19 00:01:36,350 --> 00:01:38,560 treasure chest animation here we're going to do. 20 00:01:38,900 --> 00:01:44,410 So if you go into stickers sprite sheets and you drag in chest you can see it right there. 21 00:01:44,510 --> 00:01:45,460 That looks pretty cool. 22 00:01:45,470 --> 00:01:50,570 And I'm actually going to go ahead and zoom out a bit but it looks like the biggest one is going to 23 00:01:50,570 --> 00:01:54,220 be this guy here so I'm going to try my best to make an art board. 24 00:01:54,230 --> 00:01:56,960 That's a square that can fit that guy. 25 00:01:56,960 --> 00:02:00,360 So looks like 350 should be good. 26 00:02:00,830 --> 00:02:05,960 So let's go ahead and make an onboard that's 350 by 350 and I'm actually going to drag this up there 27 00:02:05,960 --> 00:02:06,880 out of the way. 28 00:02:06,980 --> 00:02:11,000 We have six frames so I'm going to duplicate this six times. 29 00:02:11,310 --> 00:02:15,180 And let's go ahead and actually put those right up next to each other. 30 00:02:15,200 --> 00:02:16,820 They're friendly they're nice. 31 00:02:16,820 --> 00:02:22,030 They know each other so we can go ahead and move those right here. 32 00:02:22,030 --> 00:02:23,090 There we go. 33 00:02:23,090 --> 00:02:28,160 OK so six frames and we have six little pieces of art here to deal with. 34 00:02:28,220 --> 00:02:29,230 So I'm actually. 35 00:02:29,240 --> 00:02:36,170 Well you know what let's be let's be good designers here let's name our boards from one frame to frame 36 00:02:36,200 --> 00:02:41,860 three frame four five and six. 37 00:02:42,330 --> 00:02:43,950 And now we're just going to follow that process. 38 00:02:43,950 --> 00:02:44,920 I was just telling you. 39 00:02:44,940 --> 00:02:48,690 So duplicate the Sprite she double click it. 40 00:02:48,780 --> 00:02:53,030 Do your best to select as much as possible and then crop it. 41 00:02:54,090 --> 00:02:56,030 Then we can drag that layer up here. 42 00:02:56,040 --> 00:02:58,740 And don't worry about centering things we'll do that in a moment. 43 00:02:58,740 --> 00:03:00,380 So now go ahead and duplicate it. 44 00:03:00,480 --> 00:03:06,150 Double click and go ahead and crop it after you select enough. 45 00:03:06,170 --> 00:03:08,440 There we go whoops. 46 00:03:08,580 --> 00:03:09,990 Duplicate the sprite sheet. 47 00:03:09,990 --> 00:03:10,860 Double click it. 48 00:03:11,800 --> 00:03:18,580 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 49 00:03:18,580 --> 00:03:22,310 keep repeating that duplicate double click drag. 50 00:03:23,420 --> 00:03:26,810 Krop and there we go. 51 00:03:26,920 --> 00:03:32,300 OK do it again duplicate double click there we go. 52 00:03:32,300 --> 00:03:32,840 Krop 53 00:03:35,610 --> 00:03:39,160 duplicate one more time and the final time. 54 00:03:39,250 --> 00:03:41,370 I'm going to try to get a little bit more of that there. 55 00:03:42,480 --> 00:03:44,940 That's cutting some of it off I think. 56 00:03:44,940 --> 00:03:45,390 There we go. 57 00:03:45,390 --> 00:03:46,130 That's better. 58 00:03:46,320 --> 00:03:49,820 OK so with that selected crop it drag and drop it. 59 00:03:49,830 --> 00:03:55,350 And now we're going to do is just select each one and select the center horizontally and center vertically 60 00:03:55,830 --> 00:03:57,580 and just do that for all of them. 61 00:03:57,690 --> 00:04:03,030 And the cool thing is with sketch it's going to go ahead and remove any blank space when we create that 62 00:04:03,030 --> 00:04:05,610 little you know cropped file. 63 00:04:05,610 --> 00:04:10,350 And so we know that we're getting exactly centered pieces here which is pretty neat. 64 00:04:10,350 --> 00:04:18,870 Now one thing to bear in mind actually is that if we do this when it opens the chest is basically going 65 00:04:18,870 --> 00:04:22,580 to animate down a little bit like it's opening centered. 66 00:04:22,600 --> 00:04:25,650 But the bottom of the chest should stay the same. 67 00:04:25,650 --> 00:04:30,210 So I think what I'm actually going to do is select all of these and I'm going to give them a common 68 00:04:30,780 --> 00:04:36,510 bottom by selecting all and then selecting that and that gives them like a common bottom place so that 69 00:04:36,510 --> 00:04:41,190 only the top of the chest opens so that it doesn't kind of open to the center which would just look 70 00:04:41,190 --> 00:04:42,110 weird. 71 00:04:42,120 --> 00:04:49,650 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 72 00:04:49,650 --> 00:04:51,200 go ahead and export them. 73 00:04:51,210 --> 00:04:55,300 Now they're currently 350 by 350 which actually is a little big. 74 00:04:55,350 --> 00:05:01,560 So before that I'm actually going to go ahead and well let's think if I select all of these and then 75 00:05:01,560 --> 00:05:10,320 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. 76 00:05:10,320 --> 00:05:10,760 Beautiful. 77 00:05:10,770 --> 00:05:11,950 So that looks great. 78 00:05:12,060 --> 00:05:14,870 And you know what I think let's let's try it. 79 00:05:14,880 --> 00:05:20,460 If I export these as is I think it will only pay attention to the art and it'll ignore the blank space 80 00:05:20,470 --> 00:05:21,690 so let's try it. 81 00:05:21,690 --> 00:05:23,570 And if not we can we can adjust the boards. 82 00:05:23,580 --> 00:05:25,530 But trying to save us some time here. 83 00:05:25,530 --> 00:05:27,540 So let's go into documents. 84 00:05:27,590 --> 00:05:31,910 Slopes courses sticker packs assets stickers. 85 00:05:32,010 --> 00:05:33,930 And let's just do animated. 86 00:05:33,930 --> 00:05:35,090 This is HPN G. 87 00:05:35,100 --> 00:05:39,660 And we're going to do a new folder called chest export those. 88 00:05:39,750 --> 00:05:46,390 And then we're going to go find that folder in the Finder and we're going to go ahead and enter it like 89 00:05:46,390 --> 00:05:47,130 so. 90 00:05:47,470 --> 00:05:48,960 And now if I look. 91 00:05:48,970 --> 00:05:54,900 So you can see that there is still that border around them so let's let's actually modify the art boards 92 00:05:54,910 --> 00:05:57,240 here let's just drag these up to the top corner. 93 00:05:57,250 --> 00:05:59,380 We'll fix them in a second. 94 00:05:59,680 --> 00:06:00,780 That's fine. 95 00:06:01,000 --> 00:06:06,640 And we're going to change all of the art boards sizes by selecting all of them and we're going to change 96 00:06:06,640 --> 00:06:14,590 them to be maybe 150 by 150 OK then select each chest center it for now and then we'll give them all 97 00:06:15,640 --> 00:06:18,500 the same bottom alignment. 98 00:06:18,640 --> 00:06:24,730 So we're just going to select them center center or select center center or select center center and 99 00:06:24,730 --> 00:06:26,950 now go through and select all the chests. 100 00:06:26,950 --> 00:06:28,490 It's quite tedious work right. 101 00:06:28,600 --> 00:06:31,490 And give them a common bottom line. 102 00:06:31,510 --> 00:06:37,780 So now let's do this again select all six frames and we're going to export all of these into our chests 103 00:06:37,780 --> 00:06:39,310 folder just go ahead and export. 104 00:06:39,310 --> 00:06:42,340 It'll automatically overwrite them which is neat. 105 00:06:42,610 --> 00:06:49,390 And so now if we look we have an awesome animated sprite animation that's so cool. 106 00:06:49,390 --> 00:06:55,360 So let's go put this into our project pull open X code go into your sticker pack here and we're going 107 00:06:55,360 --> 00:06:56,010 to go ahead and. 108 00:06:56,110 --> 00:07:00,220 Click new sticker sequence and let's go find that bad boy. 109 00:07:00,220 --> 00:07:01,160 There it is. 110 00:07:01,420 --> 00:07:04,370 And now we can go in to our finder here. 111 00:07:04,540 --> 00:07:08,110 You can drag in our frames and now we can test it to see what it looks like. 112 00:07:08,110 --> 00:07:09,000 So here we go. 113 00:07:10,280 --> 00:07:11,310 Awesome. 114 00:07:11,330 --> 00:07:12,380 That looks so cool. 115 00:07:12,550 --> 00:07:16,520 So as you can tell it's not perfect it is kind of skipping over a bit and I think that's just because 116 00:07:16,520 --> 00:07:21,500 I was working quickly I might have accidentally cropped the side of one that I shouldn't have but for 117 00:07:21,500 --> 00:07:23,590 the most part this is good to go. 118 00:07:23,690 --> 00:07:26,540 I don't think I need to build and run this for you to be able to see that this works. 119 00:07:26,540 --> 00:07:29,690 We already know we've done it a million times. 120 00:07:29,780 --> 00:07:32,100 You know you could rename this if you wanted to be chess. 121 00:07:32,120 --> 00:07:36,800 You don't need to the name doesn't show up unless you you know explicitly you know set it to. 122 00:07:36,800 --> 00:07:39,230 But guys this is awesome. 123 00:07:39,230 --> 00:07:40,520 Our sticker pack is now done. 124 00:07:40,520 --> 00:07:41,020 You know what. 125 00:07:41,030 --> 00:07:42,620 Sorry I said I wasn't going to build it. 126 00:07:42,620 --> 00:07:44,210 I want to build it because it's pretty fun to see. 127 00:07:44,220 --> 00:07:47,110 So let's go look at it one last time before we sign off. 128 00:07:47,110 --> 00:07:49,100 And this course is finished. 129 00:07:49,100 --> 00:07:50,410 Here we go. 130 00:07:50,480 --> 00:07:51,200 Let's take a look. 131 00:07:51,200 --> 00:07:54,120 Pull them all open and look at that. 132 00:07:54,320 --> 00:07:58,790 You can drop in our chests there and we get a nice chest animation. 133 00:07:58,800 --> 00:07:59,580 Why don't we all. 134 00:07:59,600 --> 00:08:03,000 Let's let's try something let's try dropping a sticker on a sticker. 135 00:08:03,020 --> 00:08:03,680 Peel it off. 136 00:08:03,680 --> 00:08:05,390 And can we do it. 137 00:08:05,390 --> 00:08:06,170 We can. 138 00:08:06,170 --> 00:08:06,830 So cool. 139 00:08:06,830 --> 00:08:08,650 So we're putting some money in the chest there. 140 00:08:08,870 --> 00:08:13,130 Let's make this guy run after it or we can't unless we drop it directly on it. 141 00:08:14,460 --> 00:08:16,740 Pretty dang cool guys. 142 00:08:16,740 --> 00:08:23,820 Amazing work building this killer sticker pack with static images our own static images our own animations 143 00:08:23,850 --> 00:08:27,790 as well as animations found from free non-attribute sources online. 144 00:08:27,870 --> 00:08:29,140 Super Great work guys. 145 00:08:29,150 --> 00:08:32,670 And I'm so excited to see the kinds of sticker packs that you're going to build. 146 00:08:32,670 --> 00:08:34,940 Thank you guys so much for watching this target topic. 147 00:08:34,950 --> 00:08:36,960 This is Caleb with slopes dot.com.