Learning Basic Photoshop FIRST TIME

Chapter 1: Introduction to Photoshop 6.0

• What is Photoshop
• The RGB Color Spectrum
• Image Resolution, Dimensions and Color Depth
• Digital Image Types
• Internet Image Standards

What is Photoshop ?Photoshop  is the leading digital image editing application for the Internet, print, and other new media disciplines.  It has become a “killer app”, embraced by a wide spectrum of developers.

Traditionally, Photoshop  has been and continues to be a print industry standard.  There is a very strong chance that almost every photographic image you’ve seen in print (posters, books, magazines, flyers, etc.) has been prepared in Photoshop.  The powerful features that make Photoshop the standard for print images are also just as useful for Internet and display-based images (video and computer presentations for example).  Photoshop has evolved, expanding its print capabilities and adding Internet specific features essential to current and future web developers.

Included with Photoshop  is a web-specific companion program, ImageReady (version 3).  This manual covers the fundamental elements of both programs, concentrating entirely on the web-side of digital image production .  Photoshop is a very deep program.  It will take time to use it proficiently and explore its many features.  There are often many ways or methods to accomplish particular tasks.  We will be looking at common web-specific production objectives and the methods you can use to achieve your goals.  Before we get into the program, it will be useful to detail the nature of digital images themselves.

The RGB Color Space
Computer displays are made up of individual dots or units called pixels placed in rows and columns, like a chart or grid.  Each pixel can be one of up to 16 millions colors.  Essentially your computer has a Palette that holds a swatch or blob of red paint, green paint, and blue paint.  By mixing these colors together, other colors are created.  Because Red, Green, and Blue are a computer’s primary or fundamental colors, computer displays are said to operate in the RGB (Red, Green, Blue) color space or spectrum.  Each primary color is made up of 256 individual values or shades (measured from 0 – 255.)  By mixing Red at a value of 190, Green at a value of 81, and Blue at a value of 14 for instance, we get a dark orange color.  Mixing all the colors together at a level of 0 produces black.  Red, Green, and Blue all set to a value of 255 produces white.

Image Resolution , Dimensions, and Color DepthResolution  in digital imagery refers to pixels per inch (ppi) or density, similar to how many square feet a particular room in a house might have.  Currently, computer displays are limited to a range of 72 to 96 ppi.  For the web, 72 ppi is the standard.  Increasing the density is practical only for images intended for print and results in large file sizes which in turn result in longer download times.  DimensionsThe amount of pixels contained in the width and height of an image is referred to as an image’s dimensions.  For instance, an image might be 320 pixels wide by 200 pixels high (commonly expressed as 320x200.)  Image dimension is a key element of web design.  Currently computers have a common group of fixed desktop dimensions ranging from 640x480 to 1280x1024 or higher.  Web sites are usually designed “resolution-safe” meaning to the lowest common denominator, a desktop display at 640 pixels wide by 480 pixels high (640x480).  Within the browser itself a width of 600 pixels is the common limit.  This ensures that everyone viewing web sites with image capable browsers will be able to view your site. Dimensions Dimensions in Browser 640 x 480 600 x 300 800 x 600 760 x 420 1024 x 768 955 x 600 1280 x 1024 1600 x 1200 Color Depth (Bit-Depth)Color depth describes the maximum amount of colors an image can contain.  The number of colors an image contains is dependent on the image’s bit-depth.  Confused?  When users describe an image’s color depth, they might also describe it in terms of bit-depth.  The higher the bit value the more colors the image can contain. Images are made up of one of four standard bit depths: 1 bit, 8-bit, 24-bit, and 32-bit.  A 1-bit image consists of either black or white, or two colors.  8-bit images contain a maximum of 256 colors or 256 shades of gray.  24-bit images contain a maximum of 16.7 million colors.  A 24-bit image is made up of three 8-bit channels, a Red channel (256 shades of Red), a Blue channel (256) shades of Blue), and a Green channel (256 shades of Green).   32-bit images would contain over a billion colors; however, the final 8 bits of the image are commonly reserved for alpha channel information rather than color.  Alpha channels are covered later. Bit-Depth Colors 1-bit 2 8-bit 256 24-bit 16.7 Million 32-bit 16.7 Million A 24-bit image consists of three (3) 8-bit channels (256 x 256 x 256), which make up a potential of 16.7 million colors. Digital Image Types:  Vectors and BitmapsThere are two digital image types: bitmaps and vectors.  Bitmap images are the most common type of image file outside the professional print world.  Bitmap files map out or plot the image on a pixel-by-pixel basis.  Computer displays are made up of a collection of individual points or dots, called pixels, organized in columns and rows (similar to a table or a grid) where each cell represents each pixel in the image.  The bitmap image file basically plots each pixel, such as pixel 300 wide by 250 high is red.  Pixel 301 wide by 250 high is also red.  Pixel 302 wide by 250 high is yellow and so on.  Because bandwidth is a major concern when developing web sites, keeping the size of images to a minimum is very important.  The main benefit of bitmap images is photographic color, tone, and texture is accurately produced. If you were to plot a bitmap on a grid, each pixel is detailed.  Essentially, this is what your computer does when it displays bitmaps. Bitmap Pixel by Pixel Approximation (Reduced Scale)

Vector images do not plot images on a pixel-by-pixel basis.  Instead, vector files contain a description of the image expressed mathematically.  Essentially, the file tells the computer about the image and the computer draws it.  For instance, the image of a circle in vector format, written in plain English, might look something like this:

• Circle (200px)
• Fill  Color: Gradient
• Gradient Type: Radial
• Colors: White, Black
• Line Color: None

One of the benefits of vector images is file size, particularly relative to the file size of bitmap images.  The same circle as a bitmap file, at a resolution of 320x200, might look something like this in English: Row 1 Pixel 1x1 is white Pixel 2x1 is white Pixel 3x1 is white Pixel 4x1 is white, etc. until we reach Pixel 320x1 Row 2 Pixel 1x2 is white Pixel 2x2 is white, etc. Describing the circle (and the color surrounding it) on a pixel-by-pixel basis is a much more lengthy process than telling the computer to draw the circle itself. Another major benefit of vector graphics is scalability.  Because the computer effectively draws the image for us, vector graphics are also scalable; meaning the size of the image can be increased or decreased without degradation.  Because the file is an equation, placing different numbers into the equation results in the computer rendering the image correctly, but if you only modify the scale , the file size remains the same. Scaling vectors results in perfectly rendered images.  The image on the left is the ball in its original size.  The image on the right is the same ball with an increase in scale .  The file size is the same. Bitmaps can be scaled, but an increase in scale  degrades the image because the computer does not have enough information to create the new image.  The computer merely takes the existing pixel information and translates one pixel into multiple pixels.  For example, if we scale a 45x45 image to 90x90, each individual pixel in the image in its original state becomes four (4) pixels in its scaled state.  This results in jagged edges that appear fuzzy on screen. Doubling the size of the bitmap causes the computer to replace each original pixel with four.  As a result, the image becomes fuzzy or jagged.  The file size also increases. Unfortunately, vector images, because they describe images in terms of shapes, lines, curves, points, colors, length, etc., do not accurately reproduce photographic images.  In general, bitmaps are suitable for photographic images, and vectors for illustrations. Bitmap Image Vector Image The bitmap image does a much better job with photographic images then the vector image, which tends to use patterns of solid colors resembling traditional illustrations. The core image technology in Photoshop  is bitmap based, but with version 6, Photoshop does use vectors for a variety of editing tasks. Internet Image StandardsIn addition to two types of digital images (bitmaps and vectors), there are also a variety of bitmap and vector file types.  Bitmap files, at the most basic level, are just as described - a map or plot of each individual pixel.  However, image files can (and often do) contain other information - depending on their use.  For instance, the author or creator of the image might be included, as well as the date and copyright information.  In addition, because bitmaps tend to be large, various methods of compression or methods to reduce file size have been developed. To designate extra information and compression methods, different file types have been developed.  File types designate a particular variety of bitmap or vector.  Windows and Unix operating systems idenpsdy the file type by adding a period followed by three letters to the end of the filename, as in “circle.gif” or “circle.jpg.”  This is called a file extension.  On the Macintosh (before OS X) file extensions are not used to designate file types.  A file designating the file type and the application that created it is attached to the image file instead.  However, Web servers and browsers also use file type extensions, so it’s advisable that Macintosh users do the same for image files generated for the web. Web browsers currently support three image file types.  They are .gif, or Graphics Interchange Format (GIF), .jpg or Joint Photographic Experts Group  (JPEG), and .png or Portable Network Graphics (PNG).  Each of these formats is a bitmap file.  Currently, browsers do not support the display of vector-based images without a plugin. Each of the file types for the Internet, and the appropriate use, are discussed in a later chapter. Photoshop  can import a variety of bitmap and vector formats.  Importing external image files is covered later in the book.  Photoshop’s native file format is called Photoshop Document.  The extension is .psd.  Review Questions What are the primary colors computers mix to create other colors? What are the primary image types and how do they differ? Color depth is also referred to as? What file types are currently supported by Netscape Navigator and Microsoft Internet Explorer? Summary As a result of this chapter, you should be able to Define Photoshop Understand Digital Image standards Understand common Internet limitations