Friday, October 11, 2013

Artikel, Teori dan software tentang Desain Pemodelan Grafik

Saya akan membahas mengenai desain pemodelan grafik. Apabila diuraikan kata perkata menurut kamus besar bahasa Indonesia desain berarti suatu kerangka bentuk, rancangan. Kemudian pemodelan dari asal kata model merupakan pola (contoh, acuan, ragam) dari sesuatu yang akan dibuat atau dihasilkan, dengan menggunakan imbuhan pe-an maka pemodelan berarti proses pembuatan pola untuk menghasilkan sesuatu. Selanjutnya grafik merupakan lukisan pasang surut suatu keadaan dengan garis atau gambar. Jadi secara keseluruhan, pengertian dari desain pemodelan grafik adalah suatu proses pembuatan kerangka rancangan yang meliputi pembuatan pola untuk menghasilkan suatu objek berupa gambar.


Dalam dunia komputer, desain pemodelan grafis merupakan suatu teknik penciptaan suatu citra objek dengan menggunakan sifat-sifat perangkat lunak grafis, yaitu memanipulasi bentuk, cahaya, warna, bayangan, dan tekstur permukaan suatu objek citra. Desain pemodelan grafis ini dapat meliputi gambar berdimensi dua maupun berdimensi tiga. Seperti yang kita ketahui bahwa gambar berdimensi dua akan memiliki dimensi panjang dan lebar saja misalnya bangun datar persegi. Sedangkan gambar berdimensi tiga akan memiliki dimensi tambahan yaitu tinggi atau kedalaman misalnya bangun ruang kubus.

Desain
Proses untuk mendapatkan suatu obyek baru. Desain merupakan gambaran atau pola yang akan memiliki tujuan untuk menghasilkan suatu obyek. Contohnya adalah desain suatu iklan. Desain tersebut berbentuk pola gambar yang dibuat oleh seorang desainer. Desain iklan tersebut dibuat untuk memenuhi keinginan suatu perusahaan yang memesan iklan tersebut agar sesuai dengan keinginan perusahaan. Desain tersebut dibuat agar mempermudah proses pembuatan iklan tersebut.

Pemodelan
Tahap dimana akan dibentuk suatu obyek. Obyek yang dibuat akan dibentuk seolah-olah menjadi nyata. Dengan proses desain, obyek tersebut akan dibuat menjadi 2D maupun 3D. Proses pemodelan ini memerlukan perancangan dengan beberapa langkah saat pembuatannya. Misalnya menentukan obyek apa yang akan dibuat, metode apa yang akan digunakan, serta animasi apa yang sesuai dengan tujuan pembuatan obyek tersebut.

Grafik (Grafis)
Grafik atau Grafis identik dengan suatu garis, titik, tanda, dan bentuk huruf. Grafik merupakan cara membentuk bentuk huruf, tanda serta gambar menggunakan proses pencetakan. Grafik juga didefinisikan sebagai suatu pembuatan, penyimpanan serta manipulasi model dan citra.

Desain grafis sendiri berarti suatu bentuk komunikasi secara visual menggunakan gambar untuk menyampaikan informasi dan pesan tertentu kepada penonton (target). Unsur dalam desain grafis yaitu (termasuk shape, bentuk (form), tekstur, garis, ruang, dan warna) membentuk prinsip-prinsip dasar desain visual.

Jadi, dapat disimpulkan bahwa Desain Pemodelan Grafik merupakan suatu proses dimana akan diciptakan suatu obyek yang baru menggunakan suatu perangkat lunak yang melalui tahapan seperti membuat, menyimpan, dan memanipulasi model dan citra. Kegiatan yang biasanya berkaitan dengan grafik komputer adalah pemodelan geometris, rendering, animasi, graphic library/package, application program, dan citra


Dan juga dapat disimpulkan sebagai proses untuk menghasilkan citra suatu objek baik dalam 3D maupun 2D, dengan tujuan untuk memahami desain grafis sebagai alat penyampai pesan yang estetis, komunikasi dan efisien dalam konteks media sehingga pada kenyataannya dapat diterapkan untuk berbagai bidang diantaranya adalah seni, kewirausahaan, marketing, dan advertising.

 

Software Desain Grafis

Ada beberapa software yang digunakan dalam desain grafis :


Desktop publishing

  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe Indesign
  • Coreldraw
  • GIMP
  • Inkscape
  • Adobe Freehand
  • Adobe image ready
  • CorelDraw
  • Adobe Page Maker
  • Paint Tool SAI

Webdesign

  • Adobe Dreamweaver
  • Microsoft Frontpage
  • Notepad
  • Adobe Photoshop

Audiovisual

  • Adobe After Effect
  • Adobe Premier
  • Final Cut
  • Adobe Flash, atau sebelumnya Macromedia Flash
  • Ulead Video Studio
  • Magic Movie Edit Pro
  • Power Director

Rendering 3 Dimensi

  • 3D StudioMax
  • Maya
  • AutoCad
  • Google SketchUp
  • Light Wave
  • Blender
  • Softimage



Sumber Referensi:
Wikipedia dan Warta Warga UG
http://pusatbahasa.kemdiknas.go.id/kbbi/ 
http://kamusbahasaindonesia.org/grafik#ixzz27

Saturday, July 6, 2013

Cara Membuat Layout pada html.css


Dalam membuat layout web/blog, hal yang sangat penting untuk diperhatikan adalah tema web/blog itu sendiri. Sehingga kita bisa menyesuaikan tema dan tampilannya. Secara umum index sebuah web terdiri dari : wrapper (isi keseluruhan), header, menu, sidebar, content , dan footer. Berikut contoh layout sebuah web/blog.


Selanjutnya berikut script HTML dan CSS nya:


index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" /><title>Layout WEB/BLOG</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<!--------------- #header --------------->
 <div id="header">
 <h1>Header</h1>
 </div>
<!--------------- #menu --------------->
 <div id="menu">
 <ul>
 <li><a href="index.php">Beranda</a></li>
 <li><a href="#">Profil</a></li>
 <li><a href="#">Kontak</a></li>
 <li><a href="#">Galeri Foto</a></li>
 </ul>
 </div>
<!--------------- #sidebar --------------->
 <div id="sidebar">
 <div class="previous">Sidebar</div>
 </div>
<!--------------- #content --------------->
 <div id="content">
 <img src="image/esdua.png" width="144" height="144" />
 <br />Bagian ini silakan isi dengan posing anda. Web/blog yang
dinamis selalu menyisipkan kode PHP pada bagian ini, agar
data-data dapat dengan mudah untuk diubah dan diperbanyak.
 </div>
<!--------------- #footer --------------->
 <div id="footer">
 Copyright &copy; 2012 by: <a href="#">esdua.web.id</a></div>
 </div>
</div>
</body>
</html> 



style.css

/* INDEX:
 1. WRAPPER
 2. HEADER
 3. MENU
 4. SIDEBAR
 5. CONTENT
 6. FOOTER
*/
body {
 background-color: #FFC;
 font-family: "calibri"
}
/* 1. WRAPPER
---------------------------------- */
#wrapper {
 width: 850px;
 margin: 15px auto;
 height: auto;
 padding: 20px;
 background-color: #FFF;
 box-shadow: 0px 0px 20px #F60;
 -moz-box-shadow:0px 0px 20px #F60;
 -webkit-box-shadow: 0px 0px 20px #F60;
 border-radius: 17px;
 -moz-border-radius: 17px;
 -webkit-border-radius: 17px;
}
/* 2. HEADER
---------------------------------- */
#header {
 width: 850px;
 height: 70px;
 border: 1px solid #CCC;
 margin-bottom: 7px;
 text-align: center;
}
/* 3. MENU
---------------------------------- */
#menu {
 width: 850px;
 height: 27px;
 margin-bottom: 7px;
 border: 1px solid #FFF;
 background-color: #CCC;
 font-size:17x;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}
#menu ul{
 margin: 4px 4px 4px 7px;
 padding: 0px;
 list-style: none;
}
#menu li{
 margin: 10px;
 padding: 0px;
 display: inline;
}
#menu a{
 padding: 6px 6px 6px 6px;
 text-decoration: none;
}
#menu a:hover{
 padding: 5px 5px 2px 5px;
 text-decoration: none;
 color: #FFF;
 background: #FF9000;
}
/* 4. SIDEBAR
---------------------------------- */
#sidebar {
 float: right;
 width: 300px;
 height: 290px;
 border: 1px solid #CCC;
 margin-bottom: 7px;
 text-align: center;
}
/* 5. CONTENT
---------------------------------- */
#content {
 width: 538px;
 height: 290px;
 margin-bottom: 2px;
 border: 1px solid #CCC;
 margin-bottom: 7px;
}
#content img{
 border-radius: 17px;
 -moz-border-radius: 17px;
 -webkit-border-radius: 17px;
 box-shadow: 0px 0px 10px #CCC;
 -moz-box-shadow:0px 0px 10px #CCC;
 -webkit-box-shadow: 0px 0px 10px #CCC;
 padding: 2px; margin-right: 10px;
 float:left;
}
/* 6. FOOTER
---------------------------------- */
#footer {
 width: 850px;
 height: 20px;
 padding-top: 0px;
 border: 1px solid #CCC;
 text-align: center;
 background-color: #CCC;
 clear: both;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;

}





Berikut hasilnya:




 

Dalam membuat layout web/blog, hal yang sangat penting untuk diperhatikan adalah tema web/blog itu sendiri, sehingga kita bisa menyesuaikan tema dan tampilannya. Secara umum index sebuah web terdiri dari: wrapper (isi keseluruhan), header, menu, sidebar, content , dan footer. Berikut contoh layout sebuah web/blog.
- See more at: http://abtista-web.blogspot.com/2013/02/desain-layout-webblog-menarik-dengan.html#sthash.oxRwkSTJ.dpuf