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 – http://ou.edu/webcomm
  
• 
  OU
  
• 
  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
  

• 
  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
  

• 
  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
  
• 
  PSD – PhotoShop 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
  

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
   
   

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

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.
   

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
   

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

Marquee Tool & Sub-menu tools

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
   

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

1. 
   Select the Magic Wand Tool , 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.
   
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
    

• 
  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
  

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.
   
   

1. 
   Create New Text:
   
   1. 
      On the Tool Box, select Text Icon
      
   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
      
   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
   
3. 
   Click or highlight the text to change.
   
4. 
   Make your changes using the Text Tool Options Bar.
   

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.
   

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.