Graphics' Boards to Create Web Images and Edit Picturess
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. 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 Flowers ver. 1
- Lewis Flowers ver. 2
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. Evaluating Webgenre websites.
(See Basic Elements of a Website)
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. (Design either for a
800 x 600 or 1024 x 768 browser screeen)
Make sure you include Alt tags or
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.
2. Jessika Fishkin's scanned logos.
I used Fireworks
and selected "Filters", "Adjust Colors", and
selected "Invert" to change from a white to black
- Dog in white
- Dog in black
- Skeleton in white
- Skeleton in black
3. CU-Computer Labs with Photoshop
4.Protecting your Photos
Digitial Photo Galleries
- See Michael
Gordon Copyright Notice
- See Rick
- See Yosemite
by Rick Rasmussen
Professional Photographers on the Web
5. Digital Watermarks
to Digital Watermarking
Imagebridge to Track Digital Images
Watermarking your Images
- Earth Watermark
6. Use Image Properties to set how text will wrap around an image. You can right- or left-wrap
text around an image. See Wrapping
Text around an Image.
7. Dithering Effects when you
Save a Photo as a Gif Image
8. Making Transparent Gifs
- Non-Transparent Jpgs
- Transparent Gifs
- Sewall Round logos as gifs and
- Remember only Gif images can be saved as
- Remember to save the image file you want to have
transparent, non-white borders, as a Gif file and
select index transparency and select the white background
8. Digital Photography and Web images
Digital Photography Sites
a Digital Camera
Best Digital Cameras
- Two reasons for improved Images on the Web:
a). Improved Digital Cameras with much
higher image resolution. These cameras
have gone from 1 megapixels to 15 megapixels.
b). Improved Image-Editing Software:
9. Making Photos "pop" using Fireworks
- Sewall Pictures 1
- Sewall Pictures 2
- Sewall Pictures 3
- Sewall Pictures 4
- Sewall Pictures 5
- Sewall Pictures 6
- Sewall Pictures 7
- Sewall Pictures 8
- Sewall Pictures 9
10.. Using Computer Drawing Boards for
2 Graphic Tablet
a Graphic Tablet
- You can use Graphic Tablets for drawing,
painting, and photo editing on the computer.
- You can use Webpainter and Painter drawing
programs with Graphic Tablets to draw and
paint using your computer.
12. Using Photoshop to Edit Scanned Images and
- Jpeg vs. Gif: Avoiding Dithering
- Try to balance image quality with image size
- Crop your images to select only the most
essential elements of the picture.
- Use Pictures that are interesting and tell a story
- Scanning Photos and print media pictures:
RGB colors versus CMYK colors.
- Feathering Pictures.
- Creating photo montages
- Using Photoshop Filters. Don't get too cute.
12. Editing Scanned and Digital Camera Images using
Fireworks and Photoshop
- Remember save photos as compressed jpg files
- Save graphics and line art as compressed gif files
- Always save two versions of your image files:
1) a png file version, and 2) a jpg or gif file
version. You can always go back and re-edit
and redo the png version, but it is much
more difficult to re-edit the jpg version.
- Always check the size of your image and the
size of your image files. Don't make them too big.
- Experiment with several different versions of
your images. Which one looks best.
13. Transparent Gifs
- In Photoshop, go to Image and Mode and select
- Now go to Image and Mode and select "Color Table."
- When the Colored Table box comes up, select the
color dropper and put it on the color in the image that you want to make transparent.
- Now select that color.
- When you save the image make sure you save it as
a gif file and make sure transparency is selected.
- See Mustang Transparent Gif,
See Mustang on Beach Background
- The easier way to do this trick is to use
layer masking. You would mask the
background so just the car shows through.
See Mustang on Green Background