Image Processing Interface Desin

2008

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)

IlmuKomputer.Com

Muhammad Adri Teknik Elektronika FT UNP Padang 4/6/2008

IlmuKomputer.Com

Tutorial Berseri - Multimedia Instructional Design

Image Processing – Interface Design Muhammad Adri [email protected] http://muhammadadri.net

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.

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 :

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

1

Ilm muKomp puter.Co om

Ga ambar 1. Intterface yang g akan dirancang Dalam melakukan peranca angan ini, da apat dilakuk kan dalam beberapa b ta ahapan : ang gambarr backgroun nd 1. Meranca 2 Menentu 2. ukan dan memilih gam mbar kompo onen pendukkung 3 Menggabungkan se 3. emua komponen menja adi satu kessatuan desa ain interface e

M Desain Ba ackground A. Merancang 1. Aktifkan Adobe Pho otoshop 2 Buka file 2. e baru deng gan File Æ New N 3 Ukuran File 3. F 800 x 600 6 pixel, Resolusi 72 pixel/inc, p Ba ackground ttransparentt.

Gamba ar 2. New File F Photosh hop 4 Sehingga diperoleh 4. h sebuah are ea kerja Ph hotoshop se ebagai berikkut :

Komuunitas eLearniing IlmuKompputer.Com Copyrright © 2003-2008 IlmuKom mputer.Com

2


G Gambar 3. Area A kerja 800 8 x 600 pixel p 5 Selanjutnya pada area kerja 5. a dengan background, dirancang latar belakang b antarmuka. 6 Aktifkan 6.

Elliptiical Marque ee Tool, dila anjutkan den ngan mengklick

, pada pillihan add to t selection n. Buatlah se ebuah lingkkaran pada pojok kiri attas area kerja, se eperti pada Gambar 4

Gambarr 4. Seleksi dengan ling gkaran pada a pojok kiri atas 7 Aktifkan 7.

Elliptiical Marque ee Toll, dilan njutkan den ngan mengkklick

,

o selection. Buatlah se ebuah lingka aran pada p pojok kanan n bawah pada pilllihan add to area kerj rja, seperti pada p Gamb bar 5

Gambar 5. Seleksi den ngan lingka aran pada pojok kanan bawah


3

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).

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

4

Ilm muKomp puter.Co om Setting backkground S c color

G Gambar 8. Pemilihan warna w Backkground 11. Terapkan warna ba ackground tersebut t de engan menu u Edit Æ F Fill pilih pad da kotak B d Color, kem mudian klik OK, sehing gga diperoleh tampilan n seperti dialog : Background terlihat pada p Gamba ar 9. 12. Berikan sedikit Layyer Style un ntuk mencip ptakan efekk timbul tiga a dimensi dengan d : Layer Æ Layer Sttyle Æ Bev vel and Em mboss, atur secukupn nya, kemudian OK, hasil pem mberian efe ek ini trerliha at pada Gam mbar 10.

Gambar 9. 9 Area kerja Backgrou und yang telah diberi w warna. 13. Simpan dengan nam ma : latih-iinterface.psd


5


Gambar 10. Efek Bevvel dan Emb boss pada Backgorund B d kerja

M k komponen Pendukun ng B. Mendisain 1. Logo L UNP U Untuk

men nambahkan n sedikit se entuhan pa ada Logo UNP, maka dapat diilakukan

la angkah barikut : 1. Buka file e unp.jpg de engan Photo oshop : File e Æ Open

Gambar 11. 1 File UNP P YPTK.bm mp 2 Selanjutnya, area putih 2. p yang ada a disekita ar logo haru us dihilangkkan, maka perbesar p n mendrag sudut kana an bawah jenadela j arrea kerja, sehingg, s area kerrja, dengan tampak seperti s pada Gambar 12a. 1 3 Selanjutnya gunaka 3. an tool Rec ctangular Marquee M To ool, untuk m menseleksi, semua gan tujuan agar a Logo dapat d didup plikasi pada sebuah area Gambar Logo UNP, deng da Gambar 12.b file baru dengan background trransparent, terlihat pad 4 Setelah area gam 4. mbar Logo UNP terse eleksi, sela anjutnya lakukan pen ngkopian terhadap p logo yang terseleksi dengan d : Ed dit Æ Copy y 5 Buka file 5. e baru : Fiile Æ New w, yang sec cara otomatis ukurann nya sesuai dengan besar area logo yang y tercop py, dengan n background transpa arent,kemud dian klik O seperti terlihat pad da Gambar 12.c. tombol OK,


6


(a)

(b)

(c)

Gambar 12. Proses duplikasi lo ogo UNP 6 Kemudia 6. an lanjutkan n dengan mengklik m me enu Edit Æ Paste, un ntuk menem mpatkan hasil cop pyan logo UNP U pada file baru ters sebut, lihat Gambar G 13.a. 7 Kemudia 7. an hilangka an semua pinggir log go dengan n area warrna putih, dengan menggunkan tool Magic M Wand (

), seh hingga area a berwarna putih yang g berada

diluar log go UNP tersseleksi, liha at Gambar 13.b 1 8 Untuk menghapus 8. m area terseleksi terseb but, tekan tombol t Delete, lakuka an untuk semua sudut s logo, hingga h backkground log go menjadi transparan,, Gambar 13.c

(a)

(b b)

(c)

Gamb bar 13 Prosses pensele eksian logo UNP denga an Backgrou und Transparent 9 Berikan sedikit laye 9. er style den ngan :Layer Æ Layer Style Æ Be evel and Emboss, E bagai beriku ut : Style : In nner Bevel, Technoque es : Smooth h, Depth dengan ukuran seb 2 Softaen : 0, dan Sha adow Mode : Multiply, dengan op pacity 60 : 100 %,, Size : 172 %. 10. Sehingga diperoleh h sebuah log go UNP den ngan efek 3 Dimensi se ederhana


7

Ilm muKomp puter.Co om Gambar 14. Logo UNP U dengan n efek 3D menggelemb m bung 11. Simpan dengan nam ma : logo UNP.psd U 2. Tombol T Exiit U Untuk mebu uat sebuah tombol, de engan Photoshop dap pat dilakuka an dengan mudah, y yaitu : 1. Buat seb buah file baru, dengan ukuran 100 0 x 100 pixe el, backgrou und : Transp parent 2 Aktifkan 2.

e Toll, buatlah sebuah lingkaran, sebesar arrea kerja Ellipticcal Marquee

tersebut. 3 Kemudia 3. an aktifkan area backg ground

, ganti warrna backgro ound denga an wana

merah. 4 Lakukan 4. n pengisian warna bacckgorund te ersebut dengan : Edit Æ Fill, pilih option backgrou und color. 5 Untuk menjadikann 5. m nya sebuah tombol 3D,, maka tambahkan efe ek : Layer Æ Layer Style Æ Bevel and d Emboss, dengan d uku uran Size : 20, 6 Tambahkan sebua 6. ah text EXIT, dengan n mengklik tombol

, dan tem mpatkan

ditengah h simbol to ombol, Hurruf : Impac ct, Size : 30, Color : White, sehingga s diperoleh h tampilan sebagai s berrikut :

G Gambar 14. Pembuatan n, pemilihan n warna dan n efek layerr tombol EXIT 7 Simpan dengan nam 7. ma : exit.ps sd dan exitt.jpg. 3. Gedung G Re ektorat UNP P U Untuk memp perjelas info oemasi iden ntitas iklan yang y akan dibuat, makka dapat dillengkapi d dengan sebuah gamba ar gedung ya ang dimilki UNP, dengan langkah sebagai be erikut : 1. Buka File Gambar gedung g Rekktorat UNP yang dimilikki 2 Karena resolusi ga 2. ambar cukup tinggi, yaitu 2272 2 x 1704, yang dapa at dilihat age Æ Imag ge Size, ub bah ukurann nya menjadi 600 x 450 0, sejauh dengan menu : Ima an lakukan proses p penyyimpanan, karena k akan n mengubah resolusi aslinya. a ini janga


8


Gambar 15. Perubah han ukuran pixel gamb bar gedung UNP 3 Lakukan 3. n seleksi dengan d Ellip iptical Marq quee Tool, dengan m membuat lingkaran sebatas ukuran ged dung yang diinginkan, d oses seleksi tekan tomb bol shift selama pro bersama aan dengan n drag mousse, untuk menjaga m kesseimbangan n lingkaran.

Gambar 15. Penseleksian gedung rektora at yang akan n dicopy 4 Dalam kondisi 4. k terse eleksi terseb but, copy arrea dengan : Edit Æ C Copy 5 Buka file 5. e baru, dengan backgrround : Tran nsparent, ukuran u seca ara otomatis s sesuai dengan area tersele eksi, nggak usah diuba ah 6 Tempatkkan gambarr terseleksi tersebut de 6. engan : Editt Æ Paste a atau Ctrl + V 7 Simpan dengan nam 7. ma : Rektorat.psd

G Tombol Navig gasi 4. Gambar U Untuk prose es pembua atan tombo ol navigasi, pada dassarnya ham mpir sama dengan la angkah penseleksian terhadap gedung Re ektorat UNP di atas, hanya sa aja, pilih g gambar yan ng sesuai, pada p file-file e Gambar Disain yang g telah dim miliki, yang berbeda b a adalah dari segi resolu usi gambarr, karena uk kuran tomb bol lebih ke ecil, maka gunakan g re esolusi gam mbar yang le ebih kecil. C. In ntegrasi Se emua Komponen L Langkah sellanjutnya ad dalah meng gintegrasika an semua ko omponen yyang telah didesain, d yaiottu dengan la angkah : 1. Buka kembali file uttama, yang telah didisa ain : latih-in nterface.ps sd


9

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. Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2008 IlmuKomputer.Com

10

Image Processing Interface Desin

Recommend Documents