Page 1
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
Page 2
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.
Page 3
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.
Page 4
KomuCopyr
Ilm
5
6
7
unitas eLearniright © 2003-
muKomp
5. Selanjut
antarmu
6. Aktifkan
, pada p
kerja, se
7. Aktifkan
pada pill
area kerj
ing IlmuKomp2008 IlmuKom
puter.Co
G
nya pada
ka.
Ellipti
illihan add t
eperti pada
Gambar
Ellipti
lihan add to
rja, seperti p
Gambar 5.
puter.Com mputer.Com
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
Page 5
Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2008 IlmuKomputer.Com
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).
Page 6
KomuCopyr
Ilm
1
1
1
Sc
unitas eLearniright © 2003-
muKomp
1. Terapka
dialog : B
terlihat p
2. Berikan
Layer hasil pem
3. Simpan
Setting backcolor
ing IlmuKomp2008 IlmuKom
puter.Co
G
n warna ba
Background
pada Gamba
sedikit Lay
Layer Stmberian efe
Gambar 9
dengan nam
kground
puter.Com mputer.Com
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,
Page 7
KomuCopyr
Ilm
B. M1. L
U
la
1
2
3
4
5
unitas eLearniright © 2003-
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
ing IlmuKomp2008 IlmuKom
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
puter.Com mputer.Com
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
Page 8
KomuCopyr
Ilm
6
7
8
9
1
unitas eLearniright © 2003-
muKomp
(a)
6. Kemudia
hasil cop
7. Kemudia
menggu
diluar log
8. Untuk m
semua s
Gamb
9. Berikan
dengan
: 100 %,
%.
0. Sehingg
ing IlmuKomp2008 IlmuKom
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
puter.Com mputer.Com
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
Page 9
KomuCopyr
Ilm
1
2. TU
y
1
2
3
4
5
6
7
3. GU
d
1
2
unitas eLearniright © 2003-
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
ing IlmuKomp2008 IlmuKom
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
puter.Com mputer.Com
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.
Page 10
KomuCopyr
Ilm
3
4
5
6
7
4. G
U
la
g
a
re
C. InL
yaiot
1
unitas eLearniright © 2003-
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
ing IlmuKomp2008 IlmuKom
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
puter.Com mputer.Com
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,
Page 11
Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2008 IlmuKomputer.Com
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.