graphics for the web online, CIS58.53B

1 2 3 4 5 6 7 8
Photo Examples
12345
Collage Examples
6789
Bad Examples
Resources
Surf Form

Lesson 2 Photos/Collage

Assignment #2 in Brief
Reading
Select Photos, Resize, and Correct if needed
Homework: Adding Photos to Client Sites
Homework: Applying an Effect to a Photo
Turn in Homework

Assignment in Brief (please look on the homework page to see detailed explanations of assignments)

1. Select photos, resize, and correct if needed
2. Add photos to one client's web site
3. Advanced photo correction technique (optional), which includes correcting scratches, eliminating red eye and improving focus.
4. Apply effects to assigned downloaded image: couple.jpg
5.
Save a copy of each of the 4 versions of the photo described below
6. Turn in homework

Reading
Read the Photos and Collage section of the CD
Read this Lesson 2 page all the way through
Visit the Lesson 2 Examples pages



Selecting Photos
The first challenge is finding the images. I recommend you spend more than 2 hours looking for images. Linda has collected image archives for you to use as you begin your search for the "perfect graphic"

I have also put up an image bank of campus photos from both the Santa Rosa and Petaluma campuses. These are photos that I have taken myself and I am making them available to the class without concern for copyright issues.

In addition, go to the Lesson 2 Resources page to find other sites offering royalty free images.

Resize, Crop and Color Correct Images
Whether the image was downloaded, scanned or captured from a digital camera you may find that the graphic has some problems which need to be corrected before you proceed.

Resizing Recommendations

  1. Always resize when you are in RGB mode
  2. Whenever possible resize by 50%
  3. Crop out unneccesary elements of a photo
  4. Constrain proportions whenever possible

Color and Tonal Correction
When using Image Adjustments, it is best to add an Adjustment Layer so you can alter your adjustment at any time or delete the layer if you change your mind. The image itself is not altered. Go to Layer Menu > New Adjustment Layer and pick your type of Adjustment.

simple techniques

  • Image menu, select Adjust and then variations. This will allow you to preview how the graphic will look as you make changes in color or brightness. You click on the graphic you like best to make changes in the color or brightness. Adjusting the mid tones seems to produce the best results. If the changes seem too subtle or too extreme adjust the fine/coarse slider.
  • Image > Adjust > Auto Levels

sophisticated techniques

  • Layer > New Adjustment Layer > Levels, select the Auto Levels button to adjust the image to have a full range of lights and darks. This adjusts your lightest tones to pure white and your darkest tones to black. Move the middle slider left or right to adjust the mid-tones. Select the Red, Green, or Blue Channels to adjust color cast.
  • Layer > New Adjustment Layer > Curves, click near the bottom of the curve to adjust the darker tones, click near the top to adjust the highlights, click in the middle to adjust the mid-tones. Move the curve very slightly up or down to make your adjustment. A curve that is steeper creates more contrast. Select the Red, Green, or Blue Channels to adjust color cast.
  • use Dodge and Burn tools to lighten or darken
  • create a Color Balance or Hue and Saturation adjustment layer to give the photo an overall tint

See the Lesson 2 Example pages for more about Adjustment Layers. Instructions for applying more sophisticated image editing techniques can be found on the CD.

The CIS department also offers a course devoted entirely to image correction. CIS 83.13 - Image Correction and Restoration with Photoshop.




Homework: Adding Photos to Client Sites
Now that you have the image, place it into the layout PSD file and remove the layers which served as place holders for the photos.

If the original image is much larger than the final size I need, I often resize and crop the original image BEFORE moving it into the layout document. When bringing it in, place the upper left corner of the image where it needs to go and then scale from the lower right. You may decide you need to crop more at this stage. Do not use the crop tool, which crops the entire document. Use the Marquee tool to select the part you want, Inverse the Selection (under the Select Menu) and delete. Using a Layer Mask will allow you to go back and change your mind, restoring the area you masked out.

When adding images to the site, if the photo colors do not blend with the site colors, adjust them or duotone the photo. If a photo has a busy background blur it, or remove it.


Homework: Applying an Effect to a Photo
You need to download the couple.jpg file also found in the retirement photo gallery listed above. Now complete these steps:

  1. Use the dodge tool to reduce shine on the man's head
  2. Resize by half until the image is less than 200 pixels wide
  3. Resizing can be done in the Image menu > image Size > reduce pixels # by half
  4. Resizing can also be achieved by Edit > Transform > Scale. The photo cannot be on a Background Layer to access this. In the Option Bar, click on the Link icon between the Width and Height fields so the proportions remain the same. Enter 50% reduction.
  5. make a copy of the image and apply 4 effects demonstrated in the CD. Your options are:
    a. unusual shape crop
    b. drop shadow
    c. stroke
    d. feathered edge
    e. doutone
    f. grayscale/color
    g. modify background
    h. lighten faces
    i. color balance
  6. Save a copy of each of the 4 versions of the photo
  7. Create a web page which has displays these 4 images (label the settings you used for each image)

Adding a Collage to a Client Site
A collage is defined as various graphical elements which are arranged to create an attractive display. The elements can be photographs, illustrations, text, shapes, or patterns .

Tips for Collage

  • Make the collage no larger than 500 by 300
  • Try to keep the file size under 50K
  • Include a strong focal point
  • Have most elements looking into the center of the image
  • Use images which have a diversity of scale (close ups and long shots)
  • If the colors of the photos conflict or do not blend with your color scheme, use duotones
  • Place each collage element on it's own layer in Photoshop

Review Beginning Collage Ideas
Simple collages can involve a strip of photos, a grid pattern of photos, two or three photos arranged in an overlapping scheme, or a photo fading into a colored title bar area. The 1st Example page for this lesson shows examples of a strip of photos. The Bad Example page shows a common trap students fall into making a photo strip and includes a better example as contrast.

The sites below have collages which are extremely easy to duplicate. If you are a beginner you may want to use one of these as a model. Visit the Resources page to see more examples.

Student Examples
Lodge at Paulin Creek by Paula Schwindeman
Willow Glen Retirement by Nora Gainey
Retirement Home by Paul Kaiser
Jungle Jaunts by Nancy Biskovich
Zebra Motors by Nancy Biskovich
Blowing Zen by Mark Jones



Advanced Collage Elements
This section allows us to explore sites which have more complex and interesting opening screens. Combining several elements, styles and colors takes a more sophisticated designer. I encourage anyone who feels confident in Photoshop to attempt a more complex opening screen. However if it does not work fall back on the beginning techniques discussed above.

More advanced techniques for creating collages can involve using layer masks to fade photos into each other, collaging objects or figures separated from their backgrounds, layering photos, type or graphic elements using blending modes or opacity changes. Some of these techniques are featured on the Lesson 3 Examples pages #2,3, and 4.

Tips for the advanced collage:

  • create a sense of depth by having a background image or text and then layering images over the background.
  • Make the transition edges either very soft (using blurs and blends) or very distinct using borders. Here are my recommendations for edges:
    • feather the selection
    • gaussian blur
    • drop shadow
    • single pixel black border

Visit the Lesson 3 Resources page to see advanced examples.


Duotones
Keep it simple. Guard against overly busy collages. Try to make your collage integrate well with the rest of the page.
One method for achieving this is to use duotones. The CD has an explanation for using the Colorize option in the Hue and Saturation dialog box for adding a duotone effect to an RGB image. You must first select Desaturate in the Image > Adjust menu and the image needs to be in RGB mode. Using the Hue adjustment, you can cycle through various colors.

The more traditional way of duotoning an image involves first converting the image to Grayscale mode and then selecting the Duotone mode. In the Duotone dialog box, you can actually choose Monotone, Duotone, Tritone and Quadtone for one, two, three and four colors respectively. There is a curve adjustment that you can apply to each color to control how the color is distributed throughout the various tonal levels of the image. You can also hit the load button and load various preset options that come with Photoshop.

The Lesson 2 Resources page has numerous links to sites using duotones, and the Lesson 3 Resources page has a few more.

 



Turning in Homework
Flatten the clients opening and second level pages and save them in the appropriate directories (campus or optional). Add links on your homework page for the following items. In the class demonstration I worked on the optional client this week, if you did too, then use this code exactly as shown, if you worked on the campus site you will need to modify the code examples.

< A href="optional/optional-photo.gif">
view my optional opening screen with photos </A>

< A href="optional/optional-second-photo.gif">
view my optional second level page with photos</A>

< A href="campus/campus-collage.gif">
view my campus opening screen with collage </A>

< A href="campus/campus-second-photo.gif">
view my campus second level page with photos</A>

Add a link for the web page which displays 4 versions of the "couple.jpg" photo.

< A href="templates/photo-4ver.html">
Photo displayed with 4 effects</A>

 


instructor:
Corrine Haverinen  voice mail: 707.527.4999 X9206
e-mail:
haveart@sonic.net

top | home | start here | syllabus | homework | grading | message | instructor
lesson 1 | lesson 2 | lesson 3 | lesson 4 | lesson 5 | lesson 6 | lesson 7 | lesson 8


© 2001-2002 Linda Hemenway and Corrine Haverinen All Rights Reserved.
Designed and edited with permission by Corrine Haverinen.
This site is prepared for CIS 58.53B Designing Graphics for Web Pages students,
Santa Rosa Junior College, California. Reproduction in whole or in part in any form or medium without written permission is prohibited.