ColorizeIt Editor

Colorize my files

To colorize your own style, you need to upload a sample image and zip file containing style.

Sample is shown on editor and allows you to preview changes. Sample requirements:

See sample image creation tutorial below if you need help.

Upload Sample:

Upload GIF image from your computer.

Upload Sample

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:

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.

Now I'll change blue color and increase saturation of red color. Here is result:

On first 2 sample images you can see red color near "Your first forum" text. That red color should not be there. This was caused by anti aliasing.

Having such terrible sample images will cause problems for some visitors, that is why you should make samples on Windows with anti aliasing disabled.

How to disable anti aliasing.

Open Control Panel, navigate to: Appearance and Personalization -> Display then click "Adjust ClearType text" uncheck "Turn on ClearType".

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.