0 komentar

About Desain Pemodelan Grafik

Minggu, 13 Januari 2013

Desain Pemodelan Grafik merupakan langkah merancang pola sebuah gambar 2D/3D dari sebuah obyek dengan mengunakan perangkat lunak. Perangkat lunak tersebut bisa membuat 2D maupun 3D dari kumpulan titik yang kemudian membentuk garis, baik garis linier maupun garis melengkung. Garis tersebut berkumpul yang dibentuk sedimikan rupa sehingga membentuk menjadi sebuah objek yang bisa bergerak seperti keinginan kita.

Beberapa aspek yang harus dipertimbangkan bila membangun model obyek, kesemuanya memberi kontribusi pada kualitas hasil akhir. Hal-hal tersebut meliputi metoea untuk mendapatkan atau membuat data yang mendeskripsikan obyek, tujuan dari model, tingkat kerumitan, perhitungan biaya, kesesuaian dan kenyamanan, serta kemudahan manipulasi model. 

Desain permodelan grafik sangat berkaitan dengan grafik komputer. Berikut adalah kegiatan yang berkaitan dengan grafik komputer:


  1. Pemodelan geometris : menciptakan model matematika dari objek-objek 2D dan 3D.
  2. Rendering : memproduksi citra yang lebih solid dari model yang telah dibentuk.
  3. Animasi : Menetapkan/menampilkan kembali tingkah laku/behaviour objek bergantung waktu.
  4. Graphics Library/package (contoh : OpenGL) adalah perantara aplikasi dan display hardware(Graphics System).
  5. Application program memetakan objek aplikasi ke tampilan/citra dengan memanggil graphics library.
  6. Hasil dari interaksi user menghasilkan/modifikasi citra.
  7. Citra merupakan hasil akhir dari sintesa, disain, manufaktur, visualisasi dll. 
Saya akan membahas tentang Jenis-jenis Pemodelan Grafik, Pengertian 3D, Kualitas sebuah gambar/obyek, Tahapan-tahapan pembentukan 3D, dan tool-tools pembuatnya.

1. Jenis-jenis Desain Pemodelan Grafik

1.  Animasi
2.  Desain Grafis
3.  Pemodelan
4.  dll


Dari jenis-jenis desain pemodelan grafik tersebut tools utama yang semua jenis tersebut memerlukan yaitu indera, alat gambar, komputer, yang terutama akal, imajinasi dan hati. Karena tanpa akal, imajinasi, apalagi hati tools tersebut tidak bermanfaat.

Dari jenis-jenis tersebut pun terciptalah obyek 2D dan 3D bahkan 4D. Di sini kita hanya akan membahas sampai 3D

2. Pengertian 3D 

Tiga-dimensi ruang adalah model 3 parameter geometris dari alam semesta fisik (tanpa mempertimbangkan waktu) di mana kita berada. Ketiga dimensi umumnya disebut panjang, lebar, dan kedalaman (atau tinggi), meskipun ada tiga arah dapat dipilih, asalkan tidak terletak pada bidang yang sama.


Obyek 3D ini dapat dilihat baik dari atas, bawah, depan dan belakang secara cukup jelas. 3D tercipta dari sumbu X, Y, dan Z


Proses pemodelan 3D membutuhkan perancangan yang dibagi dengan beberapa tahapan untuk pembentukannya. Seperti obyek apa yang ingin dibentuk sebagai obyek dasar, metoda pemodelan obyek 3D, pencahayaan dan animasi gerakan obyek sesuai dengan urutan proses yang akan dilakukan.

3. Kualitas gambar

Kualitas dari sebuah gambar yang diolah secara umum memiliki 2 type yaitu bitmap dan vektor.

VEKTOR.
 

Vektor adalah gambar yang dibuat dari unsur garis dan kurva yang disebut vector. Kumpulan dari beberapa garis dan kurva ini akan membentuk suatu obyek atau gambar. Pada gambar vector, apabila di perbesar maka gambar tersebut tidak akan pecah. Hal ini dikarenakan gambar vektor menggabungkan titik dan garis untuk menjadi sebuah obyek, sehingga gambar tidak akan pecah biarpun diperbesar atau diperkecil.


BITMAP 

Bitmap adalah representasi dari citra grafis yang terdiri dari susunan titik yang tersimpan di memori komputer. Bitmap merupakan kategori grafis kaya warna dan terseusun dari pixel-pixel yang kita sebut sebagai resolusi. File gambar dengan resolusi lebih jernih maka memiliki ukuran file yang jauh lebih besar juga.

4. Tahapan-tahapan Pembentukan 3D

Saya akan menjelaskan tahapan-tahapan pembentukan 3D. Tahapan-tahapan ini juga di gunakan sebagi fiture utama software 3D seperti blender, Auto Cad dan lain sebagainya. Berikut ini tahapan-tahapan pembentukan 3D :

a. Dasar metode modeling 3d

Ada beberapa metode yang digunakan untuk pemodelan 3D. Ada jenis metode pemodelan obyek yang disesuaikan dengan kebutuhannya seperti dengan nurbs dan polygon ataupun subdivision. Modeling polygon merupakan bentuk segitiga dan segiempat yang menentukan area dari permukaan sebuah karakter. 

b. Texturing

Proses texturing ini untuk menentukan karakterisik sebuah materi obyek dari segi tekstur. Untuk materi sebuah object bisa digunakan aplikasi properti tertentu seperti reflectivity, transparency, dan refraction. Texture kemudian bisa digunakan untuk meng-create berbagai variasi warna pattern, tingkat kehalusan/kekasaran sebuah lapisan object secara lebih detail.

c. Proses Rendering

Tahap-tahap di atas merupakan urutan yang standar dalam membentuk sebuah obyek untuk pemodelan, dalam hal ini texturing sebenarnya bisa dikerjakan overlap dengan modeling, tergantung dari tingkat kebutuhan. Rendering adalah proses akhir dari keseluruhan proses pemodelan ataupun animasi komputer. 

Dalam rendering, semua data-data yang sudah dimasukkan dalam proses modeling, animasi, texturing, pencahayaan dengan parameter tertentu akan diterjemahkan dalam sebuah bentuk output. Bagian rendering yang sering digunakan :

- Field Rendering : Field rendering sering digunakan untuk mengurangi strobing effect yang disebabkan gerakan cepat dari sebuah obyek dalam rendering video.

-  Shader : adalah sebuah tambahan yang digunakan dalam 3D software tertentu dalam proses special rendering. Biasanya shader diperlukan untuk memenuhi kebutuhan special effect tertentu seperti lighting effects, atmosphere, fog dan sebagainya.

d. Image dan Display

Merupakan hasil akhir dari keseluruhan proses dari pemodelan. Biasanya obyek pemodelan yang menjadi output adalah berupa gambar untuk kebutuhan koreksi pewarnaan, pencahayaan, atau visual effect yang dimasukkan pada tahap teksturing pemodelan. Output images memiliki Resolusi tinggi berkisar Full 1280/Screen berupa file dengan JPEG,TIFF, dan lain-lain. Dalam tahap display, menampilkan sebuah bacth Render, yaitu pemodelan yang dibangun, dilihat, dijalankan dengan tool animasi. Selanjutnya dianalisa apakah model yang dibangun sudah sesuai tujuan. Output dari Display ini adalah berupa *.Avi, dengan Resolusi maksimal Full 1280/Screen dan file *.JPEG.

Referensi :

http://en.wikipedia.org/wiki/Three-dimensional_space 
http://blog.um.ac.id/rizkya/2011/12/20/macam-macam-format-gambar/
http://safemode.web.id/artikel/design/desain-pemodelan-grafik
http://tik12.wetpaint.com/page/Pengenalan+Grafis+Berbasis+Vektor+dan+Berbasis+Bitmap

http://www.art.eonworks.com/articles/digital_art_tools_for_beginners.html

http://pak-iksan.blogspot.com/2012/11/software-for-3d-modelling-revit.html
2 komentar

Video Gunadarma

Selasa, 03 April 2012

Video Gunadarma ( Youtube ala Gunadarma)


Hello mas bro & sista. Untuk kali ini saya akan mengulas yang sedikit berbeda dari biasanya. Jadi apa hayo ? 
Ya, saya akan mengulas sub domain dari gunadarma (lebih tepat lagi gunadarma.ac.id) . Jadi, siapa yang benar !.  Sub domain gunadarma yang saya bahas adalah video.gunadarma.ac.id. Selain saya akan menjelaskan tentang deskripsi website ini saya juga akan mengulas tentang Jenis(Statis / Dinamis), Bentuk(Design), Visibility, dan Accesibility.

Baik kita masuk ke intinya

Video Gunadarma adalah suatu website yang dibentuk untuk menyimpan video dari mahasiswa, staff, dosen maupun alumni gunadarma yang telah melakukan upload ke situs ini. Bahkan sepertinya orang umum juga bisa mengupload asal telah Register. Jadi, bias dibilang website ini adalah Youtube versi Gunadarma.

Coba di klik kaka http://video.gunadarma.ac.id/
 

Mari kita kupas untuk Jenis, Bentuk(Design), Visibility dan Accesibility.

Jenis Website

Website yang dinamis merupakan jenis website ini, karena kita bisa lihat dari tujuannya yaitu mengupload video. Berarti bisa terus berubah isinya(up-to-date) yang membuat databasenya ikut terus bertambah. Member bisa terus menambah, edit, maupun menghapus video.

Bentuk Website

Bentuk(Design) website ini lumayan elegan, designya sedikit mirip Youtube dengan warna cirri khas gunadarma yaitu ungu. Website ini dalam penerapan layout menggunakan CSS, HTML, dan Javascript seperti kebanyakan sub domain gunadarma yang lain.

Elegan, simple dan kemiripan dengan youtube terlihat dari homepage :
 

Dari gambar di atas kita dapat melihat menu yang dapat melihat menu katagori apa saja yang ada di website ini.

Visibility Website

Visibility dapat diartikan kepopuleran/page rank website di search engine. Tentu tidak lepas dari user yang suka membuka web ini maupun web lain yang mencatumkan url web ini. Sayangnya kebanyakan blog mahasiswa gunadarma tidak mengunjungi dan mencamtumkan sub domain video.gunadarma.ac.id ini. ( Saya ambil dari beberapa sampel blog dari teman2 yang saya kenal).

Padahal dalam hal design lebih bagus daripada video.unpad.ac.id yang masuk di page pertama jika saya mengetikan keyword : video ac.id di google

Sub domain ini menurut saya kurang bagus dalam hal visibility. Karena jika mengetikan keyword : video maupun video ac.id tidak muncul di page 1 & 2 di search engine Google maupun Yahoo. Seperti gambar di bawah ini :



  


Accessibility

Accessibility bila diartikan akses untuk membuka situs ini. Lebih perinci lagi umur berapa saja yang bisa mengakses/membuka website video.gunadarma.ac.id ini. Saya melihat sejauh saya membuka beberapa kontentnya situs ini berisi video yang dapa dilihat dari kalangan anak-anak, remaja, dewasa, maupun lansia.

Selain itu website ini dibuat dari bahasa pemrograman HTML yang merupakan bahasa dasar web. Sehingga website ini dapat dibuka  di browser, mobile, ipad(dan teman-temannya), dan tablet. Dan juga di multiplatform.


Sekian pembahasan saya tentang salah satu sub domain gunadarma yaitu video.gunadarma.ac.id. Lain kali saya akan mencoba link gunadarma yang lain ataupun website lain yang tentunya bisa keren, lucu, dll. Maafkan saya jika ada salah penulisan kata dan lainnya.
0 komentar

Perkembangan (teknologi) Website 2012

Senin, 12 Maret 2012

Website dan Blog terus berkembang teknologi dan designnya di tahun lalu yang baru Booming di tahun ini. Terus menjadi pembicaraan di tahun ini mulai dari forum, social media network, portal sampai Milis. Dan Interface dengan pengguna semakin interaktif, Design yang menggagumkan, dll.  

Mari kita lihat Design Web yang trend di sekitar tahun 2012 ini, Cikidot :

1.  Web Design yang Atraktif                6.  Touchscreen-oriented website designs
2.  Parallax Scrolling                            7.  CSS3 & jQuery 
3.  HTML5 + PHP framework               8.  Social Media Sharing
4.  Flash yang survive                           9.  Native support for plug-in features
5.  Mobile Device Compatibility             10. Big Images & Photo Backgrounds, Dan lain-lain

Saya akan jelaskan beberapa Trend tersebut :

1. Responsive Web Design (RWD)

     Pada dasarnya Web Design yang responsive menunjukkan bahwa dibuat menggunakan W3C CSS3 media queries + HML5.
     Pada akhirnya kita (Web Development apalagi User) meninggalkan website yang bergaya pasif. Web Design yang tanggap atas permintaan pengguna, bisa di berbagai platform dan

Bisa dijalankan di berbagai browser : 
Dahulunya beberapa website hanya bisa dijalankan/lebih optimal di 1-3 browser bahkan harus di versi tertentu dengan RWD bisa diakses oleh semua browser. Contoh : Web Sitrawimax lebi optimal jika menggunakan Mozilla Firefox 3.

Fiture pada RWD  :      
-  Whiteboard Framework 3.1.2    - Flexible Images    - Filament Group’s Responsive Images
Custom Layout Structure  - dll   lebih lengkapnya di http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/


Example :
 
2. Parallax Scrolling

       Parallax Scrolling merupakan salah satu trend desain web yang mucul sejak 2011 bahkan paling efektif untuk menarik visitor ke website kita daripada tren yang lain. Parallax Scrolling menciptakan rasa kedalaman dari desain website tersebut.
      Diadopsi dari teknik video game yang dituangkan dalam website, Dalam efek paralaks designer web menggabungkan beberapa lapisan untuk menciptakan ilusi 2D maupun 3D dimana latar belakang bergerak lebih lambat daripada latar depan gambar. Hal ini dapat dilakukan dengan bantuan plugin spritely jQuery.       
      Parallax Scrolling ini dapat membuat web bergerak horizontal maupun vertical dan composited satu sama lain, dengan memencet 1 tombol maupun hanya menggerakkan mouse. 


Contoh :             Vertikal                           Horisontal : http://rastapecasadeforro.com.br
      

3. Mobile Device Compability

    Kompabilitas web yang dapat terlihat di handphone, Tab, dan gadget lainnya itu tidak terlepas dari teknologi RWD salah satunya Flexible Images. Flexible Images disini diartikan bentuk/ukuran website tersebut akan menyesuaikan dengan platform atau tempat web tersebut dibuka, dan sangat responsif  terhadap viewports ganda. 
       Bisa dibuka di mobile karena ada aplikasi yang terdapat di gadget tersebut yang mendukung.


Contoh : http://www.mobileawesomeness.com/listings/gallery/twitter/ 
               http://www.taptu.mobi

4. HTML5  + PHP Framework


HTML5 adalah versi terbaru dari HTML (kepanjangan Hypertext Markup Language), kode yang berperan sangat penting pada halaman web. HTML adalah salah satu bahasa pemrograman untuk web selain PHP.


Sebenarnya ada 3 macam kode: HTML, yang menyediakan struktur; Cascading Style Sheets(CSS) yang mengurus presentasi, dan JavaScript yang membuat itu terjadi. 
HTML tercipta pada tahun 1980 IBM berniat membuat website. Sejak tahun  1996, bahasa ini mengalami perkembangan yang cukup pesat. Apalagi setelah W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group) sebagai pengembang utama untuk HTML5 ini.

PHP Framework

   PHP Framework adalah bentuk efisiensi pemrograman PHP pada perkembangan scriptingnya, sehingga memungkinkan bagi programmer untuk bisa mengefisiensikan kinerja mereka, serta mengarah pada efisiensi, efektifitas dan reliabilitas.
      Sebuah Framework dirancang untuk memberikan struktur untuk elemen-elemen umum (database interaksi, logika aplikasi) sehingga kita menghabiskan sedikit waktu penulisan database kode antarmuka atau presentasi lapisan antarmuka dan lebih banyak waktu menulis aplikasi itu sendiri.
      Terdapat banyak framework yang diciptakan oleh berbagai pihak.  

Contoh website yang menggunakan HTML5 :
http://spaghettiphp.org/,   www.kevadamson.com 

5. Native support for plug-in features

Native support for plug-in features sebagai dukungan untuk berbagai aspek 'HTML5 dan teman' meningkatkan dan datang ke browser yang lebih dan platform, kita akan melihat tekanan yang lebih besar untuk dukungan browser asli fitur yang kita digunakan untuk menggunakan plug-in untuk:. akses kamera dan mikrofon dengan HTML5 getUserMedia, dan hal-hal lain lebih jauh, seperti dukungan untuk streaming adaptif multimedia.


Native support ini dapat membuat animasi yang kita buat menjadi menajubkan. Salah satu fiturenya adalah ketika kita maupun user mengklik animasi itu akan melebur menjadi seperti pecahan - pecahan puzzle dan akan kembali secara automatis menjadi semula. Salah satu contoh :           awal       ----->     Ketika sudah di klik 


Hasilnya  
 
Bisa dicoba di : http://craftymind.com/factory/html5video/CanvasVideo.html


Referensi  ------>
Secara Umum :
http://webdesignledger.com/tips/web-design-trends-in-2012
http://www.webgranth.com/current-web-design-trends-2011-2012
http://webpagebynumbers.com/web-design-trends-2011-2012

Sumber Responsive Web Design :
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://www.netmagazine.com/features/21-top-tools-responsive-web-design
Sumber Parralax Scrolling :
http://en.wikipedia.org/wiki/Parallax_scrolling
http://www.webdesignersblog.net/inspiration/30-mind-blowing-parallax-scrolling-effect-websites/ 

Sumber Mobile Device Compatibility & Native support for plug-in features :
http://www.practicalecommerce.com/articles/2495-Mobile-Compatibility-How-to-Test-a-Website-for-Mobile-Browsers 
http://dev.khairul-syahir.com/wordpress/graphene/features-and-functionalities/native-plugin-support/
 
Sumber Perkembangan HTML5 + PHP Framework :
http://www.techradar.com/news/internet/web/html5-what-is-it--1047393
http://id.wikipedia.org/wiki/HTML5
http://www.phpframeworks.com/news/p/24132/what-is-php-framework