27th Sep 2011
Apparently pixel art is cool once again, and if you are reading this blog, chances are, you like pixel art. As my first actual article on the site, I thought I’d make a little tutorial on how to pixel your own 16*16 sprite, that you can use as a favicon for your website or game. There are many ways to go about pushing pixels, and this is just one of them. Sadly, this tutorial will not teach you how to draw or come up with nice ideas, sorry. Also I will not go into program-specific details, you need to have some basic familiarity with the software you want to use.
Fire up your app of choice (mine is GraFX2, but you may be more comfortable with Photoshop, GIMP or what-have-you), and make a new 16*16 pixel document. Done? OK, now take my hand and I’ll walk you through the steps of pixeling a frog.
What to do:
Using black colour, make a little drawing inside the bounds. Now, 16×16 pixels can seem like a very small space, and it is, but it will teach you the first lesson of pixel art, to make each pixel count.
Make sure your drawing is fully articulated and readable at this stage. If you start with a bad drawing, no amount of polish will be able to save you.
All about Photon Storm and our
HTML5 game development services
- My Adobe Max slides: HTML5 Game Development for the Mobile Web
- Phaser 0.9.5 Released - Camera FX, lots of Tilemap updates and more!
- Our list of HTML5 Game Sponsors
- Phaser 0.9 Released - Motion, Collision, GeomSprites and more
- Phaser Logo - Phase One
- Announcing Phaser (Flixel HTML5) and our Adobe Max session
- TypeScript Signals released - Think outside the Event
- AS3 to TypeScript Conversion Script
- Our 3rd NFL game - Guardian Training: Over Throw is now out
- Helping Multiplication.com support their growing mobile traffic
Filter our Content
- Cool Links
- Flash Game Dev Tips
- Game Development
- Geek Shopping
- In the Media