Introduction to Photoshop
Objectives Upon completing this section, you should be able to: 1. Understand Photoshop’s Function in Web Development 2. Understand Digital Image standards 3. Understand common Internet limitations 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 Depth Resolution 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.
Dimensions The 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 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