Turning Pixels into Paintings
May 29th, 2008 | Published in Crafts | 6 Comments
![]()
Every year I vacation in Boothbay Harbor, Maine and I like to take advantage of my time off to try out some larger scale arts and crafts projects. This year I wanted to try my hand at painting, but I’m not exactly the best artist in the world, so I came up with a system to let me turn my digital photos into a blueprint for a large painting.
The idea is simple. Just take a digital photograph you like, shrink it down to a small size with a limited palette of colors, and then recreate that small image on a large canvas. I did a test run this past week with a picture I took of a lobster, but there’s no reason why anyone can’t use these methods to create their own personalized painting of their favorite digital picture.
Read on to learn how it was done.
Step 1 - Choose a digital picture and prep it
Every painting starts with a digital picture. In this case, it’s a picture of a (very yummy) lobster. Next, I used Photoshop to eliminate the background so I would only be focusing on the image of the lobster.

With this image, I scaled it down to a very small size (96×72 pixels), and saved the image with a limited palette of only eight colors. You can do this by saving the image as a GIF or PNG in your image editor, and then choosing a custom color palette with as few colors as possible. You’re going to be painting each color one at a time, so if you go with 16 or 32 colors, then that’s okay, but you’re also going to be creating more work for yourself.
In this case, I used a palette of eight colors — seven shades of red, and white for the background.

Once you’ve saved your small image as a PNG file on your hard drive, then you’re ready to move on to Step 2.
Step 2 - Create the blueprints for your painting
Next you need to start thinking about your painting and how you want it to look on the canvas. Painting hundreds of perfect pixel squares would be tedious and not particularly exciting, so what if you painted circles instead? That would be much easier with a round paintbrush… And what if the sizes of the circle changed based on the color? How would all of these possibilities affect the look of the final painting? The possibilities can be overwhelming so I put together a web page built with PHP that would allow me to play around with these options and see what looks best.
If you want to try this on your own website, download the source code here.

To get this page running on your website, create a new directory and upload all of the files in this zip file to that directory. Next, upload your own PNG image to the folder as well.
Now when you go to the page on your website, replace the text ‘lobster_preview.png’ with the name of your PNG file. Click the preview button. You should see a preview of your own image on the right side of the page.
Now you can start playing around with some of the options for your painting. These options include:
- Shape - do you want to paint circles or squares?
- Size variation - are all colors the same size, are lighter colors bigger, or are darker colors bigger?
- Size scale - If you’re varying the size, how big should the largest color be? 2x, 3x, 4x, or 5x the size of one pixel?
- # of sizes - How many different possible size shapes do you want? 2, 4, 8, 16?
- layering - do you want to layer the colors? if so, do you want them layered darkest to lightest, or lightest to darkest?
Whenever you change a selection, click the ‘Preview’ button and you should see a preview of the painting based on your choices. Try as many combinations as you like to find the one that works best for your image. Once you’ve decided on an option, then click the ‘Generate Report’ button and you should get a long page with a lot of graphs. These are the blueprints for your painting, and look like this.

Print the blueprints out, and get ready to start painting.
Step 3 - Shut down the computer and break out the canvas
Now that you’ve got a printout of your blueprints, the next step is to think about scale. How big do you want to make your painting? In my case, I chose to use a ratio of 1 pixel = 1/4″. This means that the original 96×72 image will fill exactly one 24″x18″ sheet of drawing paper. The 1/4″ scale means that the brushwork itself doesn’t have to be too meticulous, but the finished product isn’t overwhelmingly large.
In order to guide me during the painting process, I setup a grid on my drawing paper. Using a very light pencil, I divided the drawing paper up into 1″ square sections. You could divide the canvas into smaller sections or even mark all of the pixels on the canvas (sort of DIY paint-by-number), but it’s up to you how much of this prep work you feel is necessary. I started with this light 1″ grid, and made some notes where I thought it made sense.

Once the canvas is prepped, then start painting! Take the first color you want to paint, and using the blueprint and your grid as a guide, start dabbing brush strokes where the blueprint tells you to. Don’t be surprised if the image isn’t apparent at first, it will come together eventually.
Here’s what the lobster looked like after the first two colors were done.

After the third color was added, it still didn’t look like a lobster.

After the fourth color, though, things are starting to become more clear.

And once the two lightest colors were added, the whole image comes together. Not too shabby!

Conclusions - Where to go from here
What excites me most about this project isn’t just that I could paint a lobster, it’s that this system is completely scalable for the next image I want to paint. I can use the same system, but also introduce variations. For instance. I can scale the resolution of the image up and down, I can scale the size of the finished product up and down, and I don’t even have to use paint. Instead, this blueprint could be used with all sorts of materials including colored paper, clay, crayons, even crazier things like pieces of metal from leftover soda cans or those round DayGlo stickers from the office supply store.
Anyway, I’m curious to hear what suggestions you have for how this could be improved, or more importantly, what kinds of things you end up making with it.
May 30th, 2008 at 8:48 am (#)
When I want to paint something, I usually go for imitating Rothko, but wow, this process opens up a world of possibilities. Thanks for sharing!
June 2nd, 2008 at 4:54 pm (#)
wow! thanks for the great tutorial, as well as your source code-how handy! this is awesome.
June 2nd, 2008 at 9:08 pm (#)
Thanks for the inspiration! I’m pretty new to Photoshop and don’t know how to remove the background (Step 1.)
My question is: How do you do it?
I’d appreciate any information you can provide.
Best wishes.
June 2nd, 2008 at 9:16 pm (#)
Julie-
The key to removing the background is using the magic wand tool in Photoshop. I did a quick YouTube search and came across this video which is a good starting place for anyone new to Photoshop.
http://www.youtube.com/watch?v=RDV-g0rG-3w
June 3rd, 2008 at 12:30 pm (#)
[...] Turning Pixels into Paintings :: wubbahed.com (tags: art howto pixels) [...]
June 25th, 2008 at 1:28 pm (#)
http://tinyurl.com/3q9vpu
Here is a link to a similar project I did for my blog followers. It’s using a photo from a magazine page as a starting point. This is a fun way to create with paint if you’re not a “painter”!