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