Materi 5 Disain Multimedia Dasar

Presentasi berjudul: "Materi 5 Disain Multimedia Dasar"— Transcript presentasi:

1 Materi 5 Disain Multimedia Dasar
PENGOLAHAN GRAFIS Materi 5 Disain Multimedia Dasar PRODI SI UNRIYO

2 STANDARD COMPETENCE : Using a Graphic design application program
BASIC COMPETENCE : Show menu and icon of graphic design application program

3 DEFINITION GRAFIS adalah Gambar yang tersusun dari koordinat-koordinat
Jadi semua gambar yang muncul pada layar monitor komputer terdiri atas titik-titik yang mempunyai nilai koordinat Layar monitor berfungsi sebagai sumbu koordinat x dan y

4 THE VARIOUS OF GRAPHIC DESIGN
BITMAP Dibentuk dengan raster/pixel/dot/titik/point koordinat Semakin banyak jumlah titik yang membentuknya maka semakin tinggi tingkat kerapatannya Maka semakin halus pula citra grafis, akan tetapi kapasitas filenya semakin besar

5 Grafis Berbasis BITMAP
Ketajaman warna tergantung pada banyaknya pixel yang membentuk gambar Jika gambar bitmap berresolusi tinggi ditampilkan pada monitor dengan resolusi rendah, maka gambar akan terlihat kabur/kotak-kotak apabila diperbesar Mempunyai satuan ukuran dpi (dot per inchi) atau banyaknya titik dalam 1 inchi

6 Grafis Berbasis BITMAP
Mempunyai file Extensi .bmp, jpg, tif, pix, dan pcx Biasa digunakan untuk kepentingan Foto Digital Program aplikasi yang biasa digunakan adalah Adobe Photoshop, Corel Photopaint, Microsoft Photo Editor, Macromedia Firefox.

7 Grafis Berbasis Vektor
Tidak bergantung pada banyaknya pixel dan kondisi monitor Tersusun atas garis-garis Tampilan tetap terlihat jelas meski dilakukan perbesaran (zooming) Mempunyai kapasitas file lebih kecil tetapi pemakaian processor akan memakan banyak memory

8 Grafis Berbasis VEKTOR
Program aplikasi berbasis Vektor seperti CorelDraw, Macromedia FreeHand, Adobe Illustrator, Micrografx Designer.

9 Keunggulan dan Kelemahan
VEKTOR Keunggulan Ukuran File yang dihasilkan kecil Hemat pemakaian memory penyimpanan file Kelemahan Pemakaian processor yang besar sehingga komputer bekerja lebih lambat BITMAP Keunggulan Pemakaian memory lebih kecil Kehalusan gambar tidak tergantung pada ukuran dpi tetapi pada output device spt monitor/printer Kelemahan Ukuran file document yang dihasilkan besar

10 Perbedaan Grafis Bitmap dan Vektor
Gambar tetap jelas ketika ukuran diperbesar Tersusun oleh garis dan kurva Ukuran file yang dihasilkan kecil Kualitas grafis tidak tergantung dari banyaknya Pixel BITMAP Gambar kurang jelas ketika diperbesar Tersusun atas titik-titik/dot Ukuran file yang dihasilkan besar Kualitas grafis tergantung dari banyaknya Pixel

11 Menggunakan program berbasis VEKTOR CorelDraw
CorelDRAW merupakan pengolah grafis dengan basis vektor  atau garis, dimana unsur dasar yang mendasarinya  adalah  garis. Keuntungan dari vektor  ini  adalah  gambar  akan  mempunyai ukuran kapasitas file yang relatif kecil apabila dibandingkan  dengan pengolah  grafis berbasis bitmap. CorelDRAW merupakan pengolah grafis dengan basis vektor atau garis, dimana unsur dasar yang  mendasarinya  adalah  garis

12 Getting Started.. Cara lain:
Klik shortcut di desktop yang bertuliskan CorelDraw 12.

13 Tampilan Awal Corel Draw
Klik Pilihan New

14 Lembar Kerja CorelDraw 12
Title Bar Menu Bar Standard Toolbar Color Palette ToolBox Drawing Window Drawing Page Ruler Cursor Position Pages

15 Keterangan Menu Bar Terdiri dari menu-menu untuk mengoperasikan CorelDraw 12. Standard Toolbar Berisi perintah-perintah pada menu utama Property bar Berisi tombol-tombol perintah tambahan. Tool box Berisi alat untuk mendesain gambar. Ruler Sebagai garis pengukur objek

16 Keterangan Color Pallete Berisi perintah untuk memilih warna objek.
Pages Sebagai petunjuk halaman yang aktif. Drawing Page Halaman tampilan untuk tempat mendesain objek Cursor Position Menunjukkan posisi kursor dalam perhitungan ukuran yang sama pada penggaris (ruler). 

17 ToolBox Pick Tool EllipseTool (F7) Outline tool Shape Tool (F10)
2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 Pick Tool 7 EllipseTool (F7) 13 Outline tool 2 Shape Tool (F10) 8 Graph Paper Tool (D) 14 Fill Tool 3 Zoom Tool (Z) 9 Basic Shapes 15 Interctive Fill Tool (G) 4 Freehand Tool (F5) 10 Text Tool (F8) 5 Smart Drawing Tool (S) 11 Interactive Blend Tool 6 Rectangle Tool (F6) 12 Eyedropper Tool

18 Keterangan Pick Tool Memilih, memanipulasi dan mengontrol objek
1 Shape Tool (F10) Memanipulasi objek kurva 2 Zoom Tool (Z) Memperbesar / memperkecil tampilan objek 3 4 Freehand Tool (F5) Untuk membuat garis tunggal dan kurva 5 Smart Drawing Tool (S) Rectangle Tool (F6) Membuat objek kotak 6 7 EllipseTool (F7) Membuat objek lingkaran

19 Keterangan Graph Paper Tool (D) Basic Shapes
8 Graph Paper Tool (D) Basic Shapes Membuat berbagai macam  bentuk objek yang umum 9 Text Tool (F8) Membuat objek teks dan paragraph teks 10 11 Interactive Blend Tool Eyedropper Tool 12 Outline tool 13 14 Fill Tool Interctive Fill Tool (G) 15

20 SHOW AND HIDE THE ICONS Right click on the toolbar area
Select the toolbar

21 Adobe Photoshop

22 Tujuan Instruksional Khusus
Mampu membuat obyek dan teks dengan berbagai variasinya

23 Pengenalan Cara menjalankan Adobe Photoshop
Start  program  adobe photoshop

24 Gambar yang sedang diedit
Pengenalan Photoshop adalah software grafis terpopuler dan merupakan merk dagang dari Adobe Systems Incorporated. Tool Box Menu Bar Option Bar (Option untuk Tool Box) Palette Gambar yang sedang diedit Status Bar

25 Pengenalan: Toolbox

26 Pengenalan: Layer Adalah lapisan yang bertumpuk-tumpuk dari atas ke bawah dan berfungsi sebagai pembentuk gambar. Berguna untuk mempermudah manipulasi gambar. Dalam file berformat PSD, layer sering digunakan untuk membentuk gambar yang kompleks. Layer paling atas secara otomatis akan menutupi layer di bawahnya.

27 Kasus 1. Teks dan Gambar Teks atau tulisan dapat ditambahkan dalam suatu gambar, atau tanpa gambar, atau gambar dijadikan sebagai isi huruf yang digunakan Berikut adalah langkah-langkahnya

28 Langkah-Langkah Pembuatan
Buka file candy.jpg yang akan dijadikan sebagai ‘isi’ huruf. Aktifkan Layer Palette dengan memilih menu Window  Layers. Klik dua kali pada layer Background kemudian ubah nama layer menjadi Layer 0. Klik Text tool ( ) pada tool box, lalu aktifkan Character Palette ( ). Pilih Font: Impact dan isikan nilai-nilai lainnya seperti pada gambar berikut

29

30 Langkah-Langkah Pembuatan
Klik di tengah gambar candy, kemudian ketik teks ‘candy’ Pada layer palette, pilih dan drag layer CANDY ke bawah Layer 0.

31 Langkah-Langkah Pembuatan
Arahkan pointer di antara Layer 0 dan Candy. Tahan tombol Alt, pointer akan berubah menjadi dua buah lingkaran yang berdekatan, klik satu kali. Hasilnya, gambar candy akan masuk ke dalam teks CANDY. Simpan hasil kerja Anda.

32 Kasus 2. Efek Shadow pada Teks
Buat dokumen gambar baru dengan memilih menu File  New, dengan ukuran 400x200 dan content putih. Klik Horizontal type tool ( ) pada toolbox, kemudian buat tulisan pikti-its dengan warna hitam, Font: Comic Sans Ms, Size: 72px pada option bar. Aktifkan Layers palette, dengan memilih menu Window  Layers. Kemudian pilih Add Layers Style  Drop Shadow.

33 Langkah-Langkah Pembuatan
Pada jendela Layer Style, isikan setting berikut : Blend mode: multiply; opacity: 80%; angle: 30; aktifkan use global light; distance: 5px; spread: 0%; size: 5px. Kemudian tekan ok. kemudian ketik teks ‘candy’ Simpan tulisan tersebut.

34 Kasus 3. Efek Refleksi pada Teks
Untuk membuat gambar seperti di atas, lakukan langkah-langkah berikut. Buatlah dokumen baru dengan ukuran 400x200, mode Grayscale, dan contents transparent. Pilih Gradient Tool ( ) dan buatlah Gradient hitam (#000000), putih (#FFFFFF). Caranya dengan men-double-click pada gradient.

35 Langkah-Langkah Pembuatan
Gradient

36 Langkah-Langkah Pembuatan
Tarik Gradient Tool ( ) dari atas tegak lurus ke bawah, sehingga. Klik Horizontal type tool ( ) pada toolbox, kemudian buat tulisan pikti-its dengan warna putih, Font: Comic Sans Ms, Size: 48px.

37 Langkah-Langkah Pembuatan
Buatlah duplikat layer tersebut, Layer  Duplicate Layer, kemudian gunakan flip vertical, Edit  Free Transform  FlipVertical dan drag ke bawah sehingga membentuk efek bayangan.

38 Langkah-Langkah Pembuatan
Tambahkan layer mask, Layer  Add Layer Mask  Reveal All dan gunakan Gradient tool ( ) untuk membuat gradasi hitam putih (dari bawah ke atas) pada layer mask tersebut.

39 Langkah-Langkah Pembuatan
Klik layer thumbnail Pikti-its copy pada palet layers, lalu gunakan efek motion blur, Filter  Blur  Motion Blur. Pilih sudut -90.

40 Langkah-Langkah Pembuatan
Buat link antara layer background dengan layer pikti-its copy dengan mengaktifkan layer background, lalu mengeklik antara eye dan thumbnail pada layer pikti-its cop. Seleksi bagian bawah tulisan dan berikan efek gelombang laut, Filter  Distort  Ocean Ripple. Simpan hasil kerja Anda

41 Kasus 4. Caution Strip Untuk membuat strip seperti di atas, lakukan langkah-langkah berikut. Buatlah suatu dokumen baru dengan ukuran 640x480, mode RGB, dengan warna hitam. Tambahkan Layer baru, dan beri nama “Pita”. Pilih Rectangular marquee tool ( ). Kemudian buatlah strip yang memanjang, isi dengan Paint Bucket tool ( ) dengan warna #EAFF00

42 Langkah-Langkah Pembuatan

43 Langkah-Langkah Pembuatan
Pilih Horizontal Type Tool ( ), ketik sepanjang strip kuning kata: “CAUTION”. Gunakan font Impact 19, Smooth, warna hitam. Untuk memberi kesan yang rapi, Anda dapat memberikan spasi beberapa kali antar setiap tulisan “CAUTION”.

44 Langkah-Langkah Pembuatan
Kemudian, langkah berikutnya adalah dengan melakukan rasterisasi layer text. Ini dilakukan dengan cara klik menu Layer  Rasterize  Layer. Merge layer text dan layer Pita dengan cara pastikan hanya kedua layer visible, kemudian pilih menu Layer  Merge Visible. Langkah berikutnya, Anda dapat memberikan kesan tertentu, misalnya memberi kesan bekas dan tua. Ini dapat dilakukan dengan memilih Eraser tool ( ), kemudian klik dropdown menu Brushes dan pilih jenis brush yang sesuai. Mulailah menghapus pada bagian pinggir.

45 Langkah-Langkah Pembuatan

46 Langkah-Langkah Pembuatan
Pilihlah Background layer, kemudian gantilah background tersebut ke warna putih. Setelah itu, klik pada layer Pita, dan pilih tombol Layer Style ( ). Tambahkan bayangan pada image tersebut, uncheck pada Global Light. Set distance ke 0. Simpan hasil kerja Anda.

47 Kasus 5. Gradasi Warna Suatu gambar merupakan obyek dua dimensi, sedangkan benda-benda di sekeliling kita merupakan obyek tiga dimensi. Jika kita membuat suatu gambar yang seolah-olah merupakan obyek nyata seperti halnya benda di sekeliling kita tersebut, maka kita akan membuat suatu efek yang membuat obyek dua dimensi seolah-olah merupakan obyek tiga dimensi. Salah satu caranya adalah dengan memanipulasi warna yang ada di suatu obyek, misalnya adalah dengan penggunaan gradasi warna.

48 Langkah-Langkah Pembuatan
Untuk membuat obyek seperti di samping, lakukan langkah-langkah berikut. Siapkan gambar baru yang akan dibuat. Klik menu File  New untuk menampilkan kotak dialog New. Isikan nama file, ukuran dan nilai lain yang diperlukan. Nama file Name : Cangkir Ukuran Width : 14 cm, Height : 14 cm Resolusi Resolution : 100 pixels/inch Pilih Mode : RGB Kemudian klik tombol OK.

49 Langkah-Langkah Pembuatan
Untuk memudahkan pembuatan gambar, aktifkan grid dengan cara pilih menu View  Show  Grid. Klik Zoom tool ( ) yang ada pada tool box di sebelah kiri layar, kemudian tekan fit on screen pada option bar. Aktifkan path palette, dengan cara memilih Menu  Paths. Kemudian buat path baru dengan nama path 1.

50 Langkah-Langkah Pembuatan
Aktifkan Menu Path

51 Langkah-Langkah Pembuatan
Membuat Path Baru

52 Langkah-Langkah Pembuatan
Dengan menggunakan Ellipse tool ( ) pada tool box, buat gambar cangkir bagian atas yang berbentuk ellipse.

53 Langkah-Langkah Pembuatan
Buka path palette, kemudian buat path baru dengan nama path 2. Di bawah gambar ellipse sebelumnya, buat gambar segi lima seperti gambar di bawah, dengan menggunakan Pen Tool ( ) pada tool box.

54 Langkah-Langkah Pembuatan
Klik Add Anchor ( ) pada tool box pada titik-titik seperti gambar di bawah ini.

55 Langkah-Langkah Pembuatan
Tarik dan/atau putar titik-titik tersebut untuk mendapatkan bentuk seperti gambar berikut.

56 Langkah-Langkah Pembuatan
Buka path palette, kemudian buat path baru dengan nama path 3. Di bawah gambar yang dibuat pada langkah ke-5 tersebut, buat gambar persegi panjang dengan menggunakan pen tools.

57 Langkah-Langkah Pembuatan
Klik Add Anchor ( ) dan tambahkan titik-titik pada persegi panjang tersebut. Setelah dilakukan modifikasi akan didapatkan seperti pada gambar berikut.

58 Langkah-Langkah Pembuatan
Buka path palette, kemudian buat path baru dengan nama path 4. Di bawah gambar yang dibuat pada langkah ke-9, buat gambar ellipse.

59 Langkah-Langkah Pembuatan
Klik Set Foreground pada tool box, setelah kotak dialog Color Picker tampil, atur nilai R:40; G:125; B:230 (warna ungu), lalu klik OK. Nilai RGB Gambar Set Background

60 Langkah-Langkah Pembuatan
Aktifkan tab path palette, klik thumbnail path 1, kemudian klik tab layer. Pada window tersebut, pilih Create new fill or adjustment layer  Gradient. Kotak dialog layer akan muncul, kemudian masukkan nilai Style : Linear; Angle 135; Scale : 100% beri tanda check pada Align with layer box. Lakukan drag pada bidang obyek path 1 untuk mengatur gradasi warna seperti pada gambar berikut

61 Langkah-Langkah Pembuatan
Membuat new fill layer Hasil langkah ke-16

62 Langkah-Langkah Pembuatan
Aktifkan tab palette, pilih thumbnail path 2, kemudian klik tab Layer Pada window tersebut, pilih Create new fill or adjustment layer  Gradient. Kotak dialog layer akan muncul, kemudian masukkan nilai Style : Radial; Angle 135; Scale : 100% beri tanda check pada Reverse dan Align with layer box. Tekan OK. Lakukan drag pada bidang obyek path 2 untuk mengatur gradasi warna seperti pada gambar berikut.

63 Langkah-Langkah Pembuatan
Path 2 dengan Warna

64 Langkah-Langkah Pembuatan
Aktifkan tab palette, pilih thumbnail path 3, kemudian klik tab Layer Pada window tersebut, pilih Create new fill or adjustment layer  Gradient. Kotak dialog layer akan muncul, kemudian masukkan nilai Style : Linear; Angle : 90; Scale : 100% beri tanda check pada Reverse dan Align with layer box. Tekan OK. Aktifkan tab palette, pilih thumbnail path 3 lagi, kemudian klik tab Layer. Pada window tersebut, pilih Create new fill or adjustment layer  Gradient. Kotak dialog layer akan muncul, kemudian masukkan nilai Style : Linear; Angle 90; Scale : 100% beri tanda check pada Align with layer box. Tekan OK. Lakukan drag pada bidang obyek path 3 untuk mengatur gradasi warna seperti pada gambar berikut.

65 Langkah-Langkah Pembuatan
Path 3 dengan Warna

66 Langkah-Langkah Pembuatan
Aktifkan tab palette, pilih thumbnail path 4, kemudian klik tab Layer. Pada window tersebut, pilih Create new fill or adjustment layer  Gradient. Kotak dialog layer akan muncul, kemudian masukkan nilai Style : Linear; Angle : -135; Scale : 100% beri tanda check pada Reverse dan Align with layer box. Tekan OK. Lakukan drag pada bidang obyek path 2 untuk mengatur gradasi warna. Aktifkan tab palette, pilih thumbnail path 4 lagi, kemudian klik tab Layer. Pada window tersebut, pilih Create new fill or adjustment layer  Gradient. Kotak dialog layer akan muncul, kemudian masukkan nilai Style : Linear; Angle 90; Scale : 100% beri tanda check pada Align with layer box. Tekan OK.

67 Langkah-Langkah Pembuatan
Path 4 dengan Warna

68 Langkah-Langkah Pembuatan
Klik Pen Tools ( ) pada tool box, kemudian klik path pada option bar untuk menghilangkan garis path. Simpan hasil kerja Anda.

69 Latihan Buatlah gambar mangkuk seperti gambar di bawah ini

70 Latihan Buatlah tulisan seperti pada gambar berikut.