What Size is Pixel Art? (Intro to Sprite and Canvas Size)

pixel art is kind of deceptive in how simple it appears to be like you'll go into it knowing that a pixel is one square but exactly how many of these does it take to make the kind of pictures that you see online or in games well hello my name is Brandon and I make pictures out of tiny squares and post them online for fun and in this video I just wanted to give you some points of reference if you're starting pixel art how to choose a canvas size or a character size so let's just roll the credits and get right into it [Music] [Music] when you're selecting the sides to make pixel art one of the things that I find to be a useful point of reference is just to consider the resolutions of classic consoles often there's a look from a certain game or maybe just a single component like a character sprite or a portrait style that provides some sort of clue for what size or style you want to attempt in your own work so rather than rattling off all the resolutions here I think it's best just to go through each with some examples to see these canvas sizes in action okay first steps the Nintendo Game Boy and the Sega Game Gear which I've grouped together because both had the same resolution of 160 by 144 pixels in the case of the Game Boy they only had four shades of color to work with but they're still able to pull off iconic looking games like the Pokemon series I think just look at the computer that's on the desk there it's only 16 pixels tall but it's got a monitor with text there's a keyboard with like a dozen keys there's a tower and there's a mouse that has a left and a right click on it that's the kind of simplicity that's important to learn when you're starting pixel art you kind of want to program your brain into learning how to scale down these kinds of details and small canvas size is a key part of that I've actually been using this exact size and some of my own recent work and having a blast because it's the low resolution that brings a challenge that's kind of fun to figure out and work with in moving up from there's the gameboy advance at a resolution of 240 by 160 pixels which again is another versatile size for stylized pixel art and if we look at this screenshot from Star Wars Episode three in particular we can see lots of great examples of portrait sizing within this limited space there's the main player portrait some extra length indicators and of course the head of the player sprite itself there's even high-resolution portraits that pop up on screen for dialogue and I just love the fact that they were able to effectively create different scaled versions for each purpose rather than just reusing assets and it shows that they really embrace the resolution of the Game Boy Advance another great thing going on here is how they use geometry in lower details towards the background to create a sense of depth Chancellor Palpatine aka the Senate sitting in the distance has a smaller sprite and simpler coloring to convey his distance from characters in the foreground in fact his heads only seven pixels tall but it works within the context of the scene the other thing that helps is not a flat tile game there's sort of this vanishing point angled look that drives the perspective of this shot in particular yeah sorry how the hell of looking at screenshots from Star Wars Episode three this is what's about that you've got to find stuff that inspires you and this one's definitely one of mine so look for screenshots you know stuff that grabs you and and study it moving up from here is actually gonna be a two-for-one it's the original Nintendo Entertainment System and the Super Nintendo which have very similar resolutions both have a width of 256 pixels but the height of the NES is 240 compared to 224 of the Super Nintendo that's right the Super Nintendo is actually a slightly smaller resolution compared to the NES any graphical superiority it has is not based on resolution it's based on color count whereas the NES can display up to about 25 colors at one time from a palette of about 60 colors the Super Nintendo is able to display up to 256 colors at once and that's from a theoretical palette of over 32,000 colors that's not to say that more colors will always make your art better though and there is a charm to the central look that is certainly worth exploring I guess the main takeaway here is just that a resolution in the 200s is a solid pixel art look that allows for a lot of freedom of style and level of polish that you want to give it [Music] lastly we've got the Sega Genesis at a size of 320 by 224 pixels there's not much to say here because it's pretty much just a wider version of the Super Nintendo resolution already looked at but even in the screenshot from restart or ristar I don't know how it's pronounced actually let's go with ristar he's a star he rises I guess ristar so here there's great examples of environmental details and background landscapes at this resolution also I just love the color palette for this game it's vibrant greens and purple shadows of the main elements to the pastel II pinks and blues the background if you've already spotted detail on the bottom left corner you know I have to mention that fantastic little 16 pixel tall icon of the character it's such a nice reduction from his main sprite and this brings up another good topic which is sizing and pixel are character sprites in general how large should you make them and what level of detail can you achieve based on character size so let's take a look at some examples so here I pulled a bunch of examples that we might be familiar with just to look at what kinds of pixel Heights are typically used for character sprites I like to think about this lineup in three distinct groups and these aren't any kind of official designations just my own interpretation so there's a small sprites from about 0 to 30 pixels well okay I guess not zero cuz I'd be nothing but at least 1 to 30 pixels so even one pixel is too low I guess that'd be I don't know the ball from pong or something can we include him sure either way we've got pac-man in there he's 13 pixels tall he's an iconic and simple design at a low resolution there's also the guy from Pokemon I guess ash or whatever name you gave to him is his name the Polka man he's only 16 pixels tall which is the same size as the NES Mario sprite actually then there's also linked NES Mega Man and Super Mario from Super Mario World you'll notice that the common thing shared by these small sprites is that they maybe take two or three character elements to give focus to when you're working with low resolutions it's best to communicate a smaller number of details really well than to try to pack in too many details for example the sprite of link from Legend of Zelda linked to the past has well-defined elf ears a hat and then largely uses color to define the character look as a whole the NES Mario sprite has a hat a mustache and overalls with buttons small sprites rely on eliminating unnecessary details as they compete for valuable real estate and be confusing to look at you wouldn't want to give them a one pixel watch shoelaces a graphic t-shirt and glasses etc because it becomes too much of a mosaic be like color in your character with a literal checkerboard in general less is more here and this range of sprite sizes the perfect place to play around with learning reduction in details if you just started with pixel art next up are the medium sprites from about 30 to 65 pixels now this one's my favorite group to work within because it's where the restriction that we saw from the smaller sprites opens up to allow for a lot more freedom of style to come through while still maintaining some kind of obvious pixel art look to it for example the sprite of Samus from Super Metroid is able to achieve a lot of great mechanical detail and highlighting through the use of gradient colors without being too distracting and you can still feel the contribution that each individual pixel is making to the overall sprite another great thing within this range of sprites is that it's where character proportions starts to play a major role if we look at the sprites from Megaman X and Lupin from Lupin the third we notice that despite being from completely different games they're actually very similar stylistically the jump in sprite size from 34 to 62 pixels results mostly due to lupins lankier proportions requiring a taller sprite to maintain this particular style of art and shading and finally of the large sprites from about 70 pixels and up sprites at this size have a great sort of illustrative quality to them like the sprite a cyclops from x-men mutant apocalypse it's a faithful rendering to Jim Lee's iconic x-men artwork so playing a game with that kind of art is like playing the comic book of course the downside to sprites this large is that they require a lot more time effort and skill to pull off certainly they're worth aspiring to though but if you're just beginning with pixel art again I'd recommend to get a handle on the basics by playing around within a small or medium sprite range first generally when I go to design a character I'll open up a campus size large enough to give me a lot of breathing room let's say about 180 by 180 then if I've decided an approximate sprite size based on personal preference I'll rough out the character as a stick figure before rendering further line work detail and color I like to copy paste often and keep each iteration of the process so I can look back and perhaps bring in ideas from earlier that I might have strayed away from it's also kind of cool just to see the process along with the final product so that's all I got for now thank you for watching I know that that was a bit more of an information blast in the tutorial necessarily but I hope it gave you some things to think about especially if you're starting pixel art and just getting some ideas of where to begin so thanks again for watching take care and keep its where has that a cheesy tagline [Music]

Channel: Brandon James Greer

Views: 619,140

Keywords: pixel art, canvas size, sprite art, tutorial

Id: ad-3dn2qUUs

Length: 8min 35sec (515 seconds)

Published: Sat Nov 23 2019