Pixelate Effect Tutorial

Have you ever wanted to create a pixelize look on your designs but you didn’t know how? Well here is your answer ! In this Adobe Fireworks tutorial you will learn how to install 3rd party plugins in adobe fireworks and use them.

pixelatetutorial

Most people don’t know that there are a lot of photoshop compatible plugins that can be used in adobe fireworks  and that  which I highly recommend using Richard Rosenman’s plugins. 

Before you read this tutorial , please download the Pixelate Plugin by Richard in his site. He has about 24 freeware plugins that can be downloaded in his site and some commercial ones as well.

1.) First extract the contents of the zip file , a ” pixelate.8bf ” file appears. Copy and paste this file to your plugins directory. It’s usually C:\Program Files\Adobe\Adobe Fireworks CS4\Plug-ins.

If you use different sets of plug-ins and don’t want it to load everytime you use Fireworks, I suggest you make different folders and activate these sets only  if you need to. Since using a lot of plug-ins can slow down fireworks.

2.) By default,  your plug-ins are stored in the Adobe\Fireworks CS4\Plug-ins directory, to change the directory of the plug-ins , you need to access the preferences panel.

Start a new document, right click on the canvas, and click Preferences

pref

Click on the Folders Tab, if you have used a different directory to store your plug-ins. If you used the default directory , you can skip this part. The preferences panel can also use different textures and patterns, you may want to check the other tabs if you want to customize default settings of fireworks.

3.) Restart fireworks to activate the plugin/s.

4.) Copy this image and paste it on fireworks. Or you can use your own  image if you want to, take note that the Pixelate Plugin only works best if you use a photograph or an image with two or more colors and that it converts your images into bitmaps.

orig

5.) Click on the image , and go to Filters > Richard Rosenman > Pixelate to open the Pixelate Panel.

panel-pix

It’s default settings already look good and does the job in pixelizing your images, but I’d like to further discuss the features of the plugin. Set all values to 1 or drag all the sliders the left.

Horizontal / Vertical : Controls the sizes of the squares or the pixels  The maximum amount for both is 100, which gives your image 9 square pixels. By default the Lock Horiz/Vert button is pressed , if you wish to unlock it, just press the button. You can now have different values for both the Horizontal / Vertical sliders , which gives a rectangular look for the pixels and looks like this

panel-pix2

I suggest you press  the Lock Hozin/Vert button, and for the their values, 10 – 60 is decent, anything more would make the pixels too big, anything less would’nt make any noticeable changes to the image.

Blend controls the transparency of the pixelate effect. A value of  zero would do no changes to the image, anything around 1 – 80, the image is still visible, but a value of  100 fully pixelizes the image.

blendop

The outline gives the squares or pixels a border. Just like the blend slider, the outline slider controls the visiblity of the outline in the pixels. If you dont want them to show, just set a value of 0 , a value of 100 shows the outlines, like a grid.

outline

Subtractive / Additive Basically Controls the colors how dark or light the outline color would be. Additive gives a white outline while Subtractive gives a black one. I suggest you leave the default settings for the R G B buttons, if you wish to change the outline color, click the black white space.

Hit the OK button once you have are done with the settings. And that’s it ! You can pixelize your images.

pixelatetutorial

You can play around with the settings but for a better look, keep the Outline value to zero, and click the Lock Horizontal / Vertical Button, and everything will be fine =)

Here’s a list of other photoshop plug-ins that are compatible with fireworks. If you have questions of this Adobe Fireworks tutorial , feel free to comment below.

17 replies
  1. Paul says:

    No, I'm not wayno. I picked up CITF recently. It was parked and I thought it was such a waste of a good website that I decided to buy it. Hopefully I can restore it to its former glory :)

  2. ralda says:

    thank you for sharing your knowledge!

    i appreciate it very much! and i love that plug-in, but how to know which photoshop plugins are compatible with fireworks? or all of them (in that site) are compatible? anyways i like this tutorial very much, ive been learning more techniques from your site! thank you!

    cheers from Guatemala

  3. Keith D says:

    Photoshop plugins that are compatible with fireworks… that's what I like to hear.

    Thanks for the info, I'll take a look at the plugins.

    Almost forgot… will it work with fireworks 8 and… being able to edit your comment is a great feature – saved me a couple of times with this comment.

    PS any others, which you can use with fireworks?

    Keith

Trackbacks & Pingbacks

  1. [...] Click here to read the article Posted in Adobe Fireworks CS4, Adobe Fireworks CS5 | Tags: digital effect, Fireworks, graphic effects [...]

  2. 20 Useful Fireworks Tutorials for Designers | MisrIT Reader (Beta) says:

    [...] 6. Pixelate Effect Tutorial [...]

  3. [...] Creating Pixelate Look This tutorial outlines the easy-to-follow steps in creating a pixelize effect in your design. This [...]

  4. [...] Creating Pixelate Look This tutorial outlines the easy-to-follow steps in creating a pixelize effect in your design. This [...]

  5. Designfeed.me » 40+ High Quality Adobe Fireworks Tutorials, Resources & PNG files says:

    [...] 19. Pixelate Effect Tutorial [...]

  6. 40+ High Quality Adobe Fireworks Tutorials, Resources & PNG files | e-szablony.eu says:

    [...] 19. Pixelate Effect Tutorial [...]

  7. [...] Please check a new tutorial from Angelo Sabal AKA blue. Pixelate effect. [...]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply