10 Minute Pixel Sprite TUTORIAL for COMPLETE BEGINNERS

hey are you one of those game developers that can't seem to figure out how to create your own sprites and ending up spending a penny for game assets online or do you something like looking at pixel art feeling the nostalgia from the memories of your old nes childhood days and contemplating and I wish I could draw stuff like that well good news is that you were in the right place my friend well my name is a large and welcome to my youtube channel this video is a hundred percent subjective and heavily relies in my personal opinion and in which tragedies work the best for me hopefully this video would serve his purpose and that these strategies would work out fine for YouTube also with this tutorial I will be mainly using Photoshop however these strategies would be applicable to all types of photo editing programs so we're gonna start with choosing your canvas size there has been a lot of complications with choosing the correct and the sizes people have correlated specific sizes to specific art styles but on all calling your artwork 8-bit 16 or 32 whatever doesn't actually correspond to the numbers of pixels but instead corresponds to specific hardware limitations of the past I'll give you an example Ferdie NES it was only able to utilize 25 colors on a 256 by 256 you can actually choose any number of pixels just as long as you follow a 1 to 1 ratio over to cannabis this would make it a lot easier for you to manage your frames especially when you're doing animations or sprite sheets so you're gonna want to have to make sure that your canvas would have enough space for your character to move around when animating so let's get things to it I kind of want to recreate this all time gaming favorite character this slime as you can see I'm mainly using Photoshop and will make a new file and we'll make it go to 32 by 32 pixels canvas there we go we're gonna zoom in a little bit and it seems that we're up to our next topic which is the block outs blocking out your character is a process of using basic shapes and outlines to formulate your characters composition it is most important that we've just to block out the qualities of her characters identity can be easily defined by the viewers let's take these guys as an example as at the moment we do not have enough information to know what they actually are but based on their block outs we can easily say that this guy in the left has wings therefore he flies we can say that the guy in the middle is quite in the halftee side due to his bulky size and the overall physique would tell us that this guy would be quite heavy though we didn't actually know whether or not he's wearing armor or is he made out of rocker metal and we can also say that he skips his leg days and furtive this guy on the right we can say that he's somehow lighter than the other guy as you can tell he's wearing a cape in the king that he's wearing like mr. couture clothing perhaps this would make the guy somehow quicker he's also carrying a stick of some sort however we do not actually know whether or not that's actually a stick but maybe a spear or a staffer whatsoever with these information provided we may not know what these guys actually are but the blockout would give us hints of their characteristics how do way what they do or whatsoever and what's great is that simply giving them coloured would just fill all those missing details that you were looking for so let's head right back into Photoshop instead of using the brush we're gonna want to use a pencil tool for pixel art with the pencil tool we would be able to draw pixel by pixel unlike the brush tool and also we're gonna wanna have to draw the character on a separate layer for this bright I kind of want to go for an outlined approach I wanted to make it as a symmetrical as possible so as you can see we're hitting an equal number of pixels in both sides and there we go we have our block outstanding we're gonna head on towards your next topic which is choosing your base color let's take Doris the major you saw from the intro she says hi by the way she loves my viewers as much as I do and she's gonna help me explain how colors play a huge difference in character design now let's shift or Isha's you to red as we know red can be used to signify fire purple signifies darkness or corruption blue is a color of the ocean which can be something magical word signifies the unknown green signifies nature or on the darker side it can be poison and yellow for gold which are great conductors of electricity see just by subtly changing these colors we are able to identify which powers the stories have what type of element is she able to conjure this in fact is actually a huge step up in terms of character design so let's head right back into Photoshop and let's do to work Thank You Doris so we'll be choosing the base color for the slime for this we're gonna be focusing mainly on the u-value just a quick tip I highly suggest we're gonna use the same color picker as you see in a video which is the HSV or a hue/saturation value later on that I'll be explaining why so if you're editing programs color picker is not on HSV most likely there is an option to change that but then again it's always up to you so I'll be landing on the yellow hue for the slime and let's think of this imaginary box just right in this position as you can see in this video so the purpose of that box is that we'll be choosing our base color inside the boundaries of that box this allows us more versatility once we go into our next topic which is shading so heading back to photoshop we already have our base color right here and we're gonna want to use the fill tool make sure to in check the anti-aliasing just to make sure Photoshop wouldn't give you a problem so the pixels and send it there we go now we're gonna want to create a newly and for this never been a name in life creating a different layer is actually optional it's all up to you but I prefer layers just to make sure everything is manageable the next thing that we're gonna want to do is that we're gonna want to need to predetermine a light source let's take this arrow as a placeholder the light is coming from this direction towards the upper right hand corner of this line this basically means that the upper right hand corner would be the lighter side whereas the exact opposite would be equally darker right so the question now is how are we going to choose the color for delight let's zoom in into our HSV color picker yet again and this is actually the main reason why I want you to pick your base color on the imaginary box now let's say we're going for the color under brighter sides what we're gonna want to do is move the picker towards the upper left-hand corner in a roughly 45 degree angle from the base color what this means is that you are going for a lesser saturation with a higher light value we also want to move the hue slider upwards this will imitate the you shift that naturally happens whenever light hits an object in real life so as you can see here I'm going for the brighter side and I just chose a colored by following that 45-degree angle that I mentioned earlier and shifted the hue upwards just a little bit and look at it go you just picked the perfect natural light color next step is we're gonna be getting the darker values we're gonna do it by using the dropper tool to get our base color value and this time we're gonna do the exact same opposite is what we did for the light value it's still gonna be this 45-degree angle however it would be going towards the lower right hand corner of the color picker with this the color that we would be picking would have little ester like value and a higher saturation we also would want to do the exact same opposite in the hue slider instead of going up we're gonna go downwards just a little bit and there we have it we'll be sending it and there goes our shading lesson let's take a step further say you want to make our character a lot more defined than what we already have what we need to do is to add more light and dark tones so as an example I want to start with the darker tone basically what we need to do is to use the color picker towards the dark tone that we already have and from that dark tone is we're gonna do the same process to get an even darker tone that means more saturation less light value and another downward you shift and we're also going to do the exact same opposite towards the lighter tones as of the moment our slime is currently on a kind of matte material and we know that slimes are slimy light but reflect off of them we are gonna imitate that by adding in specularity we're gonna take the lightest value and we're gonna do the exact same color picking process however this time we're gonna amp it up all at the top now I'll be using this color to imitate the shininess versus lime also I'll be adding in the eyes by just using a couple of white pixels there we go there you have it your very first sprite character explained in my easiest way possible and if you're thinking of going into advance character design I'm thinking of making another video for that you can keep yourself posted by hitting the subscribe button if you haven't yet that would make me so happy so second I really hope that this video would serve its purpose in that this video would be helped you a lot if you have any comments or suggestions if there's anything you want to say just leave a comment down below a like would be appreciated and as always y'all stay safe [Music] [Music]

Channel: Eli Cuaycong

Views: 213,713

Keywords: game, development, gamedev, developer, how, coding, beginner, script, pixel, sprites, vlog, digital, GameDev, Devlog, Game, Development, Godot, Unity, Pixel, Pixelart, 8bit, 8-bit, 16-bit, VideoGame, Game Developer, Game Development, 2d, Platformer, Digital, Art, Code, 32bit, 32-bit, 16bit, pixels, to, basics, pixelart, photoshop, asesprite, assets, itch.io, itch, game assets, drawing, painting, digital painting, digital art, pixel art, pixel sprites, Character, Tutorial, tips, tricks, how to, make, making, create, creating, design

Id: mBt3UuLJx9Y

Length: 10min 18sec (618 seconds)

Published: Tue May 12 2020