Subject
Year
: L0182 / Web & Animation Design
: 2009
Text and Image
Session 02 & 03
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 : 0 - 9
– 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
Descender
Leading
Tracking
Kerning
: an upstroke on a character
: the down stroke below the baseline of a character
: spacing above and below a font or Line spacing
: spacing between characters
: space between pairs of characters, usually as an overlap
for improvement appearance
Bina Nusantara
Tracking, Kerning, and Leading
Av Av
Unkerned
Leading
Bina Nusantara
Kerned
Reading Line One
Reading Line One
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 or Shadow
Colours
• Font Anatomy
Serif
Mean line
I D xhp
Ascender
Point
size
Cap
height
X-height
Baseline
Shoulder
Bina Nusantara
Counter
Set
width
Descender
Advantages and Disadvantages of Using Text
• 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
Bina Nusantara
Image
• 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.
Bina Nusantara
Image Types
• 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 twodimensional or three-dimensional space.
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
Shown
magnified
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 = 65536 colours
– Better quality for photographlike 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
Bina Nusantara
size in bytes 
•
•
•
•
width  height  colour depth
8
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)
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
1 bit
Bina Nusantara
4 bits
8 bits
True Colour (24 bits)
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
Shown
magnified
Original image
V e c to r
g r a p h ic s
V e c to r
g r a p h ic s
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 :
–
–
–
–
Bina Nusantara
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
Bina Nusantara