dimka.com > Bitmap Image Editing Part 1 (Part 2)

Bitmap Image Editing
and Some Tips for Adobe PhotoShop and ImageReady - Part 1

Bitmap or Vector Image? What file format?
Bitmap Images were designed for use on screen and photographs, used for buttons, pictures, illustrations and art images.
Vector (Layout) images were designed for print and for good salability. Used for Diagrams, posters, flyers etc.
Typical bitmap formats are: BMP, PCX, GIF, JPEG, PSD, XCF, PNG and TIFF

Most of the web is using bitmap images
modern browsers support GIF, JPEG and partially PNG

GIF and JPEG are lossy formats that are optimized for small size (enabling fast download), but they are not good for storing original artwork or photographs.

GIF JPG PNG
limitations Limited number of colors (256 max)
large file size for busy images
not a free format
Not a clean look with contrasting colors
No transparency and no animation
loose quality every time you touch and save it
limited support on the modern browsers
relatively low compression on not lossy images
relatively poor quality of very compressed images
advantages Small size for simple images
Transparency
Animation
complex images look good even with the strong compression
free format
ability to save with or without loss of quality
transparency
animation
free format
usage animated buttons
various size simple images
Photographs
large complex images
alternative to GIF
hi quality images and photographs

Editors
There is a variety of different bitmap editors:
Adobe PhotoShop, MS PhotoDraw, GIMP, Corel PhotoPaint, Adobe ImageReady, Meta Creations (Fractal Design) Painter etc.
any of them is capable of creating graphics you need, but ease of use, thus production speed and quality of output are different.

Adobe PhotoShop
Layers, Selection Tools and Filters made it to be a king of bitmap editing.

Image Size
Think always in pixels. On the new image always start Images were larger settings, because you can always crop or resize down later. Do not worry about filesize until you get to the final output. There are three main way to manipulate Images were opened image:Image->Image Size, Image->Canvas Size and Cropping. Last two are very similar, because they do not change actual image but only deal with height and width in pixels, so when you reduce them it become cropping. Image Size allow you to resample actual image when you scale it up or down.

Color Mode
Do all the image editing in the RGB color mode. Unless you edit few colors GIFs and do not want to change the palette. Once your image is ready you can change modes to suit you final output need. However when Images were image (in RGB mode) use HSB slides instead of RGB, it does not change mode, but add flexibility in changing colors.
Main color modes are Index Color, Grayscale, RGB and CMYK

A bit of the Color Theory
Based on the human perception of color, the HSB model describes three fundamental characteristics of color:
Enbsp; Hue is the color reflected from or transmitted through an object. It is measured as a location on the standard color wheel, expressed as a degree between 0° and 360°. In common use, hue is identified by the name of the color such as red, orange, or green.
Enbsp; Saturation, sometimes called chroma, is the strength or purity of the color. Saturation represents the amount of gray in proportion to the hue, measured as a percentage from 0% (gray) to 100% (fully saturated). On the standard color wheel, saturation increases from the center to the edge.
Enbsp; Brightness is the relative lightness or darkness of the color, usually measured as a percentage from 0% (black) to 100% (white).

RGB Model (Additive colors)
A large percentage of the visible spectrum can be represented by mixing red, green, and blue (RGB) colored light in various proportions and intensities. Where the colors overlap, they create cyan, magenta, and yellow. Because the RGB colors combine to create white, they are also called additive colors. Adding all colors together creates white—that is, all light is reflected back to the eye. Additive colors are used for lighting, video, and monitors. Your monitor, for example, creates color by emitting light through red, green, and blue phosphors.

CMYK Model (Subtractive color)
Whereas the RGB model depends on a light source to create color, the CMYK model is based on the light-absorbing quality of ink printed on paper. As white light strikes translucent inks, a portion of the spectrum is absorbed. Color that is not absorbed is reflected back to your eye.
In theory, pure cyan (C), magenta (M), and yellow (Y) pigments should combine to absorb all color and produce black; for this reason they are also called subtractive colors. Because all printing inks contain some impurities, these three inks actually produce a muddy brown and must be combined with black (K) ink to produce a true black. (The letter K is used to avoid confusion, because B also stands for blue.) Combining these inks to reproduce color is called four-color process printing.

Layers
Use many many layers, give identifying names to them and orange them in a logical manner. Try to create each object in its own layer - it will give you flexibility and variety. Use hiding option as the way of creation different versions of image element.

Selection Tools and Masking
Selection, masking, channels are different approaches to the same concept - limiting working area by some criteria. Use selection all the time to get more predictable results of your actions. Using selection tools with combination of Selection Menu Commands can get you any desirable shape, that you can save and use later. Alpha Channel a good way to determine transparent area of you image.

Filters
PhotoShop and most of the other modern editors have many filters. Filters can add specific effects to the image - for example most used filter is Blur reduces sharpens of the image (or simple blurs it) by adjusting values of neighboring pixels to be more alike. Important thing about filters is not to be wild with them. Try to use the ones you know the way you know. Often you need to use filter in combination with adjustments to the image.

PhotoShop and ImageReady
PhotoShop and ImageReady are very similar products. In short you can describe ImageReady as crippled PhotoShop with added capabilities for the web. PhotoShop is faster, more efficient, has more manipulation tools, filters, finer color adjustment tools and printing ability. The main advantage of ImageReady is an ability to quickly see final output derived from your image. ImageReady manipulates few images at ones: Your original multilayered fully colored not compressed image and optimized ready for final output image(s). This let use very quickly adjust and judge the quality and size of you final output, for example compare look and size of GIF and JPEG or different compression levels of JPEG. Also it make much easier to retouch optimized images. ImageReady can produce animated GIFs, imagemaps and help you to create slices and even simple Java scripts like rollovers.

Animation
GIF animation is constructed of multiple images displayed one after another with given intervals and with possibility of looping. Since GIF allows transparency, individual frames can let you see through them. You have an option of piling frames one on top of the other or replace them one after another. First way is more efficient because usually animation does not occur in the whole image, but in a part of it. Thus you can make a static background with small animated element - it will save you time and reduce the size of the file. Animation in ImageReady is done through the layers. Using animation Palette you can specify the order and the delay of displaying layers.

Imagemaps
In ImageReady imagemaps are done with layers as well. In the layer menu you can assign the whole layer to be a link in the imagemap. Layer does not have to be visible, but the not empty aria of the layer is what will be added to the map. I usually place these map layers behind background. Along with your image file ImageReady can save an HTML file that contains imagemap. You can copy and paste this map to you webpage or edit that HTML file to make to be you page.

Both PhotoShop and ImageReady allow you to jump from one to another.

Your original work should be saved as a PSD file. PSD is a native format for PhotoShop and ImageReady. However PhotoShop PSD and ImageReady PSD formats are slightly different in older version.

go to Part 2