Image Processing Interface Desin

Transkripsi

1 2008 Image Processing Interface Desin 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

2 Tutorial Berseri - Multimedia Instructional Design Image Processing Interface Design Muhammad Adri adri@muhammadadri.net Lisensi Dokumen: 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 : 1

3 Gambar 1. Interface yang akan dirancang Dalam melakukan perancangan ini, dapat dilakukan dalam beberapa tahapan : 1. Merancang gambar background 2. Menentukan dan memilih gambar komponen pendukung 3. Menggabungkan semua komponen menjadi satu kesatuan desain interfacee A. Merancang Desain Background 1. Aktifkan Adobe Photoshop 2. Buka file baru dengan File New 3. Ukuran File 800 x 600 pixel, Resolusi 72 pixel/inc, Background transparent. Gambar 2. New File Photoshop 4. Sehingga diperoleh sebuah area kerja Photoshop sebagai berikut : 2

4 Gambar 3. Area kerja 800 x 600 pixel 5. Selanjutnya pada area kerja dengan background, dirancang latar belakang antarmuka. 6. Aktifkan Elliptical Marquee Tool, dilanjutkan dengan mengklick, pada pillihan add to selection. Buatlah sebuah lingkaran pada pojok kiri atas area kerja, seperti pada Gambar 4 Gambar 4. Seleksi dengan lingkaran padaa pojok kiri atas 7. Aktifkan Elliptical Marquee Toll, dilanjutkan dengan mengklick, pada pillihan add to selection. Buatlah sebuah lingkaran pada pojok kanann bawah area kerja, seperti pada Gambar 5 Gambar 5. Seleksi dengan lingkaran pada pojok kanan bawah 3

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

6 Setting background color Gambar 8. Pemilihan warna Background 11. Terapkan warna background tersebut dengan menu Edit Fill pilih pada kotak dialog : Background Color, kemudian klik OK, sehingga diperoleh tampilan seperti terlihat pada Gambar Berikan sedikit Layer Style untuk menciptakan efek timbul tiga dimensi dengan : Layer Layer Style Bevel and Emboss, atur secukupnya, kemudian OK, hasil pemberian efek ini trerlihat pada Gambar 10. Gambar 9. Area kerja Background yang telah diberi warna. 13. Simpan dengan nama : latih-interface.psd 5

7 Gambar 10. Efek Bevel dan Emboss pada Backgorund kerja B. Mendisain komponen Pendukung 1. Logo UNP Untuk menambahkann sedikit sentuhan pada Logo langkah barikut : 1. Buka file unp.jpg dengan Photoshop : File Open UNP, maka dapat dilakukan Gambar 11. File UNP YPTK.bmp 2. Selanjutnya, area putih yang ada disekitar logo harus dihilangkan, maka perbesar area kerja, dengann mendrag sudut kanan bawah jenadela area kerja, sehingg, tampak seperti pada Gambar 12a. 3. Selanjutnya gunakan tool Rectangular Marquee Tool, untuk menseleksi, semua area Gambar Logo UNP, dengan tujuan agar Logo dapat diduplikasi pada sebuah file baru dengan background transparent, terlihat pada Gambar 12.b 4. Setelah area gambar Logo UNP terseleksi, selanjutnya lakukan pengkopian terhadap logo yang terseleksi dengan : Edit Copy 5. Buka file baru : File New, yang secara otomatis ukurannya sesuai dengan besar area logo yang tercopy, dengann background transparent,kemudian klik tombol OK, seperti terlihat pada Gambar 12.c. 6

8 (a) (b) (c) Gambar 12. Proses duplikasi logo UNP 6. Kemudian lanjutkann dengan mengklik menu Edit Paste, untuk menempatkan hasil copyan logo UNP pada file baru tersebut, lihat Gambar 13.a. 7. Kemudian hilangkan semua pinggir logo dengann area warna putih, dengan menggunkan tool Magic Wand ( ), sehingga areaa berwarna putih yang berada diluar logo UNP terseleksi, lihat Gambar 13.b 8. Untuk menghapus area terseleksi tersebut, tekan tombol Delete, lakukan untuk semua sudut logo, hingga background logo menjadi transparan, Gambar 13.c (a) (b) (c) Gambar 13 Proses penseleksian logo UNP dengan Background Transparent 9. Berikan sedikit layer style dengan :Layer Layer Style Bevel and Emboss, dengan ukuran sebagai berikut : Style : Inner Bevel, Technoques : Smooth, Depth : 100 %, Size : 172 Softaen : 0, dan Shadow Mode : Multiply, dengan opacity 60 %. 10. Sehingga diperoleh sebuah logo UNP dengan efek 3 Dimensi sederhana 7

9 Gambar 14. Logo UNP dengann efek 3D menggelembung 11. Simpan dengan nama : logo UNP.psd 2. Tombol Exit Untuk mebuat sebuah tombol, dengan Photoshop dapat dilakukan dengan mudah, yaitu : 1. Buat sebuah file baru, dengan ukuran 1000 x 100 pixel, background : Transparent 2. Aktifkan tersebut. Elliptical Marqueee Toll, buatlah sebuah lingkaran, sebesar area kerja 3. Kemudian aktifkan area background, ganti warna background dengan wana merah. 4. Lakukan pengisian warna backgorund tersebut dengan : Edit Fill, pilih option background color. 5. Untuk menjadikannya sebuah tombol 3D, maka tambahkan efek : Layer Layer Style Bevel and Emboss, dengan ukuran Size : 20, 6. Tambahkan sebuah text EXIT, dengann mengklik tombol ditengah simbol tombol, Huruf : Impact, Size : 30, Color diperoleh tampilan sebagai berikut :, dan tempatkan : White, sehingga Gambar 14. Pembuatan, pemilihan warna dan efek layer tombol EXIT 7. Simpan dengan nama : exit.psd dan exit.jpg. 3. Gedung Rektorat UNP Untuk memperjelas infoemasi identitas iklan yang akan dibuat, maka dapat dilengkapi dengan sebuah gambar gedung yang dimilki UNP, dengan langkah sebagai berikut : 1. Buka File Gambar gedung Rektorat UNP yang dimiliki 2. Karena resolusi gambar cukup tinggi, yaitu x 1704, yang dapat dilihat dengan menu : Image Image Size, ubah ukurannya menjadi 600 x 450, sejauh ini jangan lakukan proses penyimpanan, karena akan mengubah resolusi aslinya. 8

10 Gambar 15. Perubahan ukuran pixel gambar gedung UNP 3. Lakukan seleksi dengan Elliptical Marquee Tool, dengan membuat lingkaran sebatas ukuran gedung yang diinginkan, selama proses seleksi tekan tombol shift bersamaan dengann drag mouse, untuk menjaga keseimbangann lingkaran. Gambar 15. Penseleksian gedung rektorat yang akan dicopy 4. Dalam kondisi terseleksi tersebut, copy area dengan : Edit Copy 5. Buka file baru, dengan background : Transparent, ukuran secara otomatis sesuai dengan area terseleksi, nggak usah diubah 6. Tempatkan gambar terseleksi tersebut dengan : Edit Paste atau Ctrl + V 7. Simpan dengan nama : Rektorat.psd 4. Gambar Tombol Navigasi Untuk proses pembuatan tombol navigasi, pada dasarnya hampir sama dengan langkah penseleksian terhadap gedung Rektorat UNP di atas, hanya saja, pilih gambar yang sesuai, pada file-filee Gambar Disain yang telah dimiliki, yang berbeda adalah dari segi resolusi gambar, karena ukuran tombol lebih kecil, maka gunakan resolusi gambar yang lebih kecil. C. Integrasi Semua Komponen Langkah selanjutnya adalah mengintegrasikan semua komponen yang telah didesain, yaiotu dengan langkah : 1. Buka kembali file utama, yang telah didisain : latih-interface.psd 9

11 2. Aktifkan file logo UNP.psd, kemudian dengan menggunakan Move Tool, tarik (drag) gambar logo ke file utama, dengan penempatan sesuai dengan Gambar 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 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