BAB IV TEKNIS PRODUKSI MEDIA

Transkripsi

1 55 BAB IV TEKNIS PRODUKSI MEDIA 4.1 Teknis Produksi Media Proses analisis produksi media Proses analisa produksi media merupakan urutan analisa penulis dari beberapa kinerja yang secara terorganisir dan sistematis tersalurkan yang menjadi sebuah analisa merupakan pencapaikan untuk membuat desain website yang secara arah terkonsep menjadi sebuah karya terlihat statis. Resolusi desain website yang akan penulis buat adalah 1024 x 768. alasan penulis memilih resolusi tersebut adalah karena halaman memerlukan resolusi yang lebih pada penempatan desain Pra Produksi Dalam tahapan proses pra produksi penulis membuat jadwal dalam pembuatan website. Bentuk Kegiatan A. Pengumpulan Data 1. Refrensi 2. Pencarian Data B. Analisa Data 1. Refrensi Karya C. Konsep Konten Website 1. Konsep Pembahasan 2. Menentukan Materi 3. Menentukan Struktur Layout 4. Menentukan Karakter Bulan 1 Bulan 2 Bulan 3 Bulan

2 56 5. Membuat Desain Layout 6. Coloring layout & Karakter 7. Pembuatan Animasi Flash 8. Menentukan Media Pendukung 9. Finishing Tabel. 4.1 Pra Produksi Produksi Dalam proses produksi desain website ini terdapat beberapa halaman website,dimana setiap halaman mewakili dari menu yang akan di akses nantinya. Desain website ini terdapat 2 halaman, dimana setiap halamannya memiliki bagian bagian dan fungsi tertentu dalam menyampaian informasi. Setelah membuat halaman selesai satu per satu kemudian di lanjutkan dengan tahapan pembuatan link, pada tahap ini semua halaman yang sudah selesai dibuat kemudian saling di hubungkan satu sama lain, sehingga nanti semua halaman yang telah dibuat akan menjadi satu. Dalam tahapan proses Produksi media penulis membagi dua bagian, yaitu proses teknis media utama dan proses teknis media pendukung Proses Digital Imageing Dalam tahapan digital imaging adalah tahapan dimana proses pembuatan layout yang menggunakan software digital imaging. Untuk perwarnaan menggunakan warna standar RGB. Tahap digital imaging ini terdiri dari

3 57 pembuatan layout seperti : Karakter, background utama, footer, dan button Proses Karakter Gambar 4.1 Karakter Pertama Gambar diatas karakter utama dalam desain website AYO BELAJAR. Karakter seorang anak laki laki yang menggunakan baju putih dan celana berwarna merah. Yang menjadikan karakter tersebut suatu simbol dari website. Gambar 4.2 Karakter kedua Gambar diatas karakter utama dalam desain website AYO BELAJAR. Karakter seorang anak

4 58 perempuan yang menggunakan baju putih dan rok berwarna merah jambu. Yang menjadikan karakter tersebut suatu simbol dari website Proses Desain Halaman Website Gambar 4.3 Warna Background Warna pada background utama disesuaikan dengan tema dari website AYO BELAJAR. Untuk itu penulis membuat rangkaian warna langit yang memiliki gradasi putih. Warna biru muda dan putih. Pada pembuatan background utama penulis menggunakan teknik gradasi. Gambar 4.4 Footer

5 59 Gambar diatas merupakan desain footer untuk website AYO BELAJAR. Pemilihan gambar menggunakan suasana perkebunan sehingga memiliki kesan sejuk. Footer disesuaikan dengan warna background. Gambar 4.5 Tampilan halaman utama Gambar tersebut merupakan hasil salah satu tampilan bagian dari halaman home pada website dan tampilan akan digunakan sebagai halaman utama. Gambar 4.6 Tampilan Halaman kedua Gambar tersebut merupakan hasil salah satu tampilan untuk bagian Halaman pelajaran dan tampilan ini akan di gunakan untuk setiap halaman

6 60 pada pembuatan website AYO BELAJAR. Yang membedakan hanyalah content atau isinya saja pada setiap halaman Proses Desain Button Website a.button Utama Pada button menggunakan button original image dan button rollover image, dengan menggunakan warna warna yang berbeda pada tiap buttonnya. Warna yang digunakan kuning, orange, biru, dan hijau. Masing masing warna pada button di beri gradasi sehingga pada setiap button memiliki dua warna yang berbeda. Button original image hanya terdapat simbol seperti rumah, buku, stick games, dan not balok. Pada Rollover Image menggunakan typografi Rumpelstiltskin. Format akhir dari button utama PNG.

7 61 Gambar 4.7 Desain Button original image Gambar 4.8 Desain Button Rollover Image Gambar 4.9 Desain Button original image image Gambar 4.10 Desain Button Rollover

8 62 Gambar 4.11 Desain Button Original Image Gambar 4.12 Desain Button Rollover Image Gambar 4.13 Desain Button original Image

9 63 Gambar 4.14 Desain Button Rollover Image b. Sub Button Pada Sub button menggunakan button original image dan button rollover image, dengan menggunakan warna warna yang berbeda pada tiap button tekt. Button Teks menggunakan typografi bubblegums. Button Original Image menggunakan dua warna. Warna utama putih pada tiap teks dan warna kedua disesuaikan. Munggunakan kepala dari karakter, dan memiliki format akhir PNG. - Sub Button desain pertama Gambar 4.15 Desain Button Original Image

10 64 Gambar 4.16 Desain Button Rollover Image - Sub Button desain kedua Gambar 4.17 Desain Button Original Image Gambar 4.18 Desain Rollover Image Proses Website

11 65 Gambar 4.19 Desain Halaman Website Proses animasi Gambar 4.20 Animasi Animasi di dalam website ini menggunakan animasi Motion tween,yang kemudian digerakan. Animasi menggunakan gambar awan, dengan format akhir swf Proses Pembuatan Media Pembelajaran a. Penjumlahan Media pembelajaran menggunakan teknik Drag and Drop. Apel dapat di drag ke bagian apel yang hitam. Dengan menggunakan

12 66 background halaman, format akhir swf. Gambar 4.21 Media Pembelajaran Penjumlahan b. Belajar Membaca Media pembelajaran menggunakan teknik Up and over, Ketika pointer mnyentuh bagian huruf akan mengeluarkan suara. Dengan menggunakan background halaman dan terdapat animasi awan bergerak. Gambar 4.22 Media Pembelajaran Belajar Membaca

13 67 c.mengenal Huruf Media pembelajaran menggunakan teknik Next and Previous, Ketika button next akan muncul huruf,dan button previous untuk kembali ke halaman sesudahnya. Pada button dapat mengeluarkan suara. Dengan menggunakan background halaman dan terdapat animasi awan bergerak serta terdapat backsounds. Gambat 4.23 Media Pembelajaran mengenal huruf Gambar 4.24 Media Pembelajaran mengenal angka

14 68 d.pengurangan Media pembelajaran menggunakan teknik Next and Previous, Ketika button next akan muncul huruf,dan button previous untuk kembali ke halaman sesudahnya. Pada button dapat mengeluarkan suara. Dengan menggunakan background halaman. Gambar 4.25 Media Pembelajaran pengurangan e.mengenal Suara Media pembelajaran menggunakan teknik Up and over, Ketika pointer mnyentuh bagian huruf akan mengeluarkan suara. Dengan menggunakan background halaman dan terdapat animasi awan bergerak.

15 69 Gambar 4.26 Media Pembelajaran Mengenal Suara 4.2 Proses Akhir Media Media Utama Website Dalam pembuatan website ini terdiri dari 4 menu. Yaitu : 1. Home 2. Pelajaran: - Isi content 3. Games: - Isi content 4. Video : Isi Content 1. Home Home pada pembuatan website, halaman utama pada website yang isinya sangat singkat, dan jelas. Pada menu ini terdapat beberapa menu utama seperti :Pelajaran, Games dan bernyanyi serta terdapat karakter. Terdapat animasi awan bergerak.

16 70 Gambar 4.27 Halaman Home 2. Pelajaran Halaman pelajaran pada pembuatan website, halaman kedua pada website yang terdapat button utama, dan button content yang menggunakan ilustasi gambar kepala dari karakter utama. - Isi content Gambar 4.28 Halaman Pelajaran

17 71 Pada Halaman Isi content pada website, terdapat button utama dan media pembelajaranan. Gambar 4.29 Halaman isi content 2.Games Pada halaman games, halaman terdapat button utama, dan button content yang menggunakan ilustasi gambar kepala dari karakter utama.

18 72 Gambar 4.30 Halaman Games - Isi content Pada Halaman Isi content games pada website, terdapat button utama,penjelasan cara bermain dan permainan. Gambar 4.31 Halaman isi contant Games 3. Video Pada halaman bernyanyi, halaman ini terdapat button utama, dan sub button content yang menggunakan ilustasi gambar kepala dari karakter utama.

19 73 Gambar 4.32 Halaman Video - Isi Content Pada Halaman Isi content bernyanyi pada website, terdapat button utama,lirik lagu. Gambar 4.33 Halaman isi content 4.3 Pasca Produksi Tahapan ini merupakan tahapan akhir dalam pembuatan desain website, dimana hasil dari desain website tersebut di upload ke internet atau disebut juga mempublish

20 74 desain website ke server. Namun sebelum mempublish website memerlukan pembelian domain, dan hosting terlebih dahulu, dan baru nantinya desain website yang telah jadi di upload kemudian dan diaktifkan sehingga dapat di akses oleh pengunjung. Dengan desain yang di buat minimalis secara teknis akan mempermudah pengunjung dalam mengakses website tersebut dengan proses yang cepat tanpa harus menunggu lama saat mengaksesnya. Dan dilakukan service pada website, agar pemanfaatan website edukasi tersebut terus berjalan dengan baik bagi pengguna. Untuk membuat website ini terlihat minimalis, dilakukan dengan beberapa cara,misalnya meminimaliskan animasi flash pada website, sehingga penulis hanya terfokus pada bagaimana cara membuat tampilan desain website yang menarik tanpa harus mempergunakan animasi dalam desain website. 4.4 Media Pendukung 1. Mouse Pad

21 75 Gambar 4.34 Poster Ukuran Teknis Media Format : Landscape Ukuran : 19 cm x 19 cm Material : Laminasi Doff Teknis Produksi : Cetak Ofset Penempatan Media :Media ini dibagikan pada saat kegiatan promosi. Alasan : pemilihan media ini adalah karena berfungsi sebagai media pengingat dari media utama karena mouse padat dapat dipakai dan ada nilai gunanya. 2. Stiker Meja Ukuran Teknis Media Gambar 4.35 stiker meja Format : Landscape

22 76 Ukuran : 3 m x 1 m Material : Vinyil Teknis Produksi : Digital Printing Penempatan Media : Ditempatkan di stand acara. Alasan : pemilihan media ini karena berukuran cukup besar sehingga dapat terlihat dengan jelas. 3. Pin Gambar 4.36 Pin Ukuran Teknis Media Format : Landscape Ukuran : Diameter 5,5 cm Material : Kertas ink jet dilaminasi doff Teknis Produksi : Digital Printing Penempatan Media :Media ini dibagikan pada saat kegiatan promosi. Alasan : Pemilihan media ini adalah karena berfungsi sebagai media pengingat dari media utama.

23 77 4. Jadwal Pelajaran Gambar 4.37 Jadwal pelajaran Ukuran Teknis Media Format : Potret Ukuran : A3 Material : Art Paper, 150 gsm Teknis Produksi : Digital Printing Penempatan Media :Media ini dibagikan pada saat kegiatan promosi. Alasan : Dapat berfungsi sebagai media pengingat dari media utama karena jadwal pelajaran dapat dipakai dan ada nilai gunanya. 5.Stiker Nama

24 78 Gambar 4.38 Stiker nama Ukuran Teknis Media Format : landscape Ukuran : 8 cm x 4 cm Material : Stiker Vinyl Teknis Produksi : Digital Printing Penempatan Media :Media ini dibagikan pada saat kegiatan promosi. Alasan : Dapat berfungsi sebagai media pengingat dari media utama karena stiker nama dapat dipakai dan ada nilai gunanya 6.Penghapus Gambar 4.39 penghapus

25 79 Ukuran Teknis Media Format : Landscape Ukuran : 7 cm x 6 cm Material : Stiker Vinyl Teknis Produksi : Digital Printing Penempatan Media :Media ini dibagikan pada saat kegiatan promosi. Alasan : Dapat berfungsi sebagai media pengingat dari media utama karena penghapus dapat dipakai dan ada nilai gunanya. 7. Penggaris Gambar 4.40 Penggaris Ukuran Teknis Media Format : Landscape Ukuran : 30 cm Material : Penggaris Pelastik Penempatan Media :Media ini dibagikan pada saat kegiatan promosi. Alasan : Karena bisa ditempatkan dimana saja, berfungsi untuk mengingatkan secara terus-menerus, tanpa harus membutuhkan tempat yang luas. 8. Sampul Buku

26 80 Gambar 4.41 Sampul Buku Ukuran Teknis Media Format : landscape Ukuran : 31 cm x 23 cm Material : Art paper, 150 gsm Teknis Produksi : Digital Printing Penempatan Media :Media ini dibagikan pada saat kegiatan promosi. Alasan : pemilihan media ini adalah karena berfungsi sebagai media pengingat dari media utama karena sampul buku dapat dipakai dan ada nilai gunanya. 9. T-Shirt Ukuran Teknis Media Gambar 4.42 T- shirt Format : Landscape

27 81 Ukuran : Anak - anak Material : kaos Teknis Produksi : Digital Printing Penempatan Media :Media ini dibagikan pada saat kegiatan promosi. Alasan : pemilihan media ini adalah karena berfungsi sebagai media pengingat dari media utama karena kaos dapat dipakai dan ada nilai gunanya. 10. Kalender Gambar 4.43 Kalender Ukuran Teknis Media Format : Landscape Ukuran : A3 Material : dauble injek, 240 gsm Teknis Produksi : Digital Printing Penempatan Media :Media ini dibagikan pada saat kegiatan promosi.

28 82 Alasan : Dapat berfungsi sebagai media pengingat dari media utama karena kalender dapat dipakai dan ada nilai gunanya. 11. Paper Bag Gambar 4.44 Paper bag Ukuran Teknis Media Format : Landscape Ukuran : A5 Material : Double Injek, 240 gsm Teknis Produksi : Digital Printing Penempatan Media :Media ini dibagikan pada saat kegiatan promosi. Alasan : Dapat berfungsi sebagai media pengingat dari media utama karena kalender dapat dipakai dan ada nilai gunanya.