PISMP SEM 4 EDU 3015

Semester 22010

Dr. Faridah Hanim bt Yahya

Jabatan Teknologi Pendidikan

IPG Kampus Pendidikan Teknik

fhyzul@yahoo.com

ASAS GRAFIK

KandunganKandungan

Definisi Jenis-jenis Grafik Elemen Asas Reka Letak Grafik Prinsip Asas Reka Bentuk Grafik Prinsip Reka Bentuk CASPER

DEFINISI GRAFIKDEFINISI GRAFIK

• Sebuah lukisan, gambar atau huruf yang dihasilkan dengan menggunakan media tertentu seperti pen, pensel, berus dan sebagainya.

(Jamalludin Harun & Zaidatun Tasir, 2005)• Perkara berkenaan lukisan, ukiran dan

gambar rajah.(DEWAN BAHASA & PUSTAKA)

JENIS-JENIS GRAFIKJENIS-JENIS GRAFIK

• Fotograf

JENIS-JENIS GRAFIKJENIS-JENIS GRAFIK

• Lukisan

JENIS-JENIS GRAFIKJENIS-JENIS GRAFIK

• Kartun

JENIS-JENIS GRAFIKJENIS-JENIS GRAFIK

• Graf atau Carta

JENIS-JENIS GRAFIKJENIS-JENIS GRAFIK

• Ikon, Simbol, Garis dan Butang

{ }

JENIS-JENIS GRAFIKJENIS-JENIS GRAFIK

• Diagram

SENARIO PERMASALAHAN

AUTENTIK

BIDANG PROFESIONAL

KERJAYA MASA DEPAN PELAJAR

MASALAH PEMBINAAN

KUMPULAN SASARAN

STRATEGI PENYAMPAIAN

PELAJAR

STRATEGI PENILAIAN PELAJAR

PEMETAAN KURIKULUM

PBL PEMETAAN KURIKULUM BERDASARKAN PBL

TOPIK PEMBINAAN

TOPIK SET

KEJURUTERAAN AWAM

MATEMATIK

BIDANG

ELEMEN ASAS REKA LETAK GRAFIK ELEMEN ASAS REKA LETAK GRAFIK

• Titik– Elemen yang paling mudah– Titik-titik yang bersambung akan mengarahkan

penglihatan mata– Titik boleh mencipta ilusi tona dan warna pada sesuatu

visual apabila diletakkan sebelah menyebelah dengan banyak.

.

. …………………… ..

ELEMEN ASAS REKA LETAK GRAFIK ELEMEN ASAS REKA LETAK GRAFIK

• Garisan– Kedudukan titik rapat antara satu sama lain– Satu garisan boleh didefinisikan sebagai pergerakan

titik– Kombinasi garis membentuk imej 2D atau 3D. . ..

ELEMEN ASAS REKA LETAK GRAFIK ELEMEN ASAS REKA LETAK GRAFIK

• Bentuk– Mempunyai luas, tinggi dan permukaan– 3 bentuk asas : segiempat sama, bulatan dan segitiga

sama. . ..

ELEMEN ASAS REKA LETAK GRAFIK ELEMEN ASAS REKA LETAK GRAFIK

• Permukaan– Apabila garisan diolah menjadi permukaan

seperti permukaan atas, permukaan menegak dan permukaan di bawah

. . ..

ELEMEN ASAS REKA LETAK GRAFIK ELEMEN ASAS REKA LETAK GRAFIK

• Ruang– Rongga yang terdapat dalam sesuatu objek– Bagi objek 2D dan 3D, permukaan objek ini

dapat ditimbulkan dengan menggunakan garisan grid perspektif.

. . ..

ELEMEN ASAS REKA LETAK GRAFIK ELEMEN ASAS REKA LETAK GRAFIK

• Warna– Pembalikan cahaya daripada sesuatu objek

atau permukaan– Warna asas – merah, biru dan kuning– Pemilihan warna perlu dilakukan dengan teliti

untuk menonjolkan mesej yang hendak disampaikan.

. . ..

PRINSIP ASAS REKA BENTUK GRAFIK PRINSIP ASAS REKA BENTUK GRAFIK

• Elemen– Elemen Visual

• Grafik realistik – objek sebenar• Grafik analogi – menunjukkan objek lain yang ada kaitan dengan objek sebenar• Grafik Organisasi – carta aliran, graf, peta dsbg

– Elemen Lisan• Stail huruf, bilangan huruf, huruf besar, warna huruf, saiz huruf,

jarak di antara huruf, jarak di antara barisan

– Elemen yang Menambah Tarikan • Luar biasa, dimensi permukaan dan dimensi

.

. ..

PRINSIP ASAS REKA BENTUK GRAFIK PRINSIP ASAS REKA BENTUK GRAFIK

• Corak (pattern)• Sejajar, bentuk, imbangan, stail, skema warna, latar

belakang imej dan teks kecerahan• Susunan

.

.

• kehampiran, pengarahan, bentuk kontras, konsisten, harmoni

»CONTRAST

»ALIGNMENT

»SIMPLICITY

»PROXIMITY

»EMPHASIS

»REPITITION

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

»CONTRAST (KONTRA): (warna, imej dan fon)

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

CONTRAST

Alignment• Setiap item dipisahkan oleh idea dan ruang

pada antara muka yang sama.

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

[ Arrange in a parallel order ]

Text1

Images

Text2

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

Ringkas (Simplicity)keep your message as simple as possible.

– Use only the amount of text and graphics as is absolutely necessary to get your point across

– Superfluous graphics can interfere with understanding.

– An overabundance of fonts or colours can distract rather than assist learning.

The general rule of thumb is to use graphics that are as simple as possible when displaying content on the screen. Provide the main ideas and a means of getting more information for those who might need or desire it.

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

Proximity• proximity or closeness creates a

bond between people and between elements on a page. How close together or far apart elements are placed suggests a relationship (or lack of) between otherwise disparate parts.

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

Menyentuh kepada jarak elemen-elemen yang terdapat pada antara

muka yang menggambarkan hubungan samada erat atau tidak

[ Do a suitable space within object ]

Gap between Texts

Gap between Graphics

Gap between Texts and Graphics

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

Proximity

Emphasis by Isolation• If most of the elements in a work of art are grouped

closely together, an object by itself stands out as a focal point.

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

Penegasan (Emphasis)• One method used to attract attention in the

design of a screen or work of art is the use of a focal point.

• A focal point draws your attention to the most important element on the page. There are several techniques used to emphasize the most important object on a page.

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

Penegasan kepada teks:• Penggunaan highlighting , underlining,

blinking, boldface untuk menarik perhatian kepada isi-isi

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

Tajuk Hasil Pembelajaran paling sukar

Min Kesukaran

Operasi terhadap Set

Menyelesaikan masalah yang melibatkan persilangan terhadap Set

3.86

Menyelesaikan masalah yang melibatkan kesatuan terhadap Set

3.43

Menentukan hasil gabungan operasi terhadap Set

3.86

4.14

Analisis Awal

Min Kesukaran Tajuk Set: Persepsi Guru Pemeriksa Kertas Matematik SPM

6

Menyelesaikan masalah yang melibatkan gabungan operasi terhadap Set

Repetition (Pengulangan)• Konsisten diperolehi melalui pengulangan

elemen-elemen yang terdapat samada pada 1 antara muka atau pada antara muka yang bersiri.

• Penggunaan ikon(icon), imej dan warna digunakan sebagai navigasi untuk mengelakkan kekeliruan.

CASPER DESIGN PRINCIPLESCASPER DESIGN PRINCIPLESPRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

PRINSIP REKA BENTUK ANTARA MUKA & SUSUN ATUR

Pengenalan kepada Set

Persilangan antara Set

Kesatuan antara Set

CONTOH PENGGUNAAN BUTANG/IKON & HYPERLINK DALAM PERSEMBAHAN MULTIMEDIA: TOPIK SET

CONTOH PENGGUNAAN BUTANG/IKON & HYPERLINK DALAM PERSEMBAHAN MULTIMEDIA: TOPIK SET

{ }

X

Set ialah himpunan objek yang mempunyai ciri-ciri yang sama

Contoh Set :{ a, b, c, d, e, f}{red, blue, green, yellow}

PENGENALAN KEPADA SET PENGENALAN KEPADA SET

Set A bersilang dengan Set B jika kedua-dua Set mempunyai unsur-unsur yang sama

Simbol “” – persilangan Contoh A = {2, 4, 6, 8, 10, 12} B = {5, 10, 15, 20, 25, 30} A B = {10}

PERSILANGAN ANTARA SET PERSILANGAN ANTARA SET

Set A kesatuan Set B – set yang mengandungi unsur-unsur bagi kedua-dua Set

Simbol “ A B” Contoh: A = { 1, 2, 3, 4, 5, 6} B = {2, 4, 6, 8, 10} A B = {1, 2, 3, 4, 5, 6, 8, 10}

KESATUAN ANTARA SET KESATUAN ANTARA SET

PERISIAN GRAFIKPERISIAN GRAFIK

• Adobe photoshop• Coral Draw• Microsoft Office Visio• Paint• Adobe Illustrator

Contoh Aplikasi MS Office Visio: Analisis Awal Pernyataan Masalah

SENARIO PERMASALAHAN

AUTENTIK

BIDANG PROFESIONAL

KERJAYA MASA DEPAN PELAJAR

MASALAH PEMBINAAN

KUMPULAN SASARAN

STRATEGI PENYAMPAIAN

PELAJAR

STRATEGI PENILAIAN PELAJAR

PEMETAAN KURIKULUM

PBL PEMETAAN KURIKULUM BERDASARKAN PBL

TOPIK PEMBINAAN

TOPIK SET

KEJURUTERAAN AWAM

MATEMATIK

BIDANG

9

Kerja Kumpulan

L1

Masalah Autentik

Proses PBL Teknik

PBL

Pengguna

ANALISIS

REKA BENTUK

PENILAIANL2

L3

Prototaip

Hasil Pembelajaran

Penambahbaikan

Objektif Pengajaran

& Pembelajaran

Sukatan Pelajaran

Isi Kandungan

Model ID

Model Scaffolding

Pra Ujian & Pasca Ujian

Pemerhatian

Data Kuantitatif &

Data Kualitatif

Pengubahsuaian

PEMBANGUNAN

IMPLEMENTASIRujuk Pakar

Senario Permasalahan Autentik

Modul-Modul

Temubual

Penilaian Formatif

Kajian Rintis

UDTP

15

Contoh Aplikasi MS Office Visio: Model Kitar Hayat (KHPBL-MSet)

16

REASONING LEVEL DIAGNOSTIC TEST

AUTHENTIC SCENARIO

ELECTRONIC PROJECT REPORT

ASSESSMENT

FACT LIST

NEED TO KNOW

LEARNING ISSUES

POSSIBLE SOLUTION

NEW LEARNING ISSUE

FINAL SOLUTION

HD & EI

PROJECT WORK REPORT

PROJECT WORK ASSESSMENT

SET TOPIC INTERSECTION & UNION OF SETS

TASET

FNIPIS

Contoh Aplikasi MS Office Visio: Proses PBL MathS-Set: TASET

MODEL ID PBL MathS-Set

PENDEKATAN MATEMATIKTEORI P&P

URUTAN PENGAJARAN

PERKEMBANGAN HOLISTIK

PERANCANGAN TERANCANG & MENYELURUH

MENGIKUT MODUL

PENGAJARAN & PEMBELAJARAN

MELALUI MULTIMEDIA INTERAKTIF

· Induktif· Inkuiri Penemuan· Kerja Projek· Penerokaan· Articulation· Refleksi

· Tingkah Laku· Kognitivisme· Konstruktivisme

· Modeling· Coaching· Scaffolding

· Kognitif· Afektif· Psikomotor

· Penerangan· Contoh-contoh· Latihan· Latihan

Pengukuhan· Pembelajaran

Akses Kendiri· Pengkayaan· Pembelajaran

Kadar Kendiri

Masalah Autentik dari profesional

Projek Berasaskan Senario

Berpusatkan PelajarProses PBL

Pembelajaran Koperatif

Kemahiran Berfikir & Menaakul Menggunakan

Gambar Rajah Venn

Modul Construction

Stage

Modul Mentor

Modul Help

Modul Problem

Scenario in PBL

Sub ModulRevision

Sub ModulSelf Practice

Sub ModulMind Practice

Sub ModulDevelopment Concept

Based on Scenario

Modul Fungsi

Tambahan

UDTP

· Modeling· Coaching· Scaffolding

Masalah Autentik dari profesional

Projek Berasaskan Senario

19

Contoh Aplikasi MS Office Visio: Model ID PBL MathS-Set

Ç

È

Ç¢

È¢

ÇÈ

ÇÈ¢

Kategori Operasi Set

Kaedah Penyelesaian

Masalah

Kaedah Memperoleh

Jawapan

Menyenaraikan elemen berdasarkan persamaan Set

Menggunakan Gambar Rajah Venn

i) Senaraikan kesemua elemen bagi Set yang terlibat berdasarkan persamaan Setii) Senaraikan elemen kesatuan bagi Setiii) Pastikan elemen yang sama bagi persamaan Set tidak berulangiv) Menyenaraikan kesemua elemen untuk kesatuan bagi Setv) Cari bilangan elemen untuk kesatuam bagi Set

i) Mengecam kawasan Kesatuan bagi Setii) Menentukan bilangan elemen bagi setiap kawasan dalam gambar rajah Venniii) Mengira bilangan elemen untuk Kesatuan bagi Set

Kategori Operasi Set Pilihan Pelajar Strategi dan Kaedah Memperoleh Jawapan

Menggunakan Formula

Menggunakan formula untuk mencari bilangan nombor untuk Kesatuan bagi Set yang melibatkan 2 Set atau 3 Set

Model Scaffolding : Satu Operasi Set

21Adaptasi Model Scaffolding Nor Hasbiah (2007)

Contoh Aplikasi MS Office Visio: Pembinaan Konsep Set (MSPKSet) : Konsep Kesatuan

Memo dari Ketua

Jabatan

Surat dari klien Klip Audio Klip Video Rak Peta Fail Jurutera

Semakan Pakar

SENARIO PERMASALAHAN AUTENTIK

22

Contoh Aplikasi MS Office Visio: Model Senario Permasalahan PBL MathS-Set

PERISIAN PBL MathS-Set

ConstructionStage

Mentor Help

RevisionSelf Practice Mind PracticeDevelopment Concept Based

on Scenario

· Description of Project · Description of

Modules

· Preliminary Work· Earthwork· Substructure Work· Superstructure Work

· Tour· Help· Glossary

Problem Scenario in PBL

· Memo from HOD· Letter from Client· Recorded Telephone

Conversation· Documents from Map

Rack· Documents from

Engineering Files

· Intersection of Sets· Union of Sets

· Set· Subsets· Universal Set &

Complement of Set

Soalan Objektif Soalan Subjektif

Konsep Aktiviti Rumusan

23

Contoh Aplikasi MS Office Visio: Modul PBL MathS-Set

ISLISL1. Sebagai seorang ‘graphic designer’, anda

diminta menghasilkan satu lakaran grafik yang menerapkan prinsip grafik dan elemen grafik.

2.Cuba bincangkan dan huraikan apakah prinsip grafik dan elemen grafik yang terdapat dalam gambar tersebut.

**Semua hasil aktiviti amali & ISL mesti dimasukkan dalam portfolio.**Semua rujukan mesti direkodkan.

Sekian, Terima KasihSekian, Terima Kasih

- Jamalludin Harun & Zaidatun Tasir. 2005. Multimedia konsep & praktis. Batu Caves: Venton Publishing (M) Sdn Bhd.

Rozinah Jamaludin. 2003. Teknologi Pengajaran. Utusan KL: Publications & Distributors Sdn Bhd.

RUJUKANRUJUKAN