Using Digital Photography to Make Images for the Web

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.
(40 points)

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 with a
picture to create and reinforce the larger story told by
the image.

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

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 flowing text
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
selecting "allign."
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
pixelated look.
See this Bush Picture with Moire and
this Bush Picture with the Moire removed using
Gaussian Blur
Before resizing your images, try to get rid of this
dot pattern or "moires."
In Fireworks go to "Xtras" and select "Gaussian Blur."
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 patterns.
Now resize you image and save for the web.
See these images: Computer, Computer 2,
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
colors.

6. Scanning and working with images

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
a picture.
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
professional.
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
the photo.
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
file.

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
the image.

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
multiple images.

9. Using Masks to blend and re-touch images

See carrepair.jpg, bluebeach.jpg, redbaby.jpg ,
and liteflowers.jpg
See examples of using mask layers:
fruit.jpg , 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
shot.
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
Fireworks Tutorial
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
will mask.
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

See Digitial Photo Galleries
See Michael Gordon Landscapes of
the American West
See Michael Gordon Copyright Notice
See Rick Rasmussen Photography
See Yosemite by Rick Rasmussen
See Chris Lewis rough draft of
Digital Photography website
See Professional Photographers on the Web

8. Digital Watermarks

Digimarc.com
Introduction to Digital Watermarking
What is Watermarking
Digimarc Watermarking Guidelines
Digital Images with Watermarks
Earth Watermark

9 . Evaluating Webgenre websites.

Need Clear Website titles and page titles.
Need text links back to central pages in
the website.
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 Windows

11. Using a Scanner and Photo Editor to Prepare Images
for the Web

12. Using a Digital Camera to create Images for the Web.

13. Using the Digital Images on the Web

14. Photo-Sharing on the Web

PCPhoto: Electronic Photo Sharing

15. The Power of Images to tell stories.