BAB III PEMBAHASAN 3.1 Pengeditan Gambar dengan Menggunakan Adobe Photoshop 7.0 Langkah-langkah pengeditan gambar dengan Adobe Photoshop 7.0: 3.1.1
Menyiapkan Jendela Kerja Baru
a. Pilih dan klik menu File > New (Ctrl+N). Kotak dialog New akan ditampilkan.
Gambar 3.1 Kotak dialog new
b. Pada kotak isian Name, ketikkan nama menjadi Septie. c. Pada kotak Preset Sizes, pilih Default Photoshop Size d. Pada kotak pengaturan lebar (Width) isi dengan ukuran 17,78 cm, tinggi (Height) isi dengan ukuran 12,7 cm, tingkat resolusi (Resolution) isi dengan ukuran 28,346 pixels/cm, dan jenis pewarnaan
(Mode) isi dengan RGB color karena hanya untuk tampilan komputer dan tidak untuk dicetak. e. Klik OK, maka jendela kerja baru yang masih kosong siap digunakan.
Gambar 3.2 Tampilan jendela kerja baru yang masih kosong
3.1.2
Membuka File Image
a. Pilih dan klik menu File > Open (Ctrl+O). Kotak dialog Open akan ditampilkan. b. Pada tombol daftar pilihan Look in, pilih dan klik drive dan folder tempat dimana file tersimpan. c. Pada kotak isian File name, ketikkan nama file yang diinginkan atau kilk ganda pada nama file yang diinginkan.
Gambar 3.3 Kotak dialog open
d. Klik tombol perintah Open, maka jendela kerja Photoshop 7.0 dan image yang diinginkan akan terbuka (gambar 3.4).
Gambar 3.4 Tampilan image yang sudah dibuka
3.1.3
Memotong atau mengambil sebagian image (Cropping)
a.
Pilih dan klik crop tool pada toolbar.
b.
Sorot atau blok area image yang diambil untuk dijadikan image
baru yang berdiri. Gambar 3.5 Tampilan pemilihan area image yang akan di cropping
c.
Pilih dan klik move tool pada toolbox. Kotak dialog konfirmasi
proses Cropping akan ditampilkan. d.
Pilih dan klik tombol perintah Crop, maka image hasil
crooping akan ditampillkan.
Gambar 3.6 Tampilan image hasil cropping
e.
Pemotongan gambar selain dengan menggunakan fasilitas crop
tool dapat juga dengan menggunakan magic wand tool. Dengan menggunakan magic wand tool, pemotongan objek dapat disesuaikan dengan gambarnya tanpa harus pemotongan persegi seperti yang dilakukan oleh crop tool.
Gambar 3.7 Hasil tampilan crop dengan menggunakan fasilitas magic wand
f.
Cara penggunaan magic wand tool hanya dengan mengklik
area yang akan di-crop dan apabila areanya kurang mencakupi area yang diinginkan cukup disertai dengan menekan tombol shift untuk mengikut sertakan objek tambahan yang akan di-crop. 3.1.4
Menggabungkan Image
Penggabungan image dapat menggunakan cara memindahkan objeknya saja ke dalam image yang lainnya, tetapi penggabungan dengan menggunakan fasilitas masking membuat image lebih kreatif. Penulis akan menggunakan kedua teknik penggabungan tersebut.
a.
Buka file image yang diinginkan, klik magic wand tool atau
magnetic lasso yang ada pada toolbox, pilih atau blok area image yang diinginkan. b.
Setelah dipilh atau diblok area image yang ingin digabungkan,
pilih dan klik menu Edit > Copy (Ctrl+C). c.
Buka file image yang akan menerima penggabungan.
Gambar 3.8 Objek gambar yang akan digabungkan
d.
Pilih dan klik menu Edit > Paste (Ctrl+V), kemudian dengan
menggunakan fasilitas move tool, geser atau drag ke posisi yang diinginkan.
Gambar 3.9 Tampilan image hasil penggabungan dengan cara pemindahan objek
e.
Untuk penggabungan objek menggunakan teknik masking
harus dimulai dengan gambar yang akan digabung klik tombol Load Channel as selection, dengan dijalankan fungsi ini maka gambar tersebut akan tampil garis putus-putus.
+ Gambar 3.10 Tampilan Layer yang akan di Gabung (Mask)
Gambar 3.11 Mask Layer pada Layers Palette
f. Kemudian mengklik layer yang aktif, lalu setelah penggabungan memilih menu layer > add layer mask > reveal all atau dengan mengklik pada add layer mask pada panel Layers Palette. Dengan ini gambar yang yang digabung akan menjadi transparan dan dapat disesuaikan dengan
mengubah nilai opacity, flow dan size untuk mendapatkan hasil yang lebih halus.
Gambar 3.12 Tampilan image hasil penggabungan dengan cara Masking
3.2 Perancangan Pengenalan Perusahaan (Company Profile) Langkah awal yang dilakukan untuk membuat pengenalan perusahaan atau profil perusahaan (company profile) adalah merancang desainnya terlebih dahulu. Penulis melakukan survei untuk perbandingan dengan melihat company profile yang lain. Kemudian dibuat sebuah rancangan untuk menentukan halamanhalaman yang dibutuhkan dan elemen-elemen untuk pendukungnya.
Isi Company Profile
Tombol Gambar 3.13 Perancangan Company Profile halaman satu
Gambar 3.14 Perancangan Company Profile halaman dua
Judul
Isi Tombol 1
Tombol 2
Perancangan tampilan perhalaman hanya dijabarkan dua halaman saja, karena tampilan yang ada hanya berupa posisi-posisi yang berbeda dan efek yang digunakan berulang-ulang. Penulis juga mempersiapkan seperangkat komputer untuk mendesain company profile yang berisi komponen-komponen multimedia dengan spesifikasi: •
Prosesor AMD K6-II 500 MHz
•
Memori berkapasitas 64 MB
•
VGA Card 8 MB dengan monitor SVGA
•
Hard Disk berkapasitas 15 GB
•
Sound Card dan Speaker
3.3 Pembuatan Company Profile Setelah perancangan company profile selesai, penulis memulai pembuatan company profile. Karena efek yang digunakan sederhana, maka penulis memakai perangkat lunak (software) SWiSH untuk mempercepat proses pembuatan.
Pada halaman pertama company profile, Penulis membagi menjadi tiga objek, yaitu judul, isi dan tombol dengan layar kerja 450 x 300 pixel. a.
Objek judul menggunakan efek move dan fade in selama 5
frame. b.
Objek isi menggunakan efek fade in yang ditambah dengan
gerakan posisi x (horizontal) ke kiri selama 3 frame. c.
Objek
tombol
hanya
menggunakan
efek
place
yang
ditempatkan pada frame akhir. Objek ini dirubah dari teks menjadi tombol (button) sehingga mempunyai fungsi interaktif, jika ditekan (di klik) akan menampilkan halaman berikutnya.
Gambar 3.15 Tampilan Company Profile halaman satu
Pada halaman kedua company profile, Penulis membagi menjadi empat objek, yaitu judul, isi, tombol 1 dan tombol 2.
a.
Objek judul menggunakan efek move
dan fade in selama 5 frame. b.
Objek isi Objek isi menggunakan efek
fade in yang ditambah dengan gerakan posisi x (horizontal) ke kiri selama 3 frame. c.
Objek tombol 1 mempunyai efek yang
sama pada halaman satu, hanya jika ditekan akan menampilkan halaman sebelumnya.
d.
Objek tombol 2 menggunakan efek
yang sama pada halaman satu. Gambar 3.16 Tampilan Company Profile halaman dua
3.4 Perancangan Tampilan Utama dan Menu pada Company Profile Perancangan menu utama harus dibuat semenarik mungkin agar tujuan menarik minat konsumen berhasil. Tampilan gambar telah diedit dengan Adobe
Photoshop dengan memperjelas, diperkecil, dikombinasi atau digabung (mask). Animasi interaktif dan suara ditambahkan dengan tujuan menarik minat untuk dilihat. Pembuatan hanya menggunakan satu scene yang menggunakan banyak movie clip dan button interaktif untuk mempermudah konsumen untuk melihat secara berulang-ulang.
Gambar 3.17 Diagram alur company profile
Intro
Halaman Utama
Profiles
Movie Clip 1
Products and Services Movie Clip 2
Home
Contact Us
Movie Clip 3
Mulai
Intro
Halaman Utama
Ya Pilih Profiles
Load Movie Clip 1
Tidak Pilih Products and Services
Ya Load Movie Clip 2
Tidak Ya
Pilih Home
Tidak Ya
Pilih Contact Us
Load Movie Clip 3
Tidak Gambar 3.18 Flowchart company profile
Logo
Moto
Gambar latar 1 dan teks Gambar latar 2 Button 1 Button 2 Button 3 Gambar 3.19 Perancangan Tampilan Utama
Logo
Moto
Movie Button 1 Gambar latar 2 Button 1 Button 2 Button 3 Gambar 3.20 Perancangan Tampilan Button 1 diklik
Logo
Moto
Gambar 1
Teks
Button
Menu 1
Gambar 2
Menu 2
Gambar 3.21 Perancangan Tampilan Button 2 diklik
Logo
Moto
Movie Button 3 Button 1 Button 2 Button 3
Gambar 3.22 Perancangan Tampilan Button 3 diklik
3.5 Pembuatan Animasi dengan Macromedia Flash MX Setelah perancangan selesai, maka Penulis memulai pembuatan company profile dengan menggunakan Macromedia Flash MX untuk menghasilkan menu interaktif dan efek yang lebih menarik. Langkah-langkah kerja dengan Macromedia Flash MX: 3.5.1 Pembuatan animasi a. Animasi frame by frame Caranya dengan mengklik kanan pada frame yang diinginkan lalu pilih insert keyframe.
Gambar 3.23 Tampilan Keyframe pada tiap frame yang diinginkan
b. Animasi Motion Tween
Caranya dengan mengklik kanan target frame awal dan pilih create motion tween, lalu klik kanan pada frame akhir, pilih insert keyframe.
Gambar 3.24 Tanda Motion Tween pada panel Timeline
c.
Animasi Shape Tween Caranya dengan mengklik kanan target frame awal dan pilih create shape tween, lalu klik kanan pada frame akhir, pilih insert keyframe.
Gambar 3.25 Pilihan animasi Tween:Shape pada properti layer
d. Animasi Mask Animasi Mask dibuat dengan penggabungan layer.
Gambar 3.26 Tampilan dua layer yang akan diberi efek masking
Gambar 3.27 Tampilan timeline dengan layer efek dan layer huruf yang telah dimasking
Gambar 3.28 Tampilan animasi mask hanya menampilkan huruf yang terkena kotak
3.5.2 a.
Membuat Tombol Interaktif Membuat objek tombol
Membuat simbol button dengan cara klik menu Insert > New simbol, setelah kotak dialog Create New Simbol tampil, pilih Behavior: Button kemudian pada bagian Name beri nama simbol Button, setelah selesai klik OK. Buat objek tombolnya. Pada timeline tambahkan keyframe di frame Over dengan cara pilih frame Over kemudian klik menu Insert > Keyframe. Klik Arrow Tool lalu pilih fill objek kotak, klik tombol Fill Color kemudian piih fill warna. Pada timeline tambahkan lagi keyframe di frame Down dengan cara pilih frame Down kemudian klik menu Insert > Keyframe. Pilih fill objek kotak kemudian melalui Fill Color pilih warna. Kembali ke area edit document dengan klik menu Edit > Edit Document atau klik tombol Scene langsung. Buka panel Library dengan klik menu Window > Library atau tekan F8 maka akan tampil simbol Button yang dibuat. Pilih simbol Button di dalam panel Library kemudian drag dan tempatkan di area stage.
b.
Membuat animasi pada tombol
Membuat animasi pada tombol dengan cara tampilkan jendela edit simbol , klik ganda objek Play yang ada di area stage. Klik di frame Over pada timeline maka objek play akan terpilih secara otomatis. Klik menu Insert > Convert to Simbol atau tekan F8. Beri nama simbol dibagian Name lalu pilih Behavior: Movie Clip kemudian klik OK. Klik menu Edit > edit in Place untuk mengedit movie clip tombol interaktif dari frame over. Klik di farme 1 pada timeline kemudian klik menu Insert > Create Motion Tween. Klik di frame 10 lalu klik menu Insert > Keyframe untuk menambah keyframe pada frame 10 dan keyframe di frame 20. Klik di farme 1 lalu pilih Rotate : CW melalui panel properties. Tekan tombol Enter untuk melihat objek tombol berputar searah jarum jam. Klik di frame 10 lalu klik Free Transform Tool untuk menampilkan bingkai free transform pada objek tombol. Pilih handle di bagian sudut, tahan tombol Shift kemudian drag ke arah dalam untuk mengecilkan ukuran objek tombol. Pilih Rotate: CW melaui panel properties. Klik kembali di frame 1 lalu tekan tombol Enter untuk melihat objek tombol berputar searah jarum jam dan berubah ukuran dari kecil menjadi besar seperti ukuran semula.
c.
Menambah efek suara pada tombol interaktif
Menambahkan efek suara pada tobol dengan cara Klik ganda tombol interaktif yang ada di area Stage untuk menampilkan jendela edit simbol. Klik di frame Down.Klik menu Window > Common Libraries > Sounds. Panel Library Sounds akan tampil.Pilih library Plastic Button kemudian drag dan tempatkan pada tombol interaktif di area Stage. Animasi Interaktif dengan ActionScript Membuat animasi interaktif dengan ActionScript dengan cara: a.
Menampilkan Action Panel
Klik menu Windows > Action atau tekan tombol F9, maka action panel akan ditampilkan. b.
Memberi label pada Frame
Pilih frame yang telah diberi motion tween. Aktifkan panel properties tekan Ctrl+F3. Klik pada Frame Label kemudian ketik nama label yang diinginkan, setelah selesai tekan Enter. c.
Menggunakan action dasar
Action dasar yang digunakan Stop dan play, goto, get URL, dan loadMovie.
Menambah suara pada Movie Flash a.
Mengimpor Suara
Klik menu File > import atau tekan Ctrl+R. Kotak dialog akan tampil. Di bagian Look in pilih drive atau folder file suara disimpan. Pada File of type pilih format file suara yang ingin diimpor. Kemudian klik Open, tampilkan panel Library dengan menekan tombol F11 maka akan tampil file suara yang diimpor. b.
Memasukkan suara ke dalam layer
Pada timeline klik tombol Insert Layer untuk membuat layer baru. Pilih file suara yang ada di dalam panel Library kemudian drag dan tempatkan di area Stage. Pada panel properties pilih Sync: Start. c.
Menggunakan Action stopAllSounds
Pilih tombol yang akan diberi action stopAllSounds, buka panel action dengan cara menekan tombol F9. Pilih Action > Movie Control lalu klik ganda action stopAllSounds. d.
Menggunakan efek fade in
Impor file lagu dengan format mp3. Siapkan tombol interaktif bertuliskan Play. Klik ganda berturut-turut pada tombol Play untuk menampilkan jendela edit simbol. Pilih frame Down lalu drag simbol suara yang diimpor dari panel Library ke tombol interaktif Play.Pilih frame Down lalu pilih Sync: Start dan Effect: Fade in pada panel properties.
e.
Mengedit efek fade in
Klik ganda berturut-turut tombol interaktif untuk menampilkan jendela edit simbol. Pilih frame Down dimana terdapat simbol suara. Pada panel Properties klik tombol edit di sebelah tombol pilihan Effect. Kotak dialog Edit Envelope akan tampil. Klik tombol scroll bar sebelah kanan untuk menggeser channel right dan left hingga 1.0 dan 1.5 second. Klik OK. 3.6
Pembuatan Tampilan Utama dan Menu Button 3.6.1 Pembuatan tampilan utama: a.
Objek logo menggunakan efek motion tween, animasi frame per frame, free transform dan layer tambahan untuk menampilkan efek animasi yang berulang (looping).
b.
Objek moto menggunakan efek motion tween, animasi frame per frame dan 5 layer untuk animasi.
c.
Objek menu 1, menu 2, menu 3 berupa button interaktif yang menggunakan action script pemanggilan movie dan warna.
d.
Objek gambar latar 1 dan teks menggunakan efek motion tween dengan perubahan nilai alpha dan animasi frame per frame.
e.
Objek gambar latar 2 dimodifikasi menggunakan Adobe Photoshop sehingga tampak mempunyai bayangan dan ditambah efek motion tween dan animasi frame per frame.
3.6.2
Pembuatan tampilan menu Profiles (button 1): a. Untuk objek logo, moto, menu dan gambar latar 2 tetap tidak ada perubahan. b. Objek Gambar Latar 1 dan Teks dihilangkan. c. Efek dari menu 1 yang telah ditambah action script akan memanggil tampilan movie clip. 3.6.3
Pembuatan tampilan menu Product and Service (button 2):
a. Untuk objek logo dan moto tidak ada perubahan. b. Untuk objek Menu awal, Gambar Latar 2 dan Gambar Latar 1 dihilangkan dan digantikan oleh menu 1 dan menu 2 yang baru juga movie clip. c. Efek dari menu 1 dan menu 2 yang telah ditambah action script akan memanggil movie clip untuk Teks, Gambar 1 dan Gambar 2. d. Objek tombol ditambah dengan action script untuk kembali ke Tampilan Utama. 3.6.4
Pembuatan tampilan menu Contact Us (button 3): a. Untuk objek logo, Moto dan Button tidak ada perubahan. b. Objek Gambar Latar 2 dan Gambar Latar 1 digantikan oleh movie clip. c. Movie Clip menggunakan action script untuk menampilkan efek scroll.
