Kupitekno

PRAK 06 - MENDEPLOY DI FIREBASE

noreply@blogger.com (sujak) — Sat, 05 Jan 2019 13:43:00 +0000

1. Judul
Firebase

2. Tujuan
Mencoba mendeploy di Firebase Hosting.

3. Alat dan Bahan
Google
Command Prompt

4. Dasar Teori
Firebase Hosting adalah layanan hosting konten web yang berkelas produksi untuk developer. Hanya dengan satu perintah, Anda dapat menerapkan aplikasi web serta menyajikan konten dinamis dan statis ke jaringan penayangan konten (CDN) global dengan cepat dan mudah.

Firebase Hosting dibuat untuk developer web modern. Dengan hadirnya framework JavaScript front-end seperti Angular dan fitur generator statis seperti Jekyll, situs dan aplikasi kini jadi lebih tangguh daripada sebelumnya. Jika Anda menerapkan halaman landing aplikasi yang sederhana atau Progressive Web App (PWA) yang kompleks, Hosting menyediakan infrastruktur, fitur, dan rangkaian sarana yang disesuaikan untuk menerapkan serta mengelola situs dan aplikasi.
Hosting menambahkan subdomain ke project Anda di domain firebaseapp.com. Dengan Firebase CLI, Anda dapat menerapkan file dari direktori lokal di komputer Anda ke server Hosting. Selain menyajikan konten statis, Anda dapat menggunakan Cloud Functions for Firebase untuk menyajikan konten dinamis di situs Anda. Semua konten disajikan melalui koneksi SSL dari server edge terdekat di CDN global kami.

Selain hosting konten, Firebase Hosting menawarkan opsi konfigurasi hosting yang ringan kepada Anda untuk membuat Progressive Web App yang canggih. Anda dapat menulis ulang URL untuk perutean sisi klien atau menyiapkan header kustom dengan mudah.
Setelah situs siap untuk tahap produksi, hubungkan nama domain Anda ke Firebase Hosting. Kami memberikan sertifikat SSL untuk domain Anda secara otomatis, sehingga konten Anda disajikan dengan aman. [1]

5. Tugas Praktikum
Mencoba mendeploy di Firebase Hosting.

6. Hasil Praktikum
Dalam percobaan ini kami mencoba untuk mendeploy sebuah tulisan “Hello world” pada firebase hosting. Langkahnya adalah dengan login firebase di cmd, kemudian menginisialisasi situs, memilih direktori root publik, kemudian menerapkan situs atau deploy.

Login firebase di CMD

Berhasil deploy di web melalui firebase

7. Kesimpulan :
Dalam praktikum ini, saya melakukan proses deploy di firebase hosting. Setelah berhasil mengikuti langkah-langkah hingga root publik. Saya sedikit kebingungan tentang bagaimana cara untuk mendeploy suatu file ke firebase. Kemudian saya mencari file atau folder letak directory dalam komputer saya. Dan kemudian saya coba deploy dan berhasil.

8. Referensi : :
1. https://firebase.google.com/docs/hosting/?hl=id

PRAK 05 - PENGGUNAAN FIREBASE HOSTING

noreply@blogger.com (sujak) — Sat, 05 Jan 2019 13:33:00 +0000

1. Judul
Penggunaan Firebase Hosting

2. Tujuan
Mencoba mempelajari Firebase hosting

3. Alat dan Bahan
Google
Command Prompt

4. Dasar Teori
Firebase Hosting adalah layanan hosting konten web yang berkelas produksi untuk developer. Hanya dengan satu perintah, Anda dapat menerapkan aplikasi web serta menyajikan konten dinamis dan statis ke jaringan penayangan konten (CDN) global dengan cepat dan mudah.

Firebase Hosting dibuat untuk developer web modern. Dengan hadirnya framework JavaScript front-end seperti Angular dan fitur generator statis seperti Jekyll, situs dan aplikasi kini jadi lebih tangguh daripada sebelumnya. Jika Anda menerapkan halaman landing aplikasi yang sederhana atau Progressive Web App (PWA) yang kompleks, Hosting menyediakan infrastruktur, fitur, dan rangkaian sarana yang disesuaikan untuk menerapkan serta mengelola situs dan aplikasi. Hosting menambahkan subdomain ke project Anda di domain firebaseapp.com. Dengan Firebase CLI, Anda dapat menerapkan file dari direktori lokal di komputer Anda ke server Hosting. Selain menyajikan konten statis, Anda dapat menggunakan Cloud Functions for Firebase untuk menyajikan konten dinamis di situs Anda. Semua konten disajikan melalui koneksi SSL dari server edge terdekat di CDN global kami.

Selain hosting konten, Firebase Hosting menawarkan opsi konfigurasi hosting yang ringan kepada Anda untuk membuat Progressive Web App yang canggih. Anda dapat menulis ulang URL untuk perutean sisi klien atau menyiapkan header kustom dengan mudah. Setelah situs siap untuk tahap produksi, hubungkan nama domain Anda ke Firebase Hosting. Kami memberikan sertifikat SSL untuk domain Anda secara otomatis, sehingga konten Anda disajikan dengan aman. [1]

5. Tugas Praktikum
Mencoba menggunakan Firebase Hosting.

6. Hasil Praktikum :
Dalam percobaan ini kami mencoba untuk mencoba menggunakan firebase hosting. langkah yang harus dilakukan adalah meng-install node js pada command prompt. Node js yang kami gunakan adalah versi 8.12, sedangkan npm yang kami gunakan adalah versi 6.4.1

7. Kesimpulan
Dalam proses instalasi ini, kegagalan yang saya lalui ketika mengisntall node js dan npm dikarenakan koneksi. Awalnya proses instalasi ini sukses ketika mendownload node js, namun ketika menginstall npm gagal. Kegagalan ini disebabkan karena saya menggunakan koneksi WiFi Pens yang menggunakan proksi, dan saya tidak bisa menyesuaikan aturan tersebut. Dan ketika koneksi diganti dengan koneksi WiFi tanpa proksi, proses instalasi dapat dilakukan dan berhasil. Keberhasilan ini ditandai dengan ketika saya mengecheck versinya dan muncul jenis versinya. Dalam praktikum ini yang berhasil saya lakukan adalah instalasi saja, belum mencoba untuk mendeploy file di fiirebase.

8. Referensi :
[1] https://firebase.google.com/docs/hosting/?hl=id

PRAK 02 - KAITAN FIQH DESAIN DENGAN MATA KULIAH DESAIN WEB

noreply@blogger.com (sujak) — Fri, 21 Dec 2018 10:14:00 +0000

1. Judul: Kaitan Fiqh Desain dengan Mata Kuliah Desain Web.

2. Tujuan: Untuk mengetahui kaitan atau realisasi Fiqh Desain dengan Mata Kuliah Desain Web.

3. Dasar Teori :

Fiqh Desain adalah suatu aturan atau hukum yang sesuai syariat islam dimana mengatur tentang desain dan semacamnya.

Desain Web atau perancangan web adalah istilah umum yang digunakan untuk mencakup bagaimana isi web konten ditampilkan, (biasanya berupa hypertext atau hypermedia) yang dikirimkan ke pengguna akhir melalui World Wide Web, dengan menggunakan sebuah browser web atau perangkat lunak berbasis web. Tujuan dari web design adalah untuk membuat website—sekumpulan konten online termasuk dokumen dan aplikasi yang berada pada server web / server. Sebuah website dapat berupa sekumpulan teks, gambar, suara dan konten lainnya, serta dapat bersifat interaktif ataupun statis.

4. Tugas Praktikum: Membuat rangkuman tentang video “Serial Kelas Kreatif KPMI: Seputar Fiqh Desain dari Ust. Andi Fahmi Halim, Lc

5. Hasil Praktikum:
Pada praktikum ini kami membuat sebuah rangkuman dalam bentuk Word dari sebuah video Youtube berjudul ” Serial Kelas Kreatif KPMI : Seputar Fiqh Desain - Ustadz Andi Fahmi Halim, Lc” berikut adalah link video tersebut :

https://youtu.be/uNCAAZtHTnc

Pada praktikum ini kami juga harus bisa mencari kaitan atau realisasi fiqh tersebut dengan mata kuliah Desain Web. Menurut kami, meskipun ntisari dari kajian tersebut adalah tentang aturan-aturan Desain agar sesuai syariat Islam, tetapi banyak hal atau poin penting yang masih bisa dikaitkan dengan Desain Web.

Desain Web juga bisa kita anggap sebagai suatu mata pencaharian atau suatu yang bisa digunakan sebagai bisnis sama seperti Desain. Maka dari itu tentu terdapat aturan atau rambu-rambu yang harus diperhatikan seperti mendahulukan Niat dalam berbisnis dibidang Desain Web. Kita juga harus memperhatikan aturan Hak Cipta dan tidak boleh seenaknya mengambil Desain Web orang lain. Kita dilarang menciptakan suaru web atau desain web yang menimbulkan perpecahan atau kontroversi.

Desain Web yang kita buat tidak boleh mengandung unsur yang tidak sesuai dengan syariat Islam. Di dalam desain web kita jangan sampai ada gambar makhluk hidup karena akan membuat web kita tidak berkah. Untuk menghindari kita membuat desain web yang tidak berkah adalah mengikuti fiqh yang ada dan syariat islam yang ada.

6. Kesimpulan:

Desain Web juga bisa kita anggap sebagai suatu mata pencaharian atau suatu yang bisa digunakan sebagai bisnis sama seperti Desain. Maka dari itu tentu terdapat aturan atau rambu-rambu yang harus diperhatikan.

Di dalam desain web kita jangan sampai ada gambar makhluk hidup karena akan membuat web kita tidak berkah. Untuk menghindari kita membuat desain web yang tidak berkah adalah mengikuti fiqh yang ada dan syariat islam yang ada.

7. Referensi:
https://youtu.be/uNCAAZtHTnc

PROJEK ANIMASI 3D : MENIRUKAN TUTORIAL ANIMASI 3D

noreply@blogger.com (sujak) — Wed, 18 Jul 2018 10:34:00 +0000

1. Tujuan
Mengaplikasikan Animasi 3D pada Logo HIMA MMB

2. Alat
Maxon Cinema 4D

3. Bahan
Logotype HIMA MMB
Logogram HIMA MMB

4. Petunjuk Praktikum
https://www.youtube.com/watch?v=479Ak3YR0tg&t=359s

5. Hasil Praktikum

Video Hasil Render Projek Animasi 3D

Video Screen Recording Projek Animasi 3D

6. Kesimpulan

Pada praktikum ini saya mencari tutorial animasi 3D yang ada di youtube dan mengaplikasikannya pada logo HIMA MMB. Pada animasi ini logotype yang digunakan bukan merupakan font tetapi hasil dari tracing, begitu pula dengan logogramnya. Hasil tracing tersebut kemudian di extrude pada Cinema 4D dan dianimasikan. Bagian yang menjadi sulit adalah ketika menggabungkan antara logogram dan logotype yang ada karena perbedaan ukuran objek.

3D ANIMATION JOBS IN INDONESIA

noreply@blogger.com (sujak) — Tue, 17 Jul 2018 02:01:00 +0000

1. 3D Motion Grapher di Tokopedia (Jakarta, ID)
Lowongan pekerjaan di bidang animasi 3D yang pertama adalah sebagai 3D Motion Grapher di perusahaan Tokopedia yang terletak di Jakarta, Indonesia. Berikut adalah informasi mengenai lowongan pekerjaan tersebut :

Are you a person who likes to make a video animation? Someone with an excited imagination, has a lot of ideas, wants to learn something new? Then you are the person we are looking for. With a basic of animation skills and software that you have, you will be responsible to make a video animation. You will not only make some ordinary video animation, you will learn to know how to put the information you need to delivered inside the video. So the viewer can understand the information that you give to them through the video you make. You will be a part of a great team who listen to any idea that you have and work with a fun office atmosphere with young people who have a soul like you. You will get involved in the creative process of making a video animation and get a new experience in process.

Sedangkan syarat yang dibutuhkan antara lain :

Requirements

Able to operate Adobe After Effects, Adobe Illustrator, Adobe Photoshop softwares.

Able to work in a team.

Able to handle multiple projects at once.

Can work with something new (can accept changes in a work flow).

Dari informasi tersebut dikatakan bahwa untuk melamar pekerjaan di Tokopedia sebagai 3D Motion Grapher, pelamar harus bisa mengoperasikan Adobe After Effect, Adobe Illustrator, dan Adobe Photoshop. Selain itu Tokopedia juga menuntut 3D Motion Grapher disana untuk bisa bekerja dalam tim. Selanjutnya harus memiliki kemampuan untuk mengerjakan multiple projek dalam waktu yang bersamaan. Dan diharuskan untuk dapat bekerja dengan hal-hal yang baru.

2. 3D Animator di PT. Kompas Cyber Media (Jakarta, ID)
Pada lowongan ini informasi yang diberikan adalah :

Create visual content (3D animation) for Bobo.id

- Min. Diploma Degree from Animation, Design Graphic, Illustration or equivalent

- Highly proficient in Blender software, Maya, Flash, After Effects and 3DMax

- High creativity and artistic talent

- Attention to detail

- Ability to work under pressure and to meet tight deadlines

Dalam informasi tersebut menunjukkan jika pekerjaan yang akan dilakukan adalah membuat konten visual (3D animation) untuk Bobo.id. Untuk mendaftarkan diri sebagai pekerja minimal harus memiliki gelar diploma untuk jurusan Animasi, Design Grafis, Illustration, dan sejenisnya. Selain itu memahami software Blender, Maya, Flash, After Effects, dan 3D Max sangat dipertimbangkan. Seseorang yang mendaftar harus memiliki talenta di bidang seni dan memiliki kreativitas tinggi, dan memperhatikan detail. Selain itu diharuskan untuk dapat bekerja dibawah tekan dan dapat bekerja dengan deadline yang padat.

3. 3D Artist di PT. Metaphor Indonesia
Pekerjaan yang dilakukan antara lain :

Basic production of 3D scene include modeling, texturing, lighting, and rendering for illustrative or animation puposes.

Developing idea for room design and layout.

Sedangkan syaratnya adalah :

Minimum age of 21 years old.

Creativity, sense of art, and passionated in related work is a must

Autocad, Photoshop, 3D Max is a must

Minimu experience of 1 years in same position or related

Able to work under pressure and overtime

Minimum Qualification of Education - D3 related major

Need to have own transportation

Fresh graduate are welcome

3 lowongan tersebut diatas adalah contoh jenis lowongan kerja yang mengharuskan pelamarnya untuk menguasai software animasi 3D. Untuk mengetahui informasi yang lebih lanjut maka dapat dilihat pada link referensi dibawah ini.

Referensi
1. https://www.glassdoor.com/Job/indonesia-animator-jobs-SRCH_IL.0,9_IN113_KO10,18.htm
2. https://www.jobstreet.co.id/en/job/3d-artist-2542645?fr=23&src=12

PRAK 06 - MEMBUAT PROGRESSION REEL

noreply@blogger.com (sujak) — Wed, 04 Jul 2018 06:05:00 +0000

1. Judul
Membuat Progression

2. Tujuan
Pada tahun ini, kegiatan yang dilakukan adalah mengemas hasil praktikum sebelumnya menjadi sebuah showreel yang bisa digunakan sebagai portofolio.

3. Alat
Adobe Premiere Pro CC

4. Bahan
Hasil praktikum sebelumnya :
Prak 1 : Logo Utama
Prak 2 : Hasil Penambahan Camera Path
Prak 3 : Secondary Assets
Prak 4 : Camera Depth
Prak 5 : Flare
Prak 5 : Particles
Prak 5 : Chrome Aberration
Prak 5 : Vignette

5. Dasar Teori

Showreel
Potongan pendek video atau film dari hasil pekerjaan sebelumnya. Showreel merupakan portofolio video yang digunakan untuk mempromosikan kemampuan, bakat, dan pengalaman dari si pembuat. Showreel yang umum digunakan dalam industri hiburan seperti di bidang acting, penyutradaraan, sinematografi, editing, efek khusus, animasi, video game, dan produksi grafis. Biasanya berdurasi antara 4-6 menit.

Progression Reel
Merupakan sebuah karya beruntun dari awal hingga menjadi hasil akhir dan disajikan dalam sebuah bentuk utuh satu kesatuan yang berbentuk video.

6. Tugas Praktikum
Pada animasi logo favorit yang dibuat sebelumnya, buatlah progression reel nya.

7. Petunjuk
Berikut adalah contoh Progression Reel :
http://www.mohhasbias.com/prak-06-membuat-progression-reel

8. Hasil Praktikum

9. Kesimpulan

Pada praktikum kali ini video yang saya gabungkan untuk membuat Progression Reel tidak semuanya hasil render, namun ada yang berupa preview dari Cinema 4D dikarenakan saya lupa dan tidak me-render step tertentu ke format video. Solusi dari saya untuk mengatasi masalah tersebut adalah mengedit video preview tersebut dengan Premiere Pro CC dan mengcrop video agar hanya video animasinya saja yang terlihat bukan dengan menu-menu dan tools yang ada di Cinema 4D.

10. Referensi

PRAK 05 - ADDING FLARE, PARTICLES, VIGNETTE, AND CHROME ABERRATION

noreply@blogger.com (sujak) — Mon, 25 Jun 2018 14:46:00 +0000

1. Tujuan

Pada tahap ini, bertujuan untuk menambah detail dari animasi logo dari praktikum sebelumnya. Dengan cara menambahkan flare dan particles. Kemudian mebambahkan lens effect seperti vignette dan chrome aberrartion.

2. Alat

Maxon Cinema 4D
Adobe After Effect
Knoll Light Factory
Trapcode Particular

3. Bahan

4. Dasar Teori

Flare

Merupakan salah satu bentuk piroteknik yang menghasilkan cahaya yang sangat terang atau panas tinggi tanpa menghasilkan ledakan. pada videografi penggunaan cahaya ini disebut lens flare, menghasilkan cahaya yang menyilaukan. Lens flare mengacu pada fenomena di mana cahaya tersebar didalam sistem lensa.

Particles

Merupakan spesial grafik efek yang dapat diatur sesuai kebutuhan. bentuk dari particles bervariasi mulai dari butira hingga asap.

Vignette

Adalah proses untuk mengurangi cahaya di sudut sudut gambar sehingga bagian tengah gambar akan terlihat lebih terang.

Chrome Aberration

Adalah efek yang dihasilkan dari dispersi dimana ada kegagalan lensa untuk memfokuskan semua warna ke titik konvergensi yang sama. Hal ini terjadi karena lensa memiliki indeks bias yang berbeda untuk panjang gelombang cahaya yang berbeda.

5. Tugas Praktikum

Pada animasi logo favorit yang kalian buat sebelumnya, lakukan hal berikut :

1. Tambahkan flare

2. Tambahkan Particles

3. Tambahkan Vignette

4. Tambahkan Chrome Aberration

6. Petunjuk Praktikum

http://www.mohhasbias.com/prak-05-adding-flare-particles-vignette-and-chrome-aberration/

7. Hasil Praktikum

8. Kesimpulan

Pada praktikum kali ini saya mengalami kesulitan pada saat DOF di AE dengan menggunakan efek Camera Lens Blur, tapi saya bisa melewati kesulitan ini dengan bantuan teman saya.

9. Referensi

PRAK 04 - CAMERA DEPTH, MULTI PASS RENDER, DAN COMPOSITING USING AE

noreply@blogger.com (sujak) — Mon, 25 Jun 2018 14:44:00 +0000

1. Tujuan

Pada praktikum ini, mahasiswa diajak untuk ngincip dikit tentang Compositing menggunakan After Effects. Dimulai dengan Render Setting C4D kemudian dilanjut pada kegiatan compositing di AE.

2. Alat

Maxon Cinema 4D

Adobe After Effects CC

3. Bahan

4. Dasar Teori

Camera Path
Merupakan rentang lebar sebuah area yang bisa ditangkap oleh kamera.

Multi Pass Rendering
Multi-pass render adalah teknik yang banyak digunakan dalam industri CGI profesional, dan telah menjadi lebih dan lebih umum digunakan dalam komunitas grafis umum. Multipass render memiliki banyak keunggulan dibandingkan single pass rendering, yang memungkinkan lebih banyak kontrol atas setiap elemen dari adegan, kontrol yang lebih baik atas tampilan akhir adegan, dan membuat tweaker dan menyesuaikan gambar akhir atau animasi lebih mudah dan lebih sedikit waktu mengkonsumsi rendering adegan sekaligus dan harus kembali membuat seluruh menyesuaikan rincian kecil atau melakukan perubahan.

DOF (Depth of Field)
Dalam optik , terutama yang berkaitan dengan film dan fotografi, depth of field (DOF), juga disebut rentang fokus atau rentang fokus yang efektif, adalah jarak antara benda terdekat dan terjauh dalam sebuah adegan yang muncul diterima tajam dalam foto. Meskipun lensa justru bisa fokus hanya pada satu jarak pada suatu waktu, penurunan ketajaman bertahap pada setiap sisi jarak fokus, sehingga dalam DOF, unsharpness ini tak terlihat di bawah kondisi tampilan normal.

Compositing
Compositing adalah kombinasi dari unsur-unsur visual dari sumber terpisah menjadi gambar tunggal, sering untuk menciptakan ilusi bahwa semua elemen adalah bagian dari adegan yang sama. Penembakan live-action untuk compositing adalah berbagai disebut "chroma key", "blue screen", "layar hijau" dan nama lain. Saat ini, kebanyakan, meskipun tidak semua, compositing dicapai melalui manipulasi gambar digital. Teknik compositing pra-digital, bagaimanapun, kembali sejauh film trik Georges Méliès pada akhir abad ke-19, dan beberapa masih digunakan.

5. Tugas Praktikum

Pada animasi logo favorit yang sudah kalian buat sebelumnya, lakukan hal berikut :
1. Multi Pass Rendering untuk logo, obyek sekunder, background, dan depth
2. Import masing-masing image sequences ke AE
3. Implementasi DOF di AE menggunakan effect Camera Lens Blur

6. Petunjuk Praktikum

http://www.mohhasbias.com/prak-04-camera-depth-multi-pass-render-dan-compositing-using-ae/

7. Hasil Praktikum

8. Kesimpulan
Pada praktikum kali ini saya tidak terlalu mengalami kesulitan, dengan adanya praktikum ini saya jadi lebih paham cara untuk compositing dari Cinema 4D ke After Effect dimana sebelumnya saya belum tahu cara nya.

9. Referensi

PRAK 03 - SECONDARY ASSETS, LOGO, MOVEMENT, F-CURVES

noreply@blogger.com (sujak) — Thu, 15 Mar 2018 03:15:00 +0000

1. Tujuan

Pada praktikum ini, belajar tentang elemen yang bisa ditambahkan pada sebuah animasi 3D yaitu Secondary Assets dan Movement. Pada praktikum ini, penambahan movement diperdetail dengan menggunakan F-Curves.

2. Alat

Maxon Cinema 4D

3. Bahan

4. Dasar Teori

Secondary Asset

Secondary asset adalah aset kedua (aset tambahan) selain aset utama. Aset ini berfungsi untuk menambahkan objek yang kita animasikan agar tidak terlihat polos. Secondary asset juga berfungsi untuk mengisi ruang yang kosong.

F-Curve

Di bidang animasi komputer dan terutama di editor animasi, misalnya Maya , sebuah FCurve adalah kurva animasi dengan seperangkat keyframe , yang digambarkan sebagai titik, segmen kurva antara kunci, dan garis singgung yang mengontrol bagaimana segmen kurva masuk dan keluar dari kunci. . Kunci ini diletakkan pada grafik yang menampilkan posisi mereka relatif terhadap nol. Seseorang dapat memiliki kunci yang memiliki nilai positif atau negatif.[1]

5. Tugas Praktikum

Pada animasi logo favorit yang sudah kalian buat sebelumnya, lakukan hal berikut :

1. Tambahkan secondary Assets

2. Tambahkan kompleksitas gerakan pada asset utama (logo)

3. Haluskan gerakannya menggunakan F-Curves

6. Petunjuk Praktikum

http://www.mohhasbias.com/prak-03-secondary-assets-logo-movement-f-curves/

7. Hasil Praktikum

Screen Recording Helix Path and Corner

Hasil Render Helix Path and Corner

Screen Recording Menambah Kompleksitas Gerakan

Hasil Render Menambah Kompleksitas Gerakan

Screen Recording F-Curve

Hasil Render F-Curve

8. Kesimpulan

Render pada praktikum ini lebih lama dari praktikum sebelumnya, hal ini diakibatkan oleh cloning dari secondary asset yang banyak yaitu 75 buah.
9. Referensi

1. https://en.wikipedia.org/wiki/FCurve

PRAK 02 - CAMERA PATH, LIGHTING, AND MATERIAL

noreply@blogger.com (sujak) — Sat, 10 Mar 2018 12:15:00 +0000

1. Tujuan

Pada praktikum ini, belajar tentang elemen yang bisa ditambahkan pada sebuah animasi 3D yaitu Camera Path, Lighting, Material. Camera path diimplementasikan menggunakan spline. Lighting menggunakan Physical Sky dan Area Light.

2. Alat

Adobe Illustrator CC

Maxon Cinema 4D

3. Bahan

4. Dasar Teori

Motion Guide

Motion guide adalah salah satu fasilitas dari flash yang digunakan untuk membuat animasi motion tween bergerak sesuai jalur (guide) yang telah kita buat. Hasil animasi motion guide ini selain halus (karena motion tween) juga lebih teratur karena animasi bergerak sesuai jalur yang kita buat.[1]

Camera Path

Camera path pada Cinema 4D merupakan jalur yang akan dilewati oleh kamera dalam mengambil gambar. Dalam praktikum ini jalur yang digunakan adalah Arc yang berbentuk seperempat lingkaran, maka kamera akan bergerak sesuai bentuk dari jalur tadi yaitu seperempat lingkaran.

Perbedaan Physical Sky dan Area Light

Physical Sky adalah sebuah background yang menggambarkan menggambarkan warna dari langit. Dengan physical sky kita dapat mengatur waktu (jam) sesuai kondisi langit yang kita inginkan. Pada physical sky juga terdapat pengaturan untuk menampilkan bulan, awan, dan bintang. Area light adalah lampu yang berfungsi untuk memberikan penerangan pada objek yang kita inginkan.

Material

Material adalah suatu unsur yang digunakan untuk menyempurnakan presentasi dari sebuah objek yang kita buat. Misalnya adalah sebuah warna. Warna tersebut dapat kita sesuaikan detailnya agar mendapatkan material yang kita inginkan. Setelah mendapatkan warna dengan detail yang sesuai maka material tersebut dapat kita drag and drop ke objek yang ingin kita beri warna.

5. Tugas Praktikum

Pada animasi logo favorit yang sudah kalian buat sebelumnya, tambahkan :
1. Pergerakan kamera menggunakan teknik camera path
2. Lighting sederhana dan mudah menggunakan Physical Sky dan Area Light

6. Petunjuk Praktikum

http://www.mohhasbias.com/prak-02-camera-path-lighting-and-material/

7. Hasil Praktikum

Screen recording Camera Path

Hasil render Camera Path

Screen recording Physical Sky

Hasil render Physical Sky

Screen recording Area Light

Hasil render Area Light

Screen Recording Material

Hasil render material

8. Kesimpulan

Kesulitan yang saya alami terletak diawal praktikum yaitu anchor point dari logo terletak dibawah logo. Setelah itu saya coba mencari solusinya melalui internet. Dari referensi yang saya dapat, masalah tersebut dapat terselesaikan dan anchor point dapat disesuaikan (dalam hal ini anchor point berada ditengah logo).
Berikut adalah solusi untuk merubah anchor point :

https://forums.creativecow.net/docs/forums/post.php?forumid=19&postid=292065&univpostid=292065&pview=t&archive=T

9. Referensi

Motion Guide, http://warungflash.com/2009/01/motion-guide/ [online]

PRAK 01 - LOGO 3D 360 (TURN TABLE ANIMATION)

noreply@blogger.com (sujak) — Sat, 03 Mar 2018 06:45:00 +0000

1. Tujuan

Perkenalan dengan dunia 3D melalui pembuatan animasi object berputar 360 derajat atau disebut juga turn table animation

2. Alat

Adobe Illustrator CC

Maxon Cinema 4D
Vegas Pro 15.0 (Pengganti Timelapse Assembler)

3. Bahan

Logo Logitech Gaming
*sumber : https://worldvectorlogo.com/logo/logitech-gaming

4. Dasar Teori

Animasi 2D

Animasi jenis ini juga biasa disebut dengan film kartun. Kartun sediri berasal dari kata Cartoon, yang artinya gambar yang lucu. Contohnya adalah : Lonney Tunes, Tom and Jerry, Doraemon, dan lain sebagainya.

Animasi 3D

Animasi 3 dimensi adalah pengembangan dari animasi 2d. Dengan animasi 3d, karakter yang diperlihatkan semakin hidup dan nyata, mendekati wujud manusia aslinya.

Contohnya Finding Nemo, The Incredible, Toy Story, Monster Inc, sampai Final Fantasy. Disini kita bisa melihat perbedaan visual jika dibandingkan dengan animasi 2d. Kesemuanya itu biasa juga disebut dengan animasi 3d atau Computer Generated Imagery (CGI).[1]

Tracing

Dalam bidang Grafis, Tracing berarti proses menggambar ulang suatu illustrasi dengan acuan/aturan tertentu menggunakan tool-tool digital dengan bantuan computer.[2]

Adobe Flash vs Cinema 4D

Adobe Flash adalah software yang digunakan untuk membuat animasi 2D sedangkan Cinema 4D merupakan software untuk pembuatan animasi 3D. Perbedaan dari kedua software tersebut terletak pada fungsinya. Pada Adobe Flash, objek yang dianimasikan tidak memiliki ketebalan dan tidak dapat diputar 360 derajat karena pada Adobe Flash hanya memiliki sumbu X dan Y. Sedangkan pada Cinema 4D, objek yang akan dianimasikan dapat diputar 360 derajat pada sumbu X dan telah dilengkapi juga dengan beberapa fitur yang dapat mengatur tingkat ketebalan objek. Serta pada Cinema 4D, objek dapat diatur model lightingnya sehingga kesan 3D dari objek lebih terlihat.[3]

5. Tugas Praktikum

Buatlah animasi 360 derajat dari logo favorit kalian

6. Petunjuk Praktikum

Tracing logo di Illustrator
Membuat logo 3D menggunakan Cinema 4D dari file Illustrator
Membuat animasi 360 derajat
Merender animasi ke dalam file movie (mp4)

http://www.mohhasbias.com/prak-01-logo-3d-360-turn-table-animation/

7. Hasil Praktikum

Screen Record Tracing Logo Logitech Gaming Pada Adobe Illustrator

Screen Recording Logo Logitech Gaming Berputar 360 derajat

Screen Recording Image Sequence dari Cinema 4D

Screen Recording Menyatukan File Image Sequence Menjadi Video

Hasil Akhir

8. Kesimpulan

Pada praktikum ini langkah awal dimulai dengan mencari logo yang akan kita animasikan 3 dimensi. Setelah mendapat logo, langkah berikutnya adalah tracing. Pada proses tracing ini saya menggunakan Adobe Illustrator CC. Usahakan tracing sedetail mungkin agar bentuknya sama persis dengan logo yang kita gunakan. Setelah melalui proses tracing, maka logo kita save dengan mengganti versi file menjadi Illustrator 8. Setelah itu impor file AI tersebut ke dalam aplikasi Cinema 4D. Untuk menjadikannya 3D menggunakan fungsi menu extrude yang ada di toolbar. Setelah itu logo dianimasikan memutar 360 derajat. Kunci keyframe dari awal hingga akhir untuk menyimpan pergerakan memutar logo tersebut. Dalam proses ekspor terdapat beberapa pilihan, misal : ekspor menjadi video langsung, dan ekspor menjadi image sequences. Namun dalam praktikum ini mengekspor file tersebut menjadi file gambar. Hasil dari ekspor tersebut akan menghasilkan gambar sejumlah frame animasi tadi, yaitu 90 gambar.

Untuk menyatukan lagi 90 gambar tadi disarankan menggunakan Timelapse Assembler. Namun karena aplikasi tersebut hanya diperuntukkan PC berbasis MacOS, saya menggunakan Vegas Pro yang juga memiliki suatu fungsi untuk menggabungkan file image sequence.

9. Referensi

Pengertian Animasi 2D dan 3D Beserta Perbedaannya Lengkap!, https://www.rumahulin.com/pengertian-animasi [online]
Teknik Tracing Menggunakan Corel Draw, http://www.imamsyafii.id/2012/11/teknik-tracing-menggunakan-corel-draw.html [online]
http://atikafirdaus.blogspot.co.id/2016/03/prak-01-logo-3d-360-turn-table-animation_3.html

PRAK 16 - FINAL PROJECT ANIMASI KOMUNITAS ADAW (Final)

noreply@blogger.com (sujak) — Thu, 25 Jan 2018 09:50:00 +0000

1. Judul
- Membuat video motion graphic komunitas ADAW - final

2. Tujuan
- Memperkenalkan komunitas ADAW dengan media video motion graphic

3. Alat
- Adobe After effect CC 2017
- Adobe Premiere Pro CC 2017
- Adobe Illustrator CC 2017

4. Bahan
- Storyboard animasi ADAW
- Animatics ADAW
- Asset animasi

5. Dasar Teori
Animasi

Animasi adalah gambar bergerak berbentuk dari sekumpulan objek yang disusun secara beraturan mengikutio alur pergerakan yang telah ditentukan pada setiap perhitungan waktu yang terjadi. Gambar tersebut dapat berupa gambar makhluk hidup, benda mati, ataupun tulisan. Animasi secara umum dapat dikatakan sebagai suatu sequence gambar yang ditampilkan pada tenggang waktu tertentu sehingga tercipta sebuah ilusi gambar bergerak.

Animatics (Story Reel)

Motion graphic adalah percabangan dari seni desain grafis yang menggunakan penggabungan dari ilustrasi, typografi, fotografi, dan videografi dengan menggunakan teknik animasi. Motion grafis terdiri dari dua kata, motion yang berarti gerak dan grafis. Dari arti tersebut, bisa dikatakan bahwa motion grafis juga disebut dengan instilah grafis gerak.

6. Hasil Praktikum
-Progress animasi final ADAW

Pembuatan animasi ADAW berada pada tahap akhir yaitu final. Untuk merubah menjadi high resolution, pengerjaan dibagi menjadi beberapa panel yang telah dijelaskan sebelumnya.

7. Kesimpulan
Penyempurnaan pada panel 1-16 terdapat kendala pada proses rendering. Masalah mulai muncul pada detik ke 19.21 dimana terlalu banyak objek yang dianimasikan atau gerakan yang terlalu kompleks. Terhambatnya proses rendering ini dikarenakan ukuran asset pada After Effects terlalu besar sehingga membuat proses rendering menjadi berat.
Pada pembuatan asset seharusnya memiliki resolusi tidak lebih dari 72 pixel supaya pada proses rendering tidak terlalu berat saat merender. maka dari itu dilakukan perubahan ukuran dari tiap asset yang dianimasikan supaya gerakan lebih halus dan tidak berat. Ukuran asset yang besar juga memengaruhi file video yang telah jadi memiliki ukuran yang besar pula.

8. Referensi
- http://www.idseducation.com/articles/apa-itu-animasi/ , diakses pada 15 Desember 2017
- http://www.dafideff.com/2016/01/pengertian-motion-graphics-dan-cara-membuatnya.html , diakses pada 15 Desember 2017

PRAK 15 - FINAL PROJECT ANIMASI KOMUNITAS ADAW (Animasi Part 3)

noreply@blogger.com (sujak) — Thu, 25 Jan 2018 09:44:00 +0000

1. Judul
  - Membuat video motion graphic komunitas ADAW - Tahap final

2. Tujuan
  - Memperkenalkan komunitas ADAW dengan media video motion graphic

3. Alat
  - Adobe After effect CC 2017
- Adobe Premiere Pro CC 2017

4. Bahan
  - Storyboard animasi ADAW
- Animatics ADAW
- Asset animasi

5. Dasar Teori
Animasi

Animatics (Story Reel)

6. Hasil Praktikum
-Progress animasi final ADAW

Progress kali ini, merubah animatics pada panel 1-9 menjadi high resolution, yang semula animasi video tersebut yang merupakan tempelan beberapa aset kedalam animatics, namun kali ini sudah dirubah menjadi bentuk finalnya pada panel 1-9.

7. Kesimpulan
Pembuatan video animasi ini merupakan animatics yang telah dibuat oleh tim lain, sehingga kami diwajibkan untuk menyusun dari apa yang telah tim lain buat. Untuk tahapannya, kami akan melakukan pemasangan asset pada animatics terlebih dahulu setelah itu mulai menggantinya menjadi animatics.
Pembagian kerja dilakukan dengan pembagian panel tiap anggota tim. setiap tim sudah mendapatkan panel untuk ditempel dengan asset lalu diakhiri dengan animasi, setelah itu setiap tugas dicombine dan diubah ke video seutuhnya. Animasi kali ini merupakan penyempurnaan di panel 1-9.

PRAK 14 - FINAL PROJECT ANIMASI KOMUNITAS ADAW (Animasi Part 2)

noreply@blogger.com (sujak) — Thu, 25 Jan 2018 09:36:00 +0000

1. Judul
- Membuat video motion graphic komunitas ADAW - Tahap final

2. Tujuan
- Memperkenalkan komunitas ADAW dengan media video motion graphic

3. Alat
- Adobe After effect CC 2017
- Adobe Premiere Pro CC 2017

4. Bahan
- Storyboard animasi ADAW
- Animatics ADAW
- Asset animasi

5. Dasar Teori
Animasi

Animatics (Story Reel)

6. Hasil Praktikum
-Progress animasi final ADAW

Pada progress animasi ini, terdapat revisi yaitu video animatics yang telah jadi harusnya tidak boleh dipotong sesuai asset apa yang telah ditampilkan melainkan tetap utuh untuk menunjukkan perbandingan.

PRAK 13 - MEMBUAT VIDEO MOTION GRAPHIC KOMUNITAS ADAW - TAHAP FINAL

noreply@blogger.com (sujak) — Thu, 25 Jan 2018 09:29:00 +0000

1. Judul
  - Membuat video motion graphic komunitas ADAW - Tahap final

2. Tujuan
  - Memperkenalkan komunitas ADAW dengan media video motion graphic

3. Alat
  - Adobe Illustrator CC 2017

4. Bahan
- Animatics ADAW

5. Dasar Teori
  Animasi

6. Hasil Praktikum
-Progress animasi final ADAW

Pada pembuatan animasi ini, terdapat perubahan kerja, yaitu animatics yang sebelumnya telah dibuat ditukar dengan tim satunya. Jadi tim kami mengerjakan animasi dengan berpatok dari animatics tim lain yang juga membhasa tentang komunitas ADAW. Pada tahap ini, kami membuat aset yang diperlukan dalam animasi semua benda dan karakter yang tampil pada animasi.
Pembuatan karakter pada animasi ADAW ini, mengacu pada animasi karakter dari video channel Kok Bisa.

Referensi 1 (Source: Kok bisa)

Referensi 2 (Source: Kok bisa)

Referensi 3 (Source: Kok bisa)

Referensi 4 (Source: Kok bisa)

Asset ADAW

PRAK 12 - FINAL PROJECT ANIMASI KOMUNITAS ADAW (Animatics Part 2)

noreply@blogger.com (sujak) — Thu, 25 Jan 2018 09:26:00 +0000

1. Judul
  - Membuat video motion graphic komunitas ADAW - Tahap animatics

2. Tujuan
  - Memperkenalkan komunitas ADAW dengan media video motion graphic

3. Alat
  - Power Point 2016
- Adobe Premiere Pro CC 2017

4. Bahan
  - Storyboard animasi ADAW
- Audio narasi animasi ADAW

5. Dasar Teori
  Animatics

Dalam pekerjaan animasi dan efek khusus, tahap membuat storyboard mungkin diikuti istilah sederhana yang disebut "animatics" untuk memberikan ide yang lebih bagus tentang bagaimana sebuah scene terlihat dengan gerakan dan timing (waktu). Secara sederhana, sebuah animatics adalah serangkaian gambar tidak bergerak yang diletakkan dan ditampilkan secara berurutan. Seringkali storyboard dianimasikan dengan pembesaran sederhana dan disesuaikan untuk mensimulasikan gerakan kamera (biasanya menggunakan perangkatg lunak non-liniear editing).

Animatics (Story Reel)

Biasanya dibuat setelah soundtrack selesai dibuat, sebelum seluruh animasi selesai dikerjakan. Berisi gambar-gamnbar kejadian dan storyboard yang sesuai dengan adegan-adegan gambar.

6. Hasil Praktikum
-Animatics final ADAW

7. Kesimpulan
Dalam proses membuat animatics ini, kelompok kami menggunakan media power point berupa slide untuk transisi animasinya sendiri. Lalu untuk narasi kami menggunakan voice over. Pembuatan script dilakukan oleh Arvin Janathan Adhim (4103151021) dan untuk suaranya oleh Burhanudin abu sujak (4103161024) lalu saya sendiri (Bilal Savero P.C - 4103161030) mengerjakan bagian akhir yaitu menambahkan backsound pada video animatics dan menyesuaikan timing suara dan video agar pas.

8. Referensi
- SOP Komunitas ADAW MMB PENS 2017, diakses pada 6 November 2017
- http://smk4.mahadhika.sch.id/home/download_file/1 , diakses pada 12 Desember 2017
- http://jutami.staff.gunadarma.ac.id/Downloads/files/30834/sistem_multimedia05.pdf , diakses pada 12 Desember 2017

PRAK 11 - FINAL PROJECT ANIMASI KOMUNITAS ADAW (Animatics Part 1)

noreply@blogger.com (sujak) — Thu, 25 Jan 2018 09:22:00 +0000

1. Judul
  - Membuat video motion graphic komunitas ADAW - Tahap animatics

2. Tujuan
  - Memperkenalkan komunitas ADAW dengan media video motion graphic

3. Alat
  - Power Point 2016
- Camtasia Record 9

4. Bahan
  - Storyboard animasi ADAW
- Audio narasi animasi ADAW

5. Dasar Teori
  Animatics

Animatics (Story Reel)

Biasanya dibuat setelah soundtrack selesai dibuat, sebelum seluruh animasi selesai dikerjakan. Berisi gambar-gamnbar kejadian dan storyboard yang sesuai dengan adegan-adegan gambar.

6. Hasil Praktikum
-Progress Animatics ADAW

7. Kesimpulan
Dalam proses membuat animatics ini, kelompok kami menggunakan media power point berupa slide untuk transisi animasinya sendiri. Lalu untuk narasi kami menggunakan voice over. Pembuatan script dilakukan oleh Arvin Janathan Adhim (4103151021) dan untuk suaranya oleh Burhanudin abu sujak (4103161024).
Pada saat proses perekaman, tim kami mendapatkan beberapa kendala, seperti suara yang tiba-tiba terputus pada saat rekaman berlangsung, suara yang terlalu besar dan keras sehingga harus menyesuaikan jarak antara microphone dengan sumber suara, dan menyesuaikan timing video dengan narasi.

PRAK 10 - KULIAH TAMU UI/UX

noreply@blogger.com (sujak) — Thu, 25 Jan 2018 09:12:00 +0000

1) Judul: User Interface dan User Experiences Design

2) Waktu: Rabu, 15 November 2017

3) Pemateri:

Yokie Tyas Riesmana
Kharisma Chendika Putra

4) Tempat: Ruang Theater Politeknik Elektronika Negeri Surabaya (PENS)

5) Ringkasan:

UI : user interface (antarmuka pengguna)

Segala sesuatu yang dilihat pengguna pada produk secara visual

UX : user experience (pengalaman pengguna)

Segala sesuatu yang dirasakan pengguna pada produk

Goal : clarity, mudah digunakan, nyaman digunakan, mudah dipahami, hasil yg cepat, hasil yg tepat

Design (problem solving) : Aktifitas, merencanakan, merancang, membuat, solutif.

UI & UX DESIGN (untuk produk digital)

Sebuah produk bukan hanya terlihat cantik/menarik, tapi harus mempunyai fungsi dan berfungsi dengan baik. Untuk peningkatan mutu produk, Meningkatkan produk yg baik menjadi lebih baik

1. Observation

a) Amati permasalahan yang terjadi pada manusia atau lingkungan sehari-hari

b) Pahami betul permasalahan yang ada

c) Jika belum paham, jangan mulai mencari solusi

2. Ideation

a) Simple is more, jangan menambah masalah dengan kerumitan

b) Ide atau solusi yang paling mudah diterapkan

c) Sebuah ide tidak cukup

3. Prototyping

a) Simple is more, buat prototype yang mudah dipahami dan digunakan

b) Low or high fidelity, siapkan sebagai skenario

c) Keseragaman, repeat behaviour

4. Testing

a) Tentukan hal apa yang akan ditesting

b) Siapkan skenario testing

c) Tentukan kriteria user yang akan melakukan testing

PRAK 09 - MEMBUAT VIDEO MOTION GRAPHIC KOMUNITAS ADAW

noreply@blogger.com (sujak) — Thu, 25 Jan 2018 09:10:00 +0000

1. Judul
  - Membuat video motion graphic komunitas ADAW

2. Tujuan
  - Memperkenalkan komunitas ADAW dengan media video motion graphic

3. Alat
  - Pensil
- Kertas
- Penghapus
- Drawing pen
- Cam Scanner

4. Bahan
  - Official Logo Adaw
- Standar Operasional Prosedur Komunitas ADAW

5. Dasar Teori

6. Hasil Praktikum
-Progress Storyboard animasi ADAW

7. Kesimpulan
Praktikum ini dilakukan berkelompok dan beranggotakan 3 orang. Pada tahap pengerjaan dibagi beberapa sesi untuk pembuatan video ini, yaitu tahap storyboard, animatics dan final. Pada tahap storyboard ini terhenti sampai pada panel ke-18 dan mendapat revisi untuk menambahkan transisi atau animasi gerak pada objek di panel 19, 24, dan 30.

8. Referensi
- SOP Komunitas ADAW MMB PENS 2017, diakses pada 6 November 2017

PRAK 08 - VIDEO BRANDING KOMUNITAS ADAW

noreply@blogger.com (sujak) — Thu, 25 Jan 2018 08:58:00 +0000

1. Judul

- Video Branding Komunitas ADAW

2. Tujuan

  - Memperkenalkan komunitas ADAW dengan media video branding

3. Alat
  - Adobe Illusrator CC 2017
- Adobe After Effect CC 2017
- Adobe Premiere Pro CC 2017

4. Bahan
  - Official Logo Adaw
- Poster ADAW
- Asset Poster ADAW

5. Dasar Teori

Adaw merupakan komunitas yang ada di jurusan Multimedia Broadcasting PENS. ADAW (Arek Digital Audio Workstation) Departemen Teknologi Multimedia Kreatif PENS bergerak dibidang musik dan menaungi mahasiswa HIMA MMB yang memiliki ketertarikan dan bakat dibidang seni musik.
Video explainer adalah sebuah video singkat yang berdurasi sekitar 30s - 2 menit untuk menjelaskan suatu produk atau jasa terbaru dan ditunjukkan untuk menjawab pertanyaan mendasar konsumen.

6. Hasil Praktikum
- Hasil video branding komunitas ADAW

7. Kesimpulan
Praktikum ini dilakukan berkelompok dan beranggotakan 3 orang. Video branding ini mengacu pada Poster ADAW yang telah dibuat sebelumnya.
Dalam pembuatan video ini terkendala pada saat pembuatan asset pada poster serta menyesuaikan tema dari poster ke video dan proses pengerjaan video branding ini memakan waktu yang cukup lama.

8. Referensi
- SOP Komunitas ADAW MMB PENS 2017, diakses pada 6 November 2017
- http://www.multimedia.smktarunabhakti.net/blog/2016/04/06/apa-itu-video-explainer-dan-apa-manfaatnya-bagi-bisnis/ , diakses pada 12 Desember 2017

PRAK 07 - MEMBUAT VIDEO BRANDING DARI KOMUNITAS ADAW

noreply@blogger.com (sujak) — Thu, 25 Jan 2018 08:34:00 +0000

1. Judul
- Membuat video branding dari komunitas ADAW

2. Tujuan
- Memperkenalkan komunitas ADAW dengan media animasi dan poster

3. Alat
- Adobe Illusrator CC 2017
- Adobe After Effect CC 2017

4. Bahan
- Official Logo Adaw
- Standar Operasional Prosedur Komunitas ADAW

5. Dasar Teori

6. Hasil Praktikum
-Animasi Logo

Sebelum membuat animasi logo, kita perlu membuat desain terpisah dahulu dari objek yang hendak dianimasikan. Pada hal ini objek yang hendak dianimasikan adalah objek nada clef. Clef ini dibuat seolah olah datang dengan cepat dan supaya nampak seperti bergerak diperlukan pergerakan berbeda dari bagian atas dan bawah. lalu objek tulisan ditampilkan dengan fade in secara cepat sehingga nampak seperti bling dengan cepat.

Selanjutnya, membuat sebuah poster dengan tujuan branding komunitas ADAW ini. Konten yang diisikan berupa visi misi dari komunitas ini sendiri.

7. Kesimpulan

Praktikum ini dilakukan berkelompok dan beranggotakan 3 orang. Pada tahap pengerjaan kami membagi tugas agar pekerjaan dapat selesai dengan cepat. sesuai dengan anggota dibagi menjadi 3 yaitu, Mas Arvin mengerjakan bagian poster, Bilal bagian animasi logo dan Sujak bagian animasi dari poster.
Praktikum ke-7 atau minggu pertama project animasi branding ini kami berhasil dalam membuat poster dan animasi logo, namun pengerjaan animasi poster masih terhambat karena masih memrlukan ide atau membutuhkan referensi untuk membuat animasi dari branding tersebut.

8. Referensi
- SOP Komunitas ADAW MMB PENS 2017, diakses pada 6 November 2017

PRAK 06 - REMAKE GOOGLE LOGO

noreply@blogger.com (sujak) — Thu, 25 Jan 2018 08:24:00 +0000

1. Judul
  - Remake Google Logo

2. Tujuan
  - Memahami cara membuat google logo

3. Alat
- Laptop Acer E-14
- After Effect CC 2017

4. Bahan
  - Google logo image
  - Stroke line "G"

5. Dasar Teori

Google G berasal dari logotype 'G', namun menggunakan peningkatan bobot visual agar sesuai pada ukuran yang kecil dan konteks di mana diperlukan ruang agar dapat sesuai dengan elemen lainnya. Dirancang pada grid yang sama dengan ikonografi produk Google, bentuk lingkarannya disempurnakan secara optik untuk mencegah "overbite" visual pada titik di mana bentuk melingkar memenuhi garis lingkar. Proporsi warna menyampaikan spektrum penuh logotype dan diurutkan untuk membantu gerakan mata di sekitar huruf.

6. Tugas Praktikum
- Remake google logo dari tutorial

7. Hasil Praktikum
-Hasil Video

8. Kesimpulan

Praktikum kali ini, menganimasikan sebuah logo "G" google dari sebuah tutorial di Youtube. Menganimasikan empat buah lingkaran untuk merubah menjadi huruf "G" pada google menjadi sedikit kendala dikarenakan timing yang kurang halus agar sesuai dengan aturan rotating pada animasi official google.

PRAK 05 - DOPE MOTION REMAKE

noreply@blogger.com (sujak) — Thu, 25 Jan 2018 08:14:00 +0000

1. Judul
- Dope Motion Remake

2. Tujuan

- Membuat animasi Dope Motion dengan tutorial yang ada.

3. Alat

- Adobe After Effect CC 2017

4. Bahan

- Line stroke ellips shape

5. Dasar Teori

Graph Editor mewakili nilai properti dengan menggunakan grafik dua dimensi, dengan komposisi waktu diwakili secara horizontal (dari kiri ke kanan). Pada mode layer bar, di sisi lain, grafik waktu hanya mewakili elemen waktu horizontal, tanpa menunjukkan representasi vertikal dan vertikal dari perubahan nilai.

Dua jenis grafik tersedia di Graph Editor: grafik nilai, yang menunjukkan nilai properti; dan grafik kecepatan, yang menunjukkan tingkat perubahan nilai properti. Untuk properti temporal, seperti Opacity, Editor Grafis default ke grafik nilai. Untuk properti spasial, seperti Posisi, Editor Grafis default ke grafik kecepatan. Untuk informasi tentang melihat dan mengedit nilai keyframe.

Pada Graph Editor, masing-masing properti diwakili oleh kurva tersendiri. Masing-masing kurva properti memiliki warna yang sama dengan nilai properti pada garis besar lapisan. Keyframes dalam mode Graph Editor mungkin memiliki pegangan arah yang menempel pada satu atau kedua sisi. Penanganan arah digunakan untuk mengendalikan interpolasi Bezier.

6. Tugas Praktikum

- Membuat animasi review Dope Motion

7. Hasil Praktikum
- Video Hasil

8. Kesimpulan

Pada praktikum kelima ini, setiap anak membuat sebuah animasi 2D dope motion dari sebuah tutorial. Lebih ke remake animasi tutorial dope motion. Kendala yang terjadi adalah pada keyframe graph editor sehingga membuat gerakan dari dope motion menjadi lebih smooth.

9. Referensi

- https://helpx.adobe.com/after-effects/using/animation-basics.html

PRAK 04 - MENIRU SEBUAH ANIMASI LOGO

noreply@blogger.com (sujak) — Thu, 25 Jan 2018 07:40:00 +0000

1. Judul

Meniru Sebuah Animasi Logo

2. Tujuan

Belajar membuat animasi logo dari yang sudah ada

3. Alat

- Laptop

- Adobe After Effect CC 2015

4. Bahan
- Video asli animasi komersial starbucks

5. Dasar Teori

Animasi berasal dari bahasa latin yaitu “anima” yang berarti jiwa, hidup, semangat. Sedangkan karakter adalah orang, hewan maupun objek nyata lainnya yang dituangkan dalam bentuk gambar 2D maupun 3D. shingga karakter animasi secara dapat diartikan sebagai gambar yang memuat objek yang seolah-olah hidup, disebabkan oleh kumpulan gambar itu berubah beraturan dan bergantian ditampilkan. Objek dalam gambar bisa berupa tulisan, bentuk benda, warna dan spesial efek.

Logo merupakan sebuah simbol yang dirancang untuk mewakili karakter dan menjadi identitas dari sebuah perusahaan. Logo merupakan bentuk ekspresi dan bentuk visual dari konsepsi perusahaan, produk, organisasi, maupun institusi serta merupakan simbol visual yang memiliki bentuk yang berasal dari nilai strategis perusahaan yang bersangkutan. Pengertian logo menurut Jefkins, (1995:367) logo ialah ; “Logo adalah presentasi, sosok atau penampilan visual yang senantiasa dikaitkan dengan organisasi tertentu sebagai bentuk identitas dan bagian identitas perusahaan”. Sebagai bagian identitas perusahaan, logo ibarat bagian tubuh yang mampu mengutarakan isi hati produk atau perusahaan. Dari sisi pemasaran, logo mempunyai fungsi pembeda produk dengan produk lainnya. Menurut pakar corporate identity David E. Carter dalam buku ”Pengantar Desain Komunikasi Visual” (Kusrianto, 2007) setidaknya logo perusahaan harus memiliki karakter tertentu, menyangkut ; Original dan Destinctive, Legible,Simple, Memorable, Easly associated with the company, dan Easly adaptable for all grhapic media yang mudah di aplikasikan ke berbagai media, untuk menghindari kesulitan dalam penerapan.

6. Tugas Praktikum

Remake animasi logo official

7. Hasil Praktikum

- video asli

- video hasil praktikum

8. Kesimpulan

Pada Praktikum kali ini saya membuat remake animasi logo dari official logo starbucks dengan menggunakan Adobe After Effect CC 2015. Dari hasil praktikum yang saya buat sudah hampir menyamai animasi logo dari offcial satbucks. Namun masih terdapat kekurangan seperti tata letak shape, warna, timing yang tidak sama persis, juga belum adanya efek suara yang mendukung pada remake animasi logo hasil praktikum saya.

PRAK 03 - MEMBREAKDOWN ANIMASI

noreply@blogger.com (sujak) — Tue, 31 Oct 2017 07:56:00 +0000

1. Tujuan
Belajar animasi dengan mengamati animasi yang sudah ada. Kemudian menganalisa elemen – elemen penyusunnya.

2. Alat
Microsoft Office Power Point

3. Tugas
- Kerjakan tugas secara berkelompok
- Laporkan secara individu
- Cari 5 macam animasi yang menggunakan geometric shape
- Buat PPT berisi review tentang animasi tersebut
- Review tentang elemen – elemen yang dianimasikan
- 1 PPT untuk semua review animasi

4. Hasil praktikum :

https://www.slideshare.net/secret/iUABDT1oS3YNgv

5. Kesimpulan
Pada praktikum kali ini kami belajar animasi 2D melalui video animasi 2D yang telah ada di Youtube. Kami mempelajari cara membuat animasi, dengan membreakdown efek yang terdapat pada animasi tersebut. Pada proses pengerjaannya, kami binngung dalam proses penentuan jenis efek yang digunakan. Sehiingga kami menyadari, jika hasil breakdown animasi kami kurang sempurna.

6. Referensi

https://www.youtube.com/watch?v=s-QnwpByh_k&t=36s
https://www.youtube.com/watch?v=LhCgY8-UNm0
https://www.youtube.com/watch?v=O0ppubk1SyE
https://www.youtube.com/watch?v=Tug3dCkyArE&t=219s
https://www.youtube.com/watch?v=f5xfv6BPap4

Kupitekno

PRAK 06 - MENDEPLOY DI FIREBASE

PRAK 05 - PENGGUNAAN FIREBASE HOSTING

PRAK 02 - KAITAN FIQH DESAIN DENGAN MATA KULIAH DESAIN WEB

PROJEK ANIMASI 3D : MENIRUKAN TUTORIAL ANIMASI 3D

3D ANIMATION JOBS IN INDONESIA

PRAK 06 - MEMBUAT PROGRESSION REEL

PRAK 05 - ADDING FLARE, PARTICLES, VIGNETTE, AND CHROME ABERRATION

PRAK 04 - CAMERA DEPTH, MULTI PASS RENDER, DAN COMPOSITING USING AE

1. Tujuan

2. Alat

3. Bahan

4. Dasar Teori

PRAK 03 - SECONDARY ASSETS, LOGO, MOVEMENT, F-CURVES

1. Tujuan

2. Alat

3. Bahan

4. Dasar Teori

Secondary Asset

F-Curve

5. Tugas Praktikum

6. Petunjuk Praktikum

7. Hasil Praktikum

8. Kesimpulan

Render pada praktikum ini lebih lama dari praktikum sebelumnya, hal ini diakibatkan oleh cloning dari secondary asset yang banyak yaitu 75 buah. 9. Referensi

PRAK 02 - CAMERA PATH, LIGHTING, AND MATERIAL

1. Tujuan

2. Alat

3. Bahan

4. Dasar Teori

5. Tugas Praktikum

6. Petunjuk Praktikum

7. Hasil Praktikum

8. Kesimpulan

9. Referensi

PRAK 01 - LOGO 3D 360 (TURN TABLE ANIMATION)

1. Tujuan

2. Alat

3. Bahan

4. Dasar Teori

5. Tugas Praktikum

6. Petunjuk Praktikum

7. Hasil Praktikum

8. Kesimpulan

9. Referensi

PRAK 16 - FINAL PROJECT ANIMASI KOMUNITAS ADAW (Final)

PRAK 15 - FINAL PROJECT ANIMASI KOMUNITAS ADAW (Animasi Part 3)

PRAK 14 - FINAL PROJECT ANIMASI KOMUNITAS ADAW (Animasi Part 2)

PRAK 13 - MEMBUAT VIDEO MOTION GRAPHIC KOMUNITAS ADAW - TAHAP FINAL

PRAK 12 - FINAL PROJECT ANIMASI KOMUNITAS ADAW (Animatics Part 2)

PRAK 11 - FINAL PROJECT ANIMASI KOMUNITAS ADAW (Animatics Part 1)

PRAK 10 - KULIAH TAMU UI/UX

PRAK 09 - MEMBUAT VIDEO MOTION GRAPHIC KOMUNITAS ADAW

PRAK 08 - VIDEO BRANDING KOMUNITAS ADAW

PRAK 07 - MEMBUAT VIDEO BRANDING DARI KOMUNITAS ADAW

PRAK 06 - REMAKE GOOGLE LOGO

PRAK 05 - DOPE MOTION REMAKE

PRAK 04 - MENIRU SEBUAH ANIMASI LOGO

1. Judul

PRAK 03 - MEMBREAKDOWN ANIMASI

Render pada praktikum ini lebih lama dari praktikum sebelumnya, hal ini diakibatkan oleh cloning dari secondary asset yang banyak yaitu 75 buah.
9. Referensi