Digital Graphics for Interactive Media

Today’s Aims• All 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.

Pass

Merit

Distinction

Recap Last Week• Rollover buttons• Navigation bar• Navigation menus

Types of digital graphics• Vector images - Uses points, lines and curves- When scaled up there is no loss of

clarity- E.g: bmp, gif, tiff, jpg

• Raster images- Based on pixels- When scaled there is a loss of clarity- E.g: psd, wmf, fla, ai

Raster

Compression• Lossy- reduces the size of

the file but also looses quality.

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

Animated Gif• GIF stands for Graphics Interchange Format.

• An animated GIF file 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 colours• 12-bit is 4096 colours• 16-bit is 65,536 colours• 24 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 Banners• A web banner or banner ad is a form of

advertising on the web.

• This form of online advertising involves embedding an advertisement into a web page.

• It is intended to attract traffic to a website by linking to the website of the advertiser.

• How can they be animated/ moving?

Logo Graphics• Use 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 Icons• Icons 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?

Backgrounds• A 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 Graphics• Textures 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 gifs- web banners- logo graphics- screen icons- Backgrounds- texture graphics

Lesson 2- Animated graphics• Go 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 buttons- Navigation bars- Navigation menus- Visual design- Animated Gifs- Web Banners- Logo Graphics- Screen Icons