How to create correct sample images

When visitor is editing any style using ColorizeIt editor, all he sees is a sample image. Visitor moves sliders to change colors, sample image changes.

If sample is incorrect, if it contains colors that are not present in style or it is missing some colors, visitor will not be able to change color scheme correctly.

Format and size.

ColorizeIt uses images in GIF format for samples. Other formats are not allowed. Sample image size should be between 250x200 and 380x600.

How to make a correct sample image.

Creating image is not as simple as making a screenshot of your browser window and uploading it. Sample created via screenshot is guaranteed to include colors its not supposed to, which will result in visitors trying to change colors that do no exist in style. Also there is a huge problem of anti aliasing, which results in incorrect color changes.

What parts of style to show.

When you are making screenshot, do not show parts of screenshot that cannot be edited in style. That includes, but not limited to:

Colors that are hardcoded by software or set in control panel, for example, administrator's red link in phpBB.

Images that are not part of style, such as avatars.

Browser window.

Sometimes it makes sense to exclude logo image or whole header, if it has too many colors and can be easily replaced.

Try to show all colors that are available in style. Create one image and drag parts of several screenshots to it. If you have different color for links when visitor moves mouse over that link, make a screenshot with that link active (move mouse over link, press alt-print screen, paste it in whatever software you are using).

Examples of correct sample images.

Here are few examples of high quality images. This is what you should aim for:

All of those samples are combined from several screenshots, showing different parts of forum or blog. There are links with mouseover colors, opened popups, icons that are shown only if there are new posts in forum.

Anti aliasing problem.

Take a look at this sample image. It is a screenshot of phpBB's prosilver style taken in Firefox browser on 3 different computers:

Sample #3 is the one you should use, other 2 samples are incorrect. Why is that? Lets zoom in on blue text "Your first forum". It is blue text on blue background, nothing can go wrong with it, right? Wrong.

As you can see, on first 2 samples there are some weird red colors. They were added by font anti aliasing algorithms.

How to disable anti aliasing.

If you do not have that option, you'll have to do it hard way:
1. Open Registry Editor.
2. Navigate through HKEY_CURRENT_USER, Control Panel and Desktop.
3. Set FontSmoothingType to 1.
4. Set FontSmoothing to 1.
5. Reboot.

How to make screenshots on Mac.

If you own a Mac, making screenshots is easy.

Install Parallels Desktop or VMWare Fusion, install Windows on it.

In that Windows installation disable anti aliasing (see above).

Install any modern browser, such as Firefox, Chrome or Opera, which does not have its own anti aliasing.

Install software for making a screenshot. DO NOT make a screenshot using OSX because it will be converted into sRGB, resulting in incorrect colors. There are many free software packages, such as IrfanView that can make good screenshots. Install IrfanView, in menu select "capture/screenshot", set format to "png" to avoid losing quality, set hotkey to something you can easily use on Mac (for example Ctrl-F6), change directory to a directory you have quick access to, click "start" button.

Open page in browser window, make several screenshots highlighting different parts of style. Move mouse over different items that change color when mouse is over it, make few screenshots by pressing IrfanView's hotkey.

Open those screenshots in Photoshop or any other image editing software, combine parts of it, slice and save as gif image.