IntroductionIntroduction

Module OrganisationModule Organisation

Module: Content, Facilities, Objectives, and Module: Content, Facilities, Objectives, and AssignmentsAssignments

Overview of Digital MediaOverview of Digital Media

Look at TextLook at Text

Module Module OrganisationOrganisation

13 weeks13 weeks

Approximately: 1 hour lecture/demonstration Approximately: 1 hour lecture/demonstration – 2 hours practical– 2 hours practical

Module ContentModule Content

Study of each of several digital media typesStudy of each of several digital media types– CharacteristicsCharacteristics– File formatsFile formats– Creation/modification/conversionCreation/modification/conversion– Usage/ManipulationUsage/Manipulation

Module content 2Module content 2

Overview of ColourOverview of Colour

Multimedia title/Web site creationMultimedia title/Web site creation– Digital media preparationDigital media preparation

Multimedia title/Web site distribution/deliveryMultimedia title/Web site distribution/delivery– Methodologies/characteristicsMethodologies/characteristics

Module FacilitiesModule Facilities

New Multimedia LabNew Multimedia Lab– Private network with serverPrivate network with server– 20+ dedicated PC’s20+ dedicated PC’s

DVDR/CDR writersDVDR/CDR writers

2 colour scanners2 colour scanners

Module SoftwareModule Software

Windows XPWindows XP

Adobe PhotoShop 7/CSAdobe PhotoShop 7/CS– Industry standard digital image manipulation Industry standard digital image manipulation

softwaresoftware

Adobe Image Ready 7Adobe Image Ready 7– Industry standard web image preparation Industry standard web image preparation

softwaresoftware

Adobe Premier Pro/Pro 1.5Adobe Premier Pro/Pro 1.5– Industry standard video editing softwareIndustry standard video editing software

Module SoftwareModule Software

Macromedia Dreamweaver MXMacromedia Dreamweaver MX– Industry standard Web authoring softwareIndustry standard Web authoring software

Macromedia Flash MXMacromedia Flash MX– Industry standard Web animation/authoring Industry standard Web animation/authoring

and MM authoring softwareand MM authoring software

FreeMindFreeMind– Mindmapping software used for design of Mindmapping software used for design of

systems and information disseminationsystems and information dissemination

Module Module ObjectivesObjectives

Understand:Understand:– What digital media areWhat digital media are– The use and limitations of the mediaThe use and limitations of the media– The needs and requirements for their effective The needs and requirements for their effective

use in MM/Web site productionuse in MM/Web site production– The considerations imposed by the The considerations imposed by the

distribution/delivery methods useddistribution/delivery methods used

BewareBeware

This module is not primarily about learning This module is not primarily about learning how to use the software:how to use the software:– only specific uses will be coveredonly specific uses will be covered– along with compatibilityalong with compatibility

Module Module AssessmentAssessment

Two AssessmentsTwo Assessments– two assignments - 50% of total eachtwo assignments - 50% of total each

work submitted as various digital media work submitted as various digital media items with accompanying written items with accompanying written documentsdocuments

What are Digital What are Digital Media? - 1Media? - 1

Traditional media held in a computer readable Traditional media held in a computer readable formform– Specifically a digital formSpecifically a digital form– Theoretically given perfect copying and reproductionTheoretically given perfect copying and reproduction

Text – basic form of computer recordText – basic form of computer record

Graphics – basic form of human record making - Graphics – basic form of human record making - includes:includes:– drawings – a creative methoddrawings – a creative method– photographs – a method of recordingphotographs – a method of recording

What are Digital What are Digital Media? - 2Media? - 2

Sound – basic form of human Sound – basic form of human communicationcommunication– compositions – a creative methodcompositions – a creative method– recordingsrecordings

Animation – modern means of Animation – modern means of demonstrating movementdemonstrating movement– compositions – a creative methodcompositions – a creative method

VideoVideo– photographic sequences - recordingsphotographic sequences - recordings

Advantages of Advantages of Digital MediaDigital Media

Use within computer systemsUse within computer systems

Multiple copies easily madeMultiple copies easily made

Creations can be editedCreations can be edited

Recording can be manipulatedRecording can be manipulated

All forms can be synthesisedAll forms can be synthesised– types of media can become vehicles (containers) types of media can become vehicles (containers)

for other media that share certain characteristicsfor other media that share certain characteristics– a GIF Animation can contain a sequence of a GIF Animation can contain a sequence of

photographic imagesphotographic images

Advantages of Advantages of Digital MediaDigital Media

looks like a videolooks like a video– Digital Video can contain animation only with Digital Video can contain animation only with

no video photography no video photography

simple cartoon animationsimple cartoon animation

complex “photorealistic” creationscomplex “photorealistic” creations– Jurassic ParkJurassic Park

Classes of MediaClasses of Media

Simply: there is media that does not change Simply: there is media that does not change over time and media that doesover time and media that does

Text, graphics and drawings do not changeText, graphics and drawings do not change

Animations, video and sound do changeAnimations, video and sound do change

Those that don’t are static mediaThose that don’t are static media

Those that do are dynamic mediaThose that do are dynamic media

Digital Media used in Digital Media used in Multimedia/Web SitesMultimedia/Web Sites

The static media can be made to take on The static media can be made to take on some dynamic characteristics by the MM some dynamic characteristics by the MM authoring program/Java/JavaScript codeauthoring program/Java/JavaScript code

E.g., they can be made to:E.g., they can be made to:– Move around the screenMove around the screen– Be visible at one moment and not at anotherBe visible at one moment and not at another– Slowly appear or disappear (fade in or fade Slowly appear or disappear (fade in or fade

out)out)

Digital Media used in Digital Media used in Multimedia/Web Sites 2Multimedia/Web Sites 2

This doesn’t mean that they are now This doesn’t mean that they are now dynamic mediadynamic media

Some dynamic media can be made to Some dynamic media can be made to appear staticappear static

E.g., they can:E.g., they can:– Be displayed without the animation or video Be displayed without the animation or video

playing – normally this means that the playing – normally this means that the opening (first) drawing or image is displayedopening (first) drawing or image is displayed

Digital Media used in Digital Media used in Multimedia/Web Sites 3Multimedia/Web Sites 3

This is only because of the way in which This is only because of the way in which they are stored in the computer – as they are stored in the computer – as sequences of drawings or imagessequences of drawings or images

It can’t be done with sound!It can’t be done with sound!

This doesn’t mean that they are static media This doesn’t mean that they are static media but they are composed in a sense of but they are composed in a sense of series of static media itemsseries of static media items

Don’t Confuse the Don’t Confuse the TwoTwo

Static media are static media no matter what Static media are static media no matter what the MM authoring application or Java the MM authoring application or Java program, etc., does to themprogram, etc., does to them– Dynamic media are dynamic media even Dynamic media are dynamic media even

when they are not activatedwhen they are not activated

MediumMedium

The medium that is used by MM/Web media The medium that is used by MM/Web media is primarily the computer screen and is primarily the computer screen and sound systemsound system

What screen size What screen size do people use?do people use?

Screen Size % of users

800x600 (39%)

1024x768 (48%)

1280x1024 (4%)

1152x864 (3%)

640x480 (2%)

1600x1200 (less than 1%)

http://www.osnews.com/story.php?news_id=7440http://www.osnews.com/story.php?news_id=7440

Screen Screen resolutionsresolutions

Some of these sizes have commonly used Some of these sizes have commonly used abbreviations: abbreviations:

VGA 640 x 480 (max. resolution of VGA 640 x 480 (max. resolution of IBM VGA graphics card), IBM VGA graphics card),

SVGA Super VGA 800 x 600 SVGA Super VGA 800 x 600 (standard introduced by VESA), (standard introduced by VESA),

XGA 1024 x 768 (max. resolution of XGA 1024 x 768 (max. resolution of IBM XGA graphics card)IBM XGA graphics card)

Introduction to Bitmap Introduction to Bitmap Image SizesImage Sizes

We’ll consider the actual size of the image on We’ll consider the actual size of the image on the screenthe screen

How this is specified and the difference between How this is specified and the difference between image resolution and screen resolutionimage resolution and screen resolution

Between Mac and Windows screen resolutionsBetween Mac and Windows screen resolutions

What image resolution we should useWhat image resolution we should use

We’ll start with the physical size of bitmap We’ll start with the physical size of bitmap imagesimages

Image SizesImage Sizes

Bitmap graphics are not just so many pixels Bitmap graphics are not just so many pixels by so many pixelsby so many pixels

Often specified as a physical size and an Often specified as a physical size and an image resolutionimage resolution– E.g. 6” by 4” at 150dpi (dots per inch)E.g. 6” by 4” at 150dpi (dots per inch)– This is a 900 pixel by 600 pixel imageThis is a 900 pixel by 600 pixel image

What size an image is displayed at depends What size an image is displayed at depends on the software displaying iton the software displaying it

Image Sizes 2Image Sizes 2

Most software will use the screen resolution to Most software will use the screen resolution to determine how big to make the imagedetermine how big to make the image– Mac screen resolution is 72dpiMac screen resolution is 72dpi– Windows using “small fonts” screen resolution is Windows using “small fonts” screen resolution is

96dpi96dpi– Windows using “large fonts” screen resolution is Windows using “large fonts” screen resolution is

120dpi120dpi– Windows screen resolution can be set to almost any Windows screen resolution can be set to almost any

valuevalue– Many Mac originated packages ignore the Windows Many Mac originated packages ignore the Windows

screen resolutionscreen resolution

Image Sizes 3Image Sizes 3

So on a Mac the software may use 452 So on a Mac the software may use 452 pixels by 288 pixels for the imagepixels by 288 pixels for the image

On a 640 x 480 Windows screen the On a 640 x 480 Windows screen the software may use 576 pixels by 384 pixelssoftware may use 576 pixels by 384 pixels

On a 1024 x 768 Windows screen the On a 1024 x 768 Windows screen the software may use 720 pixels by 480 pixelssoftware may use 720 pixels by 480 pixels

We are only concerned with screen display We are only concerned with screen display of images not with printing so creating of images not with printing so creating images with image resolutions other than images with image resolutions other than the screen resolutions we need to use the screen resolutions we need to use them at is unnecessarythem at is unnecessary

Image Sizes 4Image Sizes 4

We could follow the herd and use 72dpiWe could follow the herd and use 72dpi

Or use 96dpiOr use 96dpi

Or 120dpiOr 120dpi

Rather than create multiple sets of images Rather than create multiple sets of images each time we’ll standardise on 96dpieach time we’ll standardise on 96dpi

Note: Web Browsers always use the actual Note: Web Browsers always use the actual number of pixels in the image file to number of pixels in the image file to determine screen size (unless overridden)determine screen size (unless overridden)

Conclusion for Bitmap Conclusion for Bitmap Image SizesImage Sizes

What the actual size of the image on the What the actual size of the image on the screen is determined byscreen is determined by– How this is specified in the bitmap fileHow this is specified in the bitmap file– The difference between image resolution and The difference between image resolution and

screen resolutionscreen resolutionMac 72dpiMac 72dpi

Windows 96dpi or 120dpiWindows 96dpi or 120dpi

– We’ve concluded that 96dpi is the image We’ve concluded that 96dpi is the image resolution we should useresolution we should use

TextText

What type of medium is text?What type of medium is text?

StaticStatic

VisualVisual

How are the characters formed on the How are the characters formed on the computer monitor?computer monitor?

How are they stored inside the computer?How are they stored inside the computer?

Fonts - RasterFonts - Raster

Raster (or Bitmapped) FontsRaster (or Bitmapped) Fonts– Fixed pattern of dots defined for each Fixed pattern of dots defined for each

charactercharacter– Different set of patterns needed for each sizeDifferent set of patterns needed for each size– Requires lots of disk space for large fontsRequires lots of disk space for large fonts– Only widely used kind on PC till c. 1990Only widely used kind on PC till c. 1990

Fonts - VectorFonts - Vector

Vector or Outline FontsVector or Outline Fonts– Outline fonts describe each character in a font Outline fonts describe each character in a font

mathematically, , as a collection of lines and curvesmathematically, , as a collection of lines and curves– Outline fonts can be viewed and printed at any size Outline fonts can be viewed and printed at any size

(magnification) and resolution (such as screen, , (magnification) and resolution (such as screen, , printer, , or imagesetter), , and still retain their printer, , or imagesetter), , and still retain their smooth qualitysmooth quality

– Microsoft TrueType and AdobeType 1 are outline Microsoft TrueType and AdobeType 1 are outline fonts fonts

– Very compactVery compact

TrueTypeTrueType

TrueType fontsTrueType fonts– Windows and Macintosh System 7 come with Windows and Macintosh System 7 come with

a basic set of TrueType fonts as part of the a basic set of TrueType fonts as part of the systemsystem

– Windows (3.1, 9x, ME, XP, NT, 2000) and Windows (3.1, 9x, ME, XP, NT, 2000) and Macintosh System 7 include TrueType Macintosh System 7 include TrueType software, which rasterises character outlines software, which rasterises character outlines to create characters for the screen or printerto create characters for the screen or printer

Adobe Type 1 Outline Adobe Type 1 Outline FontsFonts

Type 1 fontsType 1 fonts– The Type 1 font format uses a specific subset of the The Type 1 font format uses a specific subset of the

PostScript languagePostScript language– when a PostScript printer prints a character in a Type when a PostScript printer prints a character in a Type

1 font it scales the character outline to the specified 1 font it scales the character outline to the specified size and then rasterises the outlinesize and then rasterises the outline

– Adobe Type Manager is available for Windows and Adobe Type Manager is available for Windows and Macintosh systems which rasterises Type 1 character Macintosh systems which rasterises Type 1 character outlines to create characters for the screen or non-outlines to create characters for the screen or non-Postscript printerPostscript printer

Text Text CharacteristicsCharacteristics

What characterises a particular font?What characterises a particular font?

What can you adjust when using a font?What can you adjust when using a font?– Font: a particular typeface familyFont: a particular typeface family– Style: normal, bold, italic, light, condensed, Style: normal, bold, italic, light, condensed,

extended, etc.extended, etc.– Size: in points - 72pts = 1 inch on computersSize: in points - 72pts = 1 inch on computers– ColourColour– Spacing of linesSpacing of lines– Spacing of lettersSpacing of letters

Text FilesText Files

Text/ASCII files store an indication of the Text/ASCII files store an indication of the characters that make up the document in the characters that make up the document in the appropriate sequenceappropriate sequence

WP files for various kinds store lots of extra WP files for various kinds store lots of extra informationinformation– Typeface, style, size, colourTypeface, style, size, colour– Document layoutDocument layout– Program specific & document specific options, etc.Program specific & document specific options, etc.

RTF files usually used for interchangeRTF files usually used for interchange

FontsFonts

Font designs have their origins in book Font designs have their origins in book production not on-screen viewingproduction not on-screen viewing

Small font sizes reproduce poorly on-screenSmall font sizes reproduce poorly on-screen

Some fonts have been designed especially Some fonts have been designed especially for the screen:for the screen:– Georgia –Georgia –– Trebuchet Trebuchet – TahomaTahoma– VerdanaVerdana

Fonts 2Fonts 2

Some fonts are versions of old designsSome fonts are versions of old designsSome fonts are “new” designs that are now rather Some fonts are “new” designs that are now rather

old old Some fonts imitate handwriting Some fonts imitate handwriting Some font are heavy – they give the impression of Some font are heavy – they give the impression of

dark grey when use for whole paragraphsdark grey when use for whole paragraphsSome font are light – they look a lighter grey when Some font are light – they look a lighter grey when

use for whole paragraphsuse for whole paragraphsSerif fontsSerif fontsSans-Serif fontsSans-Serif fontsChoose your font, its size and style with careChoose your font, its size and style with care

Preparation of Preparation of TextText

Long DocumentsLong Documents

Short Documents – Headings, Instructions, Short Documents – Headings, Instructions, etc.etc.

Component of Information - Label or Marker Component of Information - Label or Marker on Illustration or Mapon Illustration or Map

However, text may be importedHowever, text may be imported– usable formats must be known and specifiedusable formats must be known and specified– but sizing, , colour and style may have to be but sizing, , colour and style may have to be

applied after importapplied after import

MM File FormatsMM File Formats

The only restrictions are those of the The only restrictions are those of the authoring package and the client systemauthoring package and the client system

If the fonts are retained as vector type If the fonts are retained as vector type specifications the fonts used must be on specifications the fonts used must be on the client systemthe client system

If they have been rendered as bitmaps the If they have been rendered as bitmaps the fonts on the client system don’t matterfonts on the client system don’t matter

MM file formats 2MM file formats 2

However, during the creation process for the However, during the creation process for the individual media elements the form of the individual media elements the form of the typeface is relevant typeface is relevant – most Windows programs will use True-type most Windows programs will use True-type

fontsfonts– some will also use Postscript fontssome will also use Postscript fonts

WWW File WWW File formatsformats

Web browsers use vector fontWeb browsers use vector font

Thus the fonts used must be on the client Thus the fonts used must be on the client systemsystem

If they have been rendered as bitmaps within If they have been rendered as bitmaps within images, , animations or video sequences the images, , animations or video sequences the fonts on the client system don’t matterfonts on the client system don’t matter

Remember only GIF, , JPEG and PNG image Remember only GIF, , JPEG and PNG image formats are supported on the WWWformats are supported on the WWW– PNG support is currently poorPNG support is currently poor

MM Authoring MM Authoring PackagePackage

Flash will only import text for editing from the Flash will only import text for editing from the clipboardclipboard

Flash can create and colour text and set its Flash can create and colour text and set its attributesattributes

Director will import:Director will import:– Text: TXT, RTF, ASCIIText: TXT, RTF, ASCII

no colour info. imported – colour can be altered in no colour info. imported – colour can be altered in DirectorDirector

Director will create and colour:Director will create and colour:– TextText

WWW PagesWWW Pages

Fonts are specifiable within a web pages but Fonts are specifiable within a web pages but the latest method is to use CSSthe latest method is to use CSS

Text font can be specified using:Text font can be specified using:– <FONT FACE=“Georgia”><FONT FACE=“Georgia”>

Size can be specified using:Size can be specified using:– <FONT SIZE=5> for example<FONT SIZE=5> for example

Text can be arranged using various tagsText can be arranged using various tags

Heading TagsHeading Tags– <H1> and </H1> to <H6> and </H6><H1> and </H1> to <H6> and </H6>