Anda di halaman 1dari 38

2018

MATERI
DESAIN GRAFIS

Oleh :
Laurentinus

SEKOLAH TINGGI TEKNIK INFORMATIKA DAN KOMPUTER

ATMA LUHUR
PANGKALPINANG
2018
Pelatihan Desain Grafis

Konsep Desain
Bagaimana mendesain layout yang baik ? ada bebrapa pertanyaan yang
harus dipikirkan :
1. Apa tujuan desain tersebut ?
2. Siapa target audience-nya ?
3. Apa pesan yang ingin disampaikan kepada target audience ?
4. Bagaimana cara menyampaikan pesan tersebut ?
5. Dimana, di media apa dan kapan desain itu akan dilihat oleh target audience ?

Media dan Spesifikasinya


Hal yang penting anda lakukan pertama kali setelah mengetahui konsep
desain adalah menentukan media dan spesifikasi apa yang akan digunakan :
1. Media yang cocok, misalnya brosur tiga lipatan, spanduk, plasma screen, dll
Jika Media yang digunakan yaitu Cetakan maka mode warna yang cocok adalah
CMYK, tetapi jika ditayangkan di plasma screen atau media sosial maka mode
warna yang cocok yaitu RGB.
2. Bahan, misalnya kertas daur ulang, kain, dll
3. Ukuran. Misalnya A4, A3, 160cm x 60cm untuk x-banner, spanduk, dll
4. Posisi. Misalnya A4 tegak (Vertikal/portrait) atau mendatar (horizontal/landscape)

Hal yang harus diketahui di desain grafis :


Additive color (RGB) adalah Model warna yang terdiri dari cahaya merah, hijau dan
biru.
CMYK adalah Model warna yang dipengaruhi oleh pigmen dari tinta cetak serta
kertas yang digunakan.
Dpi adalah Dot per inch, yaitu satuan ukuran resolusi output yang dihasilkan dari
perangkat output seperti printer, imagesetter dan CIP.
Bit Depth adalah kedalaman warna, yang merupakan banyaknya alternatif warna
yang dapat dimiliki suatu gambar atau jumlah bit yang dapat ditangkap scanner atau
yang diperlihatkan image / gambar. Batasan bit dari 256 warna sampai 16.7 juta
warna.
Bitmap adalah : suatu format file grafis bit mapped windows yang menyimpan citra
tersusun dari kumpulan raster, kualitas gambar bitmap tergantung dari resolusi /
jumlah pixel yang membentuknya. Format file bitmap adalah TIFF, EPS, JPEG, PNG,
dll
Vektor adalah gambar yang tersusun dari garis-garis lurus maupun lengkung yang
tersusun perhitungan secara matematis.
Driver adalah perangkat lunak yang disertakan pada perangkat dan harus diinstal
pada komputer agar suatu peralatan digital dapat digunakan.
File adalah istilah untuk data yang telah selesai dikerjakan dan tersimpan dalam
media penyimpanan.
Resolusi adalah Density dari dot (titik) atau pixel per satuan pengukuran linier (inch)
pada monitor komputer atau jumlah titik per inch (dpi) dalam bentuk cetak.
Grayscale adalah sebuah mode warna yang menampilkan gambar dengan
menggunakan 256 warna abu. Setiap warna didefinisikan sebagai nilai antara 0 dan
255, dimana 0 adalah paling gelap dan 255 adalah paling putih.
JPEG adalah Joint Photography Expert Group, merupakan file format terkompres
untuk mobilitas data yang tinggi dan praktif.
Pixel adalah satuan terkecil dari unsur pembentuk gambar, 1 pixel mewakili 1 titik.

Page 1
Pelatihan Desain Grafis

Aplikasi Pengolah Vektor/Garis


Program yang termasuk dalam kelompok ini dapat digunakan untuk membuat
gambar dalam bentuk vektor/garis sehingga sering disebut sebagai Illustrator
Program. Seluruh objek yang dihasilkan berupa kombinasi beberapa garis, baik
berupa garis lurus maupun lengkung. Aplikasi yang termasuk dalam kelompok ini
adalah: Adobe Illustrator, Corel Draw, Macromedia Freehand, Metacreations
Expression, Micrografx Designer, dll

Tipografi dalam Layout


Setiap jenis huruf mempunyai sifat / dapat memberi kesannya masing-masing
yang berbeda satu dengan lainnya. Memilih jenis huruf yang cocok dengan bunyi
teksnya adalah salah satu keterampilan yang seharusnya diimiliki oleh desainer.

Gaya hidup metropolitan


cocon – grovy, lifestyle

Charlemagne Std - Wibawa

Nueva Std – Friendly informat

Hidup indah dan damai


Courier – Konservatif, teratur

Liburan telah tiba


Comic Sans – Kekanakan, humoris

P e l e s t a r ia n
Square – Modern

Gaya hidup metropolita


Stencil Std – Maskulin, ketentaraan

Hidup merana
Liquidism – horor, Warning

Page 2
Pelatihan Desain Grafis

Layout
Media dengan ukuran dan bentuk yang berbeda membutuhkan cara penerapan
layout yang berbeda. Demikian pula fungsi yang berbeda dari masing-masing media
itu membutuhkan penanganan layout yang berbeda pula.

A1

A3

A2

A5

A4
A7 A6
A8

Page 3
Pelatihan Desain Grafis

Pengenalan Adobe Illustrator

Umumnya Tools Box di Adobe Illustrator berada di sisi kiri. Berisi sekumpulan alat-
alat (tools) yang biasa digunakan untuk membuat atau mengedit obyek illustrasi.
Banyak sekali tools yang ada di Adobe Ilustrasi dengan fungsi yang beragam pula,
memudahkan pengguna untuk membuat dan mengedit pekerjaannya.

Dibawah ini adalah beberapa tools yang ada di Adobe Illustrator CS6 :

A. Selection Tool
Digunakan untuk memilih atau menyeleksi obyek secara individu, kelompok
ataupun pada area
1. Selection Tool

Untuk memilih / menyeleksi obyek illustrasi baik individu, kelompok


atau pada area tertentu.
2. Direct Selection Tool

Untuk menyeleksi titik / poin pada obyek atau path (garis) tertentu.
3. Group Selection Tool

Untuk memilih pada beberapa obyek.

Page 4
Pelatihan Desain Grafis

4. Magic Wand Tool

Untuk menyeleksi area tertentu pada obyek.


5. Lasso Tool

Untuk menyeleksi point pada sebuah obyek.

B. Drawing Tools
Digunakan untuk membuat / menggambar obyek sesuai dengan keinginan user.
Drawing tools terbagi menjadi beberapa bagian.
1. Pentools Group
Pentool

Untuk membuat sebuah garis atau bisa juga bidang.

Add Anchor Point

Berguna untuk menambah anchor point (titik) pada sebuah garis/path.

Delete Anchor Point

Tool ini adalah kebalikan dari tool diatas. Berfungsi untuk menghapus
titik pada sebuah garis

Convert Anchor Point Tool

Digunakan untuk membuat titik point menjadi kurva.

Page 5
Pelatihan Desain Grafis

2. Pencils Group
Pencil Tool

Digunakan untuk membuat titik point menjadi kurva.

Smooth Tool

Berfungsi untuk menghaluskan (melekukkan) path.

Path Eraser Tool

Sesuai namanya, alat ini berfungsi untuk menghapus path / garis.

3. Rectangle Group
Rectangle Tool

Digunakan untuk menghasilkan obyek segi empat.

Rounded Rectangle Tool

Digunakan untuk menggambar obyek segi empat dengan sudut


tumpul.

Ellipse Tool

Digunakan untuk membuat obyek berbentuk bulat

Page 6
Pelatihan Desain Grafis

Polygon Tool

Digunakan untuk membuat obyek berbentuk segi enam atau lebih

Star Tool

Berfungsi untuk membuat obyek berbentuk bintang (sudut / kuncup


bintang biasa ditambah dengan menekan tombol tanda anak panah ke atas
saat menggunakan tools tersebut).

Flare Tool

Membentuk efek seperti pantulan cahaya pada lensa kamera

4. Line Group
Line Segment Tool

Berfungsi untuk membuat garis / path lurus

Arc Tool

Digunakan untuk membuat garis melengkung (kurva)

Spiral Tool

Digunakan untuk membuat garis berbentuk spiral

Rectangular Grid

Berfungsi untuk membuat obyek berbentuk table

Polar Grid

Digunakan untuk menggambar obyek segi empat dengan sudut


tumpul

Page 7
Pelatihan Desain Grafis

5. Painting Tools
Painting Tools adalah tools yang digunakan untuk memilih, mengatur dan
menyesuaikan warna pada suatu obyek.
Paint Brush Tool

Berfungsi untuk menghasilkan goresan garis seperti kuas

Blob Brush Tool

Berfungsi untuk menghasilkan goresan fill (isi) seperti kuas

Mesh Tool

Digunakan untuk membuat gradasi warna dengan titik-titik tertentu

Gradient Tool

Digunakan untuk membuat gradasi warna

6. Eyedropper Tool Group


Eyedropper Tool

Berfungsi untuk mengambil contoh warna pada area tertentu.

Measure Tool

Sesuai namanya, tool ini digunakan untuk mengukur suatu obyek.


Page 8
Pelatihan Desain Grafis

7. Shape Builder Tool Group


Shape Builder Tool

Berfungsi untuk menggabungkan suatu obyek dengan obyek


lainnya.

Live Paint Bucket Tool

Digunakan untuk mengisi warna pada suatu obyek serta celah-celah


diantara obyek yang terhubung.

Live Paint Selection Tool

Digunakan untuk mengisi warna pada obyek yang telah diseleksi /


dipilih.

8. Type Tools
Type Tool adalah alat berfungsi untuk mengatur dan mengedit semua yang
berhubungan dengan :
Type Tool

Berfungsi untuk membuat point teks

Area Type Tool

Digunakan untuk membuat teks pada area tertentu

Page 9
Pelatihan Desain Grafis

Type on a path tool

Berfungsi untuk membuat teks mengikuti jalur garis/path.

Vertical Type Tool

Digunakan untuk membuat teks secara vertical

Vertical Area Type Tool

Berfungsi hampir sama dengan area type tool namun tool ini
membuat teks secara vertical

Vertical type on a path tool

Tool ini digunakan untuk membuat teks pada sebuah garis secara
vertical.

Ukuran Screen

Zoom In dapat dilakukan dengan tekan Alt + Scroll keatas


Zoom In dapat dilakukan dengan tekan Alt + Scroll kebawah

Page 10
Pelatihan Desain Grafis

MODUL 1 – 4
Teks, Image & Vector

Page 11
Pelatihan Desain Grafis

A. Modul 1 - Membuat Project Baru di Adobe Illustrator


1. Klik Menu File > New

Keterangan :

Name : Nama File

Number of Artboard : Jumlah Halaman yang akan didesain

Width & Height : Ukuran layout

Color Mode : pilihan mode warna CMYK / RGB

Orientation : Orientasi Portrait / Landscape

Klik OK maka akan muncul lembar kerja putih polos.

Page 12
Pelatihan Desain Grafis

B. Modul 2 TEXT

1. Drop Shadow
Pilih Text yang akan diberikan style drop shadow klik menu Effect > Stylize >
Drop Shadow.

Page 13
Pelatihan Desain Grafis

2. Stroke
a. Menambah Stroke (Garis Outline pada text) maka pastikan huruf harus
memiliki ketebalan yang cukup, contoh : Arial > Bold.
b. Pemilihan Warna dalam dan garis stroke.
Usahakan warna dalam selaras dengan warna background (jika
background putih/ cerah maka pilih warna text cerah juga) dan sebaliknya.
Pemilihan warna stroke berlawanan dengan warna text.

Pemberian Stroke Hitam ketebalan 3.

C. Modul 3 Bitmap

IMPORT IMAGE

Untuk Import Gambar Bitmap kedalam project maka kita harus membuka file
gambar tersebut. Dengan cara klik menu File > open, kemudian cari file dan
OK

CTRL+C untuk copy image kemudian kembali ke project dan paste dengan
tekan CTRL+V

Page 14
Pelatihan Desain Grafis

CUSTOMIZE UKURAN IMAGE

Pilih Selection Tool kemudian klik di gambar.

Kita dapat mengubah ukuran dengan menarik point di sisi gambar kemudian
drag. Tekan tombol SHIFT untuk ukuran yang tetap proposional (skala yang
sama)

Page 15
Pelatihan Desain Grafis

D. Modul 4 Vector

Membuat Background

1. Biasanya dilakukan dengan menggunakan Rectangle tool yang diterapkan


diseluruh lembar kerja.

2. Terapkan Warna
a. Solid
Kita bisa menerapkan warna solid dengan cara double klik di
foreground kemudian pilih warna dan klik OK.

Page 16
Pelatihan Desain Grafis

b. Gradasi

Kita dapat memberikan gradasi warna dengan cara klik gradient tool.

munculkan pallet gradient dengan klik menu windows > Gradient.

Gradasi Adalah Corak warna yang bisa dikembangkan dari dua atau
lebih warna, sehingga membuat tingkatan warna tertentu dengan tidak
merusak dan mengubah warna itu sendiri. Dengan kata lain gradasi
warna adalah perkembangan warna atau perubahan warna yang terjadi
jika dua warna atau lebih digabungkan.

Secara default terdapat 2 Gradient Slider. Klik yang sebelah kanan. >
double klik di kotak warna > pilih warna > OK.

Kita dapat mengatur posisi gradient vertical atau horizontal. Ataupun


tingkat warna gradasi.

Page 17
Pelatihan Desain Grafis

Layer

Object vector dapat kita buat menggunakan rectangle tool, dll.

Kita dapat mengubah urutan setiap layer sehingga didepan ataupun


dibelakang dengan cara seleksi object > klik kanan > arrange > ….

Keterangan :

Bring to front, memindahkan object ke posisi terdepan

Bring Forward, memindahkan object 1 layar kedepan

Send Backward, memindahkan object 1 layar kebelakang

Send to Back, memindahkan object ke posisi paling belakang.

Page 18
Pelatihan Desain Grafis

Latihan 1 Membuat Spanduk dengan Text & Bitmap


1. Membuat Konsep Rancangan

Apa ? Layanan Masyarakat (jenis font formal)


Siapa ? Pemotor (2-10 detik, ukuran font besar)
Pesan ke target audience ? Himbauan (Warna mencolok)
Dimana? Pinggir Jalan (ukuran 1meter)
Kapan ? Pagi - Sore Hari (warna text)

Buat Project Baru dengan nama spanduk jalan dengan spesifikasi berikut :

Page 19
Pelatihan Desain Grafis

2. BACKGROUND

Buat Background Mencolok dengan cara klik rectangle tool > drag penuhi
lembar kerja > pilih warna pada foreground

3. TEXT

a. Tambahkan text dengan klik Text Tool


b. Pilih Font Liquidism part 2 untuk “Jatuh Di”, font Arial tipe Black untuk
“Aspal”
c. Beri warna merah dan hitam
d. Atur Jarak Spasi dengan cara seleksi text, kemudian pilih menu Paragraph,
Atur Spasi hingga sesuai.

Page 20
Pelatihan Desain Grafis

e. Tambahkan Stroke

Seleksi text menggunakan Selection Tool kemudian pilih warna stroke dan
ukuran ketebalan stroke.

Lakukan cara yang sama untuk membuat text dibawah :

4. BITMAP

Selanjutnya masukkan logo di bagian header dengan cara klik menu file > open,
pilih logo kemudian OPEN.

Page 21
Pelatihan Desain Grafis

Setelah terbuka tab baru yang berisi gambar logo, kemudian di seleksi
menggunakan selection tools > CTRL+C.

Pindah ke halaman file kerja sebelumnya kemudian tekan CTRL + V untuk paste
gambar tadi.

Atur Ukuran sehingga sesuai pada bagian header. Tambahkan Logo selanjutnya
sehingga seperti gambar berikut :

Page 22
Pelatihan Desain Grafis

Pengenalan Freepik
Freepik merupakan situs desain terpopuler berbasis vector menggunakan adobe
illustrator.

Terdapat banyak kategori yang bisa dimanfaatkan dengan cara didownload seperti :
background banner, animasi, karakter, dll

Untuk Selanjutnya Desain Vector kita memanfaatkan situs freepik.

Page 23
Pelatihan Desain Grafis

Latihan 2 Membuat Spanduk dengan Text, Bitmap & Vector


1. Membuat Konsep Rancangan

Apa ? Ucapan Selamat & Himbauan (jenis font lifestyle & formal)
Siapa ? Pengendara (5-10 detik, ukuran font besar)
Pesan ke target audience ? Himbauan halus (Warna kalem sedikit mencolok)
Dimana? Perempatan / Pinggir Jalan (ukuran 4 meter x 1 meter)
Kapan ? Pagi – Malam

2. Membuat project baru


Buat project baru dengan nama spanduk dan spesifikasi berikut :

Page 24
Pelatihan Desain Grafis

3. Tambahkan Logo Gambar Bitmap


Tambahkan logo bitmap dengan cara klik menu file > open. Kemudian pilih gambar dan klik
OPEN.

Pada gambar yang terbuka tekan CTRL+C untuk mengcopy gambar, kemudian
kembali ke halaman file untuk di paste dengan cara tekan CTRL + V. Atur ukuran
sehingga seperti berikut.

Tambahkan logo selanjutnya di sebelah kanan.

Page 25
Pelatihan Desain Grafis

4. Tambahkan TEXT

Tambahkan text menggunakan text tool kemudian ketik menggunakan font Cooper,
tipe black, ukuran 800pt. Warna tulisan

Berikan Stroke 25pt berwarna hitam.

Tambahkan line ke 2 dengan font arial, Bold Italic, dan ukuran 270pt

Tambahkan line ke 3 dengan font arial, Black, dan ukuran 400pt

Page 26
Pelatihan Desain Grafis

Tambahkan line ke 4 dengan font arial, Black, dan ukuran 340pt

5. Desain Background

Download Banner di situs freepik.com kemudian extract

Buka file dengan ekstensi .eps atau .ai maka akan muncul beberapa banner sbb :

Page 27
Pelatihan Desain Grafis

Klik di salah satu banner kemudian copy dengan tekan CTRL + C. kembali ke file
spanduk kemudian paste dengan tekan CTRL + V.

Atur ukuran sehingga background menutupi lembar kerja, jangan lupa tekan tombol
SHIFT untuk skala yang proposional.

Setelah selesai mengatur ukuran, Letakkan background di posisi paling belakang


dengan cara klik kanan > Arrange > Send to Back

Page 28
Pelatihan Desain Grafis

CUSTOMIZE (PENGATURAN)

Warna Background masih terlalu gelap, kita lakukan Customize warna dengan cara
double klik di background maka kita akan masuk 1 layar ke dalam group.

Double klik lagi hingga muncul halaman terakhir.

Atur Warna menjadi biru cerah:

Setelah mengubah warna maka keluar dari group dengan cara klik layer 1

Page 29
Pelatihan Desain Grafis

HASIL :

Page 30
Pelatihan Desain Grafis

Latihan 3 Membuat Iklan Himbauan dengan Text, Bitmap &


Vector
1. Membuat Konsep Rancangan

Apa ? Ucapan Himbauan (jenis font lifestyle & formal)


Siapa ? Anak Muda Pengguna smartphone (>15 detik, ukuran font sedang )
Pesan ke target audience ? Iklan Himbauan (Warna kalem)
Dimana? Social Media (ukuran 40cm x 40cm)
Kapan ? 24 jam

2. Membuat project baru


Buat project baru dengan nama spanduk dan spesifikasi berikut :

Page 31
Pelatihan Desain Grafis

3. Tambahkan Logo Gambar Bitmap


Tambahkan logo bitmap dengan cara klik menu file > open. Kemudian pilih gambar dan klik
OPEN.

Pada gambar yang terbuka tekan CTRL+C untuk mengcopy gambar, kemudian
kembali ke halaman file untuk di paste dengan cara tekan CTRL + V. Atur ukuran
sehingga seperti berikut.

Tambahkan logo selanjutnya di sebelah kanan dan bawah.

Page 32
Pelatihan Desain Grafis

4. Desain Vector dan TEXT

Desain Header dengan menggunakan Rectangle tool dan berikan warna biru.

Dengan Rectangle Tool tambahkan garis disamping dengan warna biru tua / navy.

Kemudian dengan memanfaatkan Direct Selection Tool. Block bagian atas point dari
2 rectangle tool. Tekan panah kanan untuk memiringkan garis menjadi jajar genjang.

Tambahkan Text pada heTambahkan Text pada header menggunakan font arial
ukuran 85pt warna putih.Konten menggunakan font arial warna merah ukuran 72pt.

Page 33
Pelatihan Desain Grafis

Footer

Klik rectangle tool, tambahkan bagian berikut pada bagian footer, dengan warna
merah.

Kemudian tambahkan text dengan font arial dengan ukuran 40pt dan gambar
bitmap pada bagian footer

6. Desain Vector pada Konten

Download Karakter di situs freepik.com kemudian extract

Buka file dengan ekstensi .eps atau .ai maka akan muncul beberapa banner sbb :

Page 34
Pelatihan Desain Grafis

copy karakter dengan tekan CTRL + C. kembali ke file iklan kemudian paste dengan
tekan CTRL + V.

Atur ukuran sehingga background menutupi lembar kerja, jangan lupa tekan tombol
SHIFT untuk skala yang proposional.

CUSTOMIZE (PENGATURAN)

Kiri dan Kanan masih terlalu kosong, sehingga harus direnggangkan dengan
memindah object. Double klik pada karakter.

Page 35
Pelatihan Desain Grafis

Setelah selesai mengatur posisi maka keluar dari group dengan cara klik layer 1

HASIL :

Page 36
Pelatihan Desain Grafis

EKSPORT KE JPG

Klik menu file > Save For Web

Pengaturan ke JPEG, kualitas Maximum kemudian klik Save untuk menyimpan file.

Page 37