Photoshop CS Quick Guide Part II

Abbreviated List of Tools

Horizontal Type Tool – Used to create horizontal text. Vertical Type Tool is also available.

Brush Tool – Used to create freehand drawings. You can change many of the brush settings, such
as size, flow, airbrush, etc.

Pencil Tool – Used to create freehand drawings. Similar to the brush tool, but has hard edges.

Paint Bucket Tool – Used to fill an area with a specific color

Gradient Tool – Used to fill an area with a gradient.

Eraser Tool – Used to perform freehand erasing of a selection or layer.

Rectangular Shape Tool – Used to create rectangular shapes. Other shape tools are also
available.

Tips for Creating Web Graphics

File Types

GIF – Reduces file size by eliminating colors

Best for graphics with limited color changes

JPG – Reduces file size by “generalizing” detail and color information

Best for photos and photorealistic graphics

Image Size

Many home users still have use 800x600 screen resolution. Keeping this in mind, the “typical” width for
a website ranges between 700-900 pixels. A good width for a banner graphic is 720-750 px.

File Size

There are no hard and fast rules concerning file sizes. When determining the appropriate file size, you
need to consider the size of the image/graphic, the importance of its quality and how many other
images/graphics are included on the same page.

Download Speeds

Modem speed is described in bits per second, not bytes per second (there are 8 bits in 1 byte).

Therefore…
-A dialup modem (32-56 Kbps) can download 4-7 KBs per second.

-Low speed broadband (144-384) can download 18-48 KBs per second.

-High-speed broadband (1.1-1.5 Mpbs) can download 140-190 KBs per second.

Photoshop CS Quick Guide © 2006 Waubonsee Community College Page 1/2

Center for Teaching, Learning, and Technology
Author: Brian Ekdale, Instructional Technologist
Updated 2/16/2006
Photoshop CS Quick Guide Part II

Creating a Web Photo Gallery

1) Organize all of your photos in a single folder

2) Go File->Automate->Web Photo Gallery…

3) Select your Style from the available options

A preview will appear to the right

4) Under Source Images: Use, select Folder

5) Click Browse and navigate to the folder where your original photos are stored

6) Click Destination and navigate to the folder where you would like to save your web photo gallery

7) You may change any of the settings listed under Options if so desired

8) When you are ready to generate your web photo gallery, click OK.
Photoshop will resize your photos and open your webpage in a browser window

Creating an Animated GIF

1) Create a Photoshop document using a separate layer for each “frame” of your future animation

2) Go File->Edit in ImageReady

3) Once ImageReady opens, make sure your Animation and Layers palettes are visible
These can be accessed through the Windows menu

4) In the Layers palette, hide everything except the layer(s) you would like to use as your first frame

5) At the bottom of the Frame 1 in the Animations palette, select the desired frame delay time.

6) In the Animations palette, click the Duplicate Frame button ( ).

7) In the Layers palette, hide everything except for the layers(s) you would like to show on this frame

8) Repeat steps 6 and 7 until you have created all of your frames

9) Once your animation is complete, go File->Save Optimized

10) Select your destination location and name your file.

Photoshop CS Quick Guide © 2006 Waubonsee Community College Page 2/2

Center for Teaching, Learning, and Technology
Author: Brian Ekdale, Instructional Technologist
Updated 2/16/2006