How to Build a Portrait with Dice (using Photoshop)

http://www.attackofdesign.com/how-to-build-a-portrait-with-dice-using-photoshop/

by sgdesign • 15 years ago

76 17 15 years ago

sgdesign4• 15 years ago

I thought it was interesting to see a different solution to the same problem (see: http://news.ycombinator.com/item?id=3254392 ). The developer thinks "let's write some code!", but the designer thinks "let's use Photoshop!"…

veyron• 15 years ago

The designer thinks to use the tools he or she is most familiar with, just like the developer.

nezumi• 15 years ago

It's great to see examples where code can be side-stepped in favour of a quick-n-dirty, 'designer'-type solution - different ways of thinking about the problem.

I have fond memories of my first years in the VFX industry being made a fool of by non-programmer effects artists who, by hooking together a few nodes in the industry-standard package Houdini, could in minutes recreate algorithms that took weeks for me to code the 'right' way, and in a couple more minutes interactively tweak the constants to get results which I would have taken even more weeks to derive 'scientifically'. It was a crash-course in the value of rapid-prototyping, but also in that particular case introduced me to new ways of thinking: Houdini presents a completely different view of geometry and image processing, which is thoroughly non-intuitive to the typical comp-sci graduate. Houdini taught me an (almost literally) orthogonal way of thinking about computer graphics problems.

The lessons are more general: - rapid prototyping is not necessarily coding - sometimes the non-technical, 'designer' approach is the more efficient one (not necessarily in this case - there is plenty of merit in both approaches) - the more tools you learn, the more leverage you have - why not learn some of those design tools and learn a different way of thinking about things.

(This comment is inspired-by, not directed-at, the two dice portrait posts.)

viraptor2• 15 years ago

I wonder why did they reduce the number of colours twice? Using the mosaic filter pretty much canceled the effect of the first "posterize" run.

bvdbijl2• 15 years ago

I believe this is because you would be getting a mosaic with all the different shades of gray instead of only 6

viraptor2• 15 years ago

If you reduce to 6 colours, then make a mosaic, you will get all different shades of grade. Mosaic will take (simplifying) an average of colours one tile covers.

DougBTX• 15 years ago

Just an oversight. He says at the end of step three that "we have our image divided into 16px tiles colored with 6 shades of grey", but as you point out, if you count the number of shades in the image above, there are more than six.

sgdesign4• 15 years ago

That was a mistake on my part. I didn't realize that "mosaic" would introduce unnecessary shades of grey in the mix.

This comment explains the problem:

http://www.attackofdesign.com/how-to-build-a-portrait-with-d...

And you can also check out Marc Edwards' take on this:

http://dribbble.com/shots/324185-Dice-Portrait-Tutorial#comm...

gutini• 15 years ago

I used a similar visual concept to produce the following: http://www.behance.net/gallery/Impossible-Triangle/1968627

However, I chose to manually use random numbers so it wasn't exactly quick. I wonder if there's a way I could have hooked Photoshop up to do that.

sgdesign4• 15 years ago

Turns out Photoshop is even more powerful than what you'd think: I created an action to automate the whole process with any photo. You can download it here:

http://cl.ly/BwdO

(By the way, little known fact: you can actually script Photoshop using Javascript. I once used this to automatically generate all letter tiles as separate images for a touchscreen keyboard based on a template)

pavel_lishin• 15 years ago

> you can actually script Photoshop using Javascript.

Could you write up a tutorial post?

sgdesign4• 15 years ago

I'm not an expert in Photoshop scripting by any means, so I'd have to remember how I did it first… in the meantime you can check out these tutorials:

http://www.kirupa.com/motiongraphics/ps_scripting.htm

http://morris-photographics.com/photoshop/tutorials/scriptin...

Tloewald2• 15 years ago

Photoshop's scripting capabilities are pretty astonishing. I taught myself over lunch the other day. You can script in JavaScript, AppleScript, or VBScript and implement dialogs and UI panels.

It works exactly as you'd expect and scripts are quite lean (you don't need to do a bunch of setup).

Tloewald2• 15 years ago

It would look better if the image were dithered into the target palette.

thesnark• 15 years ago

I am the guy who wrote the original post, I think this is great work, I wish I could use photoshop as proficiently!

I should say that for my part, I drew inspiration from flight404: http://www.flight404.com/blog/?p=131

and a paper I read where someone wrote an algorithm to do this with dominos.

e28eta• 15 years ago

I'd be intrigued if something could be done with the orientation of the 2, 3, and 6 faces to improve image quality.

I'm coming up mostly blank, but they probably create textures when the same number is in a large contiguous block and the orientations are the same.

Also, I'm wondering if anything can be done with 2&3 specifically because they have bright corners and dark corners.

I'm guessing the effects are fairly subtle and can't really be used to good effect, but...

How to Build a Portrait with Dice (using Photoshop)

Related Stories