Photoshop cs for Web Images – Quick Reference

Download 35.58 Kb.
Size35.58 Kb.
Photoshop CS for Web Images – Quick Reference

Adobe Photoshop is a professional image editing software package that can be used by experts and novices alike. While this handout offers some very basic tips on using the tools available in Photoshop, more comprehensive guidance can be accessed on the web or in the help menu of your version of Photoshop. Before you begin working in Photoshop, you should be familiar with the primary user interface.

  • OU Web Comm – Info on CMS sites –

  • OU p1

  • Menu Bar – Main Commands and features

  • Options Bar – Changes as different tools are selected in the tool box

  • Tool Box – Floating panel of editing tools

  • Drawing Palette – Workspace – drawing area where images are edited

UNDO option Very Useful!! From Main Menu, select Edit > Undo (Ctrl-Z) to undo what you just did…

1: Ways to acquire an image

Always consider copyright issues with all images!

  • Download an image from the Web

  • Scan an image such as photos

  • Screen capture an image (Prnt Screen Key | MAC:Apple Key-Shift-3

  • Create a new image

2: Image Formats – what are the Web’s most common formats?

  • JPG – best for photos; millions of colors; uses RGB; uses lossy compression, the file size is almost always smaller then a PNG; NO transparent backgrounds

  • PNG – newest web format compression & no image data is lost when saving; transparent backgrounds

  • GIF – best for charts; 8-bit 256 colors; transparent backgrounds and animation

  • PSDPhotoShop Document – original working file with all layer information before you compress to web formats.

  • RBG MODE Always work in RGB mode: 3 channels – 24 (8x3) bits of color information per pixel

3: Opening & Viewing Images

  1. Image Title Bar: Lists Image Title, RGB, & Zoom % size

    1. Click Title Bar to make image active

    2. Click & Drag image using Title Bar

  2. Image Zoom % Short Cuts

    1. Ctrl = (equal): Zoom In

    2. Ctrl - (minus): Zoom Out

  3. Rulers & Guides: Select View > Rulers; Drag guides out from the ruler

4: Adjusting Image ContrastYou can improve the look of old photos or poorly lighted ones.

  1. Contrast: From the Main Menu, select Image > Adjustments > Auto Levels

  2. Brightness: From the Main Menu, select Image > Brightness & Contrast

5: Resizing Images

Higher Resolutions create larger file sizes; keep higher resolutions (300 dpi) if your printer can handle it. Computer Monitors only use 72-100 dpi.

  1. From the Main Menu, select Image> Image Size to view the Image Dialog Box

    1. Image size on the screen - the pixel dimensions, which is the width and height of the image in pixels

    2. Image size in print - the physical size of the image when printed, in width and height - in the Document Size section

    3. the resolution of the image when printed (the amount of data in the image for printing), The resolution is the amount of detail in the image.

  2. Note for Sharpness: Click on Resample Image and choose Bicubic Sharper from the drop-down menu. This is the best setting for making sure that an image doesn't blur.


6: Save image for web – This option allows you to optimize & save your image for web pages.

  1. From the Main Menu, select File > Save for Web – a new window opens with several options

  2. Compare file sizes as you make changes under the options on the right.

    1. Choose JPG for smallest size

    2. Choose PNG for best compression

  3. When done, Click Save & name your new image


  1. Once you save file, you will automatically return to your image workspace. Close the image you just saved if you no longer need it.

7: Selection Tools – There are several ways to select images or portions of images & copy to a new image

Marquee Tool & Sub-menu tools

Copy Part of an Image to a New Image

  1. Select marquee Tool, Click & Drag the mouse around the selection you want to copy.

  2. From the Main Menu, select Edit > Copy[Ctrl-C]

  3. From the Main Menu, select File > New[Ctrl-N]

  4. Click OK
    NOTE: Image sizes reflect what is copied into the Windows Clipboard so do NOT change)

  5. Paste: Select Edit > Paste [Ctrl-V]

  6. Save Image for Web

7.1: Select Parts of Image to a New Image using the Wand

You want to select part of an image that doesn’t fit a rectangle or eclipse, then use the Wand Tool p1to select parts of an image that seem to have the same colors.


  1. Select the Magic Wand Tool p1, Click on a ‘color area’ of what you want to select (Class example: the archway)

  2. Hold the Shift Key and continue to click using the Wand Tool; you will see more areas selected as you do this.p2

  3. NOTE: If you need to backup – select Edit > Undo

  4. From the Main Menu, Select File > Copy [Ctrl-c] to copy

  5. When done selecting, select File > New

    1. Choose Transparent Background due to irregular share selection. You should see a ‘check-box’ background to the new image.

  6. Paste: Select Edit > Paste [Ctrl-v]

  7. From the Main Menu, select File> New [Ctrl-n]

  8. Click OK
    NOTE: Image sizes reflect what is copied into the Windows Clipboard so do NOT change)

  9. Select Edit > Paste [Ctrl-v]

  10. Save Image for Web

7.2: Select Parts of Image using LASSO TOOL - You want to select part of an image, but the colors are different, then use the Lasso-Polygonal Tool so you can choose irregular shapes.

  1. Select the Lasso ‘pull-down’ menu – Polygonal tool

  2. ‘this is tricky so watch the instructor!

    1. Click once at the starting point

    2. Click again as you change direction

    3. Click around the selected area until you return to the starting point.

    4. Click on the starting point to close the selection.

  3. NOTE: If you need to backup – select Edit > Undo

  4. From the Main Menu, Select File > Copy [Ctrl-c] to copy

  5. When done selecting, select File > New

    1. Choose Transparent Background due to irregular share selection. You should see a ‘check-box’ background to the new image.

  6. Paste: Select Edit > Paste [Ctrl-v]

  7. From the Main Menu, select File> New [Ctrl-n]

  8. Click OK
    NOTE: Image sizes reflect what is copied into the Windows Clipboard so do NOT change)

  9. Select Edit > Paste [Ctrl-v]

  10. Save Image for Web

8: Understanding LayersReview PhotoLayerExample
Layers occur when you copy text, effects, fills or shapes to an existing image. You will only see layers in a Photoshop PSD file format *.psd. If you save your image as a JPG, GIF, or PNG, you will flatten the image and lose the various layers. You can do the following with layers:

  • Create a New Layer – In the Layers Panel, Click the New Layer Icon

  • Delete Layers – Right-click on selected layer or Click the Garbage Can

  • Add Layer Styles – Effects will appear below layer

  • Move Layers – to reorder layers – put layers on the top of each other: Click & Drag layer up or down

  • Change Layer Opacity – click on the ‘black triangle’ to see slider bar to adjust

  • Hide Layers – toggle-click ‘eye icon’ to Hide/Show a layer

9: Create a New Layer & Gradient Fill

Exploring fills on a new layer

  1. New Layer: On the Layer Pane, at the bottom, select the New Layer Icon to create a new layer

  2. Fill Layer with a gradient: Select the Gradient Tool & an option on it’s sub-menu

  3. With your mouse, drag diagnally left to right across your image.

  4. Use the Opacity option on the Layer Pane, to create a transparent fill as seen below.

10:Text Editing – when you add text to an image, it will appear on a new layer automatically.


  1. Create New Text:

    1. On the Tool Box, select Text Icon p4

    2. Click on the image where you want to put text & type it.

  2. Reposition Text:

    1. Click on the text layer to make it active

    2. Select the Move Tool Icon p4

    3. Click & drag text to where you want to place it.

  3. Add Layer Effects to Text (or any Layer)

    1. Click on the layer to make it active

    2. In the Layers Panel, click on the Layer Effect Icon & Choose an option

  4. Change Text Size, Font or Color: Options Bar

  1. Click on the text layer to make it active

  2. On the Tool Box, select the Text Icon p4

  3. Click or highlight the text to change.

  4. Make your changes using the Text Tool Options Bar.

11: Additional Commands & Suggestions

Change color of an object. Double-click on layer with object to bring up “Layer Style” dialog box. Click on “Color Overlay” and choose color from color picker. This method is superior to using the “Magic Wand” and “Fill” tools because it prevents jagged edges and you can easily turn it on and off (by showing/hiding the effect in the Layers Palette).

Very cool effects with Text Layers in colors!!

Convert color photo to SepiaTone. First convert it to black and white. Go to “Image, Adjustments, Channel Mixer.” Check the “Monochrome” box and then adjust the Red, Green and Blue source channels to achieve the best B&W images. Then go to “Image, Mode, Grayscale.” Then go to “Image, Mode, Duotone.” Change type to Duotone. Choose oranges, deep browns and red for your 2 ink colors. Adjust colors as necessary to achieve the sepiatone affect you like.
Shadow/Highlight – new in CS. This new feature does a really good job of correcting photos with bad exposure. Go to “Image, Adjustments, Shadow/Highlight.” You can check the “Show More Options” box if you want.
Healing Brush. This is the tool that looks like a bandaid. It is similar to the Clone Stamp tool, but it blends better. Great for touching up blemishes on photos. Alt-click to get a sample area and then paint to “heal” blemishes. Do all of this on the same layer.
The Red Eye Tool – new in CS. This tool is located on the Bandaid Tool Panel – click & hold to locate it.

Brighten Eyes/Whiten Teeth. Go to “Layer, New Adjustment Layer, Curves” and drag line until teeth/eyes are the desired color. Then fill your mask (automatically added to adjustment layers) with black (make sure to select the mask before filling). Then use a paint brush and paint white on the mask in the teeth/eye areas you want to brighten. You can adjust the opacity of the brush and the adjustment layer to fine tune your effect.
Liquify Filter. You can distort images (for example, take of pounds) with the Liquify Filter. Go to “Filter, Liquify.” Use the “Freeze Mask Tool” to paint over areas that you don’t want to distort. Then, for example, use the “Forward Warp Tool” to distort.
Masking. You can apply a layer mask to any layer by clicking on the “Add Layer Mask” icon at the bottom of the Layers Palette. Then use paint on the mask (make sure it is selected) using black and white to hide (black) and show (white) parts of the layer. You can also use shades of gray. An interesting effect is to paint a black to white gradient on the mask using the Gradient Tool.
Adding Color Accents. Start with a color photo. Be sure to make a copy of it in another Photoshop file. Take the original photo and make it Black & White using the method described above. Then place the color version of the photo on a new layer exactly on top of the original.

  1. Add a layer mask to the new layer (colored version).

  2. Fill the mask with black, and

  3. Use Paint tool: paint white on the mask where you want to add color accents.

  4. You can adjust the opacity of the layer to fine tune the effect.

Adobe Web Gallery - Under Main Menu, select File > Automate > Web Photo Gallery

This feature is great for camera pictures. Photoshop has created several Styles that you can choose and it will then resize your images and make the thumbnails for a set of web pages.

  1. Select a Style from the pull down menu

  2. Put all your images in a folder refer to as the Source Images. Click the Browse button to select this folder

  3. Click on the Destination button to create a NEW Folder where Photoshop will put the new gallery pictures.

  4. Review other options, than Click OK. Photoshop will do the rest and will open a web browser to view the Web Gallery.

(updated 02-28-10) University of Oklahoma | Information Technology | | 325-HELP |

Download 35.58 Kb.

Share with your friends:

The database is protected by copyright © 2022
send message

    Main page