MODUL PEMBELAJARAN MPV PRODUKSI MULTIMEDIA T4

utama. Menu merupakan susunan butang yang mengawal drop down
yang mengandungi perintah untuk menjalankan fitur tertentu pada
sesebuah aplikasi. Menu boleh disusun secara menegak (vertical)atau
mendatar (horizontal) yang berisi daftar menu yang tersedia untuk
program tertentu. Dalam program Windows, menu bar biasanya
terletak di bahagian atas atau bahagian tepi tetingkap layar yang
terbuka.

4. Navigasi
- Navigasi teks adalah teks yang mengandungi pautan kepada sumber
lain yang mengandungi maklumat berkaitan dengan menekan satu
atau lebih perkataan yang bergaris atau berwarna. Ia sering kali diwakili
oleh teks bergaris yang berwarna biru.

Rajah 2.1: Contoh teks dalam persembahan multimedia

Petunjuk:
1. Tajuk
2. Kandungan (body)
3. Menu
4. Navigasi

40

Rajah 2.2: Contoh teks dalam persembahan multimedia
41

AKTIVITI

BAHAN DAN PERALATAN
1. Sumber Internet
2. Komputer Multimedia

TUGASAN 1 (BERKUMPULAN)
1. Membuat kajian tentang elemen teks.

* Guru digalakkan menggunakan pelbagai kaedah PdPc
abad ke-21.

LANGKAH KERJA

1. Murid mendapatkan maklumat tentang fungsi teks dalam persembahan
multimedia dari World Wide Web(WWW)

2. Murid membentangkan hasil tugasan.

* Guru digalakkan menggunakan pelbagai kaedah PdPc abad ke-21.

42

PENILAIAN

1. Namakan fungsi teks dalam persembahan multimedia di bawah:

43

LAPORAN PENCAPAIAN MURID

Nama Murid:
Tahun:
Kelas

Standard 2.1 Pengenalan kepada teks

Kandungan:

Standard 2.1.1 Menjelaskan fungsi teks dalam persembahan

Pembelajaran: multimedia sebagai :

(i) Tajuk

(ii) Kandungan (body)

(iii) Menu

(iv) Navigasi

Bil Perkara yang dinilai Pencapaian Catatan
1 Mengenal pasti fungsi teks.
Terampil Belum
Terampil

KEPUTUSAN (CAPAI / TIDAK CAPAI)
TARIKH

Nama Guru: Tandatangan &
Disahkan oleh: Tarikh

Tandatangan &
Tarikh

44

MODUL 2.1B

Standard 2.1 Teks dan Reka Letak
kandungan:
Standard 2.1.2 Menerangkan definisi muka taip dan fon
pembelajaran: 2.1.3 Membezakan jenis muka taip :
(i) Serif
Objektif 2.1.4 (ii) Sans Serif
Pembelajaran (iii) Script
(iv) Dekoratif
Masa: Menyunting muka taip dengan membuat
penetapan format teks dari aspek :
(i) Jenis fon
(ii) Saiz fon
(iii) Gaya fon
(iv) Jarak fon
(v) Cases
(vi) Warna
(vii) Kesan Khas

1. Menyatakan jenis muka taip teks

2. Membezakan jenis muka taip teks
o Serif
o Sans Serif
o Script
o Dekoratif

3. Membuat suntingan dengan membuat penetapan

format teks:
o Jenis fon
o Saiz fon
o Gaya fon
o Jarak fon
o Cases
o Kesan Khas

8 jam

45

NOTA RUJUKAN

2.1.2 DEFINISI MUKA TAIP DAN FON

Muka taip merupakan sekumpulan aksara grafik yang biasanya terdiri dalam
pelbagai bentuk dan saiz. Setiap muka taip ini mempunyai bentuk paparan yang
berbeza dan menjadikan setiap satunya unik. Muka taip biasanya boleh dikenali
berdasarkan nama-nama khas yang diberikan kepadanya. Times New Roman,
Arial, Helvetica, Courier dan Tahoma misalnya merupakan contoh-contoh muka
taip yang sedia ada dalam kebanyakan sistem komputer.

2.1.2 JENIS-JENIS MUKA TAIP

Muka taip boleh dikategorikan berdasarkan bentuk atau muka paparannya.
Terdapat banyak kategori muka taip yang ada dan jenisnya sentiasa
berkembang selari dengan peredaran dan juga keperluan semasa. Berikut
merupakan sebahagian daripada jenis muka taip yang utama :

• Serif
• Sans Serif
• Script
• Dekoratif

Serif

Serif merujuk kepada garisan lengkungan atau ekor yang terdapat pada
penghujung sesuatu aksara. Oleh yang demikian, muka taip jenis serif merujuk
kepada muka taip yang mempunyai lengkungan atau ekor di bahagian
hujungnya. Lengkungan atau ekor ini dikatakan dapat membantu dalam
menyediakan keselesaan dalam proses pembacaan. Times New Roman, New
Century, SchoolBook dan Administer merupakan contoh muka taip jenis serif.

Times New Roman

Century

Garamond

Arabic Tysetting

Rajah 2.3: Contoh muka taip Serif

46

Sans Serif

Perkataan sans bermakna “tanpa” (without) dalam bahasa Perancis,
maka muka taip sans serif bermakna muka taip yang tidak mempunyai serif atau
tanpa serif. Dalam erti kata lain, muka taip jenis sans serif merujuk kepada muka
taip yang tidak mempunyai ekor atau lengkungan dihujungnya. Arial, Futura,
Impact, Myriad dan Tahoma merupakan contoh muka taip jenis sans serif.

Text

Rajah 2.4: Contoh muka taip Sans Serif

Script

Script ialah muka taip yang menyerupai tulisan tangan yang bersambung.
Biasanya Script digunakan dalam aktiviti tidak formal seperti kad jemputan dan
kad ucapan. Contoh muka taip Script ialah Becca & Berry, Moonbright, Brush
Script MT dan Edwardian Script.

Becca & Berry Moonbright

Brush Script MT Edwardian Script

Rajah 2.5: Contoh muka taip Script

47

Dekoratif

Muka taip dekoratif dihiasi hiasan dan gaya. Lazimnya, muka taip ini di
gunakan dalam bidang pengiklanan. Namun ianya tidak sesuai digunakan
untuk teks bacaan. Muka taip ini turut digunakan sebagai tajuk yang ringkas.
Contoh muka taip dekoratif ialah Jokerman dan Chiller.

Jokerman Chiller

Rajah 2.6: Contoh muka taip dekoratif

Muka taip selalunya terdiri daripada huruf-huruf, angka-angka, dan tanda
baca. Manakala fon merupakan satu koleksi aksara yang mempunyai gaya
serupa yang dimiliki oleh sekumpulan muka taip. Sebagai contoh, jenis fon yang
biasa ialah regular, bold, italic, underline dan sebagainya juga merupakan
kumpulan fon yang terdapat dalam muka taip. Dalam tipografi digital, kedua-
dua istilah ini boleh membawa maksud yang sama.

Satu perbezaan wajar yang masih wujud antara fon dan muka taip ialah
sebuah fon boleh mewakili satu ahli khas bagi sebuah keluarga taip seperti
regular, bold atau italic, saiz tertentu, manakala muka taip mewakili penampilan
visual atau gaya, berkemungkinan daripada sebuah set fon yang berkaitan.
Sebagai contoh, sebuah muka taip seperti Arial mungkin menggunakan fon
regular, bold dan italic.

Rajah 2.7: Contoh jenis fon

48

2.1.4 FORMAT TEKS

Dalam penghasilan produk multimedia, penetapan format fon yang betul akan
memberi kesan yang terbaik dalam menyampaikan mesej dengan lebih
berkesan. Berikut adalah antara penetapan fon yang digunakan dalam mereka
bentuk teks dalam persembahan multimedia.

Saiz Fon

Penentuan saiz teks merupakan sesuatu yang agak subjektif kerana dalam
banyak keadaan muka taip yang berlainan akan dipaparkan dalam saiz yang
agak berbeza walaupun mempunyai ukuran saiz yang sama. Sebagai contoh,
saiz teks yang menggunakan muka taip Tunga tidak sama dengan muka taip
Verdana walaupun mempunyai nilai saiz yang sama

Tunga Verdana

MULTIMEDIA MULTIMEDIA

Rajah 2.8: Paparan muka taip Tunga dan Verdana dengan nilai saiz yang sama

Gaya Fon

Gaya fon biasanya digunakan dalam persembahan untuk memberi
penekanan kepada sesuatu kandungan teks. Antara gaya fon yang kerap
digunakan ialah:

• Bold BOLD
• Italics Italics
• Underline Underline
• Strikethrough Strikethrough
• Superscript Superscript2
• Subscript Subscript2

49

Jarak Fon

Kerning adalah jarak antara abjad supaya muka taip tidak bercantum
antara satu dengan yang lain. Percantuman muka taip akan memberikan kesan
kepada proses pembacaan ayat atau perenggan. Muka taip yang berasaskan
Serif lebih cenderung menghadapi masalah ini jika saiz Kerning adalah terlalu
kecil. Antara muka taip yang dikenal pasti bermasalah adalah seperti W, V, Y, T,
L dan F.

Jadual 2.1: Contoh-contoh kerning

Format Paparan
Normal Kerning
Kerning
20% Kerning
40%

Leading adalah jarak antara baris ayat. Leading bertujuan untuk
memudahkan pembacaan terutamanya untuk bahan bercetak seperti majalah,
buku dan poster. Penggunaan leading yang sesuai dapat memastikan ruang
yang wujud antara baris akan memberikan keselesaan kepada mata. Rajah 2.9
menunjukkan contoh jarak antara baris (leading).

Rajah 2.9: Contoh jarak antara baris (leading)
50

Cases

Penggunaan Cases turut perlu dititikberatkan. Kesilapan penggunaan
cases akan menyebabkan teks sukar untuk dibaca. Berikut adalah format bagi
Cases:

Jadual 2.2: Format Cases

Format Huraian
Lower case
Title case Aksara huruf kecil
Small Caps
Setiap perkataan bermula dengan huruf besar
All Caps
Semua huruf besar. Aksara pertama setiap
perkataan lebih tinggi saiznya.

Semua huruf besar yang sama saiz.

Kesan Khas

Kesan khas teks dapat menimbulkan kesan dramatik dalam persembahan
multimedia. Namun tidak semua perisian mempunyai fitur kesan khas ini.

Jadual 2.3: Contoh kesan khas pada teks

Kesan Penerangan Contoh
khas

Shadow Fon yang mempunyai
kesan bayang

Bevel Fon yang mempunyai
Emboss
kesan yang menyerupai

huruf 3-dimensi.

Fon yang mempunyai
kesan seolah-olah ia diukir
sebagai unjuran daripada
latar belakang rata.

51

AKTIVITI

BAHAN DAN PERALATAN

1. Perisan MS Word
2. Perisian MS Powerpoint
3. Bahan Media Cetak / Elektronik

TUGASAN 1

Murid meneroka jenis muka taip yang digunakan dalam media
cetak dan elektronik.

LANGKAH KERJA

1. Murid menyatakan jenis muka taip serta format yang digunakan.

TUGASAN 2

Murid menerokai muka taip dan fon yang terdapat dalam
perisian aplikasi (contohnya : MS Word, MS Powerpoint). Murid
mengaplikasikan pengetahuan dengan membuat penetapan
format muka taip dan fon bagi dua slaid persembahan
multimedia berasaskan teks yang belum disunting (Contoh : e-
majalah)

*Guru menyediakan dua slaid yang mengandungi teks yang belum disunting

LANGKAH KERJA

1. Murid mengenal pasti fon dan muka taip yang terdapat dalam perisian
(contoh MS Word)

2. Murid menyatakan fon bagi muka taip tersebut.
3. Murid menerangkan perbezaan antara jenis muka taip.
4. Murid menyunting slaid persembahan tersebut dengan membuat

penetapan format muka taip dan fon.

52

PENILAIAN

1. Nyatakan 3 jenis muka taip, lukiskan contohnya dan namakan muka taip
tersebut.

Jenis muka taip

Lakaran contoh
muka taip

Contoh muka taip

2. Terangkan muka taip dan fon beserta contohnya.

Muka taip Fon

3. Nyatakan format teks (v) ………………………………..
(vi) ………………………………..
(i) ……………………………….. (vii) ………………………………..
(ii) ……………………………….. (viii) ………………………………..
(iii) ………………………………..
(iv) ………………………………..

53

AKTIVITI

BAHAN DAN PERALATAN
1. Perisan MS Powerpoint
2. Aplikasi multimedia (cth: CD Pembelajaran Interaktif) / Laman sesawang.

TUGASAN 3

Guru menyediakan satu contoh persembahan multimedia
berasaskan teks. Murid diminta untuk membuat analisis dan
penilaian tentang penggunaan muka taip dan fon yang
terdapat dalam aplikasi tersebut serta memberikan cadangan
penambahbaikan.

LANGKAH KERJA

1. Guru memaparkan contoh aplikasi multimedia (CD pembelajaran)
2. Murid menilai persembahan multimedia tersebut berdasarkan

penggunaan jenis muka taip, format fon, fungsi dan penggunaan teks
yang efektif dalam persembahan tersebut serta memberi cadangan
penambah baikan penggunaan teks.

54

PENILAIAN

Berdasarkan paparan antara muka di atas, nyatakan pandangan anda tentang
penggunaan teks berdasarkan kesesuaian:
Nama
Produk
Fungsi
Produk
Sasaran
Pengguna

55

LAPORAN PENCAPAIAN MURID

Nama Murid:
Tahun:
Kelas

Standard 2.1 Pengenalan kepada teks
Kandungan:
Standard 2.1.2 Menerangkan definisi muka taip dan fon
Pembelajaran: 2.1.3 Membezakan jenis muka taip :

2.1.4 (i) Serif
(ii) Sans Serif
(iii) Script
(iv) Dekoratif
Menyunting muka taip dengan membuat
penetapan format teks dari aspek :
(i) Jenis fon
(ii) Saiz fon
(iii) Gaya fon
(iv) Jarak fon
(v) Cases
(vi) Warna
(vii) Kesan Khas

Bil Perkara yang dinilai Pencapaian Catatan
Terampil Belum
1 Menentukan kesesuaian
penggunaan muka taip teks dalam Terampil
aplikasi multimedia.

2 Menghasilkan satu karya atau produk
multimedia bertema secara rasional.

KEPUTUSAN (CAPAI / TIDAK CAPAI)
TARIKH Tandatangan & Tarikh

Nama Guru:

Disahkan oleh: Tandatangan &
Tarikh

56

MODUL 2.1C

Standard 2.1 Teks dan Reka Letak
kandungan:
Standard 2.1.5 Memberi justifikasi kesesuaian penggunaan teks
pembelajaran: berdasarkan fungsi dalam penghasilan karya atau
2.1.6 produk multimedia berasaskan teks.
Objektif 2.1.7 Merancang reka letak teks dalam penghasilan
Pembelajaran karya atau produk multimedia berasaskan teks.
Menghasilkan karya berasaskan teks mengikut
Masa: keperluan produk.

1. Membuat kajian reka letak teks berdasarkan tema.
2. Mencadangkan reka letak teks dan penggunaan

muka taip.
3. Menghasilkan karya kreatif persembahan multimedia

berasaskan teks.
4. Membuat justifikasi kesesuaian penggunaan teks

berdasarkan pengguna sasaran dan produk

8 jam

57

NOTA RUJUKAN

2.1.5 PENGGUNAAN MUKA TAIP DALAM APLIKASI MULTIMEDIA

Bagi memastikan teks yang digunakan dalam sesuatu persembahan multimedia
dapat memainkan peranannya dengan lebih berkesan, beberapa faktor perlu
diberi perhatian. Antaranya, ialah jumlah teks yang patut diletakkan pada setiap
skrin atau pada setiap baris, format atau bentuk paparan teks, jarak langkau,
pemilihan warna yang digunakan dan sebagainya terhadap pengguna sasaran,
produk juga fungsinya.

Sekiranya pengguna sasaran adalah golongan kanak-kanak, teks yang
digunakan adalah lebih sesuai diminimumkan untuk mengelakkan kebosanan.
Muka taip dan fon yang digunakan pula perlulah bersesuaian seperti
menggunakan kategori muka taip sans serif dan tidak menggunakan kategori
muka taip dekoratif kerana ianya akan menyukarkan kanak- kanak untuk
membaca. Saiz teks pula perlulah lebih besar berbanding saiz teks yang biasa
digunakan oleh golongan dewasa. Warna yang digunakan mestilah menarik,
berwarna warni dan menonjolkan keseronokan.

Rajah 2.10 : Contoh teks untuk golongan kanak-kanak

58

Penggunaan teks untuk produk multimedia yang berbeza juga mempunyai
kesesuaian yang tertentu. Sebagai contoh produk multimedia yang
dipersembahkan secara elektronik (seperti aplikasi multimedia atau laman
sesawang), seboleh mungkin penggunaan teks haruslah diminimumkan
melainkan aplikasi yang dibina menggandungi bahan rujukan yang banyak dan
menyeluruh. Membaca teks yang dipaparkan pada skrin komputer agak sukar
dan meletihkan sekiranya ianya disediakan dalam kuantiti yang banyak.

Pemilihan kategori muka taip bagi bahan bacaan elektronik adalah agak
berbeza dengan bahan bacaan dalam bentuk bercetak. Persembahan teks
pada skrin yang sedemikian akan mengalami masalah kerana resolusi skrin
komputer adalah kurang berbanding dengan cetakan. Oleh yang demikian
muka taip jenis serif biasanya akan menyebabkan skrin persembahan kelihatan
lebih padat dari sepatutnya.

Oleh yang demikian, dalam banyak keadaan muka taip jenis san serif
biasanya merupakan pilihan utama bagi memaparkan isi kandungan manakala
muka taip jenis serif pula digunakan sebagai tajuk bagi persembahan secara
elektronik. Serif juga didapati mampu membantu memudahkan teks dibaca
kerana ianya membolehkan mata dipandu oleh garis luaran atau serif yang ada
pada teks. Atas dasar tersebut, muka taip jenis serif sering digunakan bagi
memaparkan teks utama sesuatu bahan bercetak seperti buku, akhbar dan
sebagainya.

Rajah 2.11: Contoh penggunaan Sans Serif dan Serif

59

Penggunaan teks untuk produk multimedia yang mempunyai fungsi
berbeza juga mempunyai kesesuaian yang tertentu. Pemilihan jenis muka taip
bergantung rapat juga dengan objektif serta fungsi.

Sebagai contoh, sekiranya membangunkan sebuah aplikasi yang
berkaitan dengan “Sejarah Melaka dan Kesan Terhadap Pembangunan
Malaysia”, maka aplikasi tersebut pastinya menggunakan teks secara optimum
di dalam penyampaian maklumat yang berkaitan. Dalam keadaan ini, pemilihan
muka taip dari kategori dekoratif untuk digunakan di bahagian tajuk contohnya
amatlah bersesuaian dengan zaman Kesultanan Melaka.

Bagi fungsi pengiklanan pula, teks yang digunakan perlulah mempunyai
warna yang menarik dan muka taip dekoratif yang sesuai supaya dapat menarik
perhatian pengguna yang melihat.

Rajah 2.12: Contoh penggunaan teks pada poster

60

PENGGUNAAN TEKS YANG EFEKTIF
Bagi memastikan teks dapat memainkan peranannya untuk menyampaikan
maklumat dengan berkesan, maka terdapat beberapa faktor yang perlu diberi
perhatian.

1. Ringkas dan padat
Penggunaan teks harus diminimumkan bergantung kepada keperluan teks
dalam sesuatu persembahan. Penggunaan bullet point dapat
mengurangkan kepadatan teks.

2. Kebolehbacaan teks
Pastikan teks boleh dibaca. Antara faktor yang mengganggu proses
kebolehbacaan teks adalah saiz, jenis muka taip, saiz, leading dan kerning,
serta warna teks yang berkontra dengan warna latar.

3. Kedudukan teks yang konsisten
Kedudukan teks yang berubah-ubah akan mengganggu konsentrasi
pengguna. Jarak margin dari frame skrin juga perlulah sesuai dan
dihadkan sempadannya.

4. Penggunaan kesan khas teks
Kesan khas teks yang terlalu banyak akan menyebabkan capaian
maklumat menjadi lambat dan mengganggu proses penyampaian
maklumat.

61

2.1.6 REKA LETAK TEKS
Reka letak (layout) atau komposisi halaman adalah cara mengatur teks dan
grafik pada satu halaman. Komposisi yang baik bukan sahaja mudah difahami
tetapi juga lebih berkesan dalam menyampaikan mesej kepada pengguna.
Terdapat beberapa panduan yang boleh digunakan semasa membuat reka
letak sesebuah halaman iaitu:
a) Penjajaran dan keseimbangan

Rajah 2.14: Penjajaran dan keseimbangan teks
1. Pilih grafik yang menarik dan mempunyai hubung kait dengan teks.
2. Seimbangkan reka letak visual dengan teks.
b) Peraturan sepertiga

Rajah 2.15: Peraturan Sepertiga
Objek yang penting harus ditempatkan sama ada sepanjang dua garis
mengufuk atau menegak. Objek tersebut juga boleh diletakkan pada titik
persilangan garis mengufuk dan menegak.

62

c) Penggunaan ruang kosong (white space)
Menambah ruang kosong di tempat yang tepat. Ia bertujuan untuk
menjadikan rekaan halaman tidak sesak, ada ruang rehat, serta
memudahkan kebolehbacaan teks.

Rajah 2.16 : Contoh penggunaan ruang kosong

63

AKTIVITI

BAHAN DAN PERALATAN
1. Perisian Microsoft Word, Microsoft Power Point

TUGASAN

Murid dikehendaki menghasilkan karya kreatif berasaskan teks
dan menyediakan lakaran reka letak dan komposisi teks untuk
penghasilan karya kreatif tersebut.

LANGKAH KERJA
1. Murid mengenalpasti tema dan konsep karya grafik
2. Murid melakar reka letak dan komposisi teks untuk penghasilan karya kreatif

(contoh: muka depan majalah) berasaskan teks berdasarkan tema/konsep
karya.
3. Murid menghasilkan karya kreatif berdasarkan lakaran reka letak dan
komposisi teks dengan menggunakan perisian grafik.
4. Murid membentangkan hasil karya.

64

PENILAIAN

1. Terangkan penggunaan serta fungsi teks dalam paparan persembahan
multimedia berikut:

………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
2. Nyatakan cara penggunaan teks untuk kebolehbacaan teks.
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………….…………………..

65

LAPORAN PENCAPAIAN MURID

Nama Murid:
Tahun:
Kelas

Modul: 2.1 Pengenalan kepada teks
Standard 2.1.5 Memberi justifikasi kesesuaian penggunaan teks
Kandungan: berdasarkan fungsi dalam penghasilan karya atau
2.1.6 produk multimedia berasaskan teks
2.1.7 Merancang reka letak teks dalam penghasilan karya
atau produk multimedia berasaskan teks
Menghasilkan karya berasaskan teks mengikut
keperluan produk

Bil Perkara yang dinilai Pencapaian Catatan

Terampil Belum
Terampil

1 Mengenal pasti fungsi teks.

2 Menerangkan penggunaan teks yang
efektif.

3 Mebuat kajian reka letak teks
berdasarkan tema.

4 Mencadangkan reka letak teks dan (CAPAI / TIDAK CAPAI)
penggunaan muka taip.

5 Menghasilkan karya kreatif
persembahan multimedia
berasaskan teks.

KEPUTUSAN

TARIKH

Nama Guru: Tandatangan &
Disahkan oleh: Tarikh

Tandatangan &
Tarikh

66

Nama Murid: KEPUTUSAN STANDARD PRESTASI
Tahun:
Kelas 2.0 Elemen Teks
2.1 Teks dan Reka Letak
Modul:

Standard
Kandungan:

Tahap Standard Prestasi Terampil
Penguasaan Ya Belum
Tafsiran
1
Menyatakan fungsi teks.
2 Memberi contoh setiap jenis muka taip teks dan
jenis teks.

3 Membuat penetapan format fon teks dalam satu
persembahan multimedia bertema.

Membuat analisis kesesuaian penetapan fon
4 berdasarkan fungsi teks dalam satu karya atau

produk berasaskan teks.

Mempertimbangkan kesesuaian reka letak teks

5 serta penggunaan muka taip dan format fon
berdasarkan fungsi teks dalam satu karya atau

produk multimedia bertema secara rasional.

6 Menghasilkan satu karya kreatif berasaskan teks
Keputusan dengan mengaplikasikan penggunaan muka taip,
format fon serta reka letak dan komposisi teks
mengikut keperluan produk secara beretika,
sistematik, bermakna dan kreatif.

Tahap

Nama Guru: Tandatangan & Tarikh
Disahkan oleh: Tandatangan & Tarikh

67

MODUL

3

ELEMEN GRAFIK

69

Standard MODUL 3.1A
kandungan:
Standard 3.1 Pengenalan Kepada Grafik Digital
pembelajaran:
3.1.1 Menerangkan fungsi grafik dalam pembangunan
Objektif produk multimedia.
Pembelajaran
3.1.2 Membezakan jenis imej raster dan vektor
Masa:
1. Menyatakan fungsi grafik dalam pembangunan
produk multimedia.

2. Menyenaraikan perbezaan antara imej raster dan
imej vektor.

6 jam

70

NOTA RUJUKAN

Grafik digital

Grafik digital merujuk kepada sebarang hasil kerja grafik yang dihasilkan
menggunakan sama ada perkakasan atau pun perisian komputer. Ia boleh
terdiri daripada pelbagai bentuk yang ringkas seperti ikon atau garisan,
realisitk seperti gambar foto sehinggalah grafik tiga dimensi.

Rajah 3.1: Contoh-contoh grafik digital.
3.1.1 FUNGSI GRAFIK DIGITAL DALAM PEMBANGUNAN PRODUK MULTIMEDIA

Antara Prototaip
muka produk
pengguna

Fungsi
Grafik
Digital

Mengilustrasikan Sumber
sesuatu konsep penyampaian
maklumat yang

berkesan

Rajah 3.2: Contoh fungsi grafik digital

71

3.1.2 IMEJ RASTER DAN VEKTOR

Jadual 3.1: Perbandingan antara imej raster dan imej vektor

Ciri-ciri imej raster imej vektor

Maksud • Imej nyata yang boleh • Lukisan atau lakaran pada

diambil dari peralatan komputer dan hanya

seperti kamera dan memerlukan memori yang

pengimbas. kecil.

Medium Sumber • Dihasilkan dengan • Asas kepada elemen lukisan

pemerolehan menggunakan Program atau objek seperti garis,

Lukisan berasaskan bulatan, segi empat dan

komputer (Paint Program). pelbagai imej.

• Menggunakan screen • Objek dihasilkan berdasarkan

capture. langkah kerja tertentu.

• Scanner atau kamera digital.

Perisian Adobe Photoshop, Paint.NET, Adobe Illustrator, Macromedia
Pengeditan GIMP, IrfanView, Krita Freehand, Inkscape, CoralDRAW
Cadangan Sesuai untuk memaparkan imej Sesuai untuk carta, logo, dan
penggunaan dalam kualiti yang realistik elemen-elemen grafik seperti
seperti foto. butang navigasi atau ikon.

Kelebihan • Mampu menyimpan • Mudah untuk diubahsuai.
sejumlah besar maklumat • Kualiti tidak terjejas apabila
Kelemahan mengenai imej.
dibesarkan.
Saiz fail • Susah untuk diubah suai. • Kurang realistik
Contoh • Imej menjadi pecah apabila • Semakin kompleks imej

dibesarkan. semakin besar saiz fail.
Saiz fail besar. Saiz fail kecil.

72

PENCAPAIAN MURID

Nama Murid:
Tahun:
Kelas

Modul: 3.1 Pengenalan Kepada Grafik Digital
Standard 3.1.1 Menerangkan fungsi grafik dalam
Kandungan: 3.1.2 Membezakan jenis imej raster dan vektor

Pencapaian Catatan

Bil Perkara yang dinilai Terampil Belum
Terampil

Menyatakan fungsi grafik dalam
1 pembangunan produk multimedia.

Menyenaraikan perbezaan antara
2 imej raster dan imej vektor.

KEPUTUSAN (CAPAI / TIDAK CAPAI)
TARIKH

Nama Guru: Tandatangan &
Disahkan oleh: Tarikh
Tandatangan &
Tarikh

73

Standard MODUL 3.1B
kandungan:
Standard 3.1 Pengenalan Kepada Grafik Digital
pembelajaran:
3.1.3 Membandingkan kualiti imej berdasarkan
Objektif perbezaan resolusi warna.
Pembelajaran
3.1.4 Membuat justifikasi kesesuaian penggunaan
mod warna:
(i) Merah, Hijau, Biru (RGB),
(ii) Biru-Ungu-Kuning-Hitam (CMYK)
(iii) Skala Kelabu (Grayscale).

3.1.5 Mencadangkan perisian dan format fail grafik
berdasarkan fungsi penggunaannya.

• Mengubah suai imej dengan resolusi warna yang
berlainan.

• Menyatakan ciri-ciri penggunaan mod warna
yang sesuai:
(iv) Merah, Hijau, Biru (RGB),
(v) Biru-Ungu-Kuning-Hitam (CMYK)
(vi) Skala Kelabu (Grayscale).

• Menamakan perisian grafik berdasarkan fungsi
penggunaannya.

• Menyatakan format fail grafik yang sesuai
berdasarkan fungsi penggunaannya.

Masa: 12 jam

74

NOTA RUJUKAN

3.1.3 KUALITI IMEJ BERDASARKAN PERBEZAAN RESOLUSI WARNA

Resolusi warna merujuk kepada julat warna yang wujud di dalam sesebuah
piksel ataupun beberapa banyak warna yang berbeza boleh wujud di
dalam sesebuah imej.

Sebuah imej dengan resolusi warna yang minimum boleh
mempunyai hanya 2 warna sahaja iaitu hitam dan putih. Manakala imej
yang mempunyai resolusi warna tinggi mampu mencapai sehingga kira-kira
16 juta warna. Semakin tinggi resolusi warna, semakin banyak warna yang
terlibat dan semakin cantik imej yang dipaparkan.

Jadual 3.2: Jadual perbandingan resolusi warna

Imej berwarna Kedalaman warna Kualiti imej

24 bit = 224 atau 16,777,216 Kualiti imej
variasi warna semakin jelas
dan realistik

8 bit = 28 atau 256 variasi warna

4 bit = 24 atau 16 variasi warna

2 bit = 22 atau 4 variasi warna Semakin
menarik dan
jelas warna imej
yang terhasil

1 bit = 21 atau 2 variasi warna

Imej hitam
putih

75

Ringkasnya, semakin tinggi resolusi warna pada sesebuah imej, semakin besar
julat warna yang mampu digunakan bagi mewakili imej yang ingin
dipersembahkan. Ini seterusnya membolehkan imej yang lebih menarik dan
realistik diperoleh.

3.1.4 MOD WARNA

Mod atau model warna merujuk kepada satu sistem asas yang digunakan
bagi menghasilkan pelbagai jenis warna.

Dalam bidang grafik digital, terdapat beberapa tiga mod warna yang
biasa digunakan iaitu mod warna RGB (Red, Green, Blue), mod warna CYMK
(Cyan, Yellow, Magenta & Black) dan Skala Kelabu (Grayscale).

Mod Warna RGB
Imej yang menggunakan mod warna RGB biasanya dihasilkan menggunakan
tiga warna primer iaitu merah, hijau dan biru. Ketiga-tiga warna primer ini
apabila dicampurkan bersama mampu menghasilkan kesemua cahaya
berwarna yang diperlukan bagi tujuan paparan pada skrin (komputer,
televisyen dan sebagainya).

Ia bermula dengan kegelapan (hitam) dan seterusnya ditambah
dengan campuran cahaya merah, hijau dan biru bagi membentuk warna-
warna yang lain. Apabila digabungkan ketiga-tiga warna utama itu pula akan
membentuk cahaya warna putih.

Mod Warna CMYK
Singkatan CMYK digunakan bagi mewakili empat warna utama iaitu Cyan,
Magenta, Yellow dan Black. CMYK digunakan untuk warna bagi tujuan
percetakan.

Mod Grayscale
Ringkasnya, mod warna grayscale sesuai digunakan untuk paparan digital
dengan tujuan imej yang hanya menggunakan warna hitam atau putih
(maklumat kecerahan). Paparan digital yang menggunakan mod warna
grayscale adalah lebih menarik berbanding Monochrome, kerana mod
warna skala kelabu mempunyai 256 variasi warna kelabu berbanding
Monochrome hanya mempunyai 2 warna sahaja.

76

Jadual 3.3: Justifikasi Kesesuaian Penggunaan Mod Warna

RGB CMYK Grayscale

Kegunaan Warna - Kombinasi warna - Kombinasi warna - Kombinasi warna

Red, Green, Blue. Cyan, Magenta, kelabu

Yellow, Black.

- Paparan pada - Percetakan. - Paparan grafik yang
peranti digital. mengandungi
maklumat
kecerahan sahaja
untuk tujuan saiz fail
yang lebih kecil.

Model Warna

77

3.1.5 PERISIAN DAN FORMAT FAIL GRAFIK
Perisian-perisian grafik yang khas diperlukan bagi menghasilkan kualiti kerja
grafik yang tinggi. Secara amnya perisian grafik boleh dibahagikan kepada
dua kategori:

• Perisian penyuntingan grafik
• Perisian berasaskan lukisan (ilustrasi)
Perisian dari kedua-dua kategori ini mempunyai fungsi dan peranan yang
tersendiri dan ianya sering digunakan secara bersama bagi menghasilkan
atau menyunting elemen grafik yang diperlukan.

Perisian Penyuntingan Grafik
Perisian penyuntingan grafik juga dikenali sebagai perisian imej jenis raster.
Antara peranan utama perisian penyuntingan grafik ialah:

• Menghasilkan antara muka pengguna
• Meminda atau memanipulasi imej
• Melakukan proses transformasi objek
• Menambah kesan khas pada imej
Antara perisian penyuntingan grafik yang sering digunakan adalah seperti:
• Krita
• Adobe Photoshop
• Paint.NET
• GIMP
• Irfanview
Berikut merupakan beberapa contoh hasil grafik yang diperoleh menerusi
penggunaan perisian penyuntingan grafik:

Rajah 3.3: Penghasilan teks pelbagai bentuk dan corak

78

Rajah 1.3: Penyediaan antara muka pengguna untuk laman web.

Gambar asal Gambar yang diubah suai

Rajah 3.4: Contoh gambar yang diubahsuai

Perisian berasaskan lukisan (ilustrasi)

Perisian dari kategori lukisan atau ilustrasi pula merujuk kepada perisian grafik
berasaskan vektor. Ia sering digunakan bagi menghasilkan elemen–elemen
grafik berbentuk lukisan atau ilustrasi.

Oleh itu, perisian ini menyediakan kemudahan bagi menghasilkan pelbagai
bentuk garisan, lengkungan, bentuk-bentuk geometri, elips dan sebagainya
dengan lebih mudah dan pantas.

Perisian ini digunakan untuk
• menghasilkan logo dan simbol untuk navigasi
• menghasilkan ilustrasi seperti kartun
• menghasilkan tipografi

Berikut merupakan beberapa contoh hasil grafik yang diperolehi menerusi
penggunaan perisian berasaskan lukisan.

79

Rajah 3.5: Contoh ilustrasi yang dihasilkan dengan menggunakan perisian
berasaskan lukisan

Antara perisian berasaskan lukisan yang sering digunakan adalah seperti:
• Inkscape
• Adobe Illustrator
• Adobe FreeHand
• CorelDRAW

Format fail grafik
Seperti mana media digital yang lain, fail grafik digital juga boleh disimpan
dalam pelbagai format.

Berikut merupakan pengelasan format fail grafik berdasarkan kategori
imej iaitu format fail imej raster dan format fail imej vektor.

Jadual 3.4: Format fail imej raster dan imej vektor

Format Fail Imej Raster Format Fail Imej Vektor

BMP ( Windows Bitmap ) CDR (CorelDRAW)

PNG ( Portable Network Graphic ) CGM ( Computer Graphics Metafile )

TIFF ( Tagged Image File Format ) DRW ( Micrografx Designer )

GIF ( Graphic Interchange Format ) PIC ( Picture format )

JPG (Platform independent Graphics Ai ( Adobe Illustrator )

format)

80

AKTIVITI

BAHAN DAN PERALATAN

1. Perisian IrfanView
2. Grafik bewarna

TUGASAN

Murid meneroka perbezaan resolusi warna ke atas imej untuk
melihat perbandingan kualiti imej yang terhasil. Murid
mengaplikasikan pengetahuan dengan membuat
perubahan pada resolusi warna menggunakan perisian
penyuntingan grafik.

LANGKAH KERJA TUGASAN 1

Langkah 1 Lancarkan perisian aplikasi IrfanView 32 bit
Langkah 2 Buka fail satu gambar foto berwarna pilihan anda
Langkah 3 Klik Image > Decrease Color Depth
Langkah 4 Kurangkan resolusi warna kepada 8 bit (256 warna). Simpan imej

baharu dengan nama yang sesuai.

Tip

Pastikan fail
imej asal anda
mempunyai
kedalaman
warna 16 juta
atau 65 536
warna.

Langkah 5 Buka fail imej asal, ulangi langkah 3 dan langkah 4 dengan
menukarkan resolusi warna imej masing-masing kepada:

a- 4 bit (16 warna)
b- 2 bit (4 warna)
c- 1 bit (2 warna)

Langkah 6 Bandingkan kualiti imej dan saiz berdasarkan perbezaan resolusi
warna.

81

BAHAN DAN PERALATAN

1. Perisian Krita
2. Grafik bewarna
3. Kertas A4
4. Printer

TUGASAN 2

Murid menetapkan mod warna pada grafik yang dipilih untuk
melihat kesesuaian penggunaan mod warna pada grafik
tersebut bagi tujuan yang berlainan. Murid mengaplikasikan
pengetahuan dengan membuat tetapan pada mod warna
grafik perisian penyuntingan grafik.

LANGKAH KERJA TUGASAN

Langkah 1 Lancarkan perisian aplikasi Krita
Langkah 2 Buka fail satu gambar foto berwarna pilihan anda

Langkah 3 Klik Image > Convert Image Color Space > Model > RGB > klik
OK

82

Langkah 4 Simpan fail dengan nama (contoh: bungaRGB.jpg).

Langkah 5 Buka fail imej asal, ulangi langkah 3 dan langkah 4 dengan
memilih mod warna:

a- CMYK
b- Grayscale

Langkah 6 Simpan fail untuk langkah 5 dengan nama (contoh:
bungaCMYK.jpg dan bungaKelabu.jpg).

Langkah 7 Cetak ketiga-tiga fail imej (bungaRGB.jpg, bungaCMYK.jpg
dan bungaKelabu.jpg)

Langkah 8 Bandingkan kualiti imej ketiga-tiga fail (bungaRGB.jpg,
bungaCMYK.jpg dan bungaKelabu.jpg) pada paparan
monitor serentak dengan grafik yang dicetak pada langkah 7.

83

LAPORAN PENCAPAIAN MURID

Nama Murid:
Tahun:
Kelas

Modul: 3.1 Pengenalan Kepada Grafik Digital
Standard 3.1.3 Membandingkan kualiti imej berdasarkan perbezaan
Kandungan:
resolusi warna.
3.1.4 Membuat justifikasi kesesuaian penggunaan mod

warna:
(i) RGB.
(ii) CMYK.
(iii) Grayscale.
3.1.5 Mencadangkan perisian dan format fail grafik
berdasarkan fungsi penggunaannya.

Pencapaian Catatan

Bil Perkara yang dinilai Terampil Belum
Terampil

1 Mengubahsuai imej dengan resolusi
warna yang berlainan.

Menyatakan ciri-ciri penggunaan
mod warna yang sesuai:
2 (i) RGB

(ii) CMYK
(iii) Grayscale

3 Menyatakan perisian dan format fail
grafik serta fungsi penggunaanya.

KEPUTUSAN (CAPAI / TIDAK CAPAI)
TARIKH

Nama Guru: Tandatangan &
Disahkan oleh: Tarikh
Tandatangan &
Tarikh

84

Standard MODUL 3.2A
kandungan:
Standard 3.2 Ilustrasi Imej Vektor
pembelajaran:
3.2.1 Menjelaskan keperluan ilustrasi dalam
Objektif penyediaan bahan produksi multimedia.
Pembelajaran
3.2.2 Memilih mod warna, resolusi dan saiz imej dalam
Masa: perisian grafik vektor.

3.2.3 Mengenal pasti fungsi alat dan fitur asas ilustrasi
dalam perisian ilustrasi grafik.

3.2.4 Menunjuk cara menyisip imej ke dalam perisian
grafik vektor.

3.2.5 Melakar imej vektor menggunakan teknik surihan
imej dengan menggunakan alat dan fitur yang
sesuai.

3.2.6 Membina objek dan teks dengan menggunakan
alat dan fitur yang sesuai.

3.2.7 Membina dan membanding beza hasil objek
menggunakan fitur gabungan:
(i) Persilangan (Intersect)
(ii) Penolakan (Subtract)
(iii) Pembahagian (Divide)
(iv) Pencantuman (Union/Unite)
(v) Pemotongan (Crop)

3.2.8 Mewarna objek menggunakan alat dan fitur
warna yang sesuai.

1. Mentakrif illustrasi dalam produksi multimedia.
2. Mengenal perisian aplikasi Inkscape.
3. Mengenal pasti antara muka, menu, toolbox dan

panel-panel kawalan dalam Inkscape.
4. Mengetahui apakah fungsi fitur-fitur yang

terdapat dalam panel toolbar utama, tool dan
toolbar status.
5. Menghasilkan karya kreatif.
6. Mewarnakan dan menetapkan corak pada
objek yang dihasilkan dengan mengunakan fitur
Fill dan Stroke.
6 jam

85

NOTA RUJUKAN

3.2.1 KEPERLUAN ILUSTRASI DALAM PENYEDIAAN BAHAN PRODUKSI
MULTIMEDIA

Ilustrasi pada kulit buku dapat memberi gambaran ringkas kepada bakal
pembaca tentang kandungan serta jalan cerita buku tersebut. Illustrasi pada
pembungkusan pula memainkan peranan penting dalam memperkenalkan
produk yang terkandung di dalamnya.

Kerjaya seorang pereka grafik memerlukan kemahiran ilustrasi bagi
menyampaikan idea-idea. Daripada ilustrasilah idea-idea dapat
diketengahkan dan dibaiki sebelum diterjemahkan dalam bentuk sebenar.
Sebuah poster illustrasi yang mengabungkan teks, warna dan media, mampu
menarik minat orang ramai.

Rajah 3.6 Illustrasi Kulit Buku

Rajah 3.7: Illustrasi Bungkusan Produk

86

3.2.2 MOD WARNA, RESOLUSI DAN SAIZ IMEJ DALAM PERISIAN GRAFIK VEKTOR
3.2.3 FUNGSI ALAT DAN FITUR ASAS ILUSTRASI DALAM PERISIAN ILUSTRASI

GRAFIK
3.2.4 MENYISIP IMEJ KE DALAM PERISIAN GRAFIK VEKTOR.
3.2.5 MELAKAR IMEJ VEKTOR
3.2.6 MEMBINA OBJEK DAN TEKS
3.2.7 MEMBINA OBJEK MENGGUNAKAN FITUR GABUNGAN.

Mengenal Perisian Inkscape

Inkscape adalah sebuah perisian sumber terbuka (Open Source Software)
untuk mencipta dan mengedit imej vektor. Terdapat juga perisian berasaskan
illustrasi yang lain di pasaran seperti Adobe Illustrator, CorelDRAW atau
FreeHand. Di samping itu, aplikasi ini boleh digunakan di pelbagai sistem
pengoperasian seperti Linux, Microsoft Windows atau Mac OS.

SVG (Scalable Vector Graphic) adalah format fail Inkscape asal.
Namun, ia juga dapat menyokong format fail yang lain seperti .pdf, .eps, .ai
dan lain-lain. Inkscape tidak terhad kepada hanya mengendalikan imej vektor
sahaja, tetapi juga boleh menghasilkan fail raster beresolusi tinggi untuk tujuan
percetakan.

Rajah 3.8: Antara muka Inkscape

87

Menu Bar
Menu bar berisi menu-menu untuk mengelola dokumen secara umum, seperti
File > Save untuk menyimpan dokumen atau File > Print untuk mencetak
dokumen.

Commands Bar
Commands Bar mengandungi ikon pintasan untuk arahan asas, seperti
cetakan, buka, simpan, dan sebagainya.

Controls Bar
Controls Bar yang mengandungi ikon untuk mengubah suai objek, contohnya
menetapkan jarak objek dari halaman, menyesuaikan ketinggian dan lebar
objek, objek berputar, dan sebagainya.

Rulers
Rulers atau pembaris berfungsi untuk melihat dan menganggarkan ukuran
gambar.

Scroll bar
Scroll Bar digunakan untuk menggerakkan skrin dokumen ke atas, ke bawah,
ke kanan dan ke kiri.

Canvas
Canvas atau layar kerja merupakan tempat untuk menghasilkan grafik.

Color Palette
Color Palette berisi warna-warna yang dapat anda gunakan untuk mewarnai
objek. Bila anda mengklik objek, kemudian mengklik warna yang anda

inginkan di color palette, maka warna objek tersebut akan berubah.

Status bar
Status bar dapat diguankan untuk melihat status dokumen Inkscape yang
semasa. Pada status bar juga terdapat maklumat seperti warna objek dan
posisi objek. Status bar digunakan juga untuk zooming (memperbesar atau
memperkecil) tampilan dokumen.

Snap Controls Bar
Snap Controls Bar digunakan untuk melakukan capaian objek dengan cepat
pada canvas.

88

Menetapkan paparan halaman Inkscape
1. Klik File > Document Properties atau tekan Shift+Ctrl+D.

Terdapat beberapa pilihan ukuran pada Page Size, di antaranya A4,
Letter, Legal, dan lain-lain. Kita juga boleh menentukan sendiri dengan cara
mengisi ukuran lebar (Width) dan tinggi (Height) pada Custom Size.

Guides atau garis panduan, digunakan untuk menyesuaikan posisi objek
berdasarkan garis panduan. Kita boleh mengubah suai, menghapus, dan
menyembunyikan guides dengan cara dwi klik guides tersebut.

Grids memiliki fungsi yang hampir sama dengan guides. Terdapat dua
jenis grid pada Inkscape, iaitu Rectangular Grid dan Axonometric Grid.

Rajah 3.9: Jenis grid pada Inkscape

89