How to make pixel art in Photoshop

25 comments By Aubrey on January 22nd, 2010

Althouh !"errowth is my top priority, # really lo"e pixel art too$ As an artist it is important to
keep practicin all o% my skills because you ne"er know when they will be use%ul$ &or example, #
ended up makin a lot o% pixel art icons and buttons %or the iPhone "ersion o% Black 'hades, and #
also helped (a"id out with the art in this blo post$
nearest)eihbor
# ha"e otten some re*uests on how exactly # o about my pixel art, so here # will co"er the
basics$ &irst, there are a %ew thins that are a little buried in Photoshop +,'2- that make workin
with pixel art a lot easier$
nearest)eihbor
.ou will want to o to /edit 0 pre%erences 0 eneral/ and set the imae interpolation to /nearest
neihbor/$ 1ith that set, whene"er you trans%orm part o% your imae it will stay in the %orm o%
discrete pixels$ 2his is "ery use%ul i% you want to make an animation$
# like to choose a %airly small imae si3e %or anythin that is oin to be pixel art$ A ood si3e %or a
nicely detailed, but still chunky character is 12452 px$
# start blockin in the shapes %or the character usin the pencil tool$ .ou also probably want to set
your eraser to use the block or pencil style$
Pixel6xample
7radually # clean up the shapes until # ha"e an outline # like, and then on a lower layers, # %ill in the
shape and then ha"e a couple layers %or shadin$ 2his can produce a nice consistent result$
8dudes
!nce # ha"e the character desined, sometimes it is %un to animate it$ 2o do this in Photoshop,
you can o to /window 0 animation/$ )ow with the animation palette open, it is easy to set up
your animations usin di%%erent layers, and play them$ !nce the animation is done, you can sa"e
it as a $i% under /%ile 0 sa"e %or web/ and selectin /i%/ %rom the %irst drop9down box on the riht$
2hen you can show o%% your animation in any web browser, like this: