3 PixelArt Techniques/Common Mistakes (Doubles, Jaggies & Outline) (Tutorial for Beginners)

hey guys Mort here and today I want to talk about three Commons mistakes that I see Peaks not just do a lot and a few tips to how you can avoid them so the first topic I want to talk about and probably the most commenting I see from new pixel artists is doubles so what is doubles well doubles are basically when these Peaks will line up next to each other on the line and what you really want is a more smooth line you can see here I've highlighted some of the double pixels and you can see if I remove those pixels we get a much more smoother line so the problem that I see people doing is that they just get out the brush and they just start drawing a line and they say hey cool I got a little whale here and that is now Peaks lot yay but you can see it looks kind of weird and if we removed all those doubles it would look much nicer there's a few ways you can go about it some software has a pixel perfect option so when you start drawing it tries to emulate a perfect pixel line this is only something more pixel focus programs have and that's something that I software like Photoshop has the way you can get around it if you are using Photoshop is that you can also hold down shift and click between two points and you can track a line like that that is also a way you can go about it or you can use the line tool in most software's so you can definitely see the difference between a poorly made line and a more controlled line and I'll definitely recommend you doing a only one piece of the white line at first and try to avoid doubles as much as you can with that's it it doesn't mean you can create things with doubles but you have to have a much more better understand on how to abuse the doubles so if your list experience with making lines I definitely recommend just sticking to a single pixel line under topic of lines you don't only have to make a single pixel wide line you can also make it to pixel white line though I would only recommend doing that for outlines of thing because if you start making the things inside the sprite to pixel wide it's going to look a little weird or you can make a single line with anti-aliasing on it there's not really anything right or wrong but there's something that looks more pleasing and something that is more recommended than other things but I'll definitely again emphasize on just trying to stick with a single pixel line and for the next topic is something a lot of people do and it's something that I've been asked about a lot so let's get into the basic of Jaggi so what is a Jacke well in short jackie's is when a line sort of breaks like here you can see it goes down smooth and that comes this like weird section which breaks and it goes down smooth and weird station wet breaks and what you really want is a consistent straight line it doesn't have to be one pixel every time it can be like two pieces down all the time you just want to have a consistent even looking pattern out through the entire thing so here are some examples of broken lines that's been fixed you can see on the left side there is a broken line on the right side there is an even line and you can clearly see a difference in some of them and I've done a little highlight where the line are broken so you can see kind of what I've done to fix it these are just some examples and we'll dig a little deeper into my technique of fixing a broken line so here we have a very common mistake that I see a lot of people do on the left side we have a broken line and on the right side we have a fixed line I don't know if you can see where the line is broken and where it's fixed but let's try and highlight it up so if we look down here on the fixed line my technique when I'm doing a curved line and I don't want it to be Jackie what I usually tend to do is that I think of it as a pattern so for example we have 4 here 3 2 1 1 1 2 3 5 and that doesn't really make a whole lot of sense other than the number goes down and up and there's never a number greater in between two numbers see I told you it doesn't make any sense so let's look a little bit closer at it and I'll explain it to you in a way that it makes a little more sense so if we look closer at the right pattern and my way of making sure that my line is not jegi is that I always check okay so we have four three and two so let's take four and two what is the number between four and two well that is three fine this this one is not checking so let's take three and one what is the number between three and one well that's two okay so the line is still not jegi so here we'll get two and one and the number between two and one is one and a half but you can't put in a half pixel so the way I always look about it is that a smaller number always have a bigger priority than a greater number so if I had to either put one or two here the smallest number of one or two is one so one get a priority but you eventually will have to make the numbers great again because when we get down to one the line is just going to stop it's always going to be 1 1 1 so when you feel like you got a nice cave you just start adding up numbers again depending on how you want your curve to be you can do it in different ways so we start out again we make sure that 1 & 3 the number is 2 but when we get over to 2 & 5 here we can again have 3.5 so what you have to do is take the smallest number and make that a priority and that is my way of making sure that a curved line is not Jacky I don't know if anybody else have done it this way but I think it's a good way of making sure that your line is not jacking and the mistake that I see the most people do is that they have smaller greater smaller greater numbers and it doesn't have a proper pattern to it and then it makes this sort of jagged line I actually just came up with this technique as I was making the tutorial and I've never tried to put out two words how I go about making a curved line but this works for me and I think it's a great way to think about it so the next topic I want to talk about is outlines and a few common mistakes I see and a few tips I can give you on how to improve the outlines so on the top row here we have how not to do outlines and on the bottom rope we have how to do outlines so let's look a little closer at it and I'll point out some of the mistakes that I see so I'm going to fall color all the mistakes out with a very bright grey so you can see where I'm actually placing them so if we look at the cherry here first you can see up here on the leaf I made it sharp down here below and the reason I'm doing that is because the leaf is pointy and by having a round edge like this you make the leaf looks round to make sure that you can see that it's a pointy leaf you place the pick flare and what peak slot is really about is making one pixel illustrate as much as possible so just by placing one pixel there we make sure that the leaf looks more sharp and pointy the same goes for over here although the black line is not sharp you can make the leaf looks more sharp just by placing a white pixel there on your white outline so when you're doing outline this is a smart technique you can do to make things a little more pointy at certain places or round at certain places another thing I want to show is that in here you can see there is one single transparent pixel and if you find a gap within your sprite that has this sort of like a few transparent pixels we outside of the outline inside the sprite you just really want to fill the entire thing out because by doing that you're not distracting the eye with that one pixel that might be flashing if you have done a moving background so let's look at the next one here so there's a few things we can do here for example I made a white dot here just to sort of make sure that it has this sort of stick feel I can't really explain why I do that I just feel like it looks nicer although down here I do want to make it a little shower because it's supposed to look more sharp like I talked about before though we encountering a different problem over here so you can see down here on the bottom I made one pixel there and the reason I'm doing that is because if we have that one pixel open it's going to be a little bit distracting and these two is going to look far more apart so by putting a pixel there they look a little closer and though the black line has a space there the focus is not making them spread apart more so they look more together and the gap looks quite smaller though if we look at the pineapple I've done the complete opposite I've actually left the gap here because I want the two leaves to live more apart and not by filling the outline there if you make the two leaves look more apart so you really want to think about are these things supposed to look closer or far apart and of course you can see I made a white pixel here as well to make the loose more pointy and that is the thing you can keep in mind to illustrate what your art is supposed to look like with the pixel a little more alright guys so the last thing I want to do here is make an outline on Sonic so you can see how you should do it and while I do it I'll talk a bit about what I'm thinking and why I'm doing certain things and on the left side here you can see how you're not supposed to do it alright so let's just do it we're going to start zooming in here and just start somewhere you know it doesn't really matter where you start but I just pick a random place because Sonic ear is pointing you up there I'm just going to make a sharp corner you can see here if I do it like that on his nose his nose is going to be kind of weird-looking so I tend to sometimes make a white pixel above just because it makes the nose look more pointy again and depending if you're doing it up here or down here it's it's the direction the nose is going to be pointing so by doing a white outline there it's going to be looking more pointing upward alright so let's just continue nothing big here just following the Lions you know I could do one line here to give this some a little more sharp edge but I don't think I'm going to do that because it's going to look a little odd because we have two pixels two pixels yeah I'm just not going to do it I can't explain that one all right so let's fill out the get we go down to the shear and down here on the bottom I want to make a shout corner because the shoe is sharp down there and I do also want to make one here as well I don't want to leave it like that I want to make a chap like that as well though this shoe is round over here so I'm just going to make a single and then I'm going to do singles here as well and yeah I might actually make a double here just to make it look kind of sharp here we encounter a weird little problem because you can see if I fill this out there's going to be a big white chunk here so I could either do this to make it look more pointy to the other direction or fill it out like that to have a bigger white chunk together but I don't like that so I'm actually going to make this bike point the other way and then just keep continuing up here and when we get to this bike I'm going to make it sharp down on the bottom as well and just continue like this follow his edge and then make it sharp on the other ear as well oh I almost forgot we also need to of course follow in the inside here to get the white outline on the inside bits and that is how I make a white outline on things manually of course there are tools they can do it for you but it won't take this thing in mind of a sharp edge or soft edge so if you want to get it perfect you have to do it manually and I just personally prefer that here we go thank you so much for watching if you enjoyed what you saw make sure to give the video a thumbs up if you want to see more content like this make sure you subscribe you can also support me on patreon where you can help me help you and without that I'll see you in the next video bye [Music]

Channel: MortMort

Views: 632,022

Keywords: pixel, photoshop, artwork, vid, mistakes, tumblr, animation, jagget line, tut, jaggies, dev, pixelart, common, cool, development, outline, deviantart, painting, gif, awesome, drawing, beginner, waffle, mnr, mnrart, beginners, doubles, Techniques, to, flash, zch, jazza, art, 3 PixelArt Techniques / Common Mistakes (Tutorial for Beginners), game, how

Id: gW1G_FLsuEs

Length: 12min 7sec (727 seconds)

Published: Tue Mar 21 2017

Reddit Comments

[u/ajax2k9]

i just found him today, his tutorials are great .

[u/00mrgreen]

That’s funny, I subbed his channel just two days ago!

[u/LtFarian]

Been watching him for a while, he's really great. He also has a very nice Aseprite tutorial, which really helped me get into the software.

[u/angileri4]

Mort has been a very big inspiration for my pixel art, first saw him in May and my art has been improving since.

[u/meowmeow54321]

This guy is awesome! Thanks for sharing.

[u/[deleted]]

Mort IS awesome, however, he stopped uploading full videos almost a month ago now. Now he just does recapped 7 minute versions of 2 hour livestreams that are never saved. It’s kind of a bummer. He streams at like 5 or 6 AM pacific time and he’s hard to catch unless you’re in his time zone. There’s a lot of missed commentary, instruction and visual tutorial that is apparently only available to those who watch for his streams to start.