Flat Colour Images

Flat colour images means illustrations that are coloured and can be optimized as indexed PNG images using palettes. Typically that means they have limited or no gradients, and have fewer than 256 discernable colours. This will reduce image file sizes by more than 66%. It will also mean the image uses less memory when loading.

Indexed images can also have transparency applied when appropriate to make them reusable on multi-coloured backgrounds, or where interactivity may change the background colour behind an image.

Remember that you are producing images for a wide range of screen and viewport sizes and resolutions. It is pixels that matter for standard resolution devices. High resolution devices will take care of their own presentation in the mobile AZARDI readers.

Our recommendations is that landscape images that are required to cover the viewoport width in landscape are processed at 1000px wide. If images are portrait they should be constrained to 800px in height.

If you are dynamically sizing images (for example using the IGP:Digital Publisher % width tools) you can make them larger.

Here are some sample images that are ideal candidates for processing as indexed images with reduced palettes.

Notice that none of the images shown actually needed 256 colours in the palette to accurately reproduce. The palettes have been reduced accordingly. It all shaves a few Kilobytes of the image size.

Palette Processing

Creating good Indexed images takes just a little observation and practice. Sometimes there is a few "undo" operations if you are trying to get an image to the smallest size.

Let's take a look at a simple graph in the first instance.

The PDF extracted JPG image is large and uncompressed.

Colorizing Print Images

When converting a printed text book that uses lineart or bi-coloured images ideally you are colouring the images.

If the content is suitable for flat-colouring or limited colours it is relatively smart to do the work taking into account the file size advantage of Indexed images. That  means keep colouring and shading flat without gradients to the extent possible unless you are going to save the images as JPGs.

These are the ways you can get from your print PDF into your image processing application:

1. Cut and paste from the PDF directly into your image processing application.
2. Export images from the PDF using Adobe Acrobat or some similar application.
3. Import PDF and extract the page as an image at an appropriately high resolution.
4. Zoom in on the page image and use print-screen.

All methods have their time and place depending on how the source PDF has been constructed, the size of the image on the PDF and other considerations. There are very few automated shortcuts with these procedures.

Exporting Images from the PDF

This method works if the PDF has high-resolution images that are actually exportable. Check this problem list:

1. Is the PDF print resolution. The images, or some of the images may export at a suitable processing resolution, many will probably not.
2. Are the images EPS. With textbook content it is highly likely that a number of the images are EPS and cannot be retrieved by export. You will have to use other techniques.

Once the images are out and they are of a suitable resolution you can get processing. But compromise with care, with your eyeballs on high-alert and a very clear understanding of the target pixel size for each image.

If the source is a print resolution PDF this method is generally workable for all photographs, RGB, CMYK and grayscale. If you don't use a correct exporting application your CMYK images will probably carry some CMYK hue and will need colour correction to sRGB.

Images From a PDF

If the lineart in the source book is an EPS you will have open the PDF and convert the page as an image. So here we go.

1. You want at least 2000 pixels to work with across the image, so usually importing the PDF and converting at 600dpi is a good starting point if your page galley is less than 15 cm or 6 inches. If it is bigger you can go to 300dpi. Don't be a meany with the import resolution.
2. For text and line-art turn anti-aliasing off when you import a page. This means the image will effectively be black and white, or perhaps three or four colours after importing and will have hard pixelated edges. That is what you want for colourizing.
3. If your image imports with anti-aliased edges see "Thickening Outlines below".
4. If your images imported without anti-aliased edges just colourize as described below.

Controlling Line Thickness

If the page has an embedded image the image will probably come in with anti-aliased edges. You can check this by zooming in 200%.

To colourize the image you want a black and white image. If the picture has substantial and thick lines you can covert it to index - Black and white, and then back to RGB. The image will be ready to paint.

However if the image has lighter lines or shading you need to use levels to remove the gray shades. The quick and cruel way is to just key the black level to 254. If you zoom in on the lines there should be no anti-aliased gray anywhere. This will give the thickest lines.

You can make the black lines thinner by using the Level-line technique at for example 127 (black) and 128 (white). The output will be black and white, but the lines will be thinner. Play with the numbers to get the results you need. Too much black can be ugly in the final image.

Processing Smaller Icons for Colourizing

Your print book may have small icons that come out rather small with pixelated edges using the above techniques. A process of last resort (We are assuming you have at least a 1260 or 1440 wide screen) is the print screen method. 

Your icon has to be able to stand up to being enlarged three times and still look pretty good. If you are putting an animation effect on the icon you will want to make it look better.

1. In this case you can use the native rendering power of PDF Reader. Zoom in on the icon and fill your screen.
2. Take a screen grab and Paste As A New Image. This will be an RGB image.
3. While it is still anti-aliased take it up to a larger size using the no-multiple rule.
4. Use the "Levels-Line" technique to get the thickness of line you want. Generally it will be above 128, but it is your eyes that tell you what to do.
5. Select black using Select Color and then invert the mask.
6. Flood fill the image with white.
7. You now have an RGB image that is black and white ready for colouring. The advantage of the sizing up in RGB mode is you generated a lot more finer edge pixels.
8. When you have finished your colourizing save the image as a standard PNG. Don't use JPG.
9. Size the image to your target icon size. You should have nice black borders with no badly visible pixelation.
10. Convert the image to Indexed colour using the smallest possible palette.
11. Save the final icon image.

That's it. With a bit of practice all this resizing stuff just takes a few minutes and your delivered file is as small as it can be and looks great.

Levels-Line Technique

To convert an image to black and white you can just convert it to and indexed black & white image and then back to gray. That works sometimes but the lines may end up too thick and black and not be a line-art representation of the antialiased line. .

A better method is to set the white level to a number and the black level one unit less.

If you go White=256 Black=255 you will get the thickest lines. If you go White 128 Black 127 you will probably get very elegant width lines.

No Multiples Rule

When resizing images up and down don't use an even multiple of the image dimensions.

Eg: The source image is 500px wide. Don't use 1000px or 1500px. Use something like 1897px or 1438px. This will force the resize anti-aliasing to generate more gray tones to play with on the black lines.

 

Posted by Richard Pipe