How to Build a Portrait with Dice (using Photoshop)

I recently found this very interesting post about building a portrait with dice while reading Hacker News. In it, Scott MacDonald explains how to code a script to generate a mosaic of dice from an image. Since I’m more of a designer than a coder, this got me wondering if I could achieve the same effect using only my trusted Photoshop…

First, let’s take a look at what we’re going to produce:

Our goal is to take a photo, and create a mosaic where every “pixel” is actually a die. The white-on-black die will be arranged according to their visual density to recreate the image, and the idea is to eventually use this new image as a guide to produce a real-life mosaic like in this video by Fujiya and Miyagi (however, this tutorial will only cover the Photoshop part!). We’ll also go through an optional (but easier to achieve) intermediate step where we encode the dice with colors instead of the actual die face.

UPDATE: for you lazy people out there, I’ve created a Photoshop action that automates the whole process with any photo! You can download it for free here along with the patterns.

To get started, let’s look at how the original script works. It converts an image to 6 shades of grey, divides it in squares, and then assign a die to each square according to the color’s density. For example, the lightest shade of grey is represented by a black die with six pips, while the one-pip side is used for the darkest shade.

So how would we do this with Photoshop? Well, let’s start by opening our photo (I’ll use the same photo as the author, in order to make it easier to compare results, I hope he doesn’t mind!).

1. Making the photo black & white

The first step will be turning our color photo into a black and white one. Fortunately, Photoshop has a menu item that does just that. In the Image menu, go to Adjustments > Black & White:

Let’s just use the default preset for now. Playing around with those value will have a big impact on the final result, so you can definitely come back to this step later if you want.

2. Reducing the number of shades of grey

Now that we have our black and white image, how do make sure we’re only using 6 shades of grey? Once again, Photoshop has the answer:

Still in the Image menu, go to Adjustments > Posterize.

And choose 6 levels, since a die has 6 “colors” (i.e. its faces).

3. Creating the tiles

We’re getting there! The next step is dividing the image into 16*16 pixels tiles. This time, let’s open the Filter menu and go to Pixelate > Mosaic.

And choose a 16px square size:

Looking good. We have our image divided into 16px tiles colored with 6 shades of grey.

4. Encoding the die faces with colors

We’ll also create our own system to make it easy to know which die should go where. However, instead of using die faces, we’ll simply use colors! Black will mean the 1-pip face, blue will mean 2 pips, and so on until white for the 6-pips face.

Go back to our trusty Image menu and pick Adjustments > Gradient Map:

Now here comes the fun part. Gradient Map simply maps a gradient to your document’s colors. Since we have 6 colors, let’s create a 6-color gradient. Click the gradient, and the Gradient Editor dialog should come up:

We want 6 colors, and we already have black and white so we only need four more. So click four times between the black and white color stops (those small things shaped like houses on the bottom row), and place the four color stops at 20%, 40%, 60%, and 80%.

Not much to look at yet, since our gradient maps to all black. Let’s fix this by picking 4 different colors (just double-click on the color stops to open the color picker). The goal here is to pick very distinct colors, since we’re going to assign a die face to each of them:

The problem now is that since this is a gradient, Photoshop has inserted a lot of extra shades between each color. We’ll fix this thanks to our good old friend, the GIF image format (also works with PNG8 by the way).

5. Removing the extra colors

In the File menu, choose Save for Web & Devices (don’t ask me what those “devices” are, I’ve never understood either).

Now choose the following settings: Format: GIF, Dither: 0%, and lastly remove all colors except the 6 we want (i.e. black, white, blue, green, red, yellow). To remove a color, just select it in the color palette and click the little trash can (you can shift-select multiple colors).

And there you go! Now all you need to do is write down on a piece of paper that black equals 1, red equals 2, etc. and you’re good to go.

Click to view full size

Now I was going to stop there, but then I realized it’s actually quite easy to accomplish the exact same effect as the original.

6. Reproducing the dice mosaic using patterns

All you need to do is create six 16 by 16 pixel patterns, one for each face of the die:

Then define them as patterns by going to the Edit menu and choosing (what else) Define Pattern.

Now once your 6 patterns are defined, go back to your 6-color image and choose the Magic Wand tool (the fourth one down in the tool palette in my version of Photoshop). Make sure to turn off “contiguous”, otherwise you won’t select all the pixels of the images, only the ones that are contiguous to the point you clicked.

Now select each of the 6 colors, and fill them with the corresponding pattern (paint bucket tool, and then choose “pattern”). Make sure “contiguous” is turned off here as well.

And here’s our end result! Pretty neat, don’t you think?

Click to view full size

Let me know if you use this technique to build an actual die portrait, and thanks again to Scott MacDonald for the inspiration!

About Me

I'm Sacha Greif, a web designer freelancing out of Paris, France. You can check out my portfolio, and of course you should follow me on Twitter.

18 Responses to “How to Build a Portrait with Dice (using Photoshop)”

  • Reply
  • metu_yal

    good job thank you very much

    19 Nov 10:03 am
  • Douglas

    Hello! Good idea for a tutorial.

    If you swap steps 2 and 3, you can skip 4 and 5. You need 4 and 5 originally because the mosaic filter actually produces an image with more than 6 colours, since it averages the colours in each square to make a new colour. If you posterise after the mosaic step, each square will be one of 6 shades of grey, which you can use just like the colours in step 6.

    19 Nov 1:35 pm
    • Sacha

      You’re absolutely right. When I realized that there were too many colors, I just used a quick fix, but I didn’t really stop to think about where the problem was coming from.

      In my defense, I wrote this tutorial after waking up at 5 am this morning because I couldn’t sleep…

      19 Nov 3:21 pm
  • khromov

    Very inventive!

    19 Nov 11:01 pm
  • OldBox » 骰子作画的算法

    […] 此外,不用编程,使用Photoshop也可以得到类似效果。 […]

    27 Nov 12:28 am
  • Mike

    it sure looks amazing! Didn’t know that it’s so simple to achieve.
    I have recently seen many similar pictures and looks like this have become some kind of trend.

    27 Nov 3:50 pm
  • 骰子作画的算法 - 博客 - 伯乐在线

    […] 此外,不用编程,使用Photoshop也可以得到类似效果。 […]

    28 Nov 1:10 am
  • 骰子作画的算法 | 极客智

    […] 此外,不用编程,使用Photoshop也可以得到类似效果。 […]

    28 Nov 1:38 am
  • 技术宅的圣诞礼物

    […] 首先第一步就是图像处理,我们需要将全彩图像转换为骰子灰度,首先将图像转换为6阶灰度图,然后将这6个灰度对应到骰子的6个点,1代表黑色,6代表白色,帖子结尾附有Processing转换程序(如果你是PS宅,这里是一篇PS转换教程)。 […]

    29 Nov 6:12 pm
  • 骰子作画的算法 | 点点滴滴

    […] 此外,不用编程,使用Photoshop也可以得到类似效果。 […]

    1 Dec 5:41 pm
  • Alan W

    Hi Sacha, Really leased to find this information you have posted. I make mosaics myself & have wanted to try some made from die. I am not to experienced with computers but have just got a mac book pro osx. I down loaded the photoshop action you placed on your description to automate but although it downloaded it will not open on my mac. Is this only for window, if so do you have a download I can use with my mac? thanks for your time & I hope to hear back from you soon.

    Regards Alan

    13 Mar 2:20 am
    • Sacha

      No, the action should work with Mac OS too. Not sure why you can’t open it. But I guess you can always reproduce the steps by following along the tutorial even without the action?

      13 Mar 6:35 am
  • Alan W

    Thank you Sacha, I will give that a go as soon as I get chance. I am waiting for the delivery of a new cs5 master collection so will see if the action will download for that when it arrives. Do you have an action that would work with the gimp program? Once again thanks for the advice & tutorial, Take care & keep up the good work.
    Regards Alan

    22 Mar 1:03 am
  • 技术宅的圣诞礼物 | Krains'blog|程序人生|励志经典

    […] 首先第一步就是图像处理,我们需要将全彩图像转换为骰子灰度,首先将图像转换为6阶灰度图,然后将这6个灰度对应到骰子的6个点,1代表黑色,6代表白色,帖子结尾附有Processing转换程序(如果你是PS宅,这里是一篇PS转换教程)。 […]

    25 Apr 1:59 am
  • Andreas Kopp

    Great tutorial. We used the same method for doing our pixel portraits. We already did Steve Jobs, Muhammad Yunus and the Dalai Lama. At the moment I am doing a portrait of my wife.

    4 May 5:26 pm
  • Ifham khan

    Great technique used, we can make so many other effects with this one. Thanks for sharing it

    29 Jun 5:26 pm
  • MarioShipppj

    I see your page is outranked by many competitors in google.
    You should spy their backlinks and use them for your site and you
    will hit top 3 very fast. There is tricky tool for this, just search google for : rilkim’s tips

    11 Apr 5:11 am

Leave a Reply

This field is required

This field is required