photoshop 5.5 for the web

Color depth describes the maximum amount of colors an image can contain.. 32 bit images can contain over a billion colors; however, the final 8 bits of the image are commonly reserved fo

Share these FREE Courses!

Why stuff your friend’s mailbox with a copy of this when we can do it for you!

Just e-mail them the link info – http://www.trainingtools.com

Make sure that you visit the site as well:

• MORE FREE COURSES

• Weekly Tool Tips

• Updated course versions

• New courses added regularly

So don’t copy files or photocopy - Share!

End User License Agreement

Use of this package is governed by the following terms:

A License

TrainingTools.com Inc, ("we", "us" or "our"), provides the Licensee ("you" or "your") with a set of digital files in electronic format (together called "the Package") and grants to you a license to use the Package in accordance with the terms of this Agreement Use of the package includes the right to print a single copy for personal use

B Intellectual Property

Ownership of the copyright, trademark and all other rights, title and interest in the Package, as well as any copies, derivative works (if any are permitted) or merged portions made from the Package shall at all times remain with us or licensors to us This Package is protected by local and international intellectual property laws, which apply but are not limited to our copyright and trademark rights, and by international treaty provisions

C Single-User License Restrictions

1 You may not make copies of the files provided in the Package

2 You may not translate and/or reproduce the files in digital or print format

3 You may not rent, lease, assign or transfer the Package or any portion thereof

Table of Contents

CHAPTER 1 – DIGITAL GRAPHICS 1

The RGB Color Space 2

Image Resolution & Color Depth 2

Image Types 3

Bitmap Images 3

Vector Images 3

File Types 5

GIF Format 5

JPEG Format 6

PNG Format 6

Review Questions: Digital Graphics 7

CHAPTER 2 – THE PHOTOSHOP ENVIRONMENT 9

The Photoshop Workspace 10

Photoshop’s Menus 11

File 11

Edit 11

Image 11

Layer 11

Select 11

Filter 11

View 12

Window 12

Help 12

The Toolbox 13

Adobe Online 14

Painting Tools 14

Type Tool 15

Measure Tool 15

Gradient Tool 15

Paint Bucket Tool 15

Eyedropper Tool 15

Hand Tool 15

Zoom Tool 15

Foreground/Background Colors 15

Edit Mode 16

Screen Mode 16

Jump 16

Table of Contents

Palettes 17

Navigator Palette 17

Info Palette 18

Options Palette 18

Color Palette 18

Swatches Palette 19

Brushes Palette 19

History Palette 19

Actions Palette 20

Layers Palette 20

Channels Palette 20

Paths Palette 21

Setting Preferences 21

Preferences - Units & Rulers 22

Preferences – General 23

Preferences - Saving Files 25

Preferences - Display and Cursors 26

Preferences - Transparency & Gamut 27

Preferences - Guides and Grid 28

Preferences - Plug-Ins & Scratch Disks 29

Preferences - Memory & Image Cache 30

ImageReady 31

Review Questions: The Photoshop Environment 32

CHAPTER 3 – CREATING NEW IMAGES 34

Creating New Images 35

Name 35

Width & Height 35

Resolution 36

Mode 36

Contents 36

Image Window 37

Scanning Images into Photoshop 38

Importing Existing Images into Photoshop 39

Open Dialog Box 39

Image Mode 39

Magnification/Navigation Controls 41

Navigator Palette 41

Zoom Tool 42

Table of Contents

Hand Tool 42

The History Palette 42

The Snapshot 42

The State 42

Maximum History States 43

Automatically Create First Snapshot 43

Allow Non-Linear History 43

Review Questions: Creating New Images 45

CHAPTER 4 – USING SELECTIONS AND CHANNELS 47

Selections and Channels 48

Selection Tools 48

Marquee Tool 48

Multiple Selections 49

Modifying Selections 49

Info Palette 50

Moving Selections 50

Lasso Tool 51

Options Palette 52

Feather 52

Style 53

Lasso Width 54

Frequency 54

Edge Contrast 54

Magic Wand Tool 54

The Pen Tool 55

Direction Selection Tool 55

Convert Point Tool 55

Add/Delete Anchor Point Tools 56

Freeform Pen Tool 56

Magnetic Pen Tool 56

Creating a Selection from a Path 56

Creating Selections in Quick Mask Mode 57

Quick Mask Options 57

Creating a Selection with Color Range 58

Color Range Dialog-Box 58

Saving Selections with the Channel Palette 60

Table of Contents

Color Channels 60

Alpha Channels 61

Restoring Your Selection 62

Load Selection Dialog Box 62

Review Questions: Using Selections and Channels 64

CHAPTER 5 – USING LAYERS 67

Layers 68

Layers Palette 69

Layers 69

Using Layers 71

Transparency 71

Moving Layers 71

Blend Modes 71

Preserve Transparency 72

Layer Masks 72

Transforming Layers 74

Creating New Layers 74

Text and Layers 75

Layer Effects 76

Managing Layers 77

Changing the Stacking Order 77

Duplicating Layers 77

Merge Options 77

Review Questions: Using Layers 78

CHAPTER 6 – EDITING IMAGES 81

Using the Painting and Drawing Tools 82

Color Palette Group 82

Brushes 82

Swatches 83

Color Palette 83

Airbrush Tool 84

Airbrush Options 84

Table of Contents

Paintbrush Tool 85

Paintbrush Options 85

Rubber Stamp Tool 86

Rubber Stamp Options 86

Pattern Stamp Tool 87

History Brush Tool 87

Art History Brush 89

Art History Brush Options 89

Eraser Tool 90

Eraser Tool Options 90

Background Eraser Tool 91

Background Eraser Options 91

Magic Eraser Tool 92

Pencil Tool 92

Line Tool 92

Line Tool Options 92

Blur Tool 93

Sharpen Tool 93

Smudge Tool 93

Dodge Tool 93

Burn Tool 93

Sponge Tool 93

Gradient Tool 94

Gradient Tool Options 94

Gradient Editor 95

Paint Bucket Tool 96

Using the Type Tool 96

Type Tool Dialog Box 96

Using Filters 99

Applying Filters 99

Table of Contents

Fine-Tuning Filters with Fade 100

Adjusting Images 101

Histogram 101

Channel 101

Mean, Std Dev, Median, Pixels 101

Level, Count, Percentile, Cache Level 102

Using Levels 103

Channel 103

Input Levels/Input Levels Sliders 103

Output Levels/Output Levels Sliders 104

Levels Eyedropper Tools 104

Auto 104

Preview 104

Auto Levels 104

Auto Contrast 104

Curves 105

Color Balance 107

Color Balance Fields and Sliders 107

Tone Balance 107

Preserve Luminosity 107

Brightness/Contrast 108

Hue/Saturation 108

Desaturate 108

Replace Color 109

Selective Color 110

Channel Mixer 110

Invert 110

Equalize 110

Threshold 111

Posterize 111

Variations 111

Table of Contents

Adjustment Layers 112

Using Guides and the Grid for Alignment 112

Using Guides 112

Using the Grid 113

Review Questions: Editing Images 114

CHAPTER 7 – CREATING STATIC IMAGES FOR THE INTERNET 118

Creating a Logo in Photoshop 119

Importing Vector Based Logo Files 119

Preparing the Logo for the Internet 121

Save for Web 123

Preview Windows 123

Compression Options 124

Building Compression Options 124

Compressing Photographic Images 125

JPEG Compression 126

Compression Levels 126

Creating a Custom Logo 127

Review Questions: Creating Static Images for the Internet 132

CHAPTER 8 – CREATING BANNERS AND ANIMATED GIFS 134

Banner Dimensions and Restrictions 135

Creating a Static Banner 135

Creating an Animated GIF Banner 138

The ImageReady Environment 138

The Animation Palette 139

Frame Thumbnails 139

Frame Controls 139

Animating in ImageReady 140

Review Questions: Creating Banners and Animated GIFs 143

CHAPTER 9 – CREATING BUTTONS AND ROLLOVERS 145

Table of Contents

Creating Buttons with ImageReady 146

Button Size 146

New Document 146

The Rectangle Tool 147

Rectangle Options 147

Rounded Rectangle Options 148

Ellipse Tool Options 148

Styles Palette 149

Creating Custom Styles 149

ImageReady’s Type Tool 150

Centering Layers 151

Creating Rollovers 152

Rollover Palette 152

HTML Options 154

Tags Case 155

Indent 155

Attribs Case 155

Line endings 155

Always Quote Attributes 155

TD W, H 155

Spacer Cells 155

Empty Cells 155

Include Comments 155

Image Maps 155

Code 156

Photoshop’s Menus 156

Compatibility 156

Background Image 156

Subfolder 156

Copyright 157

Review Questions: Creating Buttons and Rollovers 158

CHAPTER 10 – CREATING NAVIGATION BARS 160

Tables and HTML Layout 161

Creating a Navigation Bar 161

Slices 164

Table of Contents

Slice Tool 164

Slice Select Tool 164

Slice Palette 165

Type 165

Name 165

URL 165

Target 165

BG 165

Optimizing Slices 166

Image Maps 166

Creating Image Maps 166

Review Questions: Creating Navigation Bars 168

CHAPTER 11 – CREATING WEB PAGES WITH IMAGEREADY 170

Creating a Web Page with ImageReady 171

Web Page Dimensions 171

Navigation Bar 172

The Logo 174

Corporate Headquarters 175

Using Slices for Layout 178

Optimize Slices 180

Review Questions: Creating Web Pages with ImageReady 182

1 Digital Graphics

In this chapter you are introduced to the nature of computer generated

images as well as Internet browser image standards

Objectives

Upon completing this section, you should be able to:

1 Understand resolution and color depth

2 Differentiate between bitmap and vector graphics

3 Explain standard image file-types for the Internet

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

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

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 million colors 32 bit images can 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

Image Types

In addition to resolution and color depth, images are also distinguished by the type or kind of image it is There are two primary image types, bitmaps and vectors

Bitmap Images

Bitmap images are the most common type of image file Bitmap files map out or plot the image pixel by pixel Think of a grid once again, where each square represents each pixel in the image The image file basically describes 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 The larger the image and the greater the color or bit-depth the larger the file size Because bandwidth is a major concern when developing web sites keeping the size of your images to a minimum is very important The main benefit of bitmap images is photographic color, tone, and texture are accurately produced

Vector Images

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, an image of a red circle in vector format, written in plain English, might look

something like this:

• Draw a circle

• Radius is 2 inches

• Color is red

The main benefit of vector images is there file size, particularly relative to the file size of bitmap images Imagine the same circle in a bitmap file In plain English

it might look something like this:

o Pixel 2x2 is white, etc

As you can see, describing the circle, and the color surrounding it, on a pixel basis is a much more laborious and lengthy process than telling the

pixel-by-computer to draw the circle itself

Unfortunately, vector images, because they describe images in terms of shapes, lines, curves, points, colors, length, etc., cannot reproduce photographic images Vectors are limited to images with continuous tones and definitive outlines Furthermore, with the exception of Macromedia’s Flash vector format, vector images are not yet supported by web browsers Vector support is coming to the Internet in the form of the Scalable Vector Graphics format For information, consult http://www.w3.org/Graphics/SVG/

Photoshop is a bitmap image editor It can, however, load or import vector based images On import Photoshop translates the vector description and a bitmap image is created Importing vector images is covered in detail later

File Types

Bitmap files, at the most basic or fundamental 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 type is not the same as image type where the image is either a bitmap or a vector File type designates a particular variety of bitmap or even a particular variety of vector With Windows the file type is usually identified 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 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 is advisable that

Macintosh users do the same for images 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.)

GIF Format

Graphic Interchange Format (.gif) uses a maximum of 256 colors (8-bit color depth) and uses combinations of these to simulate colors beyond that range The GIF format is best for displaying images such as logos, icons, buttons and other images with uniform colors and tones

GIF images come in two different versions and have some extra functionality that JPEGs do not You can save GIF images in GIF 87 or GIF 89a format (the

extension gif remains the same.) GIF 89a has the following features that GIF 87 and JPEG files do not:

Transparency

With GIF 89a format images you can set a single color to be transparent, that is,

it will allow the background color or image to show through it, similar to using a

blue screen in cinema Transparency is most commonly used to make the

rectangular background canvas of an image invisible; this feature can be very effective in web page design

Animated GIFs

GIF 89a images can also be animated Animated GIF images are simply a number of GIF images saved into a single file and looped Netscape Navigator and Microsoft Internet Explorer both display animated GIFs, but many other browsers cannot, and may not be able to display even the first image in the loop Animated GIFs also take longer to download, therefore use animated GIFs with caution

JPEG Format (JPEG, JPG)

Joint Photographic Expert Group is the best format for photographs because JPEG files contain millions of colors (24-bit color space.)

JPEG images do not support transparency or interlacing, but Photoshop allows you to specify the degree of file compression so you can create a balance

between image quality and file size JPEG compression for the web is covered

256 colors (8-bit color depth) and PNG-24 can have up to 16 million colors (24-bit color depth.) Unfortunately, neither Netscape Navigator nor Microsoft Internet Explorer offers full support for PNG images As a result, using PNG images for your web site at this time is not recommended

Review Questions

1 What are the primary colors computers mix to create other colors?

2 What are the primary image types and how do they differ?

3 Color depth is also referred to as?

4 What file types are currently supported by Netscape Navigator and

Microsoft Internet Explorer?

5 Why would you choose to use a JPEG image type instead of a GIF image type?

Summary

As a result of this chapter, you should be able to:

• Understand resolution and color depth

• Differentiate between bitmap and vector graphics

• Explain standard image file-types for the Internet

2 The Photoshop Environment

This chapter introduces you to Photoshop’s workspace Photoshop’s

tools, menus, palettes and preferences are summarized

This section contains a lot of information It’s important to familiarize

yourself with the Toolbox and the Palettes before proceeding with the rest

of the material You might find the Preferences information of additional value after you’ve mastered Photoshop’s workspace The two most

important Preferences are Units & Rulers

Objectives

Upon completing this section, you should be able to:

1 Identify Photoshop’s default tools, menus, and palettes

2 Customize Photoshop’s environment

3 Set preferences specifically for Web development

4 Understand the relationship between Photoshop and ImageReady

The Photoshop Workspace

When you first open or start Photoshop the work area is made up of a set of default or standard Tools, Palettes and menus Photoshop’s Tools are contained

in the Toolbox Each Tool has a set of properties or features that you can

modify These properties are contained in what are called Palettes For

instance, when you select the Paintbrush tool you use the Brushes Palette to select the size of the brush and the Options Palette to modify or affect how the brush operates Palettes also contain other functions unrelated to Photoshop’s tools, such as advanced image manipulation tools Photoshop’s menus, like most standard applications, run along the top of the workspace

Edit

The Edit menu contains options to copy, cut, and paste entire images or parts of images, fill areas of an image, stroke selections or paths (covered in depth in later chapters) and transform or modify images

Image

The Image menu contains options to modify color depth or mode, manipulate or adjust color and other image properties, modify image size, canvas size and orientation, examine color information and extract areas of an image from

Select

The Select menu contains options to create, modify and manipulate Photoshop’s selections Selections are areas of an image that you choose to isolate from the rest of the image For instance, you might want to isolate a person’s hair to change the color without affecting the rest of the image

Filter

The Filter menu contains a variety of different special effects, called Filters that you apply to an image or parts of an image For instance, you might have an

image of a runner By applying the Motion Blur filter to the image, you create a greater sense of speed

View

The View menu contains options to modify viewing your image, including

zooming in and out and how images might look when printed or viewed on

another computer In addition, options to view rulers and guides are available to aid in editing your images

Window

The Window menu contains options to view and/or hide the Toolbox and Palettes

as well as options to organize images within Photoshop’s workspace

Help

The Help menu contains options for online help, information about plugins and information about the version of Photoshop you are using Use “Help Topics” for reference or finding out how to accomplish objectives you might be having

problems with

The Marquee, the Move, the Lasso, the Magic Wand, and the Pen Tool make up Photoshop’s Selection Tools Selections are areas of an image you wish to isolate in order to modify it, such as changing the color of someone’s hair A Marquee, a dotted line in constant motion, represents the shape of your

selection The Marquee is also known as a selection path

Painting Tools

Airbrush Paintbrush Rubber Stamp Art History Eraser Pencil Blur Dodge

The Airbrush, Paintbrush, Rubber Stamp, Art History Brush, Eraser, Pencil, Blur, and Dodge Tools make up Photoshop’s Painting Tools Use the Painting Tools

to create or modify images, recolor images, clone parts of images and other paint and drawing effects

toward the horizon

Paint Bucket Tool

The Paint Bucket Tool effectively pours a solid color of your choice into a

designated area of an image The Paint Bucket replaces or paints over the color

you {Click} on You can also set the Paint Bucket to paint over colors within a

certain range, such as pink to red

The Eyedropper Tool is used to sample color from an image {Click} the

Eyedropper over the color you wish to select The color you choose to sample becomes the current Foreground color

Hand Tool

The Hand Tool is used to move areas of a magnified image around For

instance, Photoshop allows you to zoom in to specific areas of an image

However, when you do that, other areas of the image are no longer visible By using the Hand Tool, you can grab and shift the image to bring other sections under the magnified area

Zoom Tool

The Zoom Tool is used to get closer too or magnify particular areas of the image, useful for precise image editing and manipulation

Foreground/Background Colors

The currently selected Foreground color, or color you are currently painting with

is displayed in the Foreground Color box By default, the Foreground Color is black

The currently selected Background color is displayed in the Background color

box By default, the Background color is white {Click} the Default Colors icon to

restore or return the Foreground and Background colors to default black and

white To switch the Foreground and Background colors {Click} the Swap Arrow

Edit Mode

Photoshop works in Standard Edit Mode and Quick Mask Edit Mode To work in

either mode {Click} the Standard or Quick Mask button Editing modes are

covered in depth in later chapters

Screen Mode

Photoshop has three primary Screen Modes, Standard Screen Mode, Full

Screen Mode with Menu Bar, and Full Screen Mode By default, Photoshop starts in Standard Screen Mode Selecting Screen Mode with Menu Bar pushes Photoshop’s Main Menu to the top of the screen Selecting Full Screen Mode eliminates the Main Menu entirely

Jump (to Default Graphics Editor Application)

Clicking this button transfers the currently edited image into another graphics program of your choice The default application is Adobe ImageReady 2.0, an integral part of Photoshop 5.5

Palettes

Photoshop stores many of the modifiers or options for Tools and image

manipulation in Palettes Palettes are a collection of commonly used options and functions made available by a mouse-click or two away Essentially even the Toolbox is a Palette By default, Photoshop starts with 11 Palettes organized or grouped into four Palette sets

• Palette Set 1 consists of the Navigator, Info, and Options Palettes

• Palette Set 2 consists of the Color, Brushes, and Swatches Palettes

• Palette Set 3 consists of the History and Actions Palettes

• Palette Set 4 consists of the Layers, Channels, and Paths Palettes

Palettes are said to be “floating” because, like the Toolbox, you can {Click} and

drag them to any location on screen Furthermore, Palettes can be grouped

together or pulled apart by {Clicking} on the Tabs and dragging them out of or into any Palette Set you desire For instance, you can {Click}, hold and drag the

Navigator Palette out of Set 1 and drop it into Set 2 Alternately you can simply drag the Navigator Palette out of its default group and drop it on screen to make

a Palette Set of one

To close a Palette or Palette Set {Click} on the close icon at the top right corner

To restore a Palette you have closed select the desired Palette from the Window pull-down menu

Many of the functions Palettes feature are covered in depth in later chapters What follows is a summary of the default Palettes to familiarize you with

Photoshop’s environment

The Navigator Palette

Use the Navigator Palette to quickly zoom into (magnify) or zoom out from your image

The Info Palette

As you pass the pointer over an image the Info Palette displays color and

coordinate information When using any of the Selection Tools the Info Palette also displays the width and height of the selection

The Options Palette

The options listed in the Options Palette change depending on the Tool you are using For instance, when using the Airbrush Tool the Options Palette includes items to change the brush Pressure, the Paint mode, and how many Steps are used before the brush Pressure drops to a value of zero Options or modifiers for Tools are examined in Chapters 3 and 4

The Color Palette

The Color Palette is used to create new colors Select the box (called a swatch)

you wish to make the color change to by {Clicking} on it The swatch at the top is

the Foreground color and the swatch beneath it is the Background color, as in

the Toolbox {Click} and drag the sliders side to side beneath either the R (Red),

G (Green), and B (Blue) bar until you create the color you wish Alternately you can manually enter the color values in the text boxes beside the color bars

The Swatches Palette

The Swatches Palette contains a number of pre-created colors to choose from You create your own Swatches with your favorite colors as well as load other color sets Photoshop includes a color set of web-safe swatches, a collection of colors that both Netscape Navigator and Microsoft Internet Explorer support as standard

The Brushes Palette

The Brushes Palette contains a number of pre-built or pre-set brushes of different sizes and shapes You can build your own brushes as well

The History Palette

The History Palette makes a record of all the changes you make to your image

If you’re not satisfied with a change or series of changes you can use the History Palette to restore your image as it was before the undesired changes Similar to Undo you find in other programs

The Actions Palette

The Actions Palette is used to automate repetitive tasks Automated Tasks are called Actions

The Layers Palette

The Layers Palette is used to create, manipulate and modify Layers Layers are covered in depth in later chapters

The Channels Palette

The Channels Palette is used to create, manipulate and modify Channels Channels are covered in depth in later chapters

The Paths Palette

The Paths Palette is used to create, manipulate and modify Paths Paths are covered in depth in later chapters

Setting Preferences

In addition to customizing the look and feel of Photoshop’s workspace, you

should also set Photoshop’s preferences before you begin using the program

{Click} “File” and select “Preferences/Units & Rulers” from the pull-down menu

Customize or change your Preferences by selecting the Preference type from the drop-down menu Photoshop currently has a number of preferences unrelated to web development that we will not explore What follows is a list of Photoshop’s preferences and recommendations to optimize Photoshop for web development

We begin with Units & Rulers to ensure that you use pixels rather than inches as your standard unit of measurement You may want to return to the other

Preferences settings as you proceed through the material Until you familiarize yourself with Photoshop’s environment and some of it functions and features, the purpose of some of the Preferences might not be readily apparent Feel free to proceed to the next chapter

Preferences - Units & Rulers

Units

Select Pixels Pixels are the recommended measurement as they are the standard unit for web site development Other options relate to images created for Print

Check Anti-alias Postscript to make the edges of imported vector graphics

appear smooth Anti-aliasing compares the color of the edge of an image, such

as the outline around a circle, with the color the edge sits against and creates a color in between that makes the transition from one to the other smooth For instance, you might have an image of a black circle sitting on a white

background The edge of the circle, if not anti-aliased will appear jagged With anti-aliasing enabled, Photoshop will surround the black edge with a very light gray or grays so that the contrast between the background and edge is not so pronounced As a result, the edge of the circle appears smooth

Export Clipboard

Check Export Clipboard if you want images or selections you have copied made accessible to other programs Similar to cut and pasting text from a word

processor to an HTML document for instance

Uncheck Short Pantone Names

Uncheck Short Pantone Names This is an option for Print production and will not be covered You may need to match colors with a client’s corporate color set, in which case you may need to use Pantone color Using Pantone color is covered in Chapter 4: Editing Images

Show Tool Tips

Check Show Tool Tips if you want to see the name and Keyboard shortcut of each Tool when you roll the mouse over the tool

Auto-update open documents

Check Auto-update open documents if you want Photoshop and ImageReady to automatically update changes you have made to an image in one application when you switch to the other This option is covered in depth in Chapter 4:

Editing Images

Beep When Done

Check Beep When Done if you want Photoshop to beep when it has completed a task, such as applying a filter to an image

Dynamic Color Sliders

Check Dynamic Color Sliders to make the color bars in the Color Palette update

as you move the sliders back and forth

Save Palette Locations

Check Save Palette Locations to make Photoshop remember where you’ve placed your palettes and the toolbar When you open Photoshop again your setup will be the same

Show Font Names in English

Display Font Names in English rather than True Type or Postscript Code

Reset Palette Locations to Default

{Click} “Reset Palette Locations to Default” to restore Photoshop’s original layout

Preferences - Saving Files

Image Previews

To save previews or thumbnails of your images select “Always Save” in the Image Previews drop-down menu You will see these thumbnails when you open

and {Single-Click} images stored in a directory using Photoshop’s Open

command To save disk space select “Never Save.” Select “Ask When Saving”

if you want Photoshop to ask if you desire a thumbnail or not whenever you save

an image

File Extension

Select “Use Lower Case” to force Photoshop to save files with lower case file type extensions Lower case extensions have become the de-facto standard and are recommended Unix servers are case sensitive so a consistent character-case, upper or lower is important to maintain when using your images for the Internet

File Compatibility

Check “Include Composited Image With Layered Files” under File Compatibility

to ensure programs or applications that don’t support Photoshop’s Layers can load the image Uncheck to create a smaller file

Preferences - Display and Cursors

recommend selecting Brush Size so you can see the area and size your brush will be covering

Other Cursors

Select Standard or Precise Standard displays an icon of the tool, such as the Eye Dropper, and Precise displays a cross hair For increased accuracy in editing, we recommend selecting Precise

Preferences - Transparency & Gamut

Leave the transparency and Gamut settings at default These features are

covered in depth in later chapters

Preferences - Guides and Grid

Guides

Select “Color” and “Style” to designate how your guides appear in Photoshop Guides are straight lines, either horizontal or vertical, that you use as points of reference when editing your images

Grid

Select “Color,” “Style,” “Gridline every,” and “Subdivisions” to customize Grid settings Similar to Guides, the Grid is used as a point of reference when editing images Both Guides and Grid are covered in later chapters

Preferences - Plug-Ins & Scratch Disks

Plug-Ins are extra features that extend Photoshop’s capabilities Filters, for

instance are actually Plug-Ins that can be added and removed

Plug-Ins Folder

By default, Plug-Ins are stored under the Photoshop\Plug-Ins directory To

change the path select “Choose” and enter the new path However, we

recommend you keep the path at default

Scratch Disks

Scratch Disks are areas of your hard drive Photoshop uses for memory when physical memory (your RAM) is full An image in Photoshop takes approximately 3-5 times its file size For instance, if your file takes up 10 Megabytes on your hard drive, Photoshop requires approximately 40 Megabytes of RAM when

working with it As you work on multiple images RAM requirements increase and Photoshop will begin to use your hard drive for virtual (rather than physical) RAM

It is recommended that free space on your hard drive for the Scratch Disk equals

at least the amount of physical RAM in your system If you have 128 Megabytes

of RAM for instance, you should have at least 128 Megabytes of storage space

on your hard drive for the Scratch Disk The greater the RAM and free space the better Photoshop performs If you have more than one hard drive, we

recommend installing Photoshop on one and designating your Scratch Disk

space on another Photoshop can have up to four Scratch Disks To designate what hard drive will act as your Scratch Disk select the drive letter or volume from the drop down list By default, Photoshop uses your Startup hard drive