Introduction to Photoshop

Objectives
Learning:

Photoshop

• Navigate the Photoshop interface
• Create, save, resize, and change the resolution of documents
• Use the layers palette
• Enter and edit text
• Perform basic edits to digital photos, including crop, brightness/contrast, resize, rotate, flip
• Use filters and layer effects
• Use drawing tools to draw vector-based shapes
• Understand difference between GIF and JPG
• Optimize images for the Web

Media literacy

• Responsibility and ethics related to digital photography and design

Project:

• Create a title graphic for the Home project
• Edit and optimize five digital photos (minimum) for Home project
• Use drawing tools to create forward and back buttons for Home project

Preparation

* If students have not already done so, ask them to download their “Home” project photos to the computer for use in the class exercises
* Collect 5-10 digital photos that students can use during the exercise if they do not yet have original photography, and store them in a place that is accessible by all students; use student photos from in-class digital photography exercises if possible
* Review Web site links in Prompt discussion; add links for current events images if desired
* It is helpful if each student creates a “Sites” folder where he or she will store all of his or her Web sites prior to beginning this lesson. Inside of the “Sites” folder, have students create a folder for his or her “home” site, with the name of the folder containing the student’s first name (Example: C:/this student’s file location/Sites/jk_home). Remind students that this folder is not where design files will go, but rather, where HTML pages and images that go on HTML pages (JPG and GIF only) will go. Walk through the creation of these folders as a group if necessary. Also useful is another folder for design documents and in-class activities (Example: C:/this student’s file location/Design). Creating this folder system or a similar file management system that the entire class follows will reduce future complications with file management and FTP.

Prompt: doctored photos
multimedia Game: How to spot photo fakes

Review the following tips and play the game as a group.
www.nationalgeographic.com/

discussQuestions for discussion: modified images

* When you see a photograph in a magazine or billboard, how can you tell whether or not it has been “Photoshopped” or altered?
* When it is appropriate/okay to “doctor” a photo? Inappropriate?
* What do you think it means to be an ethical designer or Photoshop user? Do you think doctoring photos is similar or different from lying? Does it depend on the situation? If so, how?
* What kind of power does it give you to be able to change photos that other people will see?

webAdditional resources for discussion

* Photo Ethics (with examples of famous doctored photographs)
www.sree.net/teaching/photoethics.html
* Greg’s retouching shop – shows an individual’s Photoshop work, and you can roll over to view the original
homepage.mac.com/gapodaca/digital/digital.html
* NYC24’s “Thin, Pretty, and Retouched” article
nyc24.jrn.columbia.edu/2001/issue04/story02/page3.html

Lecture
hands-on follow-alongPhotoshop – interface and tools (30)

* Desktop set-up for Photoshop
* Photoshop 7 toolbar
* About layers
* Using the layers palette
* Entering point type
* Editing text in type layers

instructorCreating graphical text

* Using the filter gallery
* Enhancing type with layer effects

instructorEditing photos

* Cropping images
* About image size and resolution
* Changing image size and resolution
* About resampling
* Changing the pixel dimensions of an image
* Rotating and flipping entire images

instructorDrawing graphics

* Photoshop’s vector drawing tools
* Path + fill color
* Using the free transform command

instructorBasics of optimization: saving for the web

Handout: Image Optimization
instructorFormat: JPEG vs. GIF

Basic rule: Graphics = GIF, Photos = JPG

www.library.georgetown.edu/ GIFs work well for images with large blocks of color (graphics) and sharp edges. Notice the difference in file size. Using GIF format for this type of image produces a small file.

lesson2
rose.gif GIF Format, 3 KB

lesson2
rose.jpg JPEG Format, 16 KB

lesson2
Zoom of rose.gif

lesson2
Zoom of rose.jpg

JPEGs work well for images with continuous tones, such as photographs.
Again, notice the file size. In this case, the JPEG is smaller.

lesson2
sunset.gif GIF Format, 38 KB

lesson2
sunset.jpg JPEG Format, 20 KB
instructorHow to optimize

* In Photoshop, choose File > Save for Web.
* Set your image size.
* Choose JPG for photos, GIF for graphics, and experiment for an image that has both.
* Look at the 4-up view to see four options.
* Select the one that is the smallest size but still looks okay.
* Click “Save,” and put the image in your web site’s images folder. Remember the naming conventions for the web.

instructorThe balance

lesson2

Activities
project time Project time: title image

Photoshop - Create a title image for home project (30)

Description: Students will create one graphic design in Photoshop that will contain the title of their “home” project and a graphical design. This will be the main design for their slide show project, and will go on each page. It is like a combination of logo and title for their project. The outcome should be a JPG or GIF file, optimized for the web.

Activity instructions:

* Create a new Photoshop document at Web resolution (72 dpi) and approximately 600 pixels wide by 200 pixels high. You can change this size later if necessary, but remember that this image should be visible without scrolling on a standard screen (800x600), and should not take up so much space that people cannot see the main content of your page.
* Use the text tool to type in the title for your project, and choose a font, color, and style for your text.
* Add at least one Layer Style (such as drop shadow, glow, bevel, or gradient) to your text design.
* Experiment with other effects.
* Experiment with the drawing and shape tools to add at least one additional graphic element besides text (such as an original photo, shape, or logo).
* Use at least one filter (from the Filters menu) in your design.

project time Project time: slide show images

Photoshop - Prepare slide show images for home project (30)

Description: Beginning with digital image files from a digital camera, students will perform the tasks necessary to edit, resize, and optimize at least five images for their “home” Web slide show. A completed activity should yield five JPG files, each approximately 800 pixels high or wide, with a file size smaller than the original, in an “images” folder inside the student’s Web site folder.

Instructor notes: If possible, have students download their images to the computer prior to beginning the activity. Have a camera and cable on-hand for students who may not have digital images prepared, and instruct them to take at least five creative photographs in the classroom for use in the activity.

Activity instructions:

1. Gather the source images. Remember that these are not the final JPGs that will be placed on your HTML pages, so save them in a location outside of your home site folder.
2. Inside your “Home” site folder, create another folder called “images.” This is where all of the images and graphics for your site will go.

Then, for each image:

1. Crop the image if desired.
2. Resize the image. A good size is that no edge should be larger than ~600pixels, so the image and your design and navigation will fit comfortably on the screen.
3. Edit the image – adjust the brightness and contrast, add filters or other effects.
4. Optimize the image (“Save for Web” in Photoshop)
5. Save the optimized image in your “Home” site “images” folder.

project time Project time: navigation

Photoshop - Draw arrow graphics for your slide show (30)

Description: The purpose of this activity is to generate navigation for the slide show “home” project. Slide show navigation will consist of two graphics: one “forward” button and one “back” button that will allow users to move through the slide show.

Activity instructions:

* Using the Photoshop drawing tools (shape tools, text tools, and pen tool), draw two buttons, one that will allow users to go “forward” in your slide show, and one that will allow users to go “back.” Other words that can be used are “previous” and “next,” or you can use only visual graphics such as arrows.
* Enhance the design of your arrow graphics using filters and effects. Remember that your navigation graphics should match or work visually with the style or design scheme of your header graphic.
* Optimize the graphics for the Web (Photoshop save for Web feature). Remember that graphics should be saved as GIFs.
* Save both navigation graphics in your home site’s “images” folder.