Skip to main content
Tech Radar TechRadar the technology experts
RSS
Asia
flag of Singapore
Singapore
Europe
flag of Danmark
Danmark
flag of Suomi
Suomi
flag of Norge
Norge
flag of Sverige
Sverige
flag of UK
UK
flag of Italia
Italia
flag of Nederland
Nederland
flag of België (Nederlands)
België (Nederlands)
flag of France
France
flag of Deutschland
Deutschland
flag of España
España
North America
flag of US (English)
US (English)
flag of Canada
Canada
flag of México
México
Australasia
flag of Australia
Australia
flag of New Zealand
New Zealand
  • Phones
  • Computing
  • TVs
  • Streaming
  • Health
  • Audio
  • Cameras
  • More
    • Home
    • News
    • Best
    • Reviews
    • Opinion
    • How to
    • Versus
    • Deals
    • Coupons
Tech Radar Pro
Tech Radar Gaming
Trending
  • iPhone 15 Pro Max review
  • iPhone 15 review
  • TechRadar Choice Awards
  • Apple Watch 9 hands on
  • iPhone 15 Pro hands on
  • Wordle hints
  • Best VPN

When you purchase through links on our site, we may earn an affiliate commission. Here’s how it works.

  1. Tech

How to make awesome pixel art

How-to
By Tech Tips
published 30 October 2015

Pixel perfect

How to make awesome pixel art

How to make awesome pixel art

Think of retro games and you'll probably think of the pixellated look of titles released on consoles such as the NES.

Games such as Bomberman and Kid Icarus worked within the limitations of 80s technology, yet offered hours of fun and some iconic looks.

The style faded into obscurity with the development of more powerful game consoles and 3D graphics, but has seen a recent renaissance in indie games such as Savant: Ascent.

The art is still drawn pixel-by-pixel using a limited palette, but is much smoother thanks to careful shading and muted hues not available to 1980s game developers.

One of the most popular uses of pixel art is in role-playing games based on an isometric grid. We're going to create a character (or sprite) for use in such a game.

Page 1 of 17
Page 1 of 17
1. Prepare your canvas

1. Prepare your canvas

Start by creating a new image in GIMP, which is a free image editing application. A canvas size of 100x100 pixels is plenty - much larger pieces of pixel art are possible, and look very impressive, but take weeks of work to complete.

Now select the Pencil tool. This, Fill and Zoom are the only tools we'll be using, but first we need to alter some settings so we can draw individual pixels.

Page 2 of 17
Page 2 of 17
2. Sharpen your pencil

2. Sharpen your pencil

With the pencil selected, click Brush Type and select '1 pixel'. Change the size to 1 and turn dynamics off. Deselect Apply Jitter and Smooth Stroke.

You can save it as a preset by clicking the blue floppy disk icon at the bottom let of the toolbox. Click on New Tool Preset, give it a handy name like 'Pixel art' then the floppy disk icon to save it.

Page 3 of 17
Page 3 of 17
3. Zoom in

3. Zoom in

Use the Zoom tool to take a closer look at your image (about 550% should be fine, although it will depend on your monitor's resolution).

You want to be able to see and manipulate each pixel easily. Make sure you zoom out periodically while you're working to check that your art looks okay when viewed at actual size.

Page 4 of 17
Page 4 of 17
4. Paint it grey

4. Paint it grey

We need to make careful use of shadows and highlights to ensure our pixel art character looks three-dimensional. Select the Bucket Fill tool and make the whole image a medium grey colour.

This neutral background shade will make it easier to judge how bright to make highlights, and how dark to make shadows.

Page 5 of 17
Page 5 of 17
5. Create a guide

5. Create a guide

Now we're going to create an isometric grid as a guide to making pixel art. Create a new layer and call it 'Grid'. Select the pencil tool and choose a different shade of grey.

Now click the top left pixel of your image, then hold [Shift] and move your mouse pointer to the right-hand side. When the co-ordinates at the bottom left read '99 49', click to draw a line.

Page 6 of 17
Page 6 of 17
6. Line it up

6. Line it up

Click Ctrl + C to copy the line and Ctrl + V to paste it, then select the Move tool and move the pasted line a little below the original.

Click on the background to deselect the line, then copy and paste both lines. Repeat the process until the image is filled with evenly spaced diagonal lines.

Page 7 of 17
Page 7 of 17
7. Build a grid

7. Build a grid

Now copy and paste all the diagonal lines, but don't deselect them. Instead, click Tools > Transform tools > Flip. Click once anywhere on your image to flip the copied lines.

This will give you an isometric grid. Because it's on its own layer, you'll be able to delete it easily when you've finished.

Page 8 of 17
Page 8 of 17
8. Pick a subject

8. Pick a subject

Create a new layer and call it 'Pixel art'. The next step is largely up to you, but we're going to draw a spider-like creature, which could be an enemy in a computer game.

Make sure you use the grid as a guide to help you get the right perspective, and don't use any tools other than your customised Pencil and Fill.

Page 9 of 17
Page 9 of 17
9. Sketch it out

9. Sketch it out

Take a leaf out of the classic artist sketchbook and start simple. Rather than trying to get every pixel perfect first time, make a rough sketch of your idea. It's very easy to edit and refine as you go along.

Just make sure you use the isometric grid as a guide, and always bear in mind that your character is a three-dimensional object.

Page 10 of 17
Page 10 of 17
10. Refine it

10. Refine it

Once you've got a rough sketch, try filling each section with a different colour to make them easier to identify. You can then decide where your light source is and begin adding shades and highlights accordingly.

Feel free to tweak; here we've decided to make our spider's legs tilt inward to make it look more alien.

Page 11 of 17
Page 11 of 17
11. Add texture

11. Add texture

You should try to create the impression of different textures rather than making your character uniformly smooth. Here, we've decided to give our spider some fur on its head, using 'strokes' of differing shades to represent sections of hair.

Zoom out regularly to check that your texture effects work when viewed at 100%.

Page 12 of 17
Page 12 of 17
12. Try dithering

12. Try dithering

Early videogames required pixel art that used as few colours as possible. One way to get around these limitations was to use dithering, a chequerboard of lighter and darker pixels that blends together to look like a single, mid-toned colour. Give it a try!

You can create an interesting texture if the two colours are quite different.

Page 13 of 17
Page 13 of 17
13. Prepare to export

13. Prepare to export

Once you're happy, click on the Grid and Background layers in the right-hand palette and delete them. Now click File > Export As.

We want to keep our transparent background, which means saving it in either PNG or GIF format. Don't save it as a JPG – this format doesn't support transparency and the compression will ruin your intricate art.

Page 14 of 17
Page 14 of 17
14. Keep it transparent

14. Keep it transparent

Select a file type from the drop-down list and give it a name. At the next dialog box, uncheck Save Background Colour and 'Save colour values from transparent pixels', then click Export.

Your finished pixel art will now be saved with a transparent background, ready for use in a game, as an icon on your desktop, or on a web page.

Page 15 of 17
Page 15 of 17
15. Convert to ICO format

15. Convert to ICO format

One of the easiest ways to use your pixel art is to convert it into an ICO file and use it to replace one of the program icons on your desktop.

You can do this using a website called ConvertICO. Simply browse for the PNG or GIF file on your computer, then click the 'Go' button and it will be converted instantly.

Page 16 of 17
Page 16 of 17
16. Use on the desktop

16. Use on the desktop

You'll see a preview of your icon on the right-hand side of the page. Click the large arrow and download the icon to a convenient place on your computer.

Now go to your Windows desktop, right-click an icon and select Properties. Click Change Icon, browse to your newly made ICO file and click OK. Click Apply, and enjoy!

Page 17 of 17
Page 17 of 17
Tech Tips
Social Links Navigation
More about tech
A Microsoft Surface laptop, iPhone, Echo Dot, Echo Show and Fire Stick on a blue background

ICYMI: the 9 biggest tech stories of the week, from iPhone reviews to new Amazon Alexa AI

Samsung OLED, Amazon Fire TV, iPhone 15 and Jabra earbuds on a blue background

The payday wishlist – what we'd spend our money on this week (September 22)

Latest
Winston is held at gunpoint in a dining room in The Continental TV show

Inside The Continental, the John Wick prequel series that trades gun-fu for expressive ‘disco noir’

See more latest ►
Most Popular
How to watch The Continental: stream the John Wick prequel series

By Daniel PatemanSeptember 22, 2023

Japan Grand Prix live stream: how to watch F1 online from anywhere – FP3 & Qualifying

By Mo Harber-LamondSeptember 22, 2023

This new iPhone feature will make your battery last longer - here's how to use it

By Alex Walker-ToddSeptember 21, 2023

How to watch Taskmaster season 16 online from anywhere

By Adam MarshallSeptember 21, 2023

Marvel's Spider-Man 2 map size and open-world changes

By Jake GreenSeptember 20, 2023

How to watch Champions League live streams — catch every game in 2023-24

By Adam MarshallSeptember 19, 2023

How to download iOS 17 on your iPhone – and what to do when it won't install

By Mark WilsonSeptember 19, 2023

How to watch the Microsoft Surface Event 2023

By Allisa JamesSeptember 18, 2023

How to post a YouTube video

By Steve ParisSeptember 18, 2023

How to add text in Apple iMovie

By Steve ParisSeptember 18, 2023

How to use Nvidia Broadcast to perfect your stream and videos

By Alex BlakeSeptember 17, 2023

  1. The Motorola Edge 40 Neo in Black
    1
    Motorola's three new phones make the Pixel 7a look overpriced
  2. 2
    The Nvidia RTX 5090 is rumored to be nearly twice as fast as RTX 4090, so we should just call it the Titan RTX at this point
  3. 3
    Netflix's next big movie is a crime thriller with 98% on Rotten Tomatoes
  4. 4
    TransUnion's data stolen in major data breach
  5. 5
    This hidden iOS 17 feature will make your iPhone feel twice as fast
  1. A man sitting beneath a tree by a river, using a laptop.
    1
    How to level up your next creative project with a portable SSD
  2. 2
    This hidden iOS 17 feature will make your iPhone feel twice as fast
  3. 3
    Netflix's next big movie is a crime thriller with 98% on Rotten Tomatoes
  4. 4
    The Samsung Galaxy S24 could be even more powerful than the iPhone 15 Pro Max
  5. 5
    Windows Copilot might be the biggest change Microsoft has ever made to its long-running OS

TechRadar is part of Future US Inc, an international media group and leading digital publisher. Visit our corporate site.

  • About Us
  • Contact Future's experts
  • Contact Us
  • Terms and conditions
  • Privacy policy
  • Cookies policy
  • Advertise with us
  • Web notifications
  • Accessibility Statement
  • Careers

© Future US, Inc. Full 7th Floor, 130 West 42nd Street, New York, NY 10036.