 |
|

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
- Always
resize when you are in RGB mode
- Whenever
possible resize by 50%
- Crop
out unneccesary elements of a photo
- 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
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:
- Use
the dodge tool to reduce shine on the man's head
- Resize
by half until the image is less than 200 pixels wide
- Resizing
can be done in the Image menu > image Size > reduce pixels # by
half
- 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.
- 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
- Save
a copy of each of the 4 versions of the photo
- 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>
|
 |