text and image session 02 & 03
DESCRIPTION
Subject: L0182 / Web & Animation Design Year: 2009. Text and Image Session 02 & 03. Learning Outcomes. Pada akhir pertemuan ini , diharapkan mahasiswa akan mampu : Menunjukkan penggunaan Text dan Image pada Aplikasi Multimedia Mengedit Text dan Image menggunakan Adobe Photoshop CS3. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/1.jpg)
Text and ImageSession 02 & 03
Subject : L0182 / Web & Animation Design
Year : 2009
![Page 2: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/2.jpg)
Bina Nusantara
Learning Outcomes
Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu :•Menunjukkan penggunaan Text dan Image pada Aplikasi Multimedia•Mengedit Text dan Image menggunakan Adobe Photoshop CS3
![Page 3: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/3.jpg)
Bina Nusantara
Course Outlines
• Definisi• Efek pada Fonts• Bitmap dan Vector Images• Kelebihan dan Kekurangan dalam Penggunaan Images• Apa Itu Photoshop• Workspace• Tools Palette• Option Bar• Membuat Image Baru• Membuka file Image• Image Resolution dan Resizing• Image Transform
![Page 4: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/4.jpg)
Bina Nusantara
Text
• Text adalah bentuk dari kata, kalimat dan paragraf yang digunakan untuk mengkomunikasikan pikiran, ide dan fakta dalam hampir setiap aspek kehidupan.
• Elemen-elemen Text :– Karakter Alfabet : A – Z– Angka : 0 – 9– Karakter special : Tanda baca[. , ; ‘ …] , Tanda atau Simbol [* &^
% $ £ ! /\ ~ # @ .…]
• Produk Multimedia bergantung pada text pada banyak hal :– Untuk menjelaskan bagaimana produk multimedia bekerja– Memandu user dalam menavigasi dalam produk multimedia– Menyampaikan informasi sebagaimana tujuan produk dirancang
![Page 5: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/5.jpg)
Bina Nusantara
Typefaces dan Fonts
• Typefaces : keluarga karakter grafik yang biasanya memungkinkan ukuran dan style yang berbeda.
• Fonts : Sekumpulan karakter dengan ukuran dan style yang sama untuk suatu typeface tertentu.
Ascender : garis tambahan di atas pada sebuah karakter Descender : garis tambahan di bawah pada sebuah karakter Leading : spasi di atas dan di bawah font atau Line spacing Tracking : spasi antara karakter Kerning : spasi antar sepasang karakter, biasanya berupa
overlap untuk memperbaiki penampilan
![Page 6: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/6.jpg)
Bina Nusantara
Tracking, Kerning, dan Leading
AvUnkerned
vAKerned
Reading Line OneReading Line One
Reading Line OneReading Line OneLeading
![Page 7: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/7.jpg)
Bina Nusantara
Efek pada Fonts• Beberapa efek sangat berguna untuk menarik perhatian
pembacapada konten :– Case : HURUF BESAR (UPPER) dan huruf kecil (lower)
– Bold, Italic, Underline, superscript atau subscript
– Embossed Embossed atau ShadowShadow
– CCoolloouurrss
• Font Anatomy
I D xhpBaseline
Serif
Shoulder
Counter
Mean line
Ascender
DescenderSet
width
X-height
Cap height
Point size
![Page 8: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/8.jpg)
Bina Nusantara
• Kelebihan– Relatif murah (mudah) untuk dibuat/dihasilkan– Mempresentasikan ide abstrak secara efektif– Menjelaskan media lain– Menjaga kerahasiaan– Mudah dirubah atau di-update
• Kekurangan– Kurang mudah diingat daripada media lain– Membutuhkan perhatian lebih dari user daripada media lain– Terkadang digunakan secara berlebihan
Kelebihan dan Kekurangan Penggunaan Text
![Page 9: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/9.jpg)
Bina Nusantara
• Image suatu representasi visual dari beberapa informasiyang dapat ditampilkan di layar komputer atau tercetak
• Images dapat tampil dalam format yang :– Foto (Photographs)– Lukisan (Paintings)– Peta (Maps), dll.
Image
![Page 10: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/10.jpg)
Bina Nusantara
• Images secara umum dapat dibagi menjadi 2 format :- Bitmap atau Raster Image- Draw-type atau Vector graphics atau Metafile images
• Suatu bitmap adalah suatu data matriks yang mendeskripsikan karakteristik dari semua pixel yang membentuk suatu image.
• Suatu grafik vector adalah pembuatan image digital melalui urutan perintah atau pernyataan matematika yang memposisikan lines dan shapes dalam ruang 2D atau 3D
Tipe-Tipe Image
![Page 11: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/11.jpg)
Bina Nusantara
Bitmap Images
• Setiap pixel dalam image berisi informasi warna yang ditampilkan. Setiap pixel menampilkan warna yang spesifik dan setiap pixel dapat menampilkan dua atau lebih jenis warna.
• Jenis warna yang dapat ditampilkan suatu pixel dikenal sebagai colour depth. Colour depth diukur dalam bits per pixel.
• Semakin banyak warna per pixel maka semakin besar ukuran file
• Bitmap images dapat memiliki resolusi tertentu dan tidak dapat di-resize tanpa kehilangan kualitas image.
• Format umum untuk bitmap-based adalah JPEG, GIF, TIFF, PNG, PICT, and BMP.
![Page 12: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/12.jpg)
Bina Nusantara
Bitmaps images
Original imageOriginal image
Shown Shown magnifiedmagnified
![Page 13: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/13.jpg)
Bina Nusantara
Colour Depth• 1 bit per pixel = 2 colours
(monochrome)• 2 bits per pixel = 4 colours• 4 bits per pixel = 16 colours• 8 bits per pixel = 256 colours
– Cukup bagus untuk image berwarna
• 16 bits per pixel = 65536 colours– Kualitas lebih bagus untuk foto
dan biasa dikenal sebagai high colour
• 24 bits per pixel =>16 million possible colours– Digunakan untuk membuat
photo realistic images, juga dikenal sebagai true colour
• Width dari images diukur dalam pixels
• Height dari images diukur dalam pixels
• Colour depth adalah jumlah bit yang digunakan untuk warna, diukur dalam bits per pixel
• Ingat:
– 1024 bytes = 1 kilobyte (KB)
– 1024 kilobytes = 1 megabyte (MB)
8bytesinsize
depthcolourheightwidth
![Page 14: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/14.jpg)
Bina Nusantara
Kelebihan dan KekuranganPenggunaan Bitmap Images
• Kelebihan– Menampilkan detil informasi dengan cepat– Real life
• Kekurangan– Bergantung pada resolusi– Berpengaruh pada kualitas image – Ukuran file besar
True Colour (24 bits)8 bits4 bits1 bit
![Page 15: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/15.jpg)
Bina Nusantara
Vector Images• Vector images disimpan dalam bentuk kumpulan graphic
primitives yang dibutuhkan untuk menampilkan image
• Suatu graphic primitive adalah grafik sederhana berbasiskan drawing elements atau objects seperti shape dan terdiri dari sekumpulan perintah (persamaan matematika)– Contoh : square, line, ellipse, arc, etc.
• Setiap primitive object memiliki atribut yang bervariasi yang akan membentuk keseluruhan image– Contoh : x-y location, fill colour, line colour, line style, etc.
• Vector image atau vector graphics dapat di-resize tanpa kehilangan integritas dari original image.
• Format umum untuk vector-based : WMF, SVG, CGM, PS, PDF, DFX, and EPF.
![Page 16: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/16.jpg)
Bina Nusantara
Scaling Vector Images
Original imageOriginal image
V e c t o rg r a p h i c s
ShownShownmagnifiedmagnified
V e c t o rg r a p h i c s
![Page 17: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/17.jpg)
Bina Nusantara
Kelebihan dan KekuranganPenggunaan Vector Images
• Kelebihan– Data yang dibutuhkan untuk menampilkan image relatif kecil.– Karena itu, tidak membutuhkan memory yang besar untuk
menyimpan– Mudah dimanipulasi
• Kekurangan– Level detil yang dapat ditampilkan dalam image sangat terbatas
![Page 18: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/18.jpg)
Bina Nusantara
Bitmap dan Vector Images
Vector Images
Bitmap Images
![Page 19: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/19.jpg)
Bina Nusantara
Kelebihan dan Kekurangan Penggunaan Images
• Kelebihan– Menampilkan banyak informasi dengan cepat– Menambah simulasi dan warna visual– Dapat berkomunikasi tanpa ada batasan bahasa– Memperkaya media lain
• Kekurangan– Tidak menyediakan penjelasan mendalam
• Graphics jarang dapat menampilkan pesan secara keseluruhan dalam hal bisnis, teknikal atau aturan keselamantan.
– Dapat disalahartikan• Graphics seharusnya digunakan dengan hati-hati untuk memastikan
pesan yang disampaikan tidak ambigu atau cryptic.
![Page 20: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/20.jpg)
Bina Nusantara
Photoshop
• Adobe Photoshop adalah sebuah paket software untuk meng-edit image profesional yang dapat digunakan baik oleh para ahli dan juga orang awam
![Page 21: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/21.jpg)
Bina Nusantara
Workspace
• Workspace Adobe Photoshop CS3 diatur untuk membantu pengguna untuk fokus pada pembuatan dan peng-edit-an image.
• Workspace meliputi menu dan berbagai macam tools dan palette untuk mem-view, meng-edit, dan menambahkan elemen pada image
• .
![Page 22: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/22.jpg)
Bina Nusantara
Workspace (cont..)
Default Photoshop workspace :
A. Document window
B. Dock Panels yang ditampilkan dalam bentuk icons
C. Judul Panel
D. Menu bar
E. Options bar
F. Tools palette
G. Mengubah ke bentuk tombol Icons
H. Tiga palette (panel) groups dalam vertical dock
![Page 23: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/23.jpg)
Bina Nusantara
Tools Palette
• Tools dikelompokkan menjadi 4 kategori :– Selection : gunakan tools ini untuk memilih object.– Creative : gunakan tools ini untuk menggambar object dan
retouch photos.– Vector : gunakan tools untuk bekerja dengan vector.– Navigation dan Information : gunakan tools ini untuk mem-view
halaman dan mengumpulkan informasi.
![Page 24: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/24.jpg)
Bina Nusantara
![Page 25: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/25.jpg)
Bina Nusantara
Bagaimana Menggunakan Sebuah Tool
• Jika ada sebuah segitiga kecil pada sudut kanan bawah sebuah tool, tahan tombol dengan mouse untuk melihat hidden tool. Lalu pilih tool yang diinginkan.
• Menggunakan ToolsA. Tools palette
B. Active tool
C. Hidden tools
D. Nama Tool
E. Tool shortcut
F. Segitiga hidden tool
![Page 26: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/26.jpg)
Bina Nusantara
Option Bar
• Option bar memperlihatkan pilihan dari tool yang aktif• .
![Page 27: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/27.jpg)
Bina Nusantara
Membuat Image Baru
• Pilih : File > New
![Page 28: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/28.jpg)
Bina Nusantara
Membuka Sebuah Image
• Pilih : File > Open• Pilih file yang ingin
dibuka • Klik open
![Page 29: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/29.jpg)
Bina Nusantara
Resolusi dan Me-resize Image
• Pilih : Image > Image Size• Ubah nilai width & height
untuk me-resize image.• Ubah nilai resolution untuk
mengubah resolusi image
![Page 30: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/30.jpg)
Bina Nusantara
Image Transform
• Image transform :– Scale– Rotate– Skew– Distort– Perspective– Warp
• Langkah :– Pilih image yang ingin ditransform– Pilih : edit > transform– Pilih metode transform yang diinginkan
![Page 31: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/31.jpg)
Bina Nusantara
Rotate
![Page 32: Text and Image Session 02 & 03](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56813510550346895d9c644e/html5/thumbnails/32.jpg)
Bina Nusantara
Warp