Lesson 9. Editing Selections, Prepping Images for Print and Web

Photoshop is an awesome tool which can be used for many purposes. In this lesson we continue reviewing the tools learned to date and learn advanced techniques to edit selections.

Topics for this week include:

Points: 50 (+ 8.33 participation points)

Estimated assignment time: 5 hours

Due: Friday, July 14, 11:59P

9.1 Altering selections for serve other purposes.

In this lesson we investigate the tools used to alter existing selections in our images. Lessons include:

  • Using the image size command to change a file's resoltuion for print.
  • Using the resmaple image command in the image size dialog box.
  • Filling selections with color.
  • Feathering selections to create soft edges.
  • Using select all, inverse, expand and contract selections.
  • videoWatch Video | 11:47 minutes

Disregard any references to dates/times and due dates mentioned in the videos. Follow the due dates listed here.

TIDBIT:

When composing various images together, frequently adding a feather will help the top most image blend more smoothly into the lower layers. 

The amount of feather depends on the resolution of your original files. An image for web @ 72 PPI will need a smaller feather than an image @ 300PPI image intended for print.

How to Soften Edges with Feathering in Adobe Photoshop CS6 here

                    

9.2 Further Compositing of Images

In this portion of the lesson we look further into compositing multiple images together. Lessons include:

  • Changing a flettened background layer to a floating layer.
  • Adding a non-destructive adjustment layer to change the contrast in an image.
  • Stacking images in the layers panel.
  • Loading a vector path in an image to create a selection.
  • Using a feathered selection to soften the edges of composed imagery.
  • Using layers to compose multiple images.
  • Rasterizing a text layer to apply effects.
  • videoWatch Video | 10:22 minutes

Disregard any references to dates/times and due dates mentioned in the videos. Follow the due dates listed here.

9.3 Using the Save for Web Command

Photoshop offers an awesome tool for saving your images for use on the web. The save for web command offers a thumbnail of how your image will look with the settings you are applying. It's a great way to visually see how compression setting will affect the look of your images. The idea is to optimize image quality vs download speed. You may wish to review the file format/resolution .pdf from earlier week 8 here. Lesson includes:

  • Resampling images within the image size dialog box.
  • Using the save for web dialog box to visually see how your image will look with your settings.
  • Balancing image quality vs download speed for images intended for web use.
  • Understand the typical resolution for web use is 72 PPI.
  • Understand the differences in image quality between the .gif, .jpg and .png file formats.
  • Learn common file formats used in web delivery.
  • videoWatch Video | 10:30 minutes

TIDBIT:

When saving images for web use, we want to be sure the image is displayed on the webpage @ 100% scale. We are balancing image quality vs download speed. Typically you will need to crop images to a specific size to fit on the web page correctly. To do so, select the crop tool and in the options bar above the image tab, select W x H x Resolution. Type in the measurements into the fields to the right as shown in the screen shot below. Notice how the crop tool constrains your crop to the sizes you have entered.
NOTE: There is a "clear" button located just to the right of the other three field (circled in red). Use this if you wish to clear the measurements you have typed in and start over.

9.4 Do It!
Practice the Tools From the Lesson

Using the tools learned in the lesson, you will create files suitable to post on on a web page. You will be creating a "working file", saved as a .psd to submit for grading; and resample two .jpg versions to post to the online community from the .psd. Before you start, read all the instructions. Lessons include:

  • Go online and find two or three images to compose together.
  • Layer your images together. Create selections by using the feather, inverse, expand and contract commands to outline or alter the shape of the layered images.
  • Use any of the tools you have learned to date to enhance your compostion (layer masks, adjustment layers, etc.)
  • Save your working file labled with your name as a .psd before proceeding.
  • Using the crop tool, go to the crop tool options bar and set the tool to crop to 300px x 200px @ 72ppi.
  • Do a save as and name the file with your name (i.e.- ronA.jpg) - be sure to select .jpg from the format pulldown @ the bottom. In the save dialog box be sure to select max quality.
  • Returning to the .psd, go to the file menu, choose revert.
  • Recrop another version, this time using 150px x 120px @ 72 ppi.
  • Do a save as and name the file with your name (i.e.- ronB.jpg) - be sure to select .jpg from the format pulldown @ the bottom. In the save dialog box be sure to select high quality.
  • Be sure to revert your .psd and resave it before submitting!
  • Do ItPractice the lesson, save your files.

    You should save your work frequently. This is just good practice. Save a "working" file complete with all layers and channels as a .psd using your name as the file name (i.e. - Ronworking.psd). This is the file you will submit for grading. I need to see your layers and alpha channels to ensure you are learning the skills.

9.5 Post an example of your work and comments to the Google+ online Community

After you have completed the assignment, visit the course's Google+ online community and post your comments about the assignment. I am also asking for you to post both the .jpgs of your work on the Google+ site. Look @ your classmates posts and critique their work. Don't simply say "I love it!", tell us why. Use the terms we have discussed in the course so far to describe what you see and offer suggestions for improvement. Visit the Google+ online community here. Once you have posted, copy the link from the Google+ site. Go the Learning For Life portal, and paste the link in the text field and attach your layered .psd file. Hit submit.

9.6 Review and Checklist for the Week's Lesson Assignment

 

Grading Check List

watch the editing selections video
review online resource about softerning edges
watch the compositing video
review the file format and resolution .pdf from week 8
watch the save for web video
practice the lesson, save a layered .psd for grading
use the crop tool to crop two version and save as .jpgs
post both .jpgs and discuss on the Google+ community
submit your .psd file via the Learning For Life portal and provide the link to your post
complete quiz 9 on Learning For Life portal

 

Testable Items

  • What command will soften the edges of an existing selction?
  • Are adjustments layers considered non-destructive alterations?
  • What are the two two main considerations when saving files for web use?
  • What does the save for web dialog look like and what may be changed there?
  • What file formats support transparency on the web?
  • Which command would you use to change an image's resolution?
  • What is the end result of rasterizing a text layer?
  • What is the command to select all?
  • What is suggested to do with edges of outlined photos which you are composing over other layers?
  • Are ther other methods of saving images for web use other than the save for web command?