BAB IV TEKNIS PERANCANGAN
4.1 Alternatif Desain 4.1.1 Desain Produk Utama a. Cover CD
Gambar 9. Cover CD alternatif Desain untuk cover CD berukuran 14x12 cm menggunakan desain vector, pada tampilan depan terdapat pada gambar seseorang yang memegang bola dan garis yang membentuk bola basket, font yang digunakan ialah :
Hotel Coral Essex
: BASKET BALL
Mainframe BB
: Strategy Learning for High School
The Maple Origins
: Zone Defense Edition
Warna yang digunakan hijau toska dengan gradasi. R:122 G:174 B:185
C:54 M:18 Y:24 K:0
#7aaeb9
Tampilan belakang cover CD yaitu daftar isi dari produk CD ini, menggunakan font Century Gothic dan warna yang digunakan ialah orange dengan gradasi. R:242 G:152 B:6 C:3 M:46 Y:100 K:0
#f29806
68
Desain cover CD mengikuti desain opening yang harus melakukan perubahan desain secara keseluruhan. b. Interface 1. Opening lay out
1.
2. Gambar 10. Opening alternatif
Pada gambar pertama ialah desain opening untuk masuk kedalam menu dibuat dengan ukuran 600 x 800, font dan warna hampir seluruhnya sama dengan desain cover CD hanya ada tombol enter yang menggunakan font Script MT Bold. Pada gambar kedua adalah perubahan desain opening terdapat gambar yang identik dengan bola basket seperti bola basket, papan ring basket dan sepatu basket, terdapat juga gambar panah-panah yang diibaratkan sebagai arah pergerakan pemain dalam sebuah strategi permainan bola basket. Terdapat judul dari CD interaktif ini yaitu Strategic Learning menggunakan font Rusted Plastic dan istilah-istilah dalam permainan basket menggunakan font "eL&FoNt(urban calligrafi). Desain dirancang menggunakan teknik kolase dan desain kedua ini yang akan dikembangkan menjadi desain akhir.
69
2. Home lay out
1.
2. Gambar 11. Home alternative Gambar pertama terdapat empat menu yaitu Learning, Terminology, Zone
defense, dan contact. Terdapat juga gambar vector papan ring basket dan ilustrasi pola strategi didalam lapangan dan telah dijadikan animasi.warna yang digunakan sama seperti cover CD bagian belakang. Gambar kedua adalah desain yang sudah dirubah total sehingga terlihat lebih hidup dan penempatan tombol yang unik sehingga menarik perhatian pengguna. Penggunaan elemen graffiti bersangkutan dengan bola basket yang memberi kesan streetball. Desain ini yang akan dikembangkan untuk desain akhir.
3. Lay out isi menu
1.
2. Gambar 12. Isi menu alternative 70
Pada gambar pertama ialah tampilan isi menu strategi yang membahas tentang pergerakan dalam permainan basket, terdapat setengah lapangan basket yang menjadi area permainan dan didalamnya terdapat lima icon pemain penyerang yang diilustrasikan dengan lingkaran biru dan lima icon pemain penjaga yang diilustrasikan dengan tanda silang merah, jadi terdapat sepuluh pemain yang dianimasikan berjalan. Terdapat juga teks sebagai panduan dalam pergerakan animasi dan tombol untuk kembali ke menu home.. Kekurangan dari perancangan ini ialah tidak ada narasi dan desain ikon yang masih kaku serta perpaduan warna yang kurang menarik. Pada gambar kedua adalah gambar yang telah mengalami perubahan dalam segi warna, tombol da dann font. Ruang kosong yang terdapat dalam layout ini adalah tempat dimana isi dari tutorial tentang strategi permainan bola basket yang akan dibahas nantinya, desain ini akan dikembangkan untuk desain akhir.
4.1.2 Alternatif Desain Tombol 1.
Mouse up
Mouse over Gambar 13. Tombol 1 alternatif Tombol ini menggunakan animasi pada gambar bola basket yang dimana ketika mouse diarahkan kedalam tombol maka bola akan membesar dan berputar juga dengan warna akan berubah menjadi lebih terang. Kekurangannya ialah menggunakan font arial yang terlihat kaku tidak fleksibel.
71
2.
Mouse up
mouse over Gambar 14. Tombol 2 alternatif
Ini adalah tombol menu pada pada tampilan home yang terdapat empat tombol yang sama dengan menu berbeda, bentuk tombol ini persegi tanpa sudut lancip dan diberi warna orange dengan efek glossy,, animasi pada tombol ini ialah ketika mouse diarahkan kedalam tombol maka warna tombol berubah menjadi gelap. Font yang digunakan pada tombol ini ialah Freshman diberi efek seperti permukaan besi (metal).
3.
Mouse up
mouse over Gambar 15. Tombol 3 alternatif
Ini adalah tombol sub menu yang menjadi tombol tujuan untuk memilih strategi apa yang ingin dimainkan karena terdapat lima strategi yang berbeda. Bentuk tombol sama seperti tombol menu hanya saja warnanya yang berbeda, tombol ini berwarna hitam dengan efek glossy. animasi pada tombol ol ini ialah ketika mouse diarahkan kedalam tombol maka warna tombol berubah menjadi putih glossy,, penggunaan font dan efek sama seperti tombol menu. 72
4.1.3 Alternatif Animasi 1.
Gambar 15. Animasi opening alternatif
Ini adalah animasi opening desain pertama dimana terlihat siluet dari pemain basket yang berubah-ubah gerakannya dan tulisan yang ada pada desain ini menggunakan font Agency FB yang berganti tulisan disesuaikan dengan pergantian gambar pemain. Durasi animasi ini 00:00:08 detik.
2.
Gambar 16. Animasi isi alternatif
Pada menu strategi terdapat animasi pergerakan pemain basket yang terdiri dari lima icon pemain penyerang yang diilustrasikan dengan lingkaran biru dan lima icon pemain penjaga yang diilustrasikan dengan tanda silang merah, jadi terdapat sepuluh pemain yang dianimasikan untuk menjelaskan tentang 73
pergerakan strategi permainan bola basket. Terdapat lima strategi yang bisa dipelajari. Durasi rata-rata animasi 00:00:30 detik.
4.1.3 Alternatif Desain Produk Pendukung 1.
Gambar 17. T-shirt alternatif 2.
Gambar 18. Produk pendukung alternatif Pada desain roduk pendukung telah dibuat t-shirt dengan dua warna yaitu putih dan hitam, desain t-shirt putih bergambar setengah lapangan dan terdapat icon pemain penyerang dan penjaga dengan warna hitam solid, untuk t-shirt hitam bergambar garis dari bola basket yang berwarna orange terang dan keduanya menggunakan judul dengan font yang sama pada desain cover CD.
74
4.2 Desain Akhir 4.2.1 Interface 1. Opening Lay out
Gambar 18. Interface Opening Lay out Desain opening ini sudah dikembang dari desain terdahulu dan ditetapkan sebagai desain akhir dalam ukuran full screen 1024 x 768, 72 pixel/inch pada monitor 17”. Dimulai dari gambar latar yang dibuat gelap untuk mengedepankan gambar utama agar terlihat fokus, selain itu gambar latar juga dipenuhi dengan graffiti berwarna abu-abu tua dengan efek grunge splash untuk memberi kesan sangat “jalanan” karena bola basket identik dengan graffiti. Terdapat tulisan judul “Strategic learning” dan tag line berwarna putih yang melambangkan kecerdasan dan kepintaran dengan kepala tulisan berwarna orange yang melambangkan agar selalu mengedepankan sportifitas dan kerja keras sesuai dengan tag line yaitu “Play Hard Play Smart”.
75
Font yang digunakan ialah Kab, animasi dari tulisan judul dan tag line yaitu datang dengan cepat seperti berbayang lalu menjadi fokus. Dalam desain opening terdapat gambar yang identik dengan permainan bola basket seperti papan ring basket, sepatu basket, dan bola basket, terdapat juga gambar panah-panah panah yang diibaratkan sebagai arah pergerakan pemain dalam sebuah strategi permainan bola basket. Gambar panah digunakan warna orange agar berkesan sporty jika dipadukan dengan latar hitam beigu pula dengan gambar papan ring dan sepatu yang terlihat seperti mengepakkan sayap, animasi dalam desain ini dimulai ketika bola keluar dari tengah lalu membesar dan berputar kemudian kluar illustrasi illustrasi asap dari belakang bola yang akan terus mengepul menandakan semangat untuk bermain basket, satu persatu gambar muncul dari dalam bola dan tersusun seperti terlihat pada gambar. Untuk sound efek digunakan pada setiap kemunculan gambar dalam gerakan animasi dan pada tombol enter. Gambar 19.. Tombol enter
Font : Modifikasi Tombol enter berada di tengah dan akan menyala, warna yang diberikan ialah warna kuning dan orange terlihat seperti gold berkesan mewah.
76
2. Menu Lay Out
Gambar 20. Interface Menu Lay out
Desain Menu telah mengalami perubahan dari segi tombol dan background maupun elemen gambar dari desain sebelumnya juga dapat digunakan pada desain akhir, background masih sama seperti desain opening. Kali ini gambar utama bola basket yang menjadi lebih besar barada ditengah berkesan timbul dan ketika di klik kiri mouse pada bola, bola akan sedikit mengecil dan bersuara seperti dipantulkan kelantai. Elemen gambar berwarna putih yang sangat kontras dengan background, terdapat gambar pemain bola basket , tiang ring, gedung, dan graffiti. Semua itu dumaksudkan sebagai bola basket adalah permain masyarakat urban diperkotaan dan identik dengan graffiti. Tombol menu sudah dimodifikasi dari sebelumnya menjadi terlihat lebih lembut dan glossy, dan aminasi tombol ini sangat unik karena ketika mouse diarahkan tombol akan menembakkan bola basket lalu berubah warna.
77
Mouse up
Mouse over
Font yang digunakan : Guardian Expanded Gambar 21. Tombol menu Selain itu terdapat juga tombol untuk mendengarkan musik yang bisa dinyalakan dan dimatikan dengan animasi bermodel equalizer serta tulisan on/ off. Tombol penting lainnya yaitu tombol exit pada tombol akan menuju keluar dari program sebelum keluar aka nada kredit title terlebih dahulu, tidakada animasi pada tombol ini Mouse up
Mouse over
Font tombol : Kab
Gambar 22. Tombol on/off dan exit
78
3. Menu isi Theory
Gambar 23. Menu isi Theory Dalam menu ini akan membahas atau memberikan materi menyangkut tentang permainan bola basket, posisi pemain basket dan strategi dalam permainan bola basket. Tampian desain terlihat lebih sederhana karenakan difokuskan pada layar yang diberi latar orange sebagai layar yang akan menjalankan animasi. Judul halaman tertera di kiri atas dan tulisan di kiri bawah berfungsi sebagai tombol yang akan membawa pengguna kembali ke menu home, selain itu untuk menjalankan animasi ada tombol player terdiri dari tombol Play, Stop, Back, dan Next yang mempunyai animasi dengan mengeluarkan lingkaran orange dalam tombol ketika disentuh oleh pointer.
Mouse up
Mouse over
Font : St.
Andrew Gambar 24. Tombol Player
Gambar 25. Tombol Home 79
4. Menu Isi Tricks
Gambar 26. Menu Isi Tricks Pada menu ini berisikan video-video turorial pergerakan singkat yang akan dimainkan pada saat belajar strategi, terdiri dari enam video, yaitu video passing, cross over, pick.n roll, post play, Shooting, lay-up. Tombol yang digunakan pada desain ini adalah pengembangan dari bentuk tombol desain sebelumnya, tombol untuk kembali ke menu home juga disediakan. Pada video tombol player sudah tersedia secara otomatis .
Mouse up
Mouse over
Font : Kab
Gambar 27. Tombol sub menu
80
5. Menu isi Strategy
Gambar 28. Menu isi Strategy Pada menu ini yaitu pokok dari perancangan CD interaktif ini karena disini membahas bagaimana menentukan pola strategi dalam permainan bola basket dengan menggunakan illustrasi animasi, Lapangan yang digunakan hanya setengah lapangan karena permainan bola basket hanya bermain efektif di setengah lapangan saja dan lapangan diberikan warna lantai kayu yang persis dengan lantai lapangan indoor. Didalam lapangan
terdapat icon baju tanpa
lengan yang menjadi ciri khas pemain basket, dibuat sedemikian rupa sehingga sesuai dengan lapangan yang disediakan, ada sepuluh icon pemain dan satu bola yang dimainkan, terdiri dari 2 tim pemain yaitu tim putih dan tim merah masing masing terdiri dari 5 orang pemain yang mempunyai posisi tersendiri, posisi dilihat berdasarkan nomor yaitu :
Posisi satu yaitu Point guard atau play maker
Posisi dua yaitu Shooting guard 81
Posisi tiga yaitu Small forward
Posisi empat yaitu Forward
Posisi lima yaitu Center atau Bigman
Pada desain tombol digunakan tombol yang sama pada desain Menu Tricks dan tombol player juga menggunakan desain yang sama pada desain menu Theory, tombol pada daesain ini terdiri dari tombol :
Information, berisikan tentang pemberitahuan tentang garis-garis didalam lapangan dan arah serang atau jaga pada saat bermain serta siapa saja yang menemati posisi didalam lapangan.
2-3 Zone defense yaitu formasi penjagaan zona yang terdiri dari dua penjaga didepan dan tiga dibelakangnya.
Man to man defense yaitu penjagaan satu lawan satu, penjaga selalu mengukuti pergerakan lawannya.
Offensive, pada menu ini akan mempelajari strategi menyerang yang pertama menyerang dengan penjagaan zone defense yang kedua meyerang dengan penjagaan man to man. Tutorial ini menggunakan narasi vocal yang akan menjelaskan istilah dari pergerakan yang dijalankan oleh animasi.
82
6. Menu Quiz
Gambar 28. Menu Quiz pada menu quiz ini pengguna diberikan pertanyaan seputar apa yang sudah dipelajari dari menu-menu sebelumnya pertanyaan dan jawaban diberikan sefektif mungkin sehingga pengguna dapat mengingat-ingat apa yang telah dipelajari dari tutorial CD interaktif ini. Terdiri dari 5 pertanyaan yang bervariatif tidak hanya pilihan a,b,c dan d saja namun pilihan dapat langsung di klik ada jawaban. Pertanyaan ini dibuat satu arah jika benar bisa terus ke pertanyaan berikutnya jika salah maka harus kembali ke menu quiz awal sebagai hukuman. Jika jawaban benar akan tampil dua ibu jari dan tulisan “GOOD” serta akan keluar tombol next untuk menuju ke pertanyaan selanjutnya, jika jawaban salah tampilan pada layar akan merah transparant dan muncul tulisan “Sorry you wrong, please” disambung dengan tulisan “try again” sebagai tombol untuk kembali pada pertanyaan awal.
83
Gambar 29. Halaman Jawaban benar dan salah 7. Credit Title
Gambar 30. Halaman Credit Title Menu ini adalah tampilan penutup dari CD interaktif yang tertera alamat e-mail bagi siapapun yang mempunyai saran atau kritik mengenai CD interktif ini, tertera pula ucapan terima kasih bagi yang sudah menggunakan media ini dan tentunya alamat sumber video yang digunakan sebagai bahan tutorial dalam perancangan CD interaktif. Ada tampilan menu kali ini tidak banyak gambar yang ditampilkan hanya gambar seorang pmain basket yang sedang memegang bola. 84
4.3 Produk Media Utama 1. Cover CD dan Label CD
Gambar 31. Back cover, front Cover CD dan Label CD
Cover CD berbentuk persegi berukuran lebar 13 dan tinggi 19 cm dan Label CD berbentuk bulat berdiameter 6 cm, desain pada cover dan label CD menggunakan perpaduan antara desain opening dan menu pada CD interaktif. Desain pada back cover CD terdapat teks mengenai gambaran umum mengenai isi dari CD interaktif, terdapat juga pesan untuk meyalakan sistem audio karena CD interaktif ini menggunakan narasi/ voice over, selain itu terdapat pula informasi alamat email untuk kritik dan saran serta pemesanan lebih lanjut.
85
4.3.1 Produk Media Promosi
Gambar 32. Poster dan X-banner
4.3.2 Produk Pendukung
Gambar 33. T-shirt
Gambar 34. Topi 86
Gambar 35. Handuk kecil
Gambar 37. Head band
Gambar 36. Botol Air
Gambar 38. Hand band
Gambar 39. Pin
Gambar 40. Ballpoint
Gambar 41. Mouse pad
Gambar 42. Sticker
87
4.4 Durasi / Timing lap Dalam perancangan CD interaktif ini terdapat animasi, sound, dan video yang telah digabungkan menjadi satu media, mulai dari opening hingga ending masing – masing mempunyai waktu yang berbeda dalam setiap menu, berikut ini adalah waktu dari setiap animasi, sound, dan video yang terdapat dalam CD intraktif :
Opening, durasi animasi 00:38 detik. animasi akan mengulang dari awal ketika sudah sampai detik 38. Diikuti dengan musik yang berdurasi 00:28 detik.
Menu Home, durasi animasi 00:05 detik. Animasi akan terus berjalan karena menggunakan sistem loop pada Adobe Flash. Musik yang mengisi menu home berdurasi 00:57 detik, akan mengulang dari awal ketika waktu sudah habis.
Menu Theory, durasi animasi 04m:10 detik. Animasi terdiri dari beberapa chapter tetapi tetap satu arah. Terdapat narasi/ voice over dan musik sepanjang durasi animasi.
Menu Tricks, durasi video : - Video Passing, 00:54 detik - Video Cross Over, 00:12 detik - Video Pick n Roll, 00:13 detik - Video Post Play, 00:09 detik - Video Screening, 00:08 detik Semua video diambil menggunakan angle medium full shoot, terlihat seluruh
bagian tubuh.
88
Menu Strategy, durasi animasi : - Menu Information, 00:59 detik - Menu 2-3 Zone Defense, 01m:28 detik - Menu Man to Man, 01m:02 detik - Menu Offensive, 02m:08 detik Terdapat narasi/ voice over dan musik sepanjang durasi animasi.
Menu Quiz, animasi akan terus berjalan dalam setiap quiz sampai pengguna menjawab pertanyaan yang kemudian berlanjut kepertanyaan berikutnya karena animasi menggunakan sistem loop pada Adobe Flash. Durasi animasi rata –rata dalam setiap quiz 00:04 detik.
Credit title, ini adalah menu ketika pengguna menekan tombol exit untuk keluar dari program CD interaktif. Durasi animasi 00:03 detik. Durasi dalam CD interaktif tidak bisa dipastikan karena menggunakan system loop yang akan mengulang animasi tidak seperti film yang berjalan satu arah, jika keseluruhan durasi dari CD interaktif digabungkan maka total durasi menjadi 12 menit : 48 detik.
89
4.5 Spesifikasi Teknis Perancangan Perancangan ini dibuat dengan didukung oleh tenaga komputer dan piranti lunak, dengan spesifikasi sebagai berikut : 1.Hardware :
Intel Pentium 4 Core2 duo
VGA card 128 Mb
RAM 512 Mb
HD 120 Gb
CD / DVD Room
Sound Card
Layar 17’ Flat 2. Software :
Adobe Flash CS3 Penggunaan Adobe Flash sebagai software utama pada perancangan desain animasi CD interaktif, semua unsur audio visual dari awal sampai akhir digabungkan menggunakan software ini.
Adobe Photoshop CS3 Penggunakan Adobe Photoshop untuk mengedit foto (bitmap image) dan teks yang akan digunakan dalam CD interaktif, semua gambar disimpan dalam format .png dikarenakan format ini tidak membawa backgraund, serta ukuran file dapat diminimalisir sehingga tidak berat saat menjalankan animasi.
90
Adobe CorelDraw X4 Software ini digunakan untuk membuat vector image yang dibuat sesuai dengan bentuk yang diinginkan kemudian diolah kembali dengan menggunakan photoshop.
Windows Movie Maker Ini adalah software yang sudah tersedia pada windows, digunakan untuk mengedit video dan file yang dihasilkan tidak terlalu besar.
Adobe Auditions 3.0 Ini adalah software untuk mengolah suara atau music yang akan digunakan dalam media CD interaktif, file disimpan dalam format .wav dan .mp3 dengan ukuran file yang tidak terlalu besar.
4.6 Operasional CD media interaktif
ini
digunakan dengan
menggunakan perangkat
komputer yang mempunyai CD Room atau DVD Room dan sangat disarankan untuk menggunakan speaker aktif karena hampir seluruh penjelasan didalam CD interaktif ini menggunakan sound/ voice over. Program CD media interaktif
ini memerlukan beberapa piranti
pendukung agar dapat berjalan dengan baik, CD dimasukkan kedalam CD/DVD Room dan dijalankan dengan menggunakan Flash Player apabila komputer belum mempunyai software tersebut tidak perlu mencari lagi karena sudah sertakan didalam CD. CD dapat disimpan dan digunakan sesuai dengan kehendak, CD mempunyai daya tahan tersendiri oleh karena itu disarankan untuk selalu menaruh CD didalam cover cd yang disediakan.
91
