Webmastering BASICS Using Dreamweaver - PowerPoint PPT Presentation

Loading...

PPT – Webmastering BASICS Using Dreamweaver PowerPoint presentation | free to download - id: 1eb166-ZDc1Z



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Webmastering BASICS Using Dreamweaver

Description:

Other terms used to refer to raster images are bitmap, paint, and photo. ... It can contain up to 16.7 million colors and are typically larger than their GIF ... – PowerPoint PPT presentation

Number of Views:40
Avg rating:3.0/5.0
Slides: 29
Provided by: conn120
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Webmastering BASICS Using Dreamweaver


1
Webmastering BASICS Using Dreamweaver
  • Lesson 14
  • Web Graphics

2
Objectives
  • Understand the difference between raster and
    vector images.
  • Understand the differences between JPEG and GIF
    graphics.
  • Understand when to use a JPEG or a GIF image.
  • Use scanned photos on a Web page.
  • Understand and create tiled background images.
  • Crop and edit a photograph.

3
Vocabulary
  • Clip art
  • Compression
  • File format
  • GIF
  • Icon
  • Index color
  • JPEG
  • Raster
  • Vector

4
Editing Programs
  • There are a variety of applications that can be
    used to edit and create graphics for the Web.
  • A raster graphic is one in which the information
    for each pixel in the graphic is saved.
  • A vector image is one in which the coordinates of
    the outline of an image are saved.

5
Raster Programs
  • These programs work with pixels.
  • Other terms used to refer to raster images are
    bitmap, paint, and photo.
  • Photoshop (industry standard)
  • Fireworks
  • Painter

6
Raster Graphic
7
Raster Graphics
  • Sized defined when the file is created or scanned
  • Fixed resolution
  • Excessive editing can affect image quality
  • Very large files
  • Continuous-tone color

8
Vector Programs
  • A vector image is based on a mathematical
    formula.
  • It uses coordinates (or points) to define the
    shape of a graphic and then fills in the center
    with a single color.
  • Illustrator
  • Freehand
  • Flash

9
Vector Graphic
10
Vector Graphics
  • Unlimited scaling
  • Highest resolution possible from the output
    device
  • Unlimited editing
  • Very small files
  • Concise color

11
Image Resolution
Pixel dimensions The number of pixels along the
height and width of a bitmap image. The display
size of an image on-screen is determined by the
pixel dimensions of the image plus the size and
setting of the monitor.
72-ppi and 300-ppi images inset zoom 200
12
File Formats
  • A file format is the arrangement in which data is
    saved in order to display it in a certain way.
  • There are two types of graphic files
  • Raster (GIF, JPEG, TIFF)
  • Vector (SVG, EPS)
  • The Web uses mainly raster images (GIF and JPEG).
    These are cross-platform.

13
File Formats
  • Vector graphics on the Web can, in most cases,
    download faster than raster graphics. This faster
    download is because vector graphics do not save
    the information for every pixel in a graphic but
    rather they save the information for the
    coordinates.
  • Some formats are native only to the programs they
    were made for such as, Photoshops PSD.

14
File Formats GIF
  • GIF, which stands for Graphic Interchange Format,
    is a file format that can be viewed equally well
    on every kind of computer (cross-platform).
  • GIF files are highly compressed, which reduces
    the file size and speeds up download time from a
    Web page.
  • Use GIF files when your graphic is made up of
    broad areas of flat colors.

15
File Formats .GIF
  • GIF files can contain a maximum of 256 colors,
    also called index colors.
  • GIF files can contain transparent areas.
  • They can be animated. An animated GIF file can
    contain several GIFs that are quickly
    interchanged giving the illusion of animation.

16
File Formats .JPG
  • JPEG stands for Joint Photographic Experts Group.
  • Use JPEG files when your image contains lighting
    effects, texture, or gradual color changes.
  • This format is used for photo-like images that
    require a greater level of detail.

17
File Formats .JPG
  • It can contain up to 16.7 million colors and are
    typically larger than their GIF equivalents.
  • JPEG files use a form of compression that helps
    to decrease file size. This is called lossy
    compression

18
Scanning
  • Set the resolution for a scan between 100 and 150
    ppi (pixels per inch) in order to edit your
    graphic later.
  • If you are not planning to edit an image that has
    been scanned, use 72 ppi.
  • 72 ppi is the standard pixels per inch on a
    monitor.
  • Save your scan as a TIFF so you can edit it later
    in a graphics application. It is a cross-platform
    file format that has outstanding quality for
    saving your original.

19
Different Uses of Graphics
  • Use graphics as
  • Icons
  • Background images
  • Banners
  • Logos
  • Graphical text
  • Photos
  • And much more

20
Different Uses of Graphics
  • Graphical Text
  • You can ensure that the size and font face will
    remain the same.
  • Add graphical elements to it to make it more
    interesting.
  • Drop shadows and stroking are a popular way to
    enhance graphical text.

21
Different Uses of Graphics
  • Backgrounds
  • When using a background image keep it small so it
    will repeat causing a tiling effect.
  • Another technique is to create a 1-pixel wide and
    1024-pixel high graphic. This graphic will repeat
    itself straight down the page giving you a
    colored side bar. 1024 is used because not many
    users will have their monitor resolution set to
    more than 1024 x 800. If the graphic were,
    smaller it would start to repeat to the right of
    the screen giving you another side bar on your
    right.

22
Different Uses of Graphics
  • Icons
  • A small symbolic graphic, can be used as part of
    the user's interface or can be set alongside of
    certain pieces of information to help the user
    identify types of information.
  • The use of icons can help users quickly scan
    through a page and find what they seek.
  • An icon as part of the interface, or navigation,
    can help users quickly jump from page to page

23
Editing Photographs
  • Users want to see pictures of the products, the
    people, the campus, or whatever your site is
    promoting.
  • Crop a photo so that the subject matter fills the
    frame.

24
Clip art
  • Clip art can easily be used without having to
    create your own art. It can be used, often
    without cost, to add images to a Web site.
  • Places to find Clip art -
  • Buy from www.eyewire.com.
  • Also, free clip art off of the Internet.
  • CDs that contain hundreds of images.

25
Summary
  • There are a variety of applications that can be
    used to edit and create graphics for the Web.
  • A raster graphic is one in which the information
    for each pixel in the graphic is saved.
  • A vector image is one in which the coordinates of
    the outline of an image are saved.
  • Graphics Interchange Format or GIF files are
    highly compressed, which reduces the file size
    and speeds up download time from a Web page.

26
Summary (continued)
  • GIF files can contain a maximum of 256 colors,
    also called index colors.
  • GIF files can contain transparent areas and can
    be animated as well.
  • Joint Photographic Experts Group or JPEG files
    are used for photo-like images that require a
    greater level of detail.
  • JPEG files can contain up to 16.7 million colors
    and are typically larger than their GIF
    equivalents.

27
Summary (continued)
  • JPEG files use a form of compression that helps
    to decrease file size.
  • Scanning an image using a scanner can be a great
    way to obtain images for a Web site. If you plan
    to edit an image after it has been scanned, it is
    best to use 100-150 ppi. If you are not planning
    to edit an image that has been scanned, use 72
    ppi.
  • Scanned images should be saved as TIFF format or
    native format until they are ready for use on the
    Web.

28
Summary (continued)
  • Background files can improve the look of a Web
    page, but can take a long time to download if the
    image is too large. The background file can be
    made to load more quickly by designing an image
    that will tile when it loads.
  • Clip art can be used, often without cost, to add
    images to a Web site.
About PowerShow.com