image processing interface desinilmukomputer.org/wp-content/uploads/2008/05/adri...image/ gambar...

Image Processing –Interface Desin http://muhammadadri.net Tulisan ini merupakan salah satu modul praktik yang ditulis untuk digunakan dalam pengembangan bahan ajar Multimedia, dalam proses pengolahan data image/ gambar yang akan digunakan di dalam Multimedia Instructional Design (MID)

2008

Muhammad AdriTeknik Elektronika FT UNP Padang

4/6/2008

IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2008 IlmuKomputer.Com

1

IlmuKomputer.Com

TTuuttoorriiaall BBeerrsseerrii -- MMuullttiimmeeddiiaa IInnssttrruuccttiioonnaall DDeessiiggnn

IImmaaggee PPrroocceessssiinngg –– IInntteerrffaaccee DDeessiiggnn

MMuuhhaammmmaadd AAddrrii [email protected] http://muhammadadri.net

Tujuan Setelah mempelajari Modul 3 Interface Design ini, diharapkan peserta dapat :

1. Melakukan perancangan antarmuka (interface) dengan baik, sesuai dengan kebutuhan pengembangan media ajar berbasis multimedia

2. Merancang komponen-komponen pendukung interface, yang diseuaikan dengan kebutuhan materi ajar yang dikembangkan

3. Mengintegrasikan komponen-komponen pendukung tersebut menjadi satu kesatuan interface yang utuh.

Uraian Materi Interface Design Interface desain digunakan untuk melakukan perancangan terhadap antarmuka

aplikasi multimedia yang akan dikembangkan, dengan tujuan agar aplikasi menjadi lebih

menarik dan memiliki nilai estetika yang tinggi.

Dalam latihan ini peserta akan merancang suatu antar muka aplikasi dengan

menggunakan adobe photoshop. Antarmuka/ interface yang akan dirancang adalah

sebagai berikut :

Lisensi Dokumen: Copyright © 2003-2008 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

KomuCopyr

Ilm

Dala

1

2

3

A. M

1

2

3

4

unitas eLearniright © 2003-

muKomp

m melakuk

. Meranca

2. Menentu

3. Mengga

Merancang . Aktifkan

2. Buka file

3. Ukuran F

4. Sehingg

ing IlmuKomp2008 IlmuKom

puter.Co

Ga

an peranca

ang gambar

ukan dan m

bungkan se

Desain BaAdobe Pho

e baru deng

File 800 x 6

a diperoleh

puter.Com mputer.Com

om

ambar 1. Int

angan ini, da

r backgroun

emilih gam

emua komp

ackgroundotoshop

gan File N600 pixel, R

Gamba

h sebuah are

terface yang

apat dilakuk

nd

mbar kompo

onen menja

New esolusi 72 p

ar 2. New F

ea kerja Ph

g akan dira

kan dalam b

onen penduk

adi satu kes

pixel/inc, Ba

File Photosh

hotoshop se

ncang

beberapa ta

kung

satuan desa

ackground t

hop

ebagai berik

ahapan :

ain interface

transparent

kut :

2

e

t.

KomuCopyr

Ilm

5

6

7


muKomp

5. Selanjut

antarmu

6. Aktifkan

, pada p

kerja, se

7. Aktifkan

pada pill

area kerj


puter.Co

G

nya pada

ka.

Ellipti

illihan add t

eperti pada

Gambar

Ellipti

lihan add to

rja, seperti p

Gambar 5.


om

Gambar 3. A

area kerja

ical Marque

to selection

Gambar 4

r 4. Seleksi

ical Marque

o selection.

pada Gamb

Seleksi den

Area kerja 8

a dengan

ee Tool, dila

n. Buatlah se

dengan ling

ee Toll, dilan

Buatlah se

bar 5

ngan lingka

800 x 600 p

backgroun

anjutkan den

ebuah lingk

gkaran pada

njutkan den

ebuah lingka

aran pada p

pixel

d, diranca

ngan meng

karan pada

a pojok kiri

ngan mengk

aran pada p

ojok kanan

ng latar b

klick

pojok kiri at

atas

klick

pojok kanan

bawah

3

belakang

tas area

,

n bawah


4

IlmuKomputer.Com

8. dengan tetap mengaktifkan add to selection, aktifkan Rectangular Marquee

Toll. Buatlah sebuah seleksi persegi sebesar area kerja, yang dimulai dari titik

tengah diameter atas lingkaran kiri atas, hingga lingkaran kanan bawah.

Gambar 6. Area seleksi yang telah digabungkan

9. Lakukan langkah yang sama yang dimulai dari diameter luar tengah lingkaran

kanan bawah, sehingga area kerja background menjadi :

Gambar 7. Area seleksi yang telah digabungkan keseluruhan

10. Kemudian aktifkan area background, ganti warna background dengan wana

kuning (sesuai dengan identitas UNP).

KomuCopyr

Ilm

1

1

1

Sc


muKomp

1. Terapka

dialog : B

terlihat p

2. Berikan

Layer hasil pem

3. Simpan

Setting backcolor


puter.Co

G

n warna ba

Background

pada Gamba

sedikit Lay

Layer Stmberian efe

Gambar 9

dengan nam

kground


om

Gambar 8.

ackground t

d Color, kem

ar 9.

yer Style un

tyle Bevek ini trerliha

9. Area kerj

ma : latih-i

Pemilihan w

tersebut de

mudian klik

ntuk mencip

vel and Emat pada Gam

a Backgrou

interface.p

warna Back

engan menu

OK, sehing

ptakan efek

mboss, atu

mbar 10.

und yang te

sd

kground

u Edit Fgga diperol

k timbul tiga

r secukupn

lah diberi w

Fill pilih pad

eh tampilan

a dimensi d

nya, kemud

warna.

5

da kotak

n seperti

dengan :

ian OK,

KomuCopyr

Ilm

B. M1. L

U

la

1

2

3

4

5


muKomp

Mendisain kLogo UNP Untuk men

angkah bar

. Buka file

2. Selanjut

area ker

tampak s

3. Selanjut

area Ga

file baru

4. Setelah

terhadap

5. Buka file

besar a

tombol O


puter.Co

Gambar 1

komponen

nambahkan

ikut :

e unp.jpg de

nya, area p

rja, dengan

seperti pad

nya gunaka

mbar Logo

dengan ba

area gam

p logo yang

e baru : Firea logo y

OK, seperti


om

0. Efek Bev

Pendukun

n sedikit se

engan Photo

Gambar 1

putih yang a

n mendrag

a Gambar 1

an tool Rec

UNP, deng

ckground tr

mbar Logo

terseleksi d

ile Newyang tercop

terlihat pad

vel dan Emb

ng

entuhan pa

oshop : File

11. File UNP

ada disekita

sudut kana

12a.

ctangular M

gan tujuan a

ransparent,

UNP terse

dengan : Edw, yang sec

py, dengan

da Gambar

boss pada B

ada Logo

e Open

P YPTK.bm

ar logo haru

an bawah j

Marquee To

agar Logo d

terlihat pad

eleksi, sela

dit Copycara otoma

n backgrou

12.c.

Backgorund

UNP, mak

mp

us dihilangk

jenadela ar

ool, untuk m

dapat didup

da Gambar

anjutnya la

y

tis ukurann

nd transpa

d kerja

a dapat di

kan, maka p

rea kerja, s

menseleksi

plikasi pada

12.b

kukan pen

nya sesuai

arent,kemud

6

ilakukan

perbesar

sehingg,

, semua

sebuah

ngkopian

dengan

dian klik

KomuCopyr

Ilm

6

7

8

9

1


muKomp

(a)

6. Kemudia

hasil cop

7. Kemudia

menggu

diluar log

8. Untuk m

semua s

Gamb

9. Berikan

dengan

: 100 %,

%.

0. Sehingg


puter.Co

an lanjutkan

pyan logo U

an hilangka

nkan tool M

go UNP ters

menghapus

sudut logo, h

(a)

bar 13 Pros

sedikit laye

ukuran seb

, Size : 172

a diperoleh


om

(b)

Gambar

n dengan m

UNP pada fi

an semua

Magic Wan

seleksi, liha

area terse

hingga back

ses pensele

er style den

bagai beriku

2 Softaen :

h sebuah log

12. Proses

mengklik me

le baru ters

pinggir log

d ( ), seh

at Gambar 1

leksi terseb

kground log

(b

eksian logo

ngan :Layeut : Style : In

0, dan Sha

go UNP den

duplikasi lo

enu Edit sebut, lihat G

go dengan

hingga area

13.b

but, tekan t

go menjadi

b)

UNP denga

r Layer nner Bevel,

adow Mode

ngan efek 3

(c)

ogo UNP

Paste, un

Gambar 13

n area war

a berwarna

tombol Deltransparan,

an Backgrou

Style BeTechnoque

: Multiply,

3 Dimensi se

ntuk menem

.a.

rna putih,

putih yang

ete, lakuka

, Gambar 1

(c)

und Transp

evel and Ees : Smooth

dengan op

ederhana

7

mpatkan

dengan

g berada

an untuk

3.c

arent

Emboss,

h, Depth

pacity 60

KomuCopyr

Ilm

1

2. TU

y

1

2

3

4

5

6

7

3. GU

d

1

2


muKomp

1. Simpan

Tombol ExiUntuk mebu

yaitu :

. Buat seb

2. Aktifkan

tersebut

3. Kemudia

merah.

4. Lakukan

backgrou

5. Untuk m

Style

6. Tambah

ditengah

diperoleh

G

7. Simpan

Gedung ReUntuk memp

dengan seb

. Buka Fil

2. Karena

dengan

ini janga


puter.Co

Gambar

dengan nam

it uat sebuah

buah file ba

Elliptic

.

an aktifkan

n pengisian

und color.

menjadikann

Bevel and

kan sebua

h simbol to

h tampilan s

Gambar 14.

dengan nam

ektorat UNPperjelas info

uah gamba

e Gambar g

resolusi ga

menu : Imaan lakukan p


om

14. Logo U

ma : logo U

tombol, de

ru, dengan

cal Marquee

area backg

warna bac

nya sebuah

d Emboss, d

ah text EXombol, Hur

sebagai ber

Pembuatan

ma : exit.psP oemasi iden

ar gedung ya

gedung Rek

ambar cuk

age Imagproses peny

UNP dengan

UNP.psd

engan Pho

ukuran 100

e Toll, buat

ground

ckgorund te

tombol 3D,

dengan uku

IT, dengan

ruf : Impac

rikut :

n, pemilihan

sd dan exit

ntitas iklan y

ang dimilki

ktorat UNP

up tinggi,

ge Size, ub

yimpanan, k

n efek 3D m

toshop dap

0 x 100 pixe

lah sebuah

, ganti war

ersebut den

, maka tam

uran Size :

n mengklik

ct, Size :

n warna dan

t.jpg.

yang akan

UNP, deng

yang dimilik

yaitu 2272

bah ukurann

karena akan

menggelemb

pat dilakuka

el, backgrou

lingkaran,

rna backgro

gan : Edit

bahkan efe

20,

tombol

30, Color

n efek layer

dibuat, mak

an langkah

ki

2 x 1704,

nya menjad

n menguba

bung

an dengan

und : Transp

sebesar ar

ound denga

Fill, pili

ek : Layer

, dan tem

: White, s

r tombol EX

ka dapat dil

sebagai be

yang dapa

i 600 x 450

h resolusi a

8

mudah,

parent

rea kerja

an wana

h option

Layer

mpatkan

sehingga

IT

lengkapi

erikut :

at dilihat

0, sejauh

aslinya.

KomuCopyr

Ilm

3

4

5

6

7

4. G

U

la

g

a

re

C. InL

yaiot

1


muKomp

3. Lakukan

sebatas

bersama

4. Dalam k

5. Buka file

dengan

6. Tempatk

7. Simpan

Gambar ToUntuk prose

angkah pe

gambar yan

adalah dari

esolusi gam

ntegrasi SeLangkah sel

tu dengan la

. Buka ke


puter.Co

Gambar

n seleksi d

ukuran ged

aan dengan

Gambar

kondisi terse

e baru, den

area tersele

kan gambar

dengan nam

mbol Naviges pembua

nseleksian

ng sesuai, p

segi resolu

mbar yang le

emua Komlanjutnya ad

angkah :

mbali file ut


om

15. Perubah

dengan Ellip

dung yang d

n drag mous

15. Pensel

eleksi terseb

gan backgr

eksi, nggak

r terseleksi

ma : Rekto

gasi atan tombo

terhadap

pada file-file

usi gambar

ebih kecil.

ponen dalah meng

tama, yang

han ukuran

iptical Marq

diinginkan,

se, untuk m

eksian ged

but, copy ar

round : Tran

usah diuba

tersebut de

rat.psd

ol navigasi,

gedung Re

e Gambar

r, karena uk

gintegrasika

telah didisa

pixel gamb

quee Tool,

selama pro

menjaga kes

ung rektora

rea dengan

nsparent, u

ah

engan : Edit

pada das

ektorat UN

Disain yang

kuran tomb

an semua ko

ain : latih-in

bar gedung

dengan m

oses seleksi

seimbangan

at yang akan

: Edit Cukuran seca

t Paste a

sarnya ham

P di atas,

g telah dim

bol lebih ke

omponen y

nterface.ps

UNP

membuat li

tekan tomb

n lingkaran.

n dicopy

Copy

ara otomatis

atau Ctrl + V

mpir sama

hanya sa

miliki, yang b

ecil, maka g

yang telah d

sd

9

ngkaran

bol shift

s sesuai

V

dengan

aja, pilih

berbeda

gunakan

didesain,


10

IlmuKomputer.Com

2. Aktifkan file logo UNP.psd, kemudian dengan menggunakan Move Tool ,

tarik (drag) gambar logo ke file utama, dengan penempatan sesuai dengan

Gambar 1. 3. Lakukan langkah yang sama terhadap Gambar Gedung UNP, tempatkan sesuai

dengan Gambar 1, kemudian berikan sedikit efek layer : Layer Layer Style Stroke, dengan ukuran size : 2, dan color : white.

4. Lakukan langkah yang sama terhadap 5 tombol navigasi lainnya, jika ukurannya

terlalu besar, perkecil dengan menggunakan free transform, dengan : Edit Free Transform atau Ctrl + T, perkecil ukuran gambar dengan menarik salah

satu sudutnya, sambil menekan tombol Shift, untuk menjaga konsistensi

gambar. 5. Tempatkan tombol Exit.jpg pada pojok kanan bawah pada area melengkung. 6. Tambahkan teks-teks pendukung, sesuaikan dengan tampilan pada Gambar 1,

Ukuran huruf sesuaikan dengan kebutuhan peserta, lengkapi dengan infromasi

pendukung lainnya yang dianggap cocok. 7. Bila perlu tambahkan sedikit efek untuk setiap teks, seperti efek : Drop Shadow¸

Stroke dan sebagainya. 8. Ingat untuk setiap baris teks, menggunakan layer yang terpisah. 9. SELAMAT MENCOBA

Selamat Mencoba dan Mengembangkan Bahan Ajar Berbasis Multimedia

Biografi Penulis

Muhammad Adri. Menyelesaikan S1 di Jurusan Teknik Elektronika FPTK IKIP Padang tahun 1999, dan S2 di Jurusan Teknik Elektro Universitas Gadjah Mada Yogyakarta, dengan konsentrasi Sistem Komputer dan Informatika (SKI) tahun 2004. Staf pengajar Teknik Elektronika Fakultas Teknik Universitas Negeri Padang. Kompetensi inti pada bidang Computer Networking and Security, Computer Architecture and Organization, Web-Based Application, Online Learning, Multimedia-Based Instructional Design, dan Knowledge Community. Penulis aktif sebagai pemakalah dalam berbagai Seminar Nasional, instruktur pada model pembelajaran berbasis Multimedia dan Komputer., IT-Based Education. Memegang

Sertifikasi Microsoft, JENI (Java Education Network Indonesia) 1,2,dan 4. Ketertarikan penulis dalam bidang implementasi IT dalam dunia pendidikan, menghantarkan penulis sebagai mahasiswa doktoral Ilmu Pendidikan Pascasarjana Universitas Negeri Padang, terhitung mulai September 2006.

image processing interface desinilmukomputer.org/wp-content/uploads/2008/05/adri...image/ gambar...

Documents