How to Pixelize in Fireworks

I figured I'd share this little tidbit in the hopes it's not painfully obvious like, "here's why the sky is blue" but ever wanted a quick way to create those pixellated graphics? Here's how I do it.

9rules logo in various states of pixelization

In this example, I took the 9rules logo and pixelized it. To do so, I take the original image and size it down nice and small. The smaller you go, the more pixellated it'll look when it's resized back up. Before you resize up, though, go into your preferences and change the Interpolation to Nearest Neighbor. When you resize up, you'll see the image is now wonderfully pixellated.

See the Fireworks preferences panel with the drop-down options to select Nearest Neighbor

But one thing you have to be careful of is to change Interpolation back to Bicubic if you want to resize the original image back down again (or a smaller image even smaller). In this next example, the middle version is where the original image has been resized down and then back up using Nearest Neighbor. Whereas, the version on the right used Bicubic to resize down and Nearest Neighbor to resize up.

As you can see, the last version is more recognizable than the middle version.

That's all there is to it!

Published August 05, 2006 · Updated September 14, 2006
Categorized as Design
Short URL: https://snook.ca/s/635

Conversation

9 Comments · RSS feed
Rob Lewis said on August 06, 2006

That's a handy little tip Jonathan, thanks for sharing it.

Rob.

Kalle said on August 06, 2006

Neat! I'm using Photoshop instead of Fireworks at the moment but it's almost the same in there. Makes icons look really neat. Thanks!

Fredrik Wärnsberg said on August 06, 2006

Kalle, in photoshop the mosaic filter is much quicker. :)

Gabrusch said on August 07, 2006

So funny that two days later we have the same effect for photoshop.
http://www.photoshoplab.com/pixelated-mosaic-edges.html

I still prefer Fireworks, I've "grown up" with it

David G. said on August 10, 2006

...But why is the sky blue?

Jonathan Snook said on August 10, 2006

Why is the sky blue? I'll leave it to wikipedia to explain that one. :)

J. drukwerk said on February 01, 2007

Nice little trick. Do prefer fireworks over Photoshop for performing small tinkeling

Michael Müller said on March 06, 2007

Great tip, simple but helpful! Thanks!

Craig said on April 27, 2007

You can change the Interpolation in the resize dialog box without having to go into the preferences.

I've used this technique for years... it's quick and easy.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.