[How To] Make Sprite Sheets in Photoshop || EmiiCreations

hi guys welcome back to another emmy creations video today i'm going to show you how to build sprite sheets in photoshop [Music] so if you weren't here with us last time i have a great video probably linked over here on how to make animations in photoshop and i introduce you to this cute little bird walk cycle that i use for my stream avatars and what we're gonna do today is put him in a sprite sheet layout format let me show you an example of them these fry sheets can be used in a lot of 2d engines stuff like stream avatars anything that is requiring a sprite sheet you can use these techniques on this is kind of what we're aiming for this is the way stream avatar has us layout our sprite sheets but definitely look at your engine see how they take it some only take like a row of just walk animations for one file as you can see stream avatar has multiple animations stacked on top of each other so if you see here this is the idle pose this is the walk this is sit stand and jump we're gonna be doing our sprite sheet creation with stream avatars in mind but adjust it as you see fit for your engine what we're going to do is we're going to take the width of it of your animation and you're going to multiply it by how many frames you have in your animation so for our walk cycle we have three four five six seven eight we have eight frames so we're gonna do 130 times eight and that comes out to 104 0. that's a really weird way to say that number but 104 and same thing with the columns or like stacked on top of each other how many animations are they having in this particular one file so for stream avatars as you can see there's one two three four five five different animations in here so my the height of my animation all of them is 130 as well i kind of made a box to make it easier for myself so you multiply that 130 by 5 which gets you 650 so that's going to be the size of your sprite sheet now this number will change based on how many frames you have and how many um whether they take only one animation or multiple animations in one sprite sheet but let's do that so now that we have this wonderful file we are going to segment it into the little boxes that you're gonna kind of see each frame sit in and what we're gonna do is we're gonna do view new guide layout and we're gonna put in the number of frames so for the columns we have eight columns which is like the eight frames that we took from last time when we're calculating things out and the rows i have five you're going to get these wonderful lines to show you these this beautiful grid right here easy right and then now that we have that we want to make sure to turn on snapping so snapping in photoshop allows pixels to snap right to the guys the little blue light lines that you have you want to go to view snap to guides make sure snap is turned on you should have a check mark next to snap and you go to snap two and you should have a check mark next to guide all right let's do our first frame so what i'm gonna do is i'm gonna put a little registration mark in the corner right here and don't forget to click on the frame as well as look at it for in order to edit it so once we have this register register once we have this registration mark we can control all control c and control v into our grid and as you can see oops as you can see it snaps right to the corner of each guide intersection so we want to snap it to one of these corners or the first one i'm doing the second row because the second row is stream avatar's walk animation so that's what we're going to be filling out right now and then we move to the second frame and we're going to do the exact same thing like this and as you can see it snaps super easily to it in the corner just to show you that it's actually going into the interception that's how it should look and make sure to double check once you have it down and once you have let's just pretend i fill this whole thing out once you have it all you would just erase this once you're done and then you have them perfectly laid out in your sprite sheet and it's going to look like this at the end of everything and if you want to see how it kind of looks with the guys on this is how it looks with the guides as you can see they feel exactly where they're supposed to be in each box so you don't have any sliding at the bottom and then what you can do is you can do file export c for web and then usually you can do png jpg whatever file type you need for your engine so hopefully that helped um if you have any further questions or if you want to go back and look at how we animate in photoshop i have a great video that will pop up somewhere here and you can go check out how to get started with animation in photoshop otherwise i hope this helped you get your sprite sheets together and start getting those animation in those game engines uh if this helped you know click the subscribe and like button that's always super appreciated and if you have any additional questions feel free to reach out to me i'm super welcome to comments messages if you want to see me live and ask questions in person i also stream on twitch three days a week so i will put the schedule below and the links to however you can access me and be sure to come back we'll have more animation for beginner guides here on this channel and we'll also be doing some procreate animation guides as well have a good one guys

Channel: EmiiCreations

Views: 10,893

Keywords: EmiiCreations, animation, spirte sheet, game, how to, tutorial, photoshop

Id: hqirHZ0QnzA

Length: 7min 8sec (428 seconds)

Published: Wed Nov 04 2020