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:
-
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 ]
-
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 ]
-
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 ]
-
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 ]
-
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:
|
