Pixel
Graphic Effect
         by kirupa  |  20 August 2004

Several people have requested me to write a tutorial on how I get the grainy, pixely effect in my footers. For an example of what they are referring to, check out the left half of my footer with the blue and white building:

The effect is fairly simply to replicate in Fireworks, and the following steps will help you to create the above effect.

Here is How
Ok open up Fireworks and create a new document:

  1. You will need to find an image that can be manipulated. The effect works well in pictures with a lot of lines and distinguishing characters. If you cannot find such a picture on your own, copy and paste the following image into Fireworks:

[ copy and paste the above into Fireworks ]

  1. Once you have your image in Fireworks, go to File | Export Preview. Under the Format drop-down menu, select the option for GIF:

[ under Format, select GIF ]

  1. Now, find the color drop down menu. You will find that menu to the right of the Loss text field. For example, you can see the menu in the above screenshot with the label 128. Click that drop down menu and select the menu item for 4 colors:

[ select the menu item for 4 colors ]

  1. You will see a very sharp, jagged version of your image. If you want to change the colors (there are only 4 after all) of your image, double click on each of the color preview boxes found on the left:

[ double click on the color preview boxes to change the color ]

  1. Now, press the Export button and save the image to a location on your hard drive. Your image should look similar to the following image:

[ your final image ]

The following "Something Cool" textbox has mysteriously appeared. That means that by reading it, you may learn something cool.

Something Cool
If you want to achieve a more grainy look to your now pixely image, go back to your Export Preview window. In the Loss text field, enter a large value:

[ enter a value in the loss text field ]

When you enter a large value - even 100 - you will notice in your image preview area on the right side of the Export Preview window that your image is more grainy:

[ a more jagged, grainy image with Loss set to 67 ]

Now aren't you glad that that you learned this Something Cool tip?

I hope the information helped. If you have any questions or comments, please don't hesitate to post them on the kirupa.com Forums. Just post your question and I, or our friendly forum helpers, will help answer it.

The following is a list of related tutorial and help resources that you may find useful:

How to use the Forums
New, Upcoming, and In-Progress Tutorials
How to Help out kirupa.com
Writing Tutorials
 
Cheers!
Kirupa Chinnathambi
kirupaBlog

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.