Text and ImageSession 02 & 03

Subject : L0182 / Web & Animation Design

Year : 2009

Bina Nusantara

Learning Outcomes

Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu :•Menunjukkan penggunaan Text dan Image pada Aplikasi Multimedia•Mengedit Text dan Image menggunakan Adobe Photoshop CS3

Bina Nusantara

Course Outlines

• Definisi• Efek pada Fonts• Bitmap dan Vector Images• Kelebihan dan Kekurangan dalam Penggunaan Images• Apa Itu Photoshop• Workspace• Tools Palette• Option Bar• Membuat Image Baru• Membuka file Image• Image Resolution dan Resizing• Image Transform

Bina Nusantara

Text

• Text adalah bentuk dari kata, kalimat dan paragraf yang digunakan untuk mengkomunikasikan pikiran, ide dan fakta dalam hampir setiap aspek kehidupan.

• Elemen-elemen Text :– Karakter Alfabet : A – Z– Angka : 0 – 9– Karakter special : Tanda baca[. , ; ‘ …] , Tanda atau Simbol [* &^

% $ £ ! /\ ~ # @ .…]

• Produk Multimedia bergantung pada text pada banyak hal :– Untuk menjelaskan bagaimana produk multimedia bekerja– Memandu user dalam menavigasi dalam produk multimedia– Menyampaikan informasi sebagaimana tujuan produk dirancang

Bina Nusantara

Typefaces dan Fonts

• Typefaces : keluarga karakter grafik yang biasanya memungkinkan ukuran dan style yang berbeda.

• Fonts : Sekumpulan karakter dengan ukuran dan style yang sama untuk suatu typeface tertentu.

Ascender : garis tambahan di atas pada sebuah karakter Descender : garis tambahan di bawah pada sebuah karakter Leading : spasi di atas dan di bawah font atau Line spacing Tracking : spasi antara karakter Kerning : spasi antar sepasang karakter, biasanya berupa

overlap untuk memperbaiki penampilan

Bina Nusantara

Tracking, Kerning, dan Leading

AvUnkerned

vAKerned

Reading Line OneReading Line One

Reading Line OneReading Line OneLeading

Bina Nusantara

Efek pada Fonts• Beberapa efek sangat berguna untuk menarik perhatian

pembacapada konten :– Case : HURUF BESAR (UPPER) dan huruf kecil (lower)

– Bold, Italic, Underline, superscript atau subscript

– Embossed Embossed atau ShadowShadow

– CCoolloouurrss

• Font Anatomy

I D xhpBaseline

Serif

Shoulder

Counter

Mean line

Ascender

DescenderSet

width

X-height

Cap height

Point size

Bina Nusantara

• Kelebihan– Relatif murah (mudah) untuk dibuat/dihasilkan– Mempresentasikan ide abstrak secara efektif– Menjelaskan media lain– Menjaga kerahasiaan– Mudah dirubah atau di-update

• Kekurangan– Kurang mudah diingat daripada media lain– Membutuhkan perhatian lebih dari user daripada media lain– Terkadang digunakan secara berlebihan

Kelebihan dan Kekurangan Penggunaan Text

Bina Nusantara

• Image suatu representasi visual dari beberapa informasiyang dapat ditampilkan di layar komputer atau tercetak

• Images dapat tampil dalam format yang :– Foto (Photographs)– Lukisan (Paintings)– Peta (Maps), dll.

Image

Bina Nusantara

• Images secara umum dapat dibagi menjadi 2 format :- Bitmap atau Raster Image- Draw-type atau Vector graphics atau Metafile images

• Suatu bitmap adalah suatu data matriks yang mendeskripsikan karakteristik dari semua pixel yang membentuk suatu image.

• Suatu grafik vector adalah pembuatan image digital melalui urutan perintah atau pernyataan matematika yang memposisikan lines dan shapes dalam ruang 2D atau 3D

Tipe-Tipe Image

Bina Nusantara

Bitmap Images

• Setiap pixel dalam image berisi informasi warna yang ditampilkan. Setiap pixel menampilkan warna yang spesifik dan setiap pixel dapat menampilkan dua atau lebih jenis warna.

• Jenis warna yang dapat ditampilkan suatu pixel dikenal sebagai colour depth. Colour depth diukur dalam bits per pixel.

• Semakin banyak warna per pixel maka semakin besar ukuran file

• Bitmap images dapat memiliki resolusi tertentu dan tidak dapat di-resize tanpa kehilangan kualitas image.

• Format umum untuk bitmap-based adalah JPEG, GIF, TIFF, PNG, PICT, and BMP.

Bina Nusantara

Bitmaps images

Original imageOriginal image

Shown Shown magnifiedmagnified

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

– Cukup bagus untuk image berwarna

• 16 bits per pixel = 65536 colours– Kualitas lebih bagus untuk foto

dan biasa dikenal sebagai high colour

• 24 bits per pixel =>16 million possible colours– Digunakan untuk membuat

photo realistic images, juga dikenal sebagai true colour

• Width dari images diukur dalam pixels

• Height dari images diukur dalam pixels

• Colour depth adalah jumlah bit yang digunakan untuk warna, diukur dalam bits per pixel

• Ingat:

– 1024 bytes = 1 kilobyte (KB)

– 1024 kilobytes = 1 megabyte (MB)

8bytesinsize

depthcolourheightwidth

Bina Nusantara

Kelebihan dan KekuranganPenggunaan Bitmap Images

• Kelebihan– Menampilkan detil informasi dengan cepat– Real life

• Kekurangan– Bergantung pada resolusi– Berpengaruh pada kualitas image – Ukuran file besar

True Colour (24 bits)8 bits4 bits1 bit

Bina Nusantara

Vector Images• Vector images disimpan dalam bentuk kumpulan graphic

primitives yang dibutuhkan untuk menampilkan image

• Suatu graphic primitive adalah grafik sederhana berbasiskan drawing elements atau objects seperti shape dan terdiri dari sekumpulan perintah (persamaan matematika)– Contoh : square, line, ellipse, arc, etc.

• Setiap primitive object memiliki atribut yang bervariasi yang akan membentuk keseluruhan image– Contoh : x-y location, fill colour, line colour, line style, etc.

• Vector image atau vector graphics dapat di-resize tanpa kehilangan integritas dari original image.

• Format umum untuk vector-based : WMF, SVG, CGM, PS, PDF, DFX, and EPF.

Bina Nusantara

Scaling Vector Images

Original imageOriginal image

V e c t o rg r a p h i c s

ShownShownmagnifiedmagnified

V e c t o rg r a p h i c s

Bina Nusantara

Kelebihan dan KekuranganPenggunaan Vector Images

• Kelebihan– Data yang dibutuhkan untuk menampilkan image relatif kecil.– Karena itu, tidak membutuhkan memory yang besar untuk

menyimpan– Mudah dimanipulasi

• Kekurangan– Level detil yang dapat ditampilkan dalam image sangat terbatas

Bina Nusantara

Bitmap dan Vector Images

Vector Images

Bitmap Images

Bina Nusantara

Kelebihan dan Kekurangan Penggunaan Images

• Kelebihan– Menampilkan banyak informasi dengan cepat– Menambah simulasi dan warna visual– Dapat berkomunikasi tanpa ada batasan bahasa– Memperkaya media lain

• Kekurangan– Tidak menyediakan penjelasan mendalam

• Graphics jarang dapat menampilkan pesan secara keseluruhan dalam hal bisnis, teknikal atau aturan keselamantan.

– Dapat disalahartikan• Graphics seharusnya digunakan dengan hati-hati untuk memastikan

pesan yang disampaikan tidak ambigu atau cryptic.

Bina Nusantara

Photoshop

• Adobe Photoshop adalah sebuah paket software untuk meng-edit image profesional yang dapat digunakan baik oleh para ahli dan juga orang awam

Bina Nusantara

Workspace

• Workspace Adobe Photoshop CS3 diatur untuk membantu pengguna untuk fokus pada pembuatan dan peng-edit-an image.

• Workspace meliputi menu dan berbagai macam tools dan palette untuk mem-view, meng-edit, dan menambahkan elemen pada image

• .

Bina Nusantara

Workspace (cont..)

Default Photoshop workspace :

A. Document window

B. Dock Panels yang ditampilkan dalam bentuk icons

C. Judul Panel

D. Menu bar

E. Options bar

F. Tools palette

G. Mengubah ke bentuk tombol Icons

H. Tiga palette (panel) groups dalam vertical dock

Bina Nusantara

Tools Palette

• Tools dikelompokkan menjadi 4 kategori :– Selection : gunakan tools ini untuk memilih object.– Creative : gunakan tools ini untuk menggambar object dan

retouch photos.– Vector : gunakan tools untuk bekerja dengan vector.– Navigation dan Information : gunakan tools ini untuk mem-view

halaman dan mengumpulkan informasi.

Bina Nusantara

Bina Nusantara

Bagaimana Menggunakan Sebuah Tool

• Jika ada sebuah segitiga kecil pada sudut kanan bawah sebuah tool, tahan tombol dengan mouse untuk melihat hidden tool. Lalu pilih tool yang diinginkan.

• Menggunakan ToolsA. Tools palette

B. Active tool

C. Hidden tools

D. Nama Tool

E. Tool shortcut

F. Segitiga hidden tool

Bina Nusantara

Option Bar

• Option bar memperlihatkan pilihan dari tool yang aktif• .

Bina Nusantara

Membuat Image Baru

• Pilih : File > New

Bina Nusantara

Membuka Sebuah Image

• Pilih : File > Open• Pilih file yang ingin

dibuka • Klik open

Bina Nusantara

Resolusi dan Me-resize Image

• Pilih : Image > Image Size• Ubah nilai width & height

untuk me-resize image.• Ubah nilai resolution untuk

mengubah resolusi image

Bina Nusantara

Image Transform

• Image transform :– Scale– Rotate– Skew– Distort– Perspective– Warp

• Langkah :– Pilih image yang ingin ditransform– Pilih : edit > transform– Pilih metode transform yang diinginkan

Bina Nusantara

Rotate

Bina Nusantara

Warp