Pixel Art 101: Buttons

welcome back a lot of you probably don't need to draw a pixel our buttons so I appreciate you watching this video so I'm one in the homies working on dwarf it's a tower defense dungeon crawler RPG we're doing Kickstarter pretty soon and I'd appreciate it if you guys added you know which listed this ye okay so first thing you'll want to do is download some pixel fonts just go ahead and search pixel fonts in Google and there's a bunch of choose from a bus something you might want to look for is make sure that they are free for commercial use if you're gonna use them in a game or a project you know alright so then we're gonna go to Pinterest and we're gonna search buttons okay now buttons a UI button and here you can find some inspiration for UI buttons this is uh this is pretty good right here by the way feel free to follow me on Pinterest I already created a bunch of boards like game UI so the reason why I'm recommending Pinterest is because I know a lot of people that save stuff on their computer and that's just not the best way to do it okay so the first thing we're going to do is create text so if you're in a sprite in the description there's a link to get e to get it on Humble if you want to support me and get it through there anyway it's only like 15 bucks so you can go to edit and then insert text and here I already selected the font that I download the ff4 word and I'm just gonna pick white as the color and click OK actually I'm gonna change the font size to something a little bit smaller I'm thinking something like 6 a sprite isn't the best for font because you can't really preview it before you do it and now I can't change the font size you know I can skip this but Photoshop is a little bit better with funds but you know anyway so go back to insert text and then maybe do a size like 8 ok 8 looks good so I'm gonna go ahead and stick with this you can hit control D to deselect or maybe I made that my shortcut but I'm anyway make sure that you put your text on a separate layer you're not gonna want to draw you are not want the text on the same layer as your button so I'm gonna show you a couple of really cool things you can do with text really fast so when you have some text what you can do is you can had an effect FX called outline and here let's say we wanted black or something like that you can add a an outline and then choose you know where you want that outline to be so maybe we just want it to be on on the on the bottom like that or maybe we want it to be on the inside I think this is a pretty cool effect before buttons in general I don't like to make the text 3d on the button I like to make the button the thing that's 3d so I'm not gonna do an outline for the text but I did want to show you that because it's a it's a neat way to make your text have a little more pizzazz I'm sorry I just realized the mic wasn't by my face but hey at least the rest of the video will have good audio no I'm not gonna redo the beginning we're just gonna keep going okay so another cool little effect that you can do is if you grab your selection tool and you select like a chunk of the text and then you switch to your paint bucket you can paint that section and give it a highlight but when you do paint make sure contiguous is not selected because check it out if you select contiguous it'll work as you expect and you'll have to you know click in each in each one of those sections but when you don't have contiguous checked off it'll color everything of that color which is actually a really good trick you might have clicked it's in your head right now it's a really good trick when you want to basically replace a color in your artwork that you have all over the place alright let's start drawing this button so I picked the yellow and I'm just going to go ahead and make a rectangle a filled rectangle and I'm gonna give the text some padding probably just two pixels should do we can adjust that later now I'm gonna go over some concepts that make for a good button we don't really need the text here so there's a couple things I want to let you know a button in a video game is meant to look like something that you can press right and to look like something that you can press it needs to look 3d you could just go for a metro style and this right here done we could be like this is a done button right but there's nothing about this art that indicates that it's a button at the bare minimum I would recommend doing a shadow because a shadow make sure that the that the user knows that the I'm go ahead and a shadow I picked this mirror tool and this is going to mirror everything I draw on one side to the other I'm probably in not right oh wow I got right in the middle so I'm just going to go ahead and on the button I'm gonna erase the corners and then of course for the shadow I'm going to erase those as well as you can see this already is starting to look like a button just because we added that shadow but I like to make the buttons look 3d as well because that also emphasizes that it's a button I like to put outlines on my buttons too so first thing I'm going to do is put an outline on this button oops wrong layer there we go this right here will make it obviously stand out more it does look like it needs more padding around the word play all right whatever but in general buttons usually look better if you increase the padding around the text so I do think that I do actually think that this looks better I'm going to round the edges now and okay so I made the edges a little bit rounder I think I want to smooth out that roundness so bear with me while I tried this that does look smoother yeah when you're trying to make a smooth edge you never want to go one two one one two this will always look really weird if you want to make sure that you go down numbers so you can go three two one two three and that'll give you a really nice curve just a little tip in case you didn't know my ice is so dry all right let's get back to it okay so the next thing I'm going to do is add a shadow down here I'm going to just choose a you know with all you can color pick I think it's all in Photoshop as well but anyway I'm just gonna go darker and put the highlight on the bottom and if you look up here it looks pretty good already you don't have to but I kind of like to also put the shadow on the edge and then at the top what you can do is you can put a highlight at the top so we're gonna pick the color and not only go brighter brighter will look good but not only do we want to go brighter but we'll also want to probably go a wider lighter and I actually like to do highlights on my highlights so I went almost white here and in the middle I'm just going to drag and then to create sort of like a fade effect I'm going to skip a pixel and put a dot and this is a really nice little effect that makes it look a little bit more like a glare I'm actually probably gonna go all the way to white there we go and now it looks like it has a shine at the top maybe another whoops maybe another good spot for a shine would be on the edges but basically if you want to add shines you just need to add white white lines and add these little dots or you can fade it out but I'm not gonna worry about fading it out to make the button look even thicker what I like to do and a lot of buttons button graphics have is they have a thicker side on the bottom because if you if you imagine let me grab this coaster here I got this bridge red coaster but if you imagine the button straight from the front you can't see the sides at all right so you can't tell it's 3d the only way you can tell an object is 3d is if you see it from if you see a side of the object and as you can tell you can't you can't see the side at the top you can only see the side on the bottom and the more that we took this the more the bigger this side will be so to make a button seem more 3d all you need to do is really make the bottom part or one of the sides thicker and we're going to choose the bottom so yeah there we go I think we think that's all we really need to do right here to give it more of a 3d look so instead of just going darker like we did here also hue shift so if I hue shift towards red oops I had an eternal contiguous on you can see that the button has more more character to it and we can do the same thing at the top instead of just yellow I can hue shift towards green oh my gosh wrong glare alright alright there we go so a huge shift it towards green I'm gonna try even more and I think that's kind of a cool look the top is green and the bottom is the top is hue shifted towards green the bottom is a huge shifted towards red but it just makes the button look like it's more interesting let me show you guys another example of this this button I'm gonna make a sort of like a blueish green and on the bottom here you might expect it to be darker but you can also go with a lighter color and check this out the button looks kind of like it has a glow on it from underneath it's a cool little effect that you can add so you don't always have to go darker on the bottom so for example this button right here I could actually go pretty bright red and it would still look pretty cool and near the top I could maybe even do light blue eye I mean you gotta do a little bit of color theory for this to look great but I think this button right here the colors match pretty well so I could really quickly here oops really quickly here just drew drew a little you know play icon you don't always have to have the word play actually for like mobile games I try to avoid text because you don't need to because for other languages you don't need to translate it if you have Universal icons like the play button maybe maybe we could add a shadow to this let me get my line tool out maybe a highlight like that I think that's good enough you don't need to do too much detail for something that's an icon okay so I got another effect to show you guys it's a highlight so I'm gonna pick the color basically in the middle and I went a little bit brighter and I'm just gonna go across about half way and make that part brighter this is a cool little effect for highlight for buttons usually though you don't want to go too low and a lot of buttons and I see this effect that done a lot of times actually where it's only near the top which is also how I like it I like to put it near the top only let's make that even yeah there we go so now this highlight is near the top and to make it look like the button has even more detail what you can do is remove that highlight from the edge and it makes it look like it has a bit of a bend out if you see that there but it's a cool little effect for the sake of not these buttons on being completely the same I'm going to I'm just going to change the colors there a little bit I don't like how saturated the the highlight is a common mistake that you'll make is usually over saturating highlights highlights often it's it's often noticeable when a highlight is oversaturated so usually if your highlight looks odd probably the mistake is you want to desaturate it so you'll want to go left over here on the in the color box or whatever this thing is called to see what the colors look like different colors look like what you can do is go to adjustments hue and saturation and then just slide the hue around and you can get some pretty cool looking buttons let me pick one yeah there we go up to saturation and then I think this yellow needs to be a lot brighter so I'm you just like this yellow make it a lot brighter and then I'm gonna uncheck contiguous so that way I can just update it all over the place boom okay so let me show you another cool effect you can do you can pick a bright color and just add a bevel near the edge you see what we're doing there and you can go all the way around or just you know like I did but for example I like this color and I'll go brighter wait did I go brighter now go brighter and oh actually for this I should go darker if we want it to be look like it's embossed I think that's the word it's now you can tell I mean this this icon now needs to shrink because it needs it needs padding but you see what effect we did with this button right it looks like it's a little bit indented I don't really like the green highlight at the top though since we used this blue for the highlighting near the bottom it would probably look good at the top yeah I think it does let's make that even brighter now I updated both of those and check it out it looks pretty good it looks like we are missing the bevel on the sides though so let me just turn on my mirror tool am I in the middle yes man I'm good at eyeball in the middle so I think man I think we need to do this and then maybe whatever yeah this is a really low res button you can imagine if this button was a higher resolution it would make it a little better the bevel would look even better but yeah there we go that one is beveled I don't really think the bevel the seeing the side looks good with the bevel so I'm gonna get rid of the graphic on the side and I think that this looks better it's more of a square button but whatever sometimes you got to make them sacrifices alright so now let's start from scratch and just try to make a super duper looking cool button okay so I'm gonna start just by drawing the button rectangle right let's do that and then what I'll do after that is a lift my that's my beanie up a little bit so I'm just gonna grab this blue and go darker I'll just go darker let's drag this across I'll make a nice fat one two two actually hmm how much of it should we put on the edge right I'm thinking oops I'm thinking we have just like a really thin edge Noah screw it let's add a tiny little highlight all around alright so this might have been too tall but we need to smooth this does that look right I think that looks right all right no that's better that's a fight button we made a fat old button I still want to give it a black outline though so don't put your black outline here and here no that's a mistake you only want your black outline to actually be an outline so the quickest way that we can give this button Helen is the same way that we did for the text you go to effects outline and boom Butterbean bedroom there it is alright and then hit OK there we go now we got our outline for a button alright this is pretty good but I do think we should maybe make this a little bit of dark a little bit darker and then you know let's try shifting a little bit towards blue that might be too much something like that looks nice and then something I haven't showed you guys yet is is doing a highlight near the bottom so I'm gonna go and make this a lot brighter let's uh put this tool back oh you all right there yeah and boom I'll put a highlight near the bottom and it makes the button like Joe say I think we should make it even brighter so let's go here brighten it up let me turn off contiguous boom whoa that's not brighter which one I get we want to desaturate it and the saturating it will make it look right ooh dang look at that button the top part isn't the same as the side but I actually kind of liked it let's check it out does that look better or that that kind of look so I'm gonna leave the the top the color that it is now I could add a highlight um at the top oh my gosh I could add a highlight oh mike I could add a highlight up here too but it just starts looking weird you kind of have to pick whether you're gonna put a highlight in here at the top or the bottom and in this case I'm gonna put it near the bottom but I'm still gonna do that in or highlight so go ahead and grab this middle color and go a little bit brighter and then not go all the way to the edge but pretty close and do a little one a days do one of these here and oh my gosh it's like contiguous there and yeah check it out I don't think it's bright enough so I'm gonna brighten it up a little bit that's pretty nice maybe even smaller I'm gonna keep going smaller and just look at the top and see what it looks like and maybe something something that small looks pretty good and I like this button a lot now to transition this a little bit better probably seeing this all the time but in the corner so I can select this black go about halfway to the alpha and then if I click here this is a transition basically a transition color I think it's a little too dark so I'm going to decrease that helpful on that black even more and then I can color pick this color and basically I'm just putting this between the black and the blue to sort of make it a blend yeah that's the word to make it blend better and you can even add that in other areas as well I'm just trying I'm just trying it you know I'm putting it here but it's it's kind of it's putting too much emphasis on this highlight it's creating too much contrast and making it almost look like this is sticking out like it almost looks like the highlight has a shadow so I'm gonna remove it from there we don't need it there and now these edges these edges could be darker as well so I could pull all the way up here and that looks pretty good and maybe we can even transition the side so what I'm doing here is creating a transition to the to the to the edge so that the edge looks darker oh my god okay so that's pretty good let me decrease the help for that you know make it blend a little bit better okay I think that's I think that's pretty good it's a nice a nice transition I don't think this is actually dark enough so I'm going to make it a little darker maybe even a little darker there we go now it looks like there's a nice gradient I think this last one probably needs to be a little bit brighter I can keep going over it because the Alpha so low that if you keep drawing over it you're you're making it lighter or darker so it's a nice way to kind of pick the right color too I don't do too many gradients when I do pixel art but I mean come on if you want your button to look super Pro you might want to do something like this and I'm gonna take this color it's really nice light color and actually put it on the bottom here as well maybe maybe the darker one would you look better down there yes I think the darker one looks better and maybe just put that right there for a nice little transition and it's I don't know if it's subtle on your screen on my screen I can see it we can increase the contrast later if it's not noticeable but there's a nice transition now here from the darkness of the side to the the color we have at the bottom so far looking good I'm not sure what else we could do except maybe add a couple of highlights so we're gonna go all the way white and maybe in this bottom corner here we're going to just add a little highlight so it looks like it's like gleam in a little bit oops we do need to turn off the mirror the mirror tool here because we don't want the highlight to be on both sides maybe you do maybe that's a look you like but I think it looks more natural if it's not exactly the same on both sides so here I did a highlight in the bottom left corner and I'm gonna do another highlight in the in the top right corner this time I probably won't use white because it'll be a little bit the contrast will be a little too high so I'm going to use basically this slight blue we used for the highlight near the bottom so I'm just adding a highlight near top right now and let's see what that looks like remember the reason I'm doing these dots is I think it's kind of a neat way to to do a transition so there we go we have a highlight near the bottom left and the button in the top right I do think we actually need this to go brighter so I'm going to add a little bit of a little bit of white in here maybe not too much I don't like that this is a corner here because if I color that in actually it looks fine so there we go we added a little bit of highlight a little highlight to the top right and the bottom left and it makes the button look look a lot more reflective which is a nice little effect I might want to even do a little bit of that in this corner let me just see what that looks like yeah I think I like it a little bit of that in that corner and I think I'll do a little bit of a little bit of a white highlight down here in this corner as well maybe something like that and how the button looks nice and reflective and just that little extra that makes the button look juicy I do think the contrast between these clouds is a little too high so I'm going to go to like 50% and color this in and then we'll use that as we use that to transition the the color out a little bit better there I think that's pretty good maybe add a little bit a little highlight up here hmm no it's starting to look too messy got to be careful don't want it don't want it to look too messy but I think this button is almost done right there's not you don't wanna add too much because then it will get too messy maybe the highlight now in the middle maybe this needs these we need to move the padding so I'm just gonna go ahead and because of the highlight it got rid of the padding that we had so I'm just gonna go ahead and maybe re add that in let me see what that looks like maybe this top line doesn't need to yeah I think that top line needs to stay there but something like this there we go something like that looks pretty darn good so I like this button but you might not want it to be super clean so I'm just gonna make a new layer here and this one will be just to show you a couple of cool little things that you can do so it is really clean but maybe if we want it to look damaged or you want it to look like wood you know you can always add go in and add these like these textures so maybe I want it to do something like you know like this to make the the let's say you have like a button that's made of wood or stone you'll you'll just go in and add a couple of these details in and you will make your button have have a little bit more personality now yeah now it looks like it's damaged but yeah there's a ton of little cool effects you can do like that and the let's say I wanted the button to have a lot more design in it right so I'm just gonna take this button and really quickly hue shift it just so it feels like a different button Wow some pardon me some of these some of these are beautiful look at that green button I love it but let's go towards like pink button yeah and then you saturation there we go and like let's say you wanted this button to look like really cute or something right so you want to add some cute designs in it let me show you how to do some of Dada you think I guess the middle again I've been pretty good at this yes I did oh my gosh I'm just eyeball in the middle so what we can do is we could add some what's it called search with the F I got a look it up flourish we add some flourishes so if you search flourish you'll give you ideas for all these cool little flourishes and look if I search flourish button I wonder if it'll be a real button it is a uibutton flourish UI button then you can see and those aren't flourishes okay this one kind of has this one has a couple of flourishes but you can add these flourishes to your buttons basically all these are flourishes and it'll make it look really cool Wow Wow these are pretty inspirational but this is kind of what I what I had in mind darn this is gonna make the one I draw look bad okay so but really quickly I mean let me show you how you could do a flourish but you can even make this look 3d so check it out if I go darker and I pull this across now even even this rim looks 3d and you can even give the rim a highlight too so if this is like metal let's say you were trying to go for like some royal look you can add you can add a highlight to this too now it looks like shiny metal around the button I mean this is a pretty shiny button already for maybe we don't want it to shine that much um I did yellow it might look really good too let me go to yellow and make this make this shine yellow yeah now it looks like that looks like gold looks like a nice gold shine you probably want to transition that a little bit better so I'm just gonna do that thing I was telling you guys about where you select the color go to like 50% and then draw over the other one this still doesn't look okay there whatever now it's now it's a transitioning a little better but boom looks like a nice gold highlight we could do it all the way around but actually if you want this to look 3d what you want to do is is not draw it near the top so now it looks like the button is almost like sitting inside of this there's um look you see how I ended it exactly at the height of the button that feels too coincidental and it doesn't look that good and it doesn't make the silho doesn't make the silhouette look as interesting so if I end it sooner you see it makes the silhouette look more more interesting to end it sooner so I'm gonna end it even sooner like right here and and there now now the button now the silhouette or the button looks a lot more interesting than when I took it to the top all right so we got a nice frame there for our button and let's add a flourish so somewhere over here I'm not likely sure where the middle is maybe like here I'm gonna add maybe a little uh maybe a little gem is gonna stick out [Music] [Applause] [Music] okay I think that's pretty good and abettor being better boom I think we're done oh one more thing let me show you guys a button that I did for a game that I'll show you next week it's a it's a pause button and I think now that I've showed you a bunch of these techniques you can see kind of how I went about making this button alright well so best part is you can use all these buttons in your game for free in the description there's a link to my itch and here I have free to use in-game pixel pits are assets by the way you should totally follow me there'll be a button up here to follow me so that way you're notified when I update these and I'll try to update these as often as I make new videos thanks for watching can you guess the games I got up this week if you like pixel or follow me on Twitter and I need to apologize do this head sure you get something cool this week but I decided to post want to tell next week love your bike please subscribe please subscribe

Channel: Pixel Pete (Peter Milko)

Views: 113,899

Keywords: petermilko, peter milko, pixelpete, pixel pete, pixel art, pixelart, pixel art tutorial, pixel art 101, video game art, 16bit, 8bit, retro art, pixel art button, ui button, pixel button, pixelart tutorial

Id: wiQJqddh4f8

Length: 31min 35sec (1895 seconds)

Published: Tue Mar 10 2020