The KIRUPA orange logo! A stylized orange made to look like a glass of orange juice! Tutorials Books Videos Forums

Change the theme! Search!
Rambo ftw!

Customize Theme


Color

Background


Done


Creating a Retro Pixel Effect

by kirupa   |   6 February 2012

I have this weird obsession - an obsession that involves taking normal things and making them look pixelated. For an example of this, check out the following box-art from one of the greatest movies of all time:

do they speak english in "what"?

[ such a quotatious movie ]

Notice that this image has an effect applied to it that gives it a very retro, pixelated look.

In this tutorial, you will learn how to use Adobe's Fireworks to quickly (and I really do mean quickly) take a normal image and give it the same pixelated and retro look.

Let's get started:

  1. Launch Adobe Fireworks. I'm using version CS5, but I'm pretty any version made in the last decade will work.
  2. Find an image that you want to apply this pixel effect to. If you don't have an image, use the following image of Mass Effect 3:

mass effect 3

[ taken from Wikipedia ]

  1. Once you have your image, open it in Fireworks. Your image should be the only thing your document contains. You'll see shortly why, but you have to dedicate your entire artboard to the image you want to apply your effect to:

inside fireworks

[ my image is the only content in my document ]

  1. Let's "add" our retro pixel effect. Go to File | Image Preview. The Image Preview dialog will appear:

Image Preview

[ you should get comfortable with this dialog - it is really powerful ]

From this dialog, click on the Format combobox and select GIF from the list of available image formats:

list of file formats

[ choosy mothers choose GIF brand image formats ]

  1. Once you have selected GIF, you'll see export settings particular to the GIF format. From these settings, find the drop-down listing the maximum number of colors you can use:

the maximum number of colors you can use

[ GIF images can, at most, contain 256 colors ]

Click on that drop-down and select a really low number like 4.

  1. When you select a low number of colors, notice what your image preview looks look like on the right-hand side of the Image Preview dialog:

pixelated image

[ look! pixel image effect! ]

The preview gives your image the retro pixelated look that you set out to learn.

  1. If you are happy with these results, just export your image to save it to disk. That's all there is to it.

Once you have saved your image to disk, you can then re-insert that image into another composition, re-export the image as a PNG, and so on.

See, I told you this was quick!

Going Further

The settings you have available for exporting in Fireworks are extremely powerful, and the image preview makes it easy to experiment with the settings to see how your image will look. Let's use this section to look at some additional settings you can fiddle with to modify the effect a bit further.

Going Grainy

To give your retro pixel image a more grainy look, adjust the Loss value to a higher number:

adjust the loss value

[ this value specifies how compressed the image will be ]

Notice what our image looks like after setting the loss value higher:

pixelated image

[ the effect is subtle, but you can see it if you pay attention ]

Changing the Colors

From the same Image Preview dialog, you have the ability to manually change every color used:

change the colors

Double click on each color to map it to a different one of your choosing. With only a few colors, you can easily change colors and preview what the end result will look like:

the incredible hulk version

[ the Incredible Hulk version of Mass Effect 3 ]

Here, I changed the default colors to go with a green-ish theme instead.

Changing the Palette Type

The last customization we will look at it is changing the palette type to alter the table of colors used. By default, your palette type is set to Adaptive:

check out the adaptive palette

[ Adaptive gives you the best (and boring) results ]

Change the palette to other values to see how your image reacts. My favorite is Uniform:

a uniform palette

[ hello 1993! ]

This palette type gives you the classic video game look (or at least their title screens) that you had in the 1990's with games like Commander Keen or Duke Nukem 2d.

Conclusion

By fiddling with the settings in Adobe Fireworks's Image Preview dialog, you can create some really cool and nifty effects. The retro pixel effect is just one of them, and if you find some other clever effects, do share in the Retro Pixel Effect thread.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over a bazillion subscribers!

SUBSCRIBE NOW

Serving you freshly baked content since 1998!
Killer icons by Dark Project Studios

Twitter Youtube Facebook Pinterest Instagram Github