lesson 2 animated graphics interactive media digi

Download Lesson 2  animated graphics interactive media digi

Post on 20-Jan-2017




0 download

Embed Size (px)


Digital Graphics for Interactive Media

Digital Graphics for Interactive Media

Todays AimsAll of you will be able to explain the different types of animated graphics.

Most of you will be able to explain the different ways that websites use animated graphics.

Some of you will be able to evaluate websites and their animated graphics. PassMeritDistinction

Recap Last WeekRollover buttonsNavigation barNavigation menus

Types of digital graphics

Vector images Uses points, lines and curvesWhen scaled up there is no loss of clarityE.g: bmp, gif, tiff, jpg

Raster imagesBased on pixelsWhen scaled there is a loss of clarityE.g: psd, wmf, fla, ai


CompressionLossy- reduces the size of the file but also looses quality.

Lossless- reduces the size of the file but the quality stays in tact.

Animated GifGIF stands for Graphics Interchange Format.

Ananimated GIFfile is a graphic image on a Web page that moves.

For example, a twirling icon or a banner with a hand that waves or letters that magically get larger.

compresses images but, as different from JPEG, the compression is lossless

This format is never used for photography, because of the limited number of colors (8- bit or 256 colours).

GIFs can also be used for animations

The colour bit depth refers to the amount of colours used in a frame.8-bit is 256 colours12-bit is 4096 colours16-bit is 65,536 colours24 bit is 16,777,216 colours

HDMI supports 30 bits (1.073 billion colors), 36 bits (68.71 billion colors), and 48 bits (281.5 trillion colors)

What are the advantages/ disadvantages of using a higher colour bit depth?

Benefits and Drawbacks of using a GIF?

Web BannersAweb bannerorbannerad is a form of advertising on the web.

This form ofonline advertising involves embedding an advertisement into awebpage.

It is intended to attract traffic to awebsiteby linking to the websiteof the advertiser.

How can they be animated/ moving?

Logo GraphicsUse the company logo

Uses company colours

Often prominent on the page.

Puts the brand in the mind of the web site user.

A brand is something that distinguishes one companies products or services from another.

Screen IconsIcons are symbolic graphics which help communicate to the user with simplicity.

Often used to help the user navigate better.

Often clear and simple.

Clearly and visually represents something so that the user can quickly see what they need to do rather than using lots of text.

How would using lots of text impact on the design and ease of use?

BackgroundsA background acts as a wallpaper on a web page using an image or texture as a background

Can be animated or static.

Which would you use and why?

Texture GraphicsTextures refer to the visual appearance and surface of the design.

Layered graphics and lighting create a visual texture that simulates real life textures you can touch and feel.

Textures that are often used include: Paper, metals, wood, concrete, wallpaper

TASK 1 In pairs- find a website to discuss and share Make notes about the way the following look and whether they have been used:

rollover buttons, navigation bars, navigation menus; animated gifsweb bannerslogo graphics screen iconsBackgrounds texture graphics

Lesson 2- Animated graphicsGo onto Moodle

Go to your course

Under the Digital Graphics (with Helen) click on Lesson 2- Animated Graphics

TASK: Assignment 1- What is Digital Graphics Technology? Continue with your magazine article.write about the following: - How websites interact with and attract users- Roll over buttonsNavigation barsNavigation menusVisual designAnimated GifsWeb BannersLogo GraphicsScreen Icons


View more >