Desain Logo Desain Animasi Opening Desain Halaman Pembuka

4.4. Assembly Pembuatan

4.4.1. Layout dan Desain

Pada tahapan ini, peneliti mendesain interface game agar tampil user friendly. Tahapan desain meliputi desain logo, animasi opening, background, karakter, level permainan dan tombol navigasi pada setiap halaman yang ada di game ini.

1. Desain Logo

Gambar 4.7. Logo Game Desain logo game dibuat dari klasifikasi bentuk Picture Mark dan Letter Mark Logo. Visualisasi Logo dibuat dari gabungan gambar siluet kepala dan letter “Senam Otak” yang berbentuk tipografi sehingga menyerupai gambar otak. Gambar 4.8. Langkah Pembuatan Logo Penjelasan Gambar : a. Jalankan Aplikasi Adobe Photoshop, Buat dokumen baru di Adobe Photoshop dengan ukuran 16,93 cm x 16,93 cm dengan resolusi 300 pixel. b. Gunakan Pen Tool yang terdapat pada Toolbar untuk membuat sketsa siluet kepala c. Isi warna menggunakan warna hitam agar membentuk karakter siluet seperti pada umumnya. d. Setelah itu buat tulisan “Senam Otak” dengan menggunakan Pen Tool dan atur agar membetuk tipografi seperti otak. e. Berikan efek shine pada tulisan agar terlihat lebih nyata dengan menggunakan Brush Tool.

2. Desain Animasi Opening

Gambar 4.9. Langkah Pembuatan Animasi Opening I Penjelasan gambar : a. Buka aplikasi Adobe After Effect dan atur komposisi ukuran video dengan width 1920x1080 dengan durasi 9 detik pada frame rate 30. b. Import logo senam otak yang telah dibuat di Adobe Photoshop ke halaman project dengan cara File Import dan pilih file yang ingin digunakan. c. Berikan Effect Wipe Master pada Control Effect dan atur durasi tampil logo di 2 detik awal. d. Buat Radial Effect dengan warna e8507e dan atur durasi selama 1,5 detik untuk Effect Radial. Gambar 4.10. Langkah Pembuatan Animasi Opening II e. Pada frame selanjutnya, import gambar tipograpi senam otak yang telah di buat di Adobe Photoshop dan beri animasi zoom buble dengan mengklik Animation Effect Logo Zoom Buble. f. Setelah semua karakter ditampilkan, atur opacity dari 100 ke 0 untuk tampilan transisi ke halaman selanjutnya. g. Render project ke format .avi dengan mengklik Render Render Queueu dan atur kedalam format .avi

3. Desain Halaman Pembuka

Gambar 4.11. Desain Halaman Pembuka Pembuatan halaman pembuka menggunakan 2 aplikasi yaitu Adobe Photoshop dan Adobe Flash. Adobe Photoshop digunakan untuk mengolah gambar dan Adobe Flash untuk membuat animasinya. Tahap pertama adalah membuat latar belakang halaman pembuka menggunakan aplikasi Adobe Photosohop. Tahap selanjutnya latar belakang yang sudah dibuat di Export ke Adobe Flash Untuk di buat animasinya. Gambar 4.12. Langkah Pembuatan Latar Belakang Halaman Pembuka I Penjelasan Gambar: a. Buka aplikasi Adobe Photoshop. Kemudian buat dokumen baru dengan cara klik menu File New atau dengan menekan tombol Ctrl + N. b. Masukan angka 1024 pada kolom isian Width dan angka 640 pada kolom isian Height dengan satuan pixel. Pada kolom isian Resultions masukkan angka 72 PixelInch lalu klik Ok. c. Buka file gambar di direktori penyimpanan data dengan cara kli menu File Open atau dengan menekan tombol Ctrl + O pada keyboard. Kemudian pilih gambar lalu klik Open. d. Gunakan Tools Magic Wand Tool yang terdapat pada Toolbox. Kemudian klik pada bagian area gambar yang ingin dihilangkan. Jika sudah muncul area seleksi pada bidang warna yang sama tekan tombol Del. e. Atur Opacity gambar menjadi 70 . f. Kemudian Drag And Drop gambar tersebut ke halaman yang sudah di buat di awal dengan menggunakan Selection Tool yang ada pada Toolbox atau dengan menekan tombol V. g. Atur posisi gambar di tengah dengan sedikit ke atas. Gunakan Move Tool untuk memperbesar atau menecilkan gambar. Gambar 4.13. Langkah Pembuatan Latar Belakang Halaman Pembuka II h. Klik Layer Background, kemudaian klik Menu Edit lalu pilih Fill Shift + F5 i. Isikan warna pada Layer Background dengan warna abu- abu terang. Beri sedikit efek cahaya dengan menggunakan Dodge Tool. j. Buat bidang persegi panjang dengan menggunakan Rectangle Tool dengan warna 7fe6f5. Buat lagi persegi untuk bagian belakangnya dengan warna 339eae dan letakan posisi Layer berada di bawah Layer persegi panjag pertama. Buat sekali lagi untuk posisi yang lain dengan cara yang sama. Atur posisi dengan baik sehingga dapat membentuk efek 3dimensi. Tambahkan sedikit bayangan, klik kanan pada Layer Shape, kemudian pilih Blending Options lalu pilih Drop Shadow. Klik Ok. k. Simpan gambar dengan cara klik Menu File Save As. Isikan nama file sesuai kebutuhan lalu pilih format .jpeg. Klik Save kemudian akan muncul kotak dialog JPEG Options, atur Quality pada Max kemudian klik Ok. Gambar 4.14. Hasil Latar Belakang Halaman Pembuka Gambar 4.15. Langkah Pembuatan Animasi Pada Adobe Flash a. Buka aplikasi Adobe Flash dan buat dokumen baru dengan Type: ActionScript 2.0. Isi kolom Width: 1024px dan Height: 640px kemudian klik Ok. b. Import gambar ke dalam stage dengan cara klik menu File Import Import to Stage atau dengan menekan tombol jalan pintas Ctrl + R. c. Atur gambar hingga sesuai dengan stage. d. Buat Layer baru dengan cara klik menu Insert Timeline Layer. Kemudian ganti nama masing-masing Layer agar mudah dalam proses pembuatan halaman selanjutnya. Layer yang digunakan untuk gambar latar belakang ganti nama Layer dengan background. Sedangkan pada Layer yang baru di buat ganti dengan nama Orang Teks. e. Pilih Layer Orang Teks Pada Frame 1, kemudian pilih Text Tool. Pada Properties pilih Classic Text dan Gunakan Static Text. Di kolom Character gunakan tipe huruf pada kolom Family dan pilih jenis Font BD Bardust, Size 24 pt dan Color putih ffffff. Gambar 4.16. Langkah Pembuatan Animasi Teks Berjalan f. Ketik Segarkan Otakmu, atur posisi dan ukuran teks agar sesuai dengan latar belakang. g. Pilih objek teks yang sudah di buat, kemudain tekan tombol F8 pada keyboard atau dengan cara pilih menu Modify Convert to Symbol... pada kotak dialog yang muncul pilih Type: Movie Clip kemudian klik Ok. Buat animasi ke kanan dan ke kiri dengan mengubah posisi Frame awal dan akhir. Gambar 4.17. Langkah Pembuatan Animasi Orang h. Gunakan Pencil Tool atau dengan menekan tombol Y pada keyboard. Gambar animasi orang dengan alat tersebut hingga selesai. Pastikan Layer yang digunakan adalah Layer Orang Teks. Seleksi dan pilih gambar yang sudah jadi kemudian tekan tombol F8 untuk mengubah gambar menjadi Movie Clip. Pada kotak dialog yang muncul pilih Type: Movie Clip kemudian klik Ok. i. Klik dua kali pada Movie Clip tersebut, kemudian buat animasi dengan merubah posisi tangan gambar pada Frame yang berbeda.

4. Desain Halaman Selamat Datang