Desain Grafis 2 - Pertemuan 2 - Olahdata, Visualisasi & Produksi

 Olahdata, Visualisasi & Produksi 

 

Olah Data

  

Data berupa teks atau gambar terlebih dahulu harus kita pilah dan seleksi. Apakah data itu sangat penting sehingga harus tampil atau kurang penting sehingga bisa ditampilkan lebih kecil, samar atau dibuang sama sekali.

Data bisa berupa data Informatif atau data Estetis. Data informatif bisa berupa foto atau teks dan judul. Data estetis bisa berupa bingkai, gambar ornamen, gambar background, efek atau bidang.

Biasanya semua data yang analog seperti sketsa, tanda tangan, foto jadul dll. Harus dikonversi ke dalam format digital / file. Peralatan yang diperlukan untuk merubah data analog ke digital seperti Scanner, Camera digital, Video Capture, Audio Recorder dll. Selanjutnya data-data tersebut disempurnakan dengan teknik Trace, Noise Removal, Image Levelling, Color Restoration dll.

Tugas Desainer adalah menggabungkan data informatif dan data estetis menjadi suatu kesatuan yang utuh. Tujuan desain grafis adalah untuk mengkomunikasikan karya secara visual, oleh karena itu jangan sampai estetika mengorbankan pesan / informasi.      

Visualisasi

Faktor-faktor apa sajakah yang akan membuat desain menjadi menarik secara visual? Antara lain sebagai berikut :

a.Pemilihan warna

Setelah data kita sortir dengan skala prioritas, kini dapat menentukan warna yang cocok untuk karya anda. Pemilihan warna dapat ditentukan dari konsep analisa dan strategi, tentu pekerjaan akan lebih mudah dan terarah. Tetapi bagaimana jika anda sama sekali tidak mempunyai kriteria atau batasan tentang warna? Berikut adalah beberapa tips :

1.Segment usia berapa karya anda akan ditampilkan ? Bila usia ABG, pemakaian warna cerah akan cocok. Jika usia lanjut anda bisa hanya menggunakan warna hitam putih saja atau grayscale.

2.Terlebih dahulu tentukan warna background, apakah berwarna gelap, terang atau sedang, setelah itu anda dapat tentukan warna yang cocok dengan warna background.

3. Ambil warna dari warna data yang paling dominan. Jika data gambar yang lebih banyak warna alam (hijau dan coklat), anda dapat mengambil dari unsur warna tersebut.  

 

b. Layout

 

Layout adalah usaha untuk menyusun, menata unsur unsur grafis (teks dan gambar) menjadi media komunikasi yang efektif. 

 

Jika data / unsur grafis dan warna yang akan dipakai telah dipastikan sebelumnya, maka selanjutnya kita dapat melakukan proses tata letak / layout.

 

Namun pekerjaan layout ini memerlukan kaidah-kaidah yang perlu diketahui seperti : Proporsi, Keseimbangan, Irama, Kesatuan Fokus dan Kontras. Kadang-kadang kita sulit untuk memenuhi semua kaidah tersebut ke dalam desain. Lebih mudah jika kita fokus pada salah satu kaidah tersebut dan kompromi dengan kaidah lainnya.

 

c. Alternatif dan Revisi

 

Sama seperti proses pencarian ide, perlu ada alternatif dan revisi pada karya desain. Tidak jarang anda harus bolak-balik agar desain bisa diterima sampai tahap akhir. Tahap ini memang membosankan dan menjengkelkan oleh karena itu karya desain tidak sepantasnya dihargai rendah, bukan?      

 

d. Finishing

 

Informasi dan tata estetis telah tersusun rapi, namun tetap masih kurang ‘wah’ atau kurang megah. Sama seperti bangunan, meskipun denahnya yang sesuai rencana, bentuknya unik tapi jika tidak ada keramik, batu alam, tanaman, teralis atau pagar maka bangunan tersebut terasa belum selesai / belum finishing.

 

Begitu pula desain grafis, agar tampilan lebih megah dan mewah, perlu penambahan Detail berupa textur, efek, cahaya dan bentuk-bentuk yang harmonis. Dalam hal efek, software yang baik digunakan antara lain adobe photoshop, adobe after effects atau 3D studio max.

 

Produksi

 

Produksi bisa jadi merupakan hal yang terpisah dari desain, karena yang mengerjakan bukan desainer melainkan operator mesin, tukang cetak, tukang sablon, tukang kertas dll yang lebih mengandalkan skill atau keahlian. Namun tanpa mereka, desain anda hanya sebatas mimpi belaka. Oleh karena itu, desainer perlu sebatas mengetahui, bagaimana proses dan kendala dalam produksi tersebut agar desain anda realistis dan efisien dari segi harga.            

 

 

   

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Materi CSS - Pertemuan 1 - The Beginning

Definition 

CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed.

• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files
  

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Example :

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

 

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

 

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

 

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

 

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

 

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

Example :

In this example all <p> elements will be center-aligned, with a red text color:

p {
  color: red;
  text-align: center;
}

• p is a selector in CSS (it points to the HTML element you want to style: <p>).
• color is a property, and red is the property value
• text-align is a property, and center is the property value

 

 

 

Desain Grafis 2 - Pertemuan 1 - Kerangka Kerja & Ide Kreatif

 

Membuat kerangka kerja 

Disini semua pembicaraan dalam pengumpulan informasi disusun secara tertulis dan formal. tahap ini penting agar tidak ada kemunduran atau pengulangan terhadap konsep atau keinginan yang telah disepakati. daripada nanti pada tahap 4 yaitu visualisasi harus mengulang lagi kriteria dan konsep, lebih baik pada tahap ini secara tegas dibuat kerangka dan batasan kerja. Disini anda bisa mengembangkan garis besar isi dan tujuan proyek. Anda bertemu calon klien untuk persetujuan sebelum melanjutkan ketahap lebih jauh.

Sedangkan Project Outline untuk penjadwalan yang berhubungan dengan waktu sampai deadline, dituangkan ke dalam lembar kerja yang disebut Creative Brief.

Terlihat tujuan, ukuran yang disepakati, batasan isi / konten yang akan diolah, batasan waktu, media yang digunakan dan yang penting biaya!.

Sebaiknya pada tahap ini desainer sudah membuat MOU (memo of understanding) atau surat perintah kerja yang ditandatangani kedua pihak diatas materai secara hukum. Deal!

Media 

untuk mencapai kriteria ke sasaran / segment yang dituju, diperlukan studi pemilihan media (media placement) yang cocok dan efektif untuk produk kita. Media bisa berupa cetak, elektronik, luar ruang atau pernak-pernik (merchandise).

Sebelum anda merancang, tentukan terlebih dahulu ukuran area kerja anda, apakah berukuran A4, Folio atau 800 x 600 pixel dsb. Format / ukuran media adalah pondasi pekerjaan anda. Jika anda salah pondasi tentu bangunan yang telah kita buat dengan susah payah akan runtuh! oleh karena itu pastikan ukuran bidang kerja kita tidak akan berubah.

Mencari Ide Kreatif

Ini tahap yang merupakan nilai jual utama dari seorang desainer, ya Kreatif! kita mudah menasehati orang agar menjadi kreatif, namun yang dinasehati akan bingung, seperti apa sih 'mahluk' kreatif itu?

Jalan-jalan/Survey/Studi Banding

Tentu saja untuk mengetahui yang belum pernah ada anda harus tahu dulu apa yang pernah ada. Oleh karena itu untuk kreatif, cara yang penting anda harus banyak mencari tahu alias survey, jalan-jalan, atau bahasa kerennya studi banding. 

Setelah menetahui apa saja ide para pesaing, kita bisa cari-cari ide sendiri yang orisinil tanpa harus khawatir akan sama dengan pesaing. Dengan demikian proses kreatif tidak bisa dilepaskan dari proses studi banding yang kadang-kadang kita terjebak dalam plagiat dan modifikasi. Tidak perlu menjiplak 100% cukup lihat konsep, warna, bentuk, jenis huruf atau elemen lain yang mungkin memicu ide besar nantinya.

Brainstorming / Tukar Pikiran 

Cara lain agar mendapat ide kreatif yaitu ngobrol santai dengan klien dan kelompok sambil menampung ide-ide dari mereka sendiri. istilah kerennya Brainstorming. Anda bisa brainstorming dengan rekan kerja, klien orang-orang industri yang berkaitan dengan proyek, keluarga, teman dll. 

Membaca Buku

Buku adalah sumber ilmu yang dipakai sejak dulu kala sampai sekarang. Buku ada yang bersifat fisik atau dalam format digital (e-book). Para desainer profesional banyak yang tidak membuat buku, namun menumpahkan idenya melalui blog, sosial media atau file sharing di internet. Anda bisa mengikuti (follow) orang-orang yang pakar.

Doodle/Menggambar sketsa 

untuk mendapatkan ide, cara lain yaitu denga corat-coret/ doodle sesuka anda. Dengan cara ini aka tidak sengaja (atau sengaja) bisa mendapatkan ide yang tidak terpikirkan sebelumnya.

Presentasi Pada klien

Anda bisa juga menyelidiki selera klien mengenai desain kesukaannya, mulai karya seni, musik, film, lukisan, pakaian dsb bisa diamati.

Desain beberapa versi 

Untuk menghasilkan desain yang diterima, tidak selamanya berhasil dalam satu tembakan. Perlu beberapa kali percobaan agar kena sasaran, bukan? Begitu pula klien, tidak selalu bisa menerima desain anda jika disajikan hanya satu alternatif saja. Setidaknya ada dua versi desain agar klien bisa mengambil keputusan.

Revisi 

Setelah klien menentukan satu pilihan dari alternatif desain anda, saatnya memperbaiki atau merevisi desain. biarkan klien mencampur dan mencocokkan alternatif desain yang diberikan                       

 

 

       

Materi Desain Grafis - Pertemuan 2 - Percetakan Vs Multimedia

 

Desain Grafis percetakan Vs Multimedia

Meskipun software grafis yang digunakan sama (CorelDraw, Adobe Photoshop, 3D Studio max dll) namun jenis output dan ukuran antara desain grafis untuk percetakan dan desain grafis untuk multimedia ada perbedaan sebagai berikut :

Desain Grafis percetakan :

1.      Palet warna CMYK

2.      File : Tiff, eps

3.      Ukuran file besar

4.      Diproduksi dengan cat atau tinta

5.      Media kertas atau lainnya

6.      Ukuran bidang bebas

7.      Resolusi minimal 300 dpi

8.      Warna dasar = Putih (tanpa tinta/cat)

Desain Grafis Multimedia

1.      Palet warna RGB

2.      File : JPG, Gif, Png

3.      Ukuran file kecil

4.      Diproduksi dengan cahaya lampu RGB

5.      Media monitor atau display

6.      Ukuran bidang mengikuti ukuran monitor 4:3 atau 16:9

7.      Resolusi rendah 72 dpi atau sedikit lebih

8.      Warna dasar = hitam (tanpa cahaya)

Peluang Kerja Desainer Grafis

Designer, Visualizer atau Conceptor?

Ketiga posisi diatas berkaitan dengan ilmu desain grafis, hanya beda segmentasi atau tingkatan saja. Untuk profesi paling awal/bawah adalah Visualizer dimana pekerjaannya adalah menterjemahkan konsep /sketsa desain sampai dengan final agar tampil lebih menarik. Disini kemampuan praktis teknik manual dan komputer sangat berperan. Biasanya orang-orang yang bergelut disini adalah lulusan SMK grafis, D3, operator setting atau tukang cetak.

Diatasnya lagi adalah Desainer yang bisa memutuskan /menentukan desain agar bisa diterima target pasar yang dituju. Perlu pemikiran matang, riset dan studi banding untuk menghasilkan konsep yang tepat. Biasanya orang yang ahli dibidang ini telah menmpuh pendidikan sarjana S1.

Lebih tinggi lagi adalah filusuf yang masuk kedalam kategori Konseptor. Mereka berfikir lebih luas yang melibatkan banyak faktor antara lain budaya, agama, sejarah, geografis, genetis, politis, ekonomis dll.

Analisanya bisa menjangkau ruang dan waktu masa yang akan datang. Pakar komunikasi visual ini biasanya telah menempuh pendidikan sarjana S2, S3 atau telah berpengalaman ditingkat nasional dan internasional.

Materi Desain Grafis - Pertemuan 1 - Definisi Desain Grafis

 

Yang dimaksud dengan desain grafis adalah : proses pemikiran yang diwujudkan dalam visual terutama  gambar.

Hubungan desain grafis dan seni rupa :

Desain grafis merupakan anak dari ilmu seni rupa, ilmu seni rupa memiliki cabang lain yang lebih luas antara lain : seni murni, seni tekstil/mode, desin interior, desain produk.

Estetika

Estetika adalah cabang ilmu filsafat yang membahas keindahan, Bagaimana terbentuk dan bagaimana bisa merasakannya. Pembahasan lebih lanjut tentang estetika cukup rumit karena harus mempelajari indera dan kejiwaan agar bisa menilai suatu rasa. Contoh dari rasio penilaian kualitatif secara estetika adalah menggunakan rumus M=O/C dimana M (Measure) Nilai Keindahan, O (Order) Keberaturan, C (Complexity) Kompleksitas.

Pengaruh desain grafis dengan TIK

Dikarenakan perkembangan teknologi dan informasi yang pesat, desain grafis bisa merambah ke bidang animasi, multimedia, web desain dan interactive media atau game. Namun agar tidak terlalu jauh, desain grafis lebih fokus ke gambar diam/still image. Sedangkan untuk gambar bergerak seperti animasi, film, iklan tv, atau game lebih tepat masuk ke bidang / jurusan multimedia atau animasi.

Sarana penyampaian / komunikasi desain grafis

Untuk menyampaikan pesan atau informasi kepada publik, diperlukan media/sarana antara lain :

1.      Media Cetak, misal : Poster, brosur, buku, stiker, sampul CD/DVD, leaflet, tas belanja, kartu nama, iklan majalah/koran

2.      Media Luar Ruang, misal : Spanduk, Banner, X-Banner, Billboard, Papan Nama, Neon Sign, Baliho, Mobil Box

3.      Media Elektronik, misal : Televisi, Film, internet, Smartphone, Komputer, Radio

4.      Tempat Pajang/Display, misal : Etalase, Desain Gantung, Floor Stand

5.      Barang-barang Kenangan /Special Offer, misal : Kaos, Topi, Payung, Gelas, Souvenir, Tas

Hubungan desain grafis dengan multimedia

Banyak definisi tentang multimedia, namun pada prakteknya multimedia merupakan perpaduan antara ilmu desain grafis dan teknologi informasi/komputer.

Multimedia dikenal diluar negeri sebagai Rich Media                   

 

Sedangkan game adalah perpaduan antara multimedia dan pemrograman. Game disebut juga Multimedia Interaktif / Interactive multimedia 

Materi Pemrograman PHP - Pertemuan 7 - Penggunaan Operator IF dan Metode POST pada Script Login

Pada pembuatan form login di sebuah halaman web biasanya mempergunakan sebuah database lengkap dengan field-field yang sanggup menampung banyak user/pengguna.

Pada materi kali ini kita akan coba bahas tentang pembuatan halaman login tanpa mempergunakan database sama sekali, pada halaman web ini hanya mendayagunakan formulir dengan metode pengiriman data POST serta operator if untuk pengolahan datanya.

Untuk keperluan halaman login ini kita memerlukan 1 halaman formulir dan 1 halaman login, yang mana kedua halaman ini bekerjasama untuk menampung input dari user, mengirimkan dan memproses data serta mengembalikan hasilnya kepada user.

Pertama kita buat terlebih dahulu form loginnya.

<form method="post" action="login.php">

Username <input type="text" name="username"> <br />

Password <input type="password" name="pass"> <br />

<input type="submit" name="submit" value="Submit">

</form>

Selanjutnya kita buat script login.php

<?php

$username = $_POST[‘username’];

$password = $_POST[‘pass’];

if ((($username == "pelita") && ($password == "light")) ||

(($username == "bangsa") && ($password == "nation")))

{

echo "Login sukses";

}

else

{

echo "Login gagal";

}

?>  

Materi Pemrograman PHP - Pertemuan 6 - Post & Get Request

 

POST Request

POST request adalah proses mengirim data (submit) melalui form yang berasal dari

(X)HTML. Karena PHP adalah bahasa program atau scripting, maka PHP bisa digunakan untuk menerima data hasil submit tersebut. Data yang diterima nantinya bisa diproses dalam script PHP.

Untuk menerima data dari proses submit form dalam PHP, kita gunakan statement

assignment berikut ini.

$namaVariabel = $_POST['nama komponen dalam form'];

Dalam hal ini, nama variabel boleh sama atau tidak sama dengan nama komponen

dalam form. Namun… sangat disarankan, Anda membuat nama variabel yang berbeda dari nama komponen formnya untuk mencegah hal-hal yang tidak diinginkan, misalnya hacking.

Perhatikan contoh berikut ini:

Dalam contoh ini, kita coba membuat form HTML yang di dalamnya terdapat dua

komponen input dua buah bilangan.

input.html

<html>

<head>

<title>Contoh Request POST</title>

</head>

<body>

<h1>Input dua bilangan</h1>

<form method="post" action="proses.php">

Masukkan Bilangan 1 <input type="text" name="bil1" /><br />

Masukkan Bilangan 2 <input type="text" name="bil2" /><br />

<input type="submit" name="submit" value="submit" />

</form>

</body>

</html>

Pada form di atas dapat kita lihat bahwa terdapat dua komponen dalam form, yang

masing-masing memiliki nama ‘bil1’ dan ‘bil2’ (perhatikan atribut name="…" pada

komponen). Keduanya kebetulan merupakan komponen form berbentuk text box.

Selanjutnya, perhatikan bagian atribut action="proses.php". Apa maksud dari atribut tersebut? Atribut ini memiliki makna bahwa apabila tombol submit tersebut diklik, maka data yang diisikan pada form nantinya akan dikirim dan diolah pada script bernama proses.php.

Sekarang, kita coba buat script proses.php nya. Dalam script ini, kita coba untuk

membaca nilai yang diisikan ke dalam form di atas, lalu menampilkannya ke browser.

proses.php

<?php

$bilangan1 = $_POST['bil1'];

$bilangan2 = $_POST['bil2'];

echo "<p>Anda telah memasukkan bilangan pertama = ".$bilangan1. "</p>";

echo "<p>Anda telah memasukkan bilangan kedua = ".$bilangan2. "</p>";

?>