How To Make Low Rez Pixel Buttons
Zomg, it's an "art" tutorial! Faced with the need for buttons for a game UI, I wanted to create something low rez and pixel-y. Doing a search for "pixel buttons" didn't really turn up a whole lot, so I kinda mucked around and came up with something I liked, which was an amalgamation of various sources of inspiration. Now I'm regurgitating this process back onto the 'net, so hopefully it'll be useful to you as well.
- Determine size you need, then halve that. Create a new image with the halved size, but add an extra pixel to both width and height. So, say I want a 200x40 button, I'll create a 101x21 new image.
- Draw a border along the edge of the image, but leave a pixel's width of spacing on the bottom and right of the image. We'll use that spacing for a drop shadow.
- Determine how rounded you want the button to be. See some examples, and modify the corners of your button appropriately.
- Select the color you want for the button, then fill the whole center with that.
- Lighten your color slightly and outline the top and left sides.
- Darken your color slightly and outline the bottom and right sides.
- Create a new layer, then add a black border in the extra space on the bottom and right sides. Lower the opacity of the layer to 25%, then merge it with the main button layer.
- Scale the button by 2x, using the "nearest neighbor" scaling algorithm.
- Add your text with whatever text decoration you like.
- Done!
Comments