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:
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:
1. Rough Drafts of Web Genre websites are due by
the end of the day. I will start grading them on
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
-----Compare this model with the
4. Using Graphic Tablets for drawing images and
- 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
- 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
- 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
- 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
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.
6. Image Editing Tricks in Photoshop and Fireworks
- a) pic1
- 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",
- Using the Marquee tool, you can change the
options from "normal" to "fixed ratio" to
- 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"
- See www.thinkmango.com
- Bluefaces2 image
7. Examples of Basic Image Website Layout
- A Davis Family Album
- Sewall Academic Program Faculty
- Social Security Blues
8. Feathering an Image
- Use Use sewpic1.jpg
- 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",
now push the delete key. This will delete the rest of the image in the background and leave the feathered
- 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
- See Good Design Portfolio for Good Ad Images
- USA Today.Com