Digital Photography and Web Images
Assignment for Friday: Create a "rough draft"
of your Web Genre website. Put a workable
link to this wesbite on your portfolio page.
Assignment: (Do after Class)
1. Go to a number of your favorite websites and study
how they use pictures and images to create a focal point
on a webpage.
2. Study how Designers use a Title Caption
picture to create and reinforce
the larger story told by
3. Study how in addition to a Title Caption and central
image Designers use short descriptive
stories under the picture to help draw the reader
into the page.
4. When you read some magazines this week notice
how thepage-length advertisements
often use a central picture and a Title Caption to draw
the reader into reading the advertisement.
1. How do we change photos by computer editing?
2. Model Websites for Web Genre sites
2. See Progression of Web Genre website
- Kohl's Ad image
- Lewis Flowers ver. 1
- Lewis Flowers ver. 2
- Lewis Flowers ver. 3
3. Examples of a student Scanned Image
3. Examples of gif text using color gradients
4. Creating Text Paths in Fireworks
- See Examples
of Text Paths in Fireworks
- See Example of Advertisement using
- See Example of Modified Advertisement
- See Example of Text Path Trick
- See Abomb examples of using text paths:
abomb.jpg , abomb1.jpg
- See Roses
advertisement using the low source-
high source trick.
- See low
source roses version.
- In order to create text that flows around
a path, you must first create a path.
- Create a path using the Vector Ellipse Tool.
- Now create a line of text just above this path.
- First select the path and then select the
text, so that both are selected.
- Now go to the "Text" menu and select
"attach to path."
- You can adjust how the text flows around
the path by going to the "Text" menu and
- You can also make small changes in how the
text follows the path by selecting the text
and then using the space bar to move the
text just a little bit.
5. Scanning Images from Books or Magazines into the web.
Scanning images from books or magazines can create unusual color shifts in the image because printing inks use "CMYK (Cyan, Magenta, Yellow,
and Black) colors." This problem creates unwanted dot patterns and moires, giving the image a
- See this Bush Picture with Moire
this Bush Picture with the Moire removed
- Before resizing your images, try to get rid of this
dot pattern or "moires."
- In Fireworks go to "Xtras" and select "Gaussian
Set the blur setting to "1.2 pixels". This will cause the little dots to blur, which removes the "moires."
- After adjusting the "Gaussian Blur," go to "Xtras"
and select "Sharpen" to use the "sharpen filter" to
increase the contrast in the image, which corrects
for the little blur you added to get rid of the dot
- Now resize you image and save for the web.
- See these images: Computer,
and Computer 3-gif version
- Remember computers use RGB colors to
create the colors of an image. Images in
magazines are created by using CMYK
colors. Photographs from film use RGB
6. Scanning and working with images
Sewall Lion 1
Sewall Lion 2
Sewall Lion 3
Sewpostcard with Digimarc watermark
7. Some tips for using Digital Cameras
- See snowex1.png, snowex2.png, snowex3.png
- These images are examples of basic image
files that digital cameras create when you take
- Note that most digital cameras make these
images using 72 dpi resolution, which can make
the image file really big.
- When you edit these image files in Fireworks,
the first thing you want to do is to change their
resolution from 72 to 300 dpi. 300 dpi is the
standard resolution for photograph files.
- Call up the imagefile in Fireworks and go
to "Modify Canvas" and select "Image Size."
- When the "image size" box open us, un-check
"resample image and then change 72 dpi to
300 dpi. After you do this, then re-check
"resample image." This will cause the
image file to be compressed down in to
a tighter, clearer file.
- After doing this, your image won't appear
as big, because making it at 72 dpi stretches
out the image to fit the total pixel size
available on your digital camera.
- An image changed from 72 to 300 dpi will
look sharper and clearer and more
- Save the processed image with a different
name than the original. Always keep the
original photo image file as a back-up if
you need to go back and totally re-edit
- Higher mexapixel cameras set at high image
settings take superior pictures.
- These days the standard for high-quality
digital images is a 8 megapixel camera
- Take lots of pictures and have on hand
lots of digital film memory media
- Always take bigger images than you are going
to use. Computers allow you to use big image
files to improve quality and resolution.
- When printing using an inkjet printer, set your
resolution to no higher than 300 dpi.
- Computers enable photographers to take much
better pictures than there skill levels would
allow. Using the tools in Fireworks and
Photoshop, you can really improve your images.
- Always save the original image files that you
took using your digital camera in their "raw"
form. You can always go back and re-touch
and re-do an image using the original image
8. Adding borders to photographs
- See example image: oceanex.png
- You can use the the "Effects" menu and
select "Outer Bevel"
. But when you do this
it makes the edges of the boder rounded.
- To make a border with just flat edges,
use the vector tool, with the fill set as
transparent and the edge set to black.
- Which ever way you make your border,
try not to make it to thick. Remember it
is intended to be just a simple frame to
8. Using Layers and Transparencies to blend Images
- See balloons.htm, beachmontage.jpg, montage.jpg
- Using the Magic Wand tool and threshold to
select out images from photos
- You can select smaller pieces of an image
to make adjustments to it.
- You can use cut and paste to merge parts of
9. Using Masks to blend and re-touch images
- See carrepair.jpg, bluebeach.jpg, redbaby.jpg ,
- See examples of using mask layers:
, mirage.jpg , oranges.jpg, grapes.jpg
- You can make each layer semi-transparent
by adjusting the opacity for each layer.
- By adjusting a layer's transparency and
its color "curves" and its "hue/saturation"
under the filter menu bar.
- You can use layer masks to select different
parts of each image layer to appear in the
final image. Layer masks are very useful
when you want to blend images.
- You can also use layer masks to add one
part of an image to another part of an image.
For example, adding a new sky to a nature
- A lot of advanced Image techniques involve
layer masks andd adding and blending images
on top of each other.
- Layer masks can be a great tool to create
a blended collage affect.
- Remember in the "Mask Edit" mode, using
a white brush adds material to the image and
using a black brush takes material away. You
use the bitmap brushes to make sure your
mask contains just the material you want.
- See Masks are Easy and Masks Power with
- You can also use layer masks to put images
inside text. See Fruit Text , which uses Fruit
as the background filler for the text. Also
see Bluebeach Text, which used Bluebeach.
- Create an image layer and a text layer. Make
sure the text is white. Now select both layers
and go to "Modify" and select "Mask" and
chose "Group as Mask."
- Notice that you can unlock the image and
change which part of the image the text
- Make sure you use White text to make
this Mask effect work. Black Text will not
work using this Masking effect.
9. Protecting your Photos
Digitial Photo Galleries
- See Michael
Gordon Landscapes of
the American West
- See Michael
Gordon Copyright Notice
- See Rick
- See Yosemite
by Rick Rasmussen
- See Chris
Lewis rough draft of
Digital Photography website
Professional Photographers on the Web
8. Digital Watermarks
to Digital Watermarking
Images with Watermarks
- Earth Watermark
9 . Evaluating Webgenre websites.
Need Clear Website titles and page titles.
Need text links back to central pages in
Every Page has contact and author information.
Make sure pages aren't too long or too wide.
Users don't like to scroll.
Make sure you include text links next to images
that you are using as links.
Each page has Alt tags for all central images.
Each website has a larger structure and goal.
Don't use lines with more than 8 to 10 words.
It is harder to read text on the web.
Make sure that your websites are all linked
to your design portfolio pages.
Make sure that your websites provide useful
links and valuable information.
10. Making Links Open in Different Browser:
See Setting Links to Open in New
11. Using a Scanner and Photo Editor to Prepare Images
for the Web
12. Using a Digital Camera to create Images for the
13. Using the Digital Images on the Web
14. Photo-Sharing on the Web
15. The Power of Images to tell stories.
Life Magazine Home
The Atlantic Online