Creating a Pixel Sprite

Updated on March 8, 2017

Pixel art is an art form based on the pixel style that was developed for early video games.

The first consoles had output limitations such as low resolution and colour display, and these limitations lead to a new technique for creating images.

Today this retro look is incredibly popular, and many artists replicate it. Games are still released using the pixel art style despite advances in technology rendering these old techniques redundant.

This hub describes how to create your own pixel sprite, with a step by step guide and some useful tips and tricks.

Step One: Planning your image

The first step is to decide what kind of character you want to create, and how stylised or realistic you want it to be. It can be a very simple cartoon, or a more complex realistic character- for the sake of example I chose something in the middle.

Don't worry about pixels yet, they come later. Just draw your character as you normally would.

I began with a simple sketch, then worked it up from there adding colour and cleaning up the lines in Adobe Photoshop. I worked in a reasonably large file size to start with (around 1000 pixels high) but just work to whatever scale you find most comfortable-  larger than the final size of your sprite is best.

You don't have to use Photoshop to create your pixel sprite. There are a number of free programs available with the necessary tools, such as MS Paint and Graphics Gale. However, if you are making your own image from scratch rather than working over an existing one, Photoshop is the way to go.

When making an image from scratch I find it very helpful to work on different layers: a layer for the linework, a layer for the local colours, layers for light and shade, and extra layers for details. Use as few or as many layers as you like, but don't go overboard as they can be hard to keep track of! When it comes to the pixel stage, it's best to merge all the layers together (except for the background).

sketch, lines and base colour of the sprite
sketch, lines and base colour of the sprite


Once your character picture is finished and you're happy with the over all look of it, it's time to pixelise it!

First, it will probably need re-sizing. Pixel art is generally very small- sometimes a sprite may be as small as 20x20 pixels, especially those designed for hand-held devices.

Of course, the smaller it is, the simpler and more exaggerated the style has to be. As the image I am using is relatively complex it has to be a large sprite, so I re-sized it to 275 pixels high (or 300 pixels including the background). Much larger than this and it starts to lose the pixel sprite feeling.

anti-aliasing from re-sizing
anti-aliasing from re-sizing


One of the problems with resizing is anti-aliasing. There are some options you can change to avoid this, such as 'nearest neighbour (preserve hard edges)' in the drop down menu of the image size window, but I find this destroys the details. Besides, it's cheating! The best pixel art is done by hand, old school style.

So, the re-sized image is looking very soft and not at all like pixel art yet. The first step to pixelisation is to clean up the edges of the image and get rid of the anti-aliasing. This means any edge pixels that are less than 100% opacity have to be erased or redrawn with 100% opacity, using the pencil tool or the pencil eraser.

Selecting the pencil tool in Photoshop for applying and erasing pixels
Selecting the pencil tool in Photoshop for applying and erasing pixels
some basic formulas for creating pixel shapes
some basic formulas for creating pixel shapes

To aid this process I usually change the background to a bright blue, or a colour that isn't found anywhere on the image. This makes the edges easier to see (which is why it's important to keep the background separate!).

Depending on the style you're going for you may want to add a strong outline around the sprite. I chose not to for this image, but there are several formulas for creating smooth pixel curves and outlines. Another technique often used is to add a white outline around the entire image. I believe this was originally intended to make the sprite pop from the game background, and it's a matter of stylistic preference.

Once you have cleaned up the edges, the image starts to take shape and look more pronounced with that crisp edge pixel art has. But there is still a way to go- the shading inside needs work.


Now it's time for some pixel shading. Smooth gradients are not allowed! The image I have used has a lot of them, and a million colours to boot! Pixel art tends to look more authentic and retro the fewer colours you use, but it is also a lot tougher to shade realistically with less colours.

There are two main methods of overcoming this limitation: cell shading and dithering.

Cell Shading uses flat colours and a midtone between two shades to smooth the transition between them. It's great for getting a clean stylized look, but it can soon start to use up a lot of colours.

shading techniques
shading techniques

For a more retro style there is dithering. Dithering helps to blend two colours by use of a pattern that tricks the eye from a distance. If you're on a severely limited colour palette, you can use basic colour theory to 'mix' new colours this way; for instance by dithering blue and yellow to get a green hue. Dithering also adds texture and a distinct style reminiscent of the 8bit era.

For my image I chose to use mainly dithering. You can go wild with it- there are some basic formulas to follow using a checkerboard pattern that thins out at the edges, but pretty much anything goes so long as it's patterned. If you try using the airbrush for random pixels this will not work so well. Following a pattern is the best method even if it changes to follow the shape of the structure it's representing.

Click to view at 100% and see the true pixel effect!
Click to view at 100% and see the true pixel effect!

The finished Sprite

And you're done!

The pirate sprite I created uses many colours which gives her a more realistic look than the really early sprites. If you prefer a more retro look, limit the colours and scale down like I did with the Spartan.

Good luck and have fun creating sprites!

Tips and Tricks

  • Never try to make a pixel sprite from scratch, it's better to work from a scaled down image as a starting point.
  • Use a brightly coloured background that contrasts with your sprite for cleaning up edges and getting rid of stray pixels.
  • Keep in mind that the smaller the sprite is, the simpler the design must be. Tiny sprites are best in Chibi style (like the Spartan at the top of the page).
  • Cell shading or dithering, or a combination works. No gradients!
  • Photoshop has a save feature 'save for web and devices' where you can toggle the amount and type of colours used in your image. Cheating a bit, but a handy shortcut to start from.
  • To get a scaled up version of your pixel art: zoom in to the desired size, hit print screen, and paste this into a new file. Voila, you have a blown up pixel image for that authentic retro look!

This article is accurate and true to the best of the author’s knowledge. Content is for informational or entertainment purposes only and does not substitute for personal counsel or professional advice in business, financial, legal, or technical matters.

© 2011 Vanadis


    0 of 8192 characters used
    Post Comment
    • thranax profile image


      5 years ago from Rep Boston MA

      Great hub on how to create a sprite!


    • Vanadis profile imageAUTHOR


      7 years ago from Barcelona

      StompStompStomp- The pirate girl image is displayed at actual screen size. (Be sure to click on the image to see the sprite at 100%, Hubpages scales down some images to fit the article so the pixels may not show well). The Spartan at the top was created by 'blowing up' the original sprite to that exaggerated pixel size. To do the same for your image just follow the instructions on the last tip under 'tips and tricks'. Granted this advice is probably coming a bit late :)

      Telle: Sure, knock yourself out!

    • profile image


      8 years ago

      Hi! I hope it's okay for me to use this lineart to practise my colouring, I won't steal your work and put it on a website somwhere. If there would be some troubles, please contact me!

    • profile image


      8 years ago

      I don't see many pixellated features on the pirate girl... Also, I need to make a chibi character with a VERY pixellated physique, like the Spartan. How do I do that?

    • Vanadis profile imageAUTHOR


      8 years ago from Barcelona

      Thank you SilenceR! It took around 2 days. Difficult to say exactly because I produced this sprite along with a lot of other work simultaneously.

    • profile image


      8 years ago

      really nice and cool, how long did it take for you to make the pirate girl as an example in this tut? :o


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
    ClickscoThis is a data management platform studying reader behavior (Privacy Policy)