Using Fireworks, Photoshop, and Image Editors to Create Images for the Web

Using Fireworks,Photoshop, and
Image Editors to create Web Images

Assignment: (Do after Class)

Assignment for Friday, Feb. 24 : Create a "rough draft" of your Web Genre website. Put a workable link to this wesbite on your portfolio page.(40 points)

1. Work on the rough draft versions of your
Web Genre websites. What images, what text,
what colors, what logos, what layout, and what
style are you going to use? See Chris Lewis
drafts of Web Genre website:

Lewis Photography 1

2. The rough draft of your Web Genre website
should include at least two pages: 1) a draft of
your homepage layout, and 2) a draft of the
template page layout you will use for the rest
of the pages on the website. After designing
the homepage interface page, then edit and
cut some of the elememts to create a template
page. For example:

Digital Design Website homepage

Digital Design Website template

1. Rough Drafts of Web Genre websites are due by
the end of the day. I will start grading them on
Sunday.

2. See student's example of a rough draft of a
Web Genre website.

3. See Annie Tuck's Web Genre Model sites

3.See Lee DeRose's Web Genre rough draft

4.. See a model for a revised Google site.
-----Compare this model with the Google Site

4. Using Graphic Tablets for drawing images and
editing photographs.

Demonstrate Deep Paint and Web Painter
using the Wacom Board

5. Creating and Using Layer Masks

See rose picture
See examples of using masks to
combine two or more images:
Skymask, Skymask2, and Skychange
See "png" version of Skymask2.
Notice how I have used multiple layers
of the same image and have made
adjustments to each layer
Use Image Masks to select only that
part of an image that you want to
work with. The Mask hides all the
rest of the image.
(See Grain (gif), Grain1 (jpg), Grain2 (original)
You can use the paintbrush tool to
select the area to be masked within
an image.
Remember in Masking, using the white paintbrush tool adds to the mask and using the black paintbrush toolsubtracts from the mask.
Or you can use the Marquee tool to draw
a box or circle around that part of the
image that you want to include in the mask
layer.
See my Postcard Example made with Layered Masks

5. Using the Rubber Stamp Tool to copy adjacent
objects in an image

In order to use the Rubber Stamp tool, you must
first select it from the tool bar.
Now go to the area you want to copy, hold
the shift key to select that area.
Now go to the area you want to change and
move the cursor over that area.
Notice that an exact copy of the initial
selected area is painted here.

6. Using Mask to cutout Text from an Image

See Text using background images
See Utah ad and Travel ad.
Put the image you want to use for the text
on its own separate layer
Put a new layer just above it and type
text on this layer. Make sure you
don't use black text for this, because
if you do this trick won't work.
Layer masks use black to select the
object and white to unselect the
to be masked.
Now select this text layer and the
image below it and to to "modify
and select "mask" and then choose
"group as mask."
This creates a new layer with just
the text part of the image masked.

6. Demonstrate using Photoshop to edit a
couple of Pictures of Sewall Hall.

See a Photo tour of Sewall Hall
Demonstrate selecting parts of an image
to modifyusing Fireworks

6. Image Editing Tricks in Photoshop and Fireworks

a) pic1

b) pic2

c) pic3

d )pic4
Color Pallette Options for Gif Images
(See the Gradient Tool for creating
bands of color. Gradient Text)
Use Transparency to make a background
image semi-transparent. Use this image
as the background for your webpage's
initial table. See Grapes webpage
Use WebSnap Adaptive or Web 216
In Dreamweaver, altering an Image's
appearance by using "v-space," "h-space",
and "border."
Using the Marquee tool, you can change the
options from "normal" to "fixed ratio" to
"fixed size."
Using the Marquee tool, you can change the
characteristics of the edge that is cut out by
selecting "hard," "anti-alias," or "feather."
Using the Shape tool to create borders>
We are going to use "round shape tool,"
the "stroke tool," and the scale tool to do this.
Remember, if you hold down the shift key
when you are using the tools to draw a circle,
Fireworks will create a perfect circle.
Editing parts of an image using Fireworks.
Using Paths in Fireworks. Putting Text on a Path
see "Sewall image" and "Sewall image 2".
See Beer Mug example.
Increase "smoothing" in "export preview" to
smooth some of the rough edges of an image.
Using Webpainter 3.
Using Photoshop to create special, "cool effects"
for images.
See www.thinkmango.com
Bluefaces2 image

7. Examples of Basic Image Website Layout

8. Feathering an Image

Use Use sewpic1.jpg to Feather.
Use the Oval Marquee Tool and change the
shape from a Rectangle to a Circle.
Draw an ellipse around the picture, and go to
"Modify" on the toolbar menu and select "feather."
You can feather an image from 10 to 30 pixels and
still have it look good.
Now go to 'Modify" and use "select inverse", and
now push the delete key. This will delete the rest of the image in the background and leave the feathered
image.
Be wary of getting too fancy with feathering. It should add to your page not appear tacky or out of place.

9. Learning to Look for Images and Caption Title Web Tricks

See Good Design Portfolio for Good Ad Images
Slate.Com
Salon.Com
CNN.Com
Adobe.Com
LandRover USA.Com
USA Today.Com