Text and Image Session 02 & 03 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara Learning Outcomes At the end of this session, the students will be able to : Show how to use Text and Image on multimedia application Edit Text and Image using Adobe Photoshop CS3 tools

Bina Nusantara Course Outlines Definition Fonts effects Bitmap and Vector Images Advantages and Disadvantages of Using Text and Images What is Photoshop Workspace Tools Palette Option Bar Create a New Image Open an Image Image Resolution and Resizing Image Transform

Bina Nusantara Text Text is the form of words, sentences and paragraphs is used to communicate thoughts, ideas and facts in nearly every aspect of our lives. Text elements : –Alphabet characters : A - Z –Numbers : –Special characters : Punctuation [., ; ‘ …], Sign or Symbols [* & ^ % $ £ ! /\ ~ Multimedia products depends on text for many things : –To explain how the multimedia products work –To guide the user in navigating through the multimedia products –To deliver the information for which the multimedia products was designed

Bina Nusantara Typefaces and Fonts Typefaces : a family of graphics characters that usually includes may type sizes and styles. Fonts : a collection of characters of a single size and style belonging to a particular typeface family.  Ascender: an upstroke on a character  Descender: the down stroke below the baseline of a character  Leading : spacing above and below a font or Line spacing  Tracking: spacing between characters  Kerning: space between pairs of characters, usually as an overlap for improvement appearance

Bina Nusantara Tracking, Kerning, and Leading Av Unkerned vA Kerned Reading Line One Leading

Bina Nusantara Fonts Effects A numbers of effects that are useful for bringing viewer’s attention to content : –Case : UPPER and lower letter –Bold, Italic, Underline, superscript or subscript –Embossed Shadow –Embossed or Shadow –Colours Font Anatomy

Bina Nusantara Advantages –Is relatively inexpensive to produce –Present abstract ideas effectively –Clarifies other media –Provides confidentiality –Is easily changed or updated Disadvantages –Is less memorable than other visual media –Requires more attention from the user than other media –Can be cumbersome Advantages and Disadvantages of Using Text

Bina Nusantara Image is a visual representation of some information that can be displayed on a computer screen or printed out. Images come in a variety of forms : –Photographs –Paintings –Maps, etc. Image

Bina Nusantara Images can be generally divided into two formats : –Bitmap or Raster images –Draw-type or Vector graphics or Metafile images A bitmap is a data matrix that describes the characteristics of all the pixels making up an image. A vector graphics is the creation of digital images through a sequence of commands or mathematical statements that place lines and shapes in a given two- dimensional or three-dimensional space. Image Types

Bina Nusantara Bitmap Images Each pixel in the image contains information about the color to be displayed. Each pixel can be in a specific colour and each pixel consists of two or more colours. The range of these colours is known as the colour depth. Colour depth is measured in bits per pixel. More colour per pixel  bigger image size Bitmap images have a fixed resolution and cannot be resized without losing image quality. Common bitmap-based formats are JPEG, GIF, TIFF, PNG, PICT, and BMP.

Bina Nusantara Bitmaps images Original image Shownmagnified

Bina Nusantara Colour Depth 1 bit per pixel = 2 colours (monochrome) 2 bits per pixel = 4 colours 4 bits per pixel = 16 colours 8 bits per pixel = 256 colours –Generally good enough for colour images 16 bits per pixel = colours –Better quality for photograph- like images, also known as high colour 24 bits per pixel =>16 million possible colours –Used to recreate photo realistic images, also known as true colour Width of the images measured in pixels Height of the images measured in pixels Colour depth is the number of bits used for color measured in bits per pixel Remember: –1024 bytes = 1 kilobyte (KB) –1024 kilobytes = 1 megabyte (MB)

Bina Nusantara Advantages and Disadvantages of Using Bitmap Images Advantages –Convey detail of information quickly –Real life Disadvantages –Depend on a Resolution –Effect to the image quality –Size file is big True Colour (24 bits) 8 bits 4 bits1 bit

Bina Nusantara Vector Images Vector images are stored as the set of graphic primitives required to represent the image A graphic primitive is a simple graphic based on drawing elements or objects such as shape and consists of a set of commands (mathematical equations) –e.g. square, line, ellipse, arc, etc. Each primitive object has various attributes that go to make up the entire image –e.g. x-y location, fill colour, line colour, line style, etc. Vector image or vector graphics can be resized without losing the integrity of the original image. Common bitmap-based formats are WMF, SVG, CGM, PS, PDF, DFX, and EPF.

Bina Nusantara Scaling Vector Images Original image Shownmagnified

Bina Nusantara Advantages and Disadvantages of Using Vector Images Advantages –Relatively small amount of data required to represent the image. –Therefore, it does not required a lot of memory to store –Easier to manipulate Disadvantages –Limited level of detail than can be presented in an image

Bina Nusantara Bitmap and Vector Images  Vector Images  Bitmap Images

Bina Nusantara Advantages and Disadvantages of Using Images Advantages –Convey a lot of information quickly –Add visual simulation and colour –Can communicate across language borders –Enhance other media Disadvantages –Do not provide in-depth explanations Graphics rarely suffice to convey a whole message in business, technical or safety settings –Can be misinterpreted Graphics should be used carefully to make sure the message is not ambiguous or cryptic

Bina Nusantara Photoshop Adobe Photoshop is a professional image editing software package that can be used by experts and novices alike.

Bina Nusantara Workspace The Adobe Photoshop CS3 workspace is arranged to help you focus on creating and editing images. The workspace includes menus and a variety of tools and palettes for viewing, editing, and adding elements to your images.

Bina Nusantara Workspace (cont..) Default Photoshop workspace : A. Document window B. Dock of panels collapsed tob icons C. Panel title bar D. Menu bar E. Options bar F. Tools palette G. Collapse To Icons button H. Three palette (panel) groups in vertical dock

Bina Nusantara Tools Palette The tools are grouped into four categories : –Selection : use these tools to select objects. –Creative : Use these tools to draw objects and retouch photos. –Vector : Use these tools to work with vectors. –Navigation and Information : Use these tools tot view the page and gather information.

Bina Nusantara

How to Use a Tool If there is a small triangle at a tool’s lower right corner, hold down the mouse button to view the hidden tools. Then click the tool you want to select. Using the selecting tools A. Tools palette B. Active tool C. Hidden tools D. Tool name E. Tool shortcut F. Hidden tool triangle

Bina Nusantara Option Bar Option bar displays options for the active (selected) tool.

Bina Nusantara Create a New Image Choose File > New

Bina Nusantara Open an Image Choose File > Open Browse the file you want to open Click open

Bina Nusantara Image Resolution & Resizing Choose Image > Image Size Change the width & height value to resize the image. Change the resolution value to change the image resolution.

Bina Nusantara Image Transform Image transform : –Scale –Rotate –Skew –Distort –Perspective –Warp Step : –Select the image you want to transform –Go to edit > transform –Choose the transform method you want to apply

Bina Nusantara Rotate

Bina Nusantara Warp