modul 6 melakukan entry web dengan menggunakan image scanner level 2

(1)

SEKOLAH MENENGAH KEJURUAN

BIDANG KEAHLIAN TEKNOLOGI INFORMASI DAN KOMUNIKASI PROGRAM KEAHLIAN MULTIMEDIA

Melakukan Entry Data (web)

dengan Menggunakan

Image Scanner

(Level 2)

KODE MODUL

(2)

BAGIAN PROYEK PENGEMBANGAN KURIKULUM DIREKTORAT PENDIDIKAN MENENGAH KEJURUAN DIREKTORAT JENDERAL PENDIDIKAN DASAR DAN MENENGAH

DEPARTEMEN PENDIDIKAN NASIONAL 2004

SEKOLAH MENENGAH KEJURUAN

BIDANG KEAHLIAN TEKNOLOGI INFORMASI DAN KOMUNIKASI PROGRAM KEAHLIAN MULTIMEDIA

Melakukan Entry Data (Web)

dengan Menggunakan

Image Scanner

(Level 2)

PENYUSUN

KODE MODUL

(3)

BAGIAN PROYEK PENGEMBANGAN KURIKULUM DIREKTORAT PENDIDIKAN MENENGAH KEJURUAN DIREKTORAT JENDERAL PENDIDIKAN DASAR DAN MENENGAH

DEPARTEMEN PENDIDIKAN NASIONAL 2004

KATA PENGANTAR

Modul dengan judul “Melakukan Entry Data (Web) Dengan

Menggunakan Image Scanner” merupakan bahan ajar yang digunakan

sebagai panduan praktikum peserta diklat Sekolah Menengah Kejuruan

(SMK) untuk membentuk salah satu bagian dari kompetensi pada Bidang

Keahlian Teknik Informatika.

kegiatan belajar 2 membahas teknik dasar manipulasi grafis yang menjadi

(4)

Manipulasi data masih dibagi dalam beberapa kegiatan belajar, karena

manipulasi dan perancangan gambar tidak mungkin hanya mengulas satu

teknik manipulasi saja, akan tetapi harus menyeluruh sehingga siswa

memperoleh gambaran bahwa input image ke web membutuhkan

pengetahuan dan kreatifitas dengan bekal menggunakan berbagai menu

dalam aplikasi grafis.

Diharapkan dengan mengusai modul ini peserta diklat dapat

mengoperasikan image scanner sesuai dengan SOP yang berlaku dan

menguasai teknik manipulasi gambar.

PETA KEDUDUKAN MODUL ... viii

(5)

I. PENDAHULUAN ... 1

A. DESKRIPSI JUDUL ... 1

B. PRASYARAT... 2

C. PETUNJUK PENGGUNAAN MODUL ... 2

1. Petunjuk bagi Peserta Diklat ... 2

2. Peran Guru ... 3

D. TUJUAN AKHIR... 3

E. KOMPETENSI ... 4

F. CEK KEMAMPUAN ... 6

II. PEMELAJARAN ... 7

A. RENCANA PEMELAJARAN SISWA... 7

B. KEGIATAN BELAJAR ... 8

1. Kegiatan Belajar 1 : Instalasi dan Pengoperasian Image Scaner... 8

a. Tujuan Kegiatan Pemelajaran ... 8

b. Uraian Materi 1 ... 8

c. Rangkuman 1 ... 29

d. Tugas 1... 29

e. Tes Formatif 1 ... 29

f. Kunci Jawaban Tes Formatif 1 ... 30

2. Kegiatan Belajar 2 : Menggambar Tombol Gradasi Dua Dimensi... 31

(6)

d. Tugas 2 ... 35

e. Tes Formatif 2... 35

3. Kegiatan Belajar 3 : Menggambar Tombol Gradasi tiga Dimensi... 36

d. Tugas 3 ... 42

4. Kegiatan Belajar 4 : Menambahkan Label Pada Tombol... 43

d. Tugas 4 ... 50

5. Kegiatan Belajar 5 : Membuat Tombol Timbul... 51

(7)

d. Tugas 5 ... 58

6. Kegiatan Belajar 6 : Aplikasi Pengecekan dan Pengesetan. 60 a. Tujuan Kegiatan Pemelajaran ... 60

d. Tugas 6 ... 64

7. Kegiatan Belajar 7 : Membuat Tombol Kaca... 66

d. Tugas 7 ... 70

8. Kegiatan Belajar 8 : Membuat Tombol Plastik... 71

d. Tugas 8 ... 75

(8)

9. Kegiatan Belajar 9 : Membuat Bebagai Efek... 76

d. Tugas 9 ... 81

10. Kegiatan Belajar 10 Membuat Teks Lembut... 83

d. Tugas 10 ... 85

11. Kegiatan Belajar 5 : Membuat Berbagai Bentuk Interface.... 87

d. Tugas 11 ... 109

III. EVALUASI ... 111

(9)

(10)

Keterangan:

A HDW.OPR.105.(1).A Mengoperasikan periferal untuk pembuatan grafis

B DTA.OPR.102.(1).A Melakukan entry data [grafis] dengan menggunakan Image scanner (Level 1)

C SWR.OPR.408.(1).A Mengoperasikan software pengolah gambar vektor (digital illustration)

D SWR.OPR.409.(1).A Mengoperasikan software pengolah gambar raster

(digital imaging)

E HDW.OPR.106.(1).A Mengoperasikan periferal web

F DTA.OPR.102.(2).A Melakukan entry data [web] dengan menggunakan

(11)

H SWR.OPR.415.(1).A Mengoperasikan software2D animation

I SWR.OPR.413.(1).A Mengoperasikan softwareFTP

J HDW.OPR.107.(1).A Mengoperasikan periferal multimedia

K DTA.OPR.102.(2).B Melakukan entry data [multimedia] dengan menggunakan Image scanner (Level 2) L SWR.OPR.416.(1).A Mengoperasikan softwaremultimedia

M SWR.OPR.407.(2).A Mengoperasikan software presentasi (Level 2)

N HDW.OPR.108.(1).A Mengoperasikan periferal animasi 3D

O SWR.OPR.417.(1).A Mengoperasikan softwarebasic 3D animation

(Level 1)

P SWR.OPR.418.(2).A Mengoperasikan softwaremodel 3D animation

(Level 2)

Q HDW.OPR.109.(1).A Mengoperasikan periferal perekam suara

R HDW.OPR.110.(1).A Mengoperasikan periferal perekam gambar S SWR.OPR.419.(1).A Mengoperasikan softwaredigital audio

T SWR.OPR.420.(1).A Mengoperasikan softwaredigital video

U SWR.OPR.421.(1).A Mengoperasikan softwarevisual effects

(12)

ENTRY : proses memasukkan data dari perangkat input ke komputer

PC : Personal Komputer

PORT : terminal untuk peralatan eksternal

PERIFERAL : peralatan tambahan sebagai pendukung peralatan utama

INTERFACE : peralatan untuk berhubungan dengan peralatan lain atau

peralatan yang digunakan untuk berkomunikasi dengan

orang atau peralatan lain

(13)

BAB I

PENDAHULUAN

A. DESKRIPSI JUDUL

Melakukan Entry Data [Web] Dengan Menggunakan Image Scanner

merupakan modul praktikum berisi tentang materi dasar penggunaan

perangkat input data grafis yang terintegrasi dengan komputer dan

manipulasi data inputan.

Modul ini membahas tentang dasar penggunaan image scanner dan

dasar-dasar manipulasi grafis web menggunakan perangkat lunak

PhotoShop yang menjadi pengetahuan dasar pada penggunaan aplikasi

grafis lanjutan seperti PaintShop, CorelDraw dan lain-lain. Modul ini terdiri

dari empat bagian kegiatan belajar. kegiatan belajar bagian pertama

tentang dasar pengoperasian image scanner dan penyiapan peralatan

image scanner dan periferal pendukungnya. Kegiatan belajar bagian

kedua berisi tentang pengoperasian scanner dengan contoh data inputan

yang telah dipersiapkan pada kegiatan belajar bagian kedua. Kegiatan

belajar bagian ketiga berisi manipulasi grafis hasil image scanner. Bagian

keempat berisi teknik penyimpanan gambar yang telah dimanipulasi untuk

(14)

Dengan menguasai modul ini siswa mampu menyiapkan perangkat image

scanner, melakukan pengoperasian scanner dan manipulasi grafis tingkat

dasar terhadap hasil scanner.

B. PRASYARAT

Modul Melakukan Entry Data [web] Dengan Menggunakan Image

Scanner merupakan modul lanjutan dari modul pengoperasian komputer,

modul perakitan perangkat keras, modul instalasi perangkat lunak dan

modul tentang user manual pengoperasian image scanner.

C. PETUNJUK PENGGUNAAN MODUL

1. Petunjuk bagi Peserta Didik

Peserta didik diharapkan dapat berperan aktif dan berinteraksi dengan

sumber belajar yang dapat digunakan, karena itu harus memperhatikan

hal-hal sebagai berikut :

a. Langkah-langkah belajar yang ditempuh

1) Persiapkan alat dan bahan!

(15)

3) Cermatilah langkah-langkah kerja pada setiap kegiatan belajar

sebelum mengerjakan, bila belum jelas tanyakan pada instruktur!

4) Jangan menghubungkan image scanner ke komputer sebelum

komputer dimatikan!

5) Jangan menghidupkan komputer sebelum peralatan image scanner

tersambung ke komputer dengan benar.

6) Kembalikan semua peralatan praktik yang digunakan!

b. Perlengkapan yang Harus Dipersiapkan

Guna menunjang keselamatan dan kelancaran tugas/ pekerjaan yang

harus dilakukan, maka persiapkanlah seluruh perlengkapan yang

diperlukan. Beberapa perlengkapan yang harus dipersiapkan adalah:

1) CD master aplikasi grafis Photoshop

2) Gambar sebagai sumber data multimedia

3) Obeng plus dan minus

(16)

2. Peran Guru

Guru yang akan mengajarkan modul ini hendaknya mempersiapkan diri

sebaik-baiknya yaitu mencakup aspek strategi pemelajaran, penguasaan

materi, pemilihan metode, alat bantu media pemelajaran (LCD proyektor

misalnya) dan perangkat evaluasi.

Guru harus menyiapkan rancangan strategi pemelajaran yang mampu

mewujudkan peserta didik terlibat aktif dalam proses pencapaian/

penguasaan kompetensi yang telah diprogramkan. Penyusunan

rancangan strategi pemelajaran mengacu pada kriteria unjuk kerja (KUK)

pada setiap subkompetensi yang ada dalam GBPP.

D. TUJUAN AKHIR

Peserta didik dapat mengoperasikan Image Scanner dan manipulasi

gambar sesuai dengan SOP yang berlaku.

(17)

(18)

SUB

(19)

(20)

F. CEK KEMAMPUAN

Untuk mengetahui kemampuan awal yang telah dimiliki, maka isilah cek

list (√) seperti pada tabel di bawah ini dengan sikap jujur dan dapat

konfigurasi image scanner. Tes Formatif 1

2. Memahami dasar-dasar

manipulasi gambar Tes Formatif 2

3. Memahami teknik

penyimpanan gambar Tes Formatif 3

Apabila anda menjawab TIDAK pada salah satu pernyataan di atas, maka

(21)

BAB II

PEMELAJARAN

A. RENCANA PEMELAJARAN SISWA

Kompetensi : Mengkonfigurasikan Peralatan Image Scanner

Sub Kompetensi : Menguasai Instalasi Image Scanner dan Photoshop

Jenis Kegiatan Tanggal Waktu Tempat

(22)

B. KEGIATAN BELAJAR

1. Kegiatan Belajar 1: Instalasi dan Pengoperasian Image Scanner

a. Tujuan Kegiatan Pemelajaran

Setelah mempelajari kegiatan belajar ini peserta didik mampu

mengintegrasikan peralatan image scanner dan menginstal drivernya.

b. Uraian Materi

1) Pendahuluan

Image Scanner atau alat pemasok data gambar merupakan peralatan

eksternal yang dapat diintegrasikan dengan perangkat komputer sehingga

data gambar dapat dimanipulasi sesuai kebutuhan. Pada peralatan image

scanner generasi baru, image scanner dapat diintegrasikan dengan

printer sehingga hasil scan image dapat langsung dicetak tanpa bantuan

komputer, tetapi gambar tidak dapat diedit atau dimanipulasi dan hasilnya

pun kurang memuaskan.

2) Konsep Integrasi Peralatan Image Scanner

Image Scanner berintegrasi dengan komputer dengan perangkat keras

maupun perangkat lunak tambahan. Perangkat keras tambahan dapat

(23)

program aplikasi dan harus diinstall pada komputer yang tersambung

dengan peralatan image scanner tersebut:

Peralatan keras tambahan yang bersifat hardware dan software bekerja

bersama-sama untuk menampilkan hasil scanning image ke layar

komputer.

3) Instalasi Image Scanner

a) Instalasi Perangkat Keras

Instalasi perangkat keras adalah pemasangan kabel data dari scanner ke

komputer dan kabel power dari scanner ke sumber daya listrik. Jika image

scanner yang akan diintegrasikan dengan komputer tidak memiliki port

yang siap dipasangkan dengan port yang tersedia pada komputer maka

diperlukan card interface yang memiliki port yang sesuai dengan jenis

kabel data image scanner. Misalnya saja SCSI card, USB card dan lain

lain.

b) Instalasi Perangkat Lunak

Instalasi perangkat lunak adalah instalasi driver image scanner, yang

biasanya disertakan oleh vendor pembuat image scanner tersebut.

Proses instalasi adalah pengintegrasian peralatan agar data gambar yang

dihasilkan oleh image scanner dapat diterima oleh komputer. Karena hasil

(24)

maka diperlukan perangkat lunak lain yang dapat memanipulasi gambar

hasil scanning image, salah satunya yaitu Adobe PhotoShop.

4) Langkah Kerja

a) Instalasi Perangkat Keras

Mempersiapkan peralatan Image Scanner

Image scanner dan peralatan yang harus dipersiapkan adalah sebagai

berikut :

• Scanner

Gambar 1. Scanner dengan Periferal Belum Terpasang

• ADF Paper Chute, yang digunakan untuk meletakkan tumpukan objek

(25)

Gambar 2. ADF Paper Chute

• AC Adaptor dan AC cable

Gambar 3. AC Adaptor dan Kabel AC

• Kabel USB

Gambar 4. Kabel USB

(26)

Gambar 5. CD Driver Image Scanner

• CD Adobe Acrobat versi 5

Gambar 6. CD Adobe Photoshop

Berikut ini scanner dilihat dari depan dan penjelasan mengenai fungsi

(27)

Gambar 7. Scanner Dilihat dari Depan

Gambar 8. Scanner Dilihat dari Depan

No. Periferal Fungsi

1. Automatic Document Feeder (ADF)

Pemasok dokumen yand akan di scan secara otomatis

2. Paper Chute Pengait dokumen yang digunakan ketika scanner sedang bekerja

3. Side Guide Peralatan untuk mengatur lebar dokumen yang akan di scan

4. ADF Button Tombol ini ditekan jika ingin membuka cover, sebagai contoh: tombol ini ditekan jika ada proses scanning yang macet.

5. Operator panel Digunakan untuk mengoperasikan scanner. 6. Stacker Digunakan untuk menumpuk dokumen yang

sudah di scan.

7. Switch SCSI ID Untuk menge-set SCSI ID

(28)

9. Kabel konektor USB Untuk menghubungkan interface USB dari komputer

10. DC inlet Untuk menghubungkan listrik AC ke adaptor

Gambar berikut ini memperlihatkan periferal image scanner yang dapat

dilepas :

(29)

Berikut ini adalah gambar panel operator yang digunakan untuk

mengoperasikan image scanner :

Gambar 10. Panel Operator

Tabel dibawah ini adalah penjelasan dari gambar diatas

Nama Komponen Panel Fungsi

Tampilan fungsi No. Mengindikasikan fungsi No. Mode

Scan dan status error.

Tombol

Function Memilih fungsi No.

Send to Scan

Memulai dan membaca aplikasi secara detail

Power button Untuk mematikan / menghidupkan

scanner

LED Menyala bila scanner dalam status

hidup

Instalasi Image Scanner ke catu daya :

(30)

• Letakkan scanner pada posisi yang memungkinkan kabel-kabel dapat

terjangkau ke perangkat komputer.

• Pasangkan ADF paper chute dengan cara memasukkan tab kanan kiri

ke lubang pada bagian belakang scanner seperti pada gambar

berikut :

Gambar 11. Memasukkan Tab

• Sambungkan kabel arus listrik AC dengan cara menyambung kabel

AC adaptor ke arus AC lalu menyambung kabel AC adaptor ke image

(31)

Gambar 12. Menyambungkan Arus Listrik ke AC Adaptor

Gambar 13. Menyambung Kabel AC Adaptor ke Scanner

b) Mengkoneksikan image scanner ke komputer

(1) Koneksi menggunakan kabel USB

• Sambungkan kabel USB ke port USB pada scanner, seperti pada

(32)

Gambar 14. Menyambung Kabel USB ke Image Scanner

• Sambungkan ujung kabel USB yang lainnya ke port USB komputer.

• Tekan tombol Power pada panel untuk menghidupkan image scanner.

(2) Koneksi

dengan SCSI

Koneksi dengan SCSI dapat dilakukan jika scanner dan komputer anda

memiliki SCSI interface. Jika komputer tidak ada SCSI interface maka

perlu dipasang periferal tambahan, yaitu SCSI card seperti pada gambar

(33)

Gambar 15. SCSI Card

Jika SCSI card telah ada pada komputer anda lakukan langkah berikut:

• Sambungkan kabel SCSI ke port SCSI image scanner seperti pada

(34)

Gambar 16. Menyambung Kabel SCSI ke Image Scanner

• Sambungkan ujung kabel yang lain ke port SCSI komputer seperti

pada gambar dibawah ini :

(35)

Gambar 17. Port SCSI pada komputer

• Lakukan setting SCSI ID dengan cara seperti yang ditunjukkan pada

gambar beserta penjelasannya dibawah ini :

Gambar 18. Tombol Pengatur SCSI ID

Putarlah tombol pada bagian belakang image scanner,

sehingga penunjuk berada pada posisi angka antara 0 dan 7,

dimana nilai 8 dan 9 sebagai nilai ID default image scanner

tersebut. Lebih jelasnya lihat tabel dibawah ini :

ID No. Deskripsi

0 – 7 Nomor ID yang dapat di set

8,9 Nomor ID default

• Tekan tombol Power pada panel di image scanner

• Tekan tombol Power pada komputer.

(36)

Instalasi perangkat lunak merupakan instalasi driver image scanner dan

instalasi Adobe Photoshop. Instalasi dapat dilakukan dengan cara

sebagai berikut :

• Klik menu Start > Setting > Control Panel, seperti pada gambar 18

berikut ini:

Gambar 19. Menu Start > Settings > Control Panel

(37)

Gambar 20. Kotak Menu Control Panel

• Dobel klik Add/Remove Programs sehingga tampil kotak dialog

(38)

Gambar 21. Kotak menu Add/Remove Programs

• Masukkan CD driver image scanner, lalu klik tombol Install, sehingga

tampil kotak dialog sebagai berikut :

(39)

• Klik Next, sehingga keluar kotak menu lanjutan seperti pada gambar

berikut ini :

Gambar 23. Kotak Run Installation Program

• Klik tombol Browse, sehingga tampil kotak menu Browse sebagai

(40)

Gambar 24. Kotak Menu Browse

• Klik kotak Look in, lalu pilih CD ROM yang memuat driver image

scanner.

• Klik Install, lalu ikuti perintah instal dari menu instalasi sampai dengan

selesai.

c) Mengoperasikan Image Scanner

(1) Menghidupkan image scanner

Berikut ini langkah-langkah dan penjelasan prosedur menghidupkan

image scanner sesuai user manual :

• Tekan tombol Power pada panel image scanner, seperti yang

(41)

Gambar 25. Tombol Power pada Panel Image Scanner

• Lihatlah lampu indikator power (LED), jika telah menyala maka image

scanner telah siap digunakan

• Tekan tombol power sekali lagi untuk mematikan

(2) Meletakkan dokumen tunggal (mono sheet) pada image scanner

• Masukkan dokumen pada ADF chute dan luruskan tepi kanan kiri dan

(42)

Gambar 26. Mengatur Tepi Kanan dan Kiri Dokumen

• Periksa ukuran dokumen yang akan di-scan, ukuran maksimum untuk

image scanner tipe ini adalah ukuran A4.

(3) Meletakkan multiple sheet dokumen pada image scanner

• Ambillah setumpuk dokumen yang tebal tumpukannya tidak lebih dari

5 mm

• Pegang kedua sisi tumpukan kertas dengan kedua tangan lalu

lengkungkan tumpukan seperti yang terlihat pada Gambar 27 berikut

(43)

Gambar 27. Mengatur tebal tumpukan dokumen

• Pegang lurus tumpukan seperti pada Gambar 28 berikut :

Gambar 28. Mencegah Dokumen Lengket Satu dengan yang Lain

• Lakukan langkah 2 dan 3 berulang-ulang agar permukaan dokumen

yang akan di-scan tidak lengket

• Sebelum meletakkan dokumen yang akan di-scan, tariklah ADF paper

chute extention keatas agar kertas dapat menempati posisi tegak lurus

(44)

Gambar 29. ADF Paper Chute Extention

• Letakkan tumpukan dokumen yang akan di-scan ke ADF paper chute

• Aturlah papan tabulasi kanan dan kiri sehingga papan tabulasi tepat di

tepi kanan dan kiri dokumen seperti yang ditunjukkan pada gambar 29

(45)

Gambar 30. Arah Pengaturan Papan Tabulasi

• Tariklah penampung tumpukan seperti pada gambar 30 berikut ini

agar dokumen yang selesai di-scan tidak acak-acakan dan dapat

diperiksa lagi jika terjadi penarikan dokumen ganda oleh ADF paper

chute.

Gambar 31. Arah Tarikan Stacker (Penampung)

• Tariklah paper stop stacker yang melipat di dalam stacker agar kertas

yang keluar dari image scanner dapat berhenti dalam tumpukan. Lihat

(46)

Gambar 32. Arah Penempatan Paper Stop

c. Rangkuman 1

UPS (Uninterruptable Power Supply ) adalah perangkat keras tambahan

untuk perangkat elektronik yang berfungsi untuk mencegah putusnya arus

listrik sehingga kerusakan yang ditimbulkan oleh padamnya aliran listrik

dapat dicegah.

Image scanner adalah peralatan yang digunakan untuk mengambil

gambar fisik ke dalam gambar digital. Hasil scan gambar dapat digunakan

sebagai file multimedia. Image scanner dapat digunakan sebagai

peralatan entri data grafis jika diintegrasikan dengan perangkat komputer

(47)

1. Lakukanlah scan gambar dengan berbagai ukuran resolusi dengan

cara mengatur panel resolusi pada VistaScan di layar komputer

2. Amatilah waktu yang dibutuhkan untuk menyelesaikan scan satu

gambar dengan resolusi tinggi dan resolusi rendah, lalu bandingkan

hasilnya.

3. Editlah gambar hasil scan pada No. 2 menggunakan Adobe

Photoshop

e. Tes Formatif 1

1. Apa yang harus dilakukan agar hasil scan gambar memiliki kualitas

yang tinggi seperti gambar aslinya?

2. Apa yang harus dilakukan agar gambar yang dihasilkan oleh image

scanner dapat di setup menjadi desktop wallpaper ?

f. Kunci Tawaban Tes Formatif 1

1. Agar gambar yang dihasilkan oleh image scanner memiliki kualitas

(48)

aplikasi VistaScan atau aplikasi scanner pada komputer diatur ke

tingkat resolusi tinggi pula.

2. Gambar diimport ke tipe bitmap dan diletakkan pada folder desktop

(49)

2. Kegiatan Belajar 2 : Menggambar Tombol Gradasi Dua Dimensi

Setelah mempelajari kegiatan belajar ini peserta didik mampu merancang

image yang akan menjadi objek desain grafis web.

Tool Gradient, digunakan untuk memberi warna gradasi tertentu pada

gambar. ketika kita memilih tool Gradient, akan tampil option bar-nya yang

terletak dibawah menu. Lihat gambar dibawah ini:

Gambar 33. Tool Gradien

Keterangan tentang tool Gradien bar adalah sebagai berikut

Langkah kerja

Untuk membuat tombol gradasi ikuti langkah-langkah dibawah ini :

• Klik tool Elliptical Marquee, jangan dilepas lalu pilih Elliptical

(50)

Gambar 34. Elliptical Marquee

• Klik tombol Shift dan jangan dilepas, lalu klik kiri dan gerakkan mouse

pada canvas sehingga akan terbentuk lingkaran dengan garis

putus-putus. Lepaskan tombol Shift dan mouse. Hasilnya akan terlihat

seperti pada gambar dibawah ini:

Gambar 35. Hasil Elliptical Marque

• Klik tab Swatches untuk menampilkan palet swatches, lalu pilih warna

(51)

Gambar 36. Swatches Color Pallete

• Klik warna biru pada palet, lalu pilih Paint Bucket dari kotak Tool.

Letak Paint Bucket dapat dilihat pada gambar berikut:

Gambar 37. paint Bucket Tool

• Klik lingkaran pada canvas, sehingga lingkaran tersebut akan

(52)

Gambar 38: Hasil Pewarnaan

• Pilih (klik) Linear Gradient pada option bar yang terletak dibawah

menu seperti pada gambar 1 diatas, lalu letakkan mouse dipinggir

lingkaran yang berwarna biru, kemudian klik tombol kiri mouse, tarik

dari atas sampai tepi bawah lingkaran sesuai dengan tanda panah

pada gambar dibawah ini

Gamar 38. Arah Gradasi

(53)

Gambar 39. Hasil Linear Gradien

• Silahkan dicoba untuk jenis gradasi lainnya, misalnya radial, reflected,

angle dan diamond.

c. Rangkuman 2

Tombol gradasi dua dimensi adalah gambar tombol untuk input web

dengan efek dua dimensi. Jenis gradasi yang dapat dipilih dapat dilihat di

Gradient Tool

d. Tugas 2

1) Buatlah tombol lain dengan gradasi reflected

(54)

3) Inputkan atau gunakan tombol tadi ke rancangan halaman web

e. Tes Formatif 2

1) Jenis gradasi apa saja yang anda ketahui untuk membuat efek tombol

dua dimensi?

2) Dimana anda dapat memilih jenis efek gradasi?

3) Apa ciri dari efek gradasi?

f. Kunci Jawaban Tes Formatif 2

1) Jenis gradasi yang tersedia di Adobe Photoshop adalah gradasi radial,

reflected, angle dan diamond.

2) Efek gradasi dapat dipilih di dalam kotak gradient tool

(55)

3. Kegiatan Belajar 3: Menggambar Tombol Gradasi Tiga Dimensi

image berupa tombol tiga dimensi yang akan menjadi objek desain grafis

web.

Tombol sederhana adalah tombol yang dibuat secara praktis dan secara

umum telah banyak digunakan karena mudah proses pembuatannya.

Tombol befungsi sebagai simbol untuk melakukan proses pada aplikasi.

Langkah kerja

1) Klik tool Elliptical Marquee, lalu lakukan gerakan mouse berbentuk

(56)

Gambar 40. Hasil Elliptical Marquee

2) Klik Set Foreground Color pada kotak tool, lalu pilih warna pada palet

yang ditampilkan, pilih saja warna abu-abu. Lalu pada kotak klik Paint

Bucket Tool dan jangan dilepas, pilih Paint Bucket Tool yang

letaknya seperti pada gambar berikut ini:

Gambar 41. Paint Bucket Tool

Gambar lingkaran akan berwarna sesuai dengan warna yang dipilih

yaitu abu-abu. Gambar dibawah ini adalah hasil pewarnaan lingkaran

tersebut:

(57)

3) Untuk membuat gradasi warna lingkaran, klik Gradient Tool yang

letaknya seperti pada gambar diatas, pilih Radial Gradient klik tombol

kiri mouse lalu tarik dengan titik awal dan lepaskan sesuai dengan

arah panah pada gambar dibawah ini:

Gambar 43. Arah Gradasi Radial

Warna lingkaran akan menampilkan gradasi seperti pada gambar

(58)

Gambar 44. Hasil Gradasi Radial

4) Untuk membuat tombol sederhana yang menarik, akan dibuat

lingkaran didalam lingkaran yang sudah ada seperti pada gambar

diatas. Klik menu Select > Modify > Contract... sehingga akan tampil

kotak isian untuk membuat lingkaran didalam lingkaran seperti pada

gambar dibawah ini.

Gambar 45. Kotak Isian Contract Selection

5) Isikan angka 8 lalu klik Ok. Hasilnya akan seperti pada gambar

(59)

6) Klik menu Edit > Tranform > Rotate. Isilah Set Rotation yang tampil

seperti pada gambar dibawah ini dengan 180.

Gambar 47. Tool Rotation

Artinya gambar lingkaran dalam diputar setengah lingkaran atau 180

derajat.

Hasilnya akan tampak seperti pada gambar berikut ini:

Gambar 48. Hasil Rotasi 180o

(60)

7) Klik lagi menu Select > Modify > Contract.. Isikan angka 5 pada

kotak dialog Contract Selection yang tampil seperti pada langkah ke-4

tadi.Hasilnya berupa lingkaran ketiga didalam lingkaran kedua, seperti

pada gambar berikut:

Gambar 49. Hasil Contract Selection

8) Klik menu Edit > Transform >Rotate, isikan lagi 180 derajat seperti

pada langkah ke-6 tadi. Hasilnya akan tampak seperti pada gambar

(61)

Gambar 50. Hasil akhir Contract Selection diikuti Rotasi 180o

c. Rangkuman 3

Tombol gradasi tiga dimensi adalah simbol untuk melakukan sebuah

proses dengan efek tiga dimensi.

d. Tugas 3

1) Buatlah tombol gradasi tiga dimensi dengan efek linear gradient

2) Buatlah tombol persegi panjang dengan eek seperti pada langkah

praktek Kegiatan Belajar 3 diatas

1) Apa saja jenis tombol tiga dimensi yang anda ketahui berdasarkan

bentuknya?

2) Apa yang menjadikan sebuah tombol disebut sebagai tombol tiga

(62)

1) Tombol persegipanjang, tombol ellips, tombol lingkaran, tombol

bintang

2) Sebuah tombol disebut sebagai tombol tiga dimensi jika tombol

(63)

4. Kegiatan Belajar 4 : Menambahkan Label Pada Tombol

label image tombol yang akan menjadi keterangan penggunaan objek

desain grafis web.

Label berguna untuk memberikan keterangan tentang fungsi tombol

tersebut. Label dapat berupa tulisan atau simbol / gambar. Berikut ini

adalah menu pilihan pada Type Tool yang digunakan untuk membuat

label pada tombol.

Gambar 51. Type Tool pada text

Langkah kerja

Untuk membuat label pada tombol ikuti langkah berikut ini :

1) Klik Type Tool dari kotak toolbox. Lokasi Type Tool ditunjukkan pada

(64)

Gambar 52. Type Tool

2) lik tombol kiri mouse pada lokasi kosong didekat tombol, lalu ketik

huruf S sebagai label tombol. Kemudian klik Rectangle Marquee tool

untuk melingkupi huruf S tersebut, lalu klik menu Edit > Copy.

3) Masih dalam Rectangle Marquee, buatlah kotak marquee tepat pada

posisi tengah tombol tadi. Kemudian klik menu Edit > Paste, sehingga

hasilnya seperti pada gambar berikut

(65)

4) Untuk menghilangkan huruf S diluar tombol, tekan Type tool pada

toolbox lalu tekan huruf S tadi. Tekan Backspace untuk menghapus

huruf S.

Berikut ini adalah contoh tombol tiga dimensi yang berbentuk

segiempat tumpul. Perhatikan bahwa teks yang menempel diberi

efek khusus sesuai dengan gradasi warna tombol tersebut.

Gambar 54. Contoh Label pada Tombol yang Lain

Untuk membuat tombol dengan model seperti diatas, ikuti langkah berikut

ini:

1) Klik Rounded Rectangle Tool dari toolbox, jangan dilepas sehingga

(66)

Gambar 55. Rounded Rectangle Tool

2) Klik Rounded Rectangle Tool untuk membuat tombol segiempat

tumpul.

3) Pada option menu akan tampil pilihan menu sebagai berikut:

Gambar 56. Rounded Rectangle Tool Option

4) Isilah kotak Radius dengan 50 pixel dan klik Layer Style lalu pilih Blue

Glass Button.

5) Klik tombol kiri mouse pada canvas dan jangan dilepas lalu digerakkan

sehingga membentuk segiempat tumpul dengan garis seperti yang

(67)

Gambar 57. Rancangan Tombol Ellips

6) Lepaskan tombol mouse, sehingga garis oval diatas akan berubah

menjadi tombol tiga dimensi seperti pada gambar berikut ini:

Gambar 58. Hasil Pewarnaan 3 Dimensi Tombol Ellips

7) Klik Type Tool pada toolbox lalu klik kiri tombol mouse pada canvas

untuk menuliskan label yang akan ditempelkan pada tombol. Lokasi

Type Tool dapat dilihat pada gambar berikut:

Pada Option Menu akan tampak pilihan seperti pada gambar diatas.

Pilihlah ukuran hurufnya menjadi 30 pt.

8) Ketik label “Cancel”, pada kursor yang berkedip pada canvas setelah

tombol kiri mouse di klik pada canvas. Perhatikan hasilnya pada

(68)

Gambar 60. Rancangan Label untuk Tombol Ellips

Terlihat bahwa tulisan “Cancel” belum menempati posisi yang tepat

pada tombol, sehingga perlu digeser agar posisinya sesuai dengan

yang diinginkan. Caranya dengan menggerakkan mouse disekitar

tulisan tersebut, jika kursor mouse berubah menjadi tanda panah dan

tanda +, maka klik kiri mouse lalu geser mouse sehingga letak tulisan

akan berpindah. Jika letak tulisan telah sesuai dengan posisi yang

diinginkan, lepaskan mouse. Hasilnya akan tampak seperti pada

gambar dibawah ini.

Gambar 61. Posisi Akhir Label

9) Klik Rectangular Marquee Tool pada toolbox, lalu lakukan selecting

(69)

Gambar 62. Rectangular selecting area

10)Klik menu Layer > Layer Style > Bevel and Emboss.. sehingga akan

tampil kotak dialog seperti pada gambar berikut:

Gambar 63. Kotak Dialog Layer Bevel and Emboss

11)Klik kotak cek pada kotak Styles sesuai dengan gambar diatas, pada

kotak Structure aturlah efek tiga dimensi dengan menggeser dragbar

(70)

mengatur bayangan dan gradasi sekunder pada label. Ubahlah menu

pilihan pada kotak Shading sesuai dengan gambar diatas. Keterangan

tentang menu pilihan diatas dapat dibaca pada uraian materi diatas.

12)Hasil akhir label dan tombol adalah sebagai berikut:

Gambar 64. Hasil Akhir Label dengan Efek Bevel and Emboss

c. Rangkuman 4

Label adalah keterangan yang diberikan kepada sebuah objek gambar

untuk memberi penjelasan tentang kegunaan objek gambar tersebut.

Untuk memberi label pada gambar dapat dilakukan dengan dengan

menggunakan menu Type Tool

d. Tugas 4

1) Buatlah label dengan efek warna dengan gradasi linear

2) Buatlah label dengan gradasi linear berlawanan pada tombol yang

memiliki gradasi linier pula

(71)

1) Apa kegunaan dari label pada tombol?

2) Apa saja yang dapat digunakan sebagai label

3) Apa yang anda gunakan untuk mengatur posisi dan ukuran label?

f. Kunci jawaban Tes Formatif 4

1) Label berfungsi untuk memberi keterangan tentang kegunaan dari

tombol tersebut

2) Label dapat menggunakan teks ataupun gambar

3) Ukuran dan posisi label dapat diatur menggunakan Type Tool.

5. Kegiatan Belajar 5 :Membuat Tombol Timbul

image berupa tombol timbul yang akan menjadi objek desain grafis web.

(72)

Tombol timbul adalah tombol tiga dimensi yang warnanya menyatu

dengan warna dasar media latar belakang tombol tersebut, sehingga

tombol seolah menjadi bagian dari gambar latar belakang.

Langkah Kerja

Untuk membuat tombol timbul ikuti langkah berikut :

1. Pilih menu File > New, tampil kotak dialog untuk membuat canvas

kosong seperti pada gambar berikut:

Gambar 65. Kotak isian untuk New Canvas

2. Isilah Width dan Height dengan satuan inchi seperti pada gambar

(73)

3. Klik Rectangle Marquee dan jangan dilepas, pilih Elliptical Marquee

Tool. Klik tombol kiri mouse jangan dilepas lalu gerakkan mouse

sehingga membentuk lingkaran dengan garis putus-putus seperti pada

gambar berikut:

Gambar 66. Hasil Rancangan Elliptical Marquee

4. Klik tool Paint Bucket dari toolbar, pilih warna Pure Cyan atau

abu-abu dari palet Switches. Klik pada lingkaran agar membentuk warna

seperti yang dipilih pada palet. Hasilnya dapat dilihat pada gambar

(74)

Gambar 67. Hasil Pewarnaan Pure Cyan

5. Klik menu Layer > Duplicate Layer untuk menggandakan layer.

Berikan warna hitam pada lingkaran.

6. Klik menu Filter > Blur >Gaussian Blur, isikan pada bagian Radius:

(75)

7. Jika kotak cek Preview diisi cek seperti pada gambar diatas, maka

gambar tombol akan terlihat sebagai berikut:

Gambar 69. Hasil Efek Gaussian Blur

8. Klik menu Filter > Stylize >Emboss. Isikan kotak Angle : 120, Height

(76)

Gambar 70. Kotak Dialog Emboss

9. Klik Ok. Sehingga tombol akan tampak seperti pada gambar berikut

(77)

Gambar 71. Hasil Efek Emboss

10.Klik menu Layer > Layer Styles > Blending Options, sehingga tampil

kotak dialog seperti berikut ini

Gambar 72. Kotak Dialog Layer Blending Option

11.Isilah kotak Blend Mode pada kotak General Blending dengan

mengubah nilainya menjadi Hard Light, seperti pada gambar diatas.

(78)

Gambar 73. Hasil Blending dengan Nilai Hard Light

12.Klik menu Edit > Stroke, isikan pada bagian Width: 2 px, Location:

(79)

Gambar 74. Stroke Area Selection

13.Klik Ok. Sehingga tampil hasil akhir seperti pada gambar berikut ini:

Gambar 75. Hasil Efek Stroke

c. Rangkuman 5

Tombol timbu adalah tombol tiga dimensi yang seolah menyatu dengan

latar belakangnya. Efek timbul disebabkan oleh efek lengkung (blending)

dan stroke yang diberikan.

d. Tugas 5

(80)

2) Bandingkan jenis tool yang anda gunakan dalam membuat tombol tiga

dimensi dan tombol timbul

1) Apa perbedaan antara tombol timbul dengan tombol tiga dimensi

biasa?

2) Efek apakah yang menyebabkan tombol kelihatan menyatu dengan

warna latar belakangnya?

1) Tombol timbul berbeda dengan tombol tiga dimensi biasa karena

perancangan tombol timbul harud memiliki warna dasar yang sesuai

dengan warna latar belakangnya, sedangkan tombol tiga dimensi

biasa tidak harus menyatu dengan warna latar belakangnya.

2) Tombol timbul kelihatan menyatu dengan warna latar belakangnya

(81)

(82)

6. Kegiatan Belajar 6 :Membuat Tombol Batang

image berupa tombol batang tiga dimensi yang akan menjadi objek desain

grafis web.

Tombol batang adalah tombol yang berbentuk segiempat dan bersudut

tajam. Dalam efek tiga dimensi, tombol ini diberi pencahayaan yang

terang dan gelap. Tombol seperti ini biasanya diletakkan secara bersusun

atau berurutan baik secara horizontal atau vertikal.

Langkah Kerja

Untuk membuat tombol batang ikuti langkah berikut:

1) Buat file baru dengan menu File > New, sehingga tampil kotak dialog

(83)

Gambar 76. Kotak Dialog New Canvas

2) Isikan Name : batang, width : 100 pixel, Height : 40 pixel seperti

yang tampak pada gambar diatas.

3) Klik Ok, sehingga tampil canvas dengan ukuran seperti pada gambar

dibawah ini:

Gambar 77. Area Canvas yang dipilih

4) Klik menu Select > All. Klik menu Select > Modify > Border, isikan

nilainya : 5, lalu tekan tombol Delete pada keyboard. Lihat gambar

(84)

Gambar 78. Rancangan Tombol Batang

5) Klik tool Paint Bucket, lalu pilih warna abu-abu di palet Swatches. Klik

pada border seleksi untuk memberi warna, sehingga desain tombol

akan menjadi seperti pada gambar berikut ini:

Gambar 79. Hasil Pewarnaan dengan Paint Bucket

6) Klik menu Select > Deselect untuk menghilangkan seleksi. Klik menu

Filter > Stylize > Emboss, isikan pada bagian Angle: -45, Height :1,

Amount: 200. Seperti yang tampak pada gambar berikut

(85)

7) Klik menu Image > Adjust > Hue/Saturation, isikan tanda cek pada

Colorize, isikan pada bagian Hue : 0, dan Saturation : 25, akan

menghasilkan warna coklat seperti yang tampak pada gambar berikut

ini:

Gambar 81. Kotak Dialog Hue / Saturation

8) Klik Ok, sehingga hasil akhir tombol batang akan terlihat seperti pada

gambar berikut ini:

Gambar 82. Hasil Akhir Tombol Batang

(86)

1) Klik Type Tool, lalu pilih jenis font dan ukuran huruf pada option bar

yang letaknya dibawah menu utama seperti yang terlihat pada gambar

berikut ini:

Gambar 83. Kotak Type Tool

2) Klik pada gambar tombol, lalu tuliskan label, dalam contoh ini label

tombol adalah “Cancel” seperti yang terlihat pada gambar dibawah ini:

Gambar 84. Rancangan Label untuk Tombol Batang

3) Untuk menempatkan label agar sesuai dengan yang dikehendaki

maka geserlah pointer mouse disekitar label, jika pointer mouse

berubah tandanya menjadi tanda panah dan tanda +, klik lalu drag

sesuai lokasi label yang diinginkan. Hasilnya akan tampak seperti

(87)

c. Rangkuman 6

Tombol batang adalah tombol yang berbentuk segiempat dan bersudut

tajam. Dalam efek tiga dimensi tombol ini diberi pencahayaan yang terang

dan gelap. Tombol ini seperti tombol yang lain, diletakkan secara

bersusun atau berurutan baik secara vertikal atau horizontal dalam

rancangan halaman web.

d. Tugas 6

1) Buatlah tombol batang 3 dimensi dengan label berupa gambar

2) Buatlah tombol batang yang kelihatan mengambang dengan efek

shadow

1) Apa perbedaan anatara tombol batang dengan tombol ellips dalam

penggunaannya pada desain halaman web?

2) Efek apa yang lazim diberikan kepada tombol batang?

(88)

1) Tombol ellpis digunakan sebagai tombol yang tidak bertumpuk,

sedangkan tombol batang biasanya dibuat beberapa buah dengan

ukuran serupa dan diletakkan bertumpuk atau berjajar.

(89)

7. Kegiatan Belajar 7 : Membuat Tombol Kaca

image tombol kaca yang akan menjadi objek desain grafis web.

Dalam latihan ini akan dicoba membuat tombol dengan efek seperti kaca,

sehingga disebut dengan tombol kaca. Berbagai situs web menggunakan

jenis-jenis tombol sesuai dengan desain halaman web yang ditampilkan.

Untuk membuat tombol kaca diperlukan foreground yang relatif terang,

misalnya warna abu-abu, oleh karena itu aturlah warna foreground

menjadi abu-abu dan background berwarna putih.

Langkah Kerja

Selanjutnya untuk membuat tombol kaca lakukan langkah-langkah seperti

berikut:

1) Buat file baru dengan menu File > New, tampil kotak dialog seperti

(90)

2) Isikan Name : kaca, Width : 3, Height : 2 seperti yang tampak pada

gambar diatas. Klik Ok, sehingga hasilnya akan tampak seperti pada

(91)

3) Dengan menggunakan Rounded Rectangle Tool buatlah segiempat

tumpul dengan memilih callout Rounded Rectangle Tool dari toolbox

seperti pada gambar berikut ini:

Gambar 88. Rounded Rectangle Tool

Hasil dari kotak tumpul adalah seperti gambar berikut

Gambar 89. Hasil gambar kotak tumpul

4) Klik menu Layer > layer Style > Inner Shadow. Utuk mengubah

warna bayangan klik pada kotak warna yang ada disamping Blend

Mode Multiply, akan tampil Color Picker, isikan pada bagian

#:B0B0B0. Kemudian aturlah parameter lainnya seperti pada gambar

(92)

Gambar 90. Kotak Dialog Layer Inner Shadow

5) Hasil akhir akan tampak seperti pada gambar berikut ini:

Gambar 91. Hasil Akhir Tombol Kaca

(93)

Tombol kaca adalah tombol yang memiliki efek seperti kaca atau sering

disebut sebagai tombol es. Tombol dapat memiliki efek seperti kaca

karena diberikan efek Inner Shadow.

d. Tugas 7

1) Buatlah tombol kaca dengan bentuk ellips dan kotk atau batang

2) Buatlah tombol kaca dengan warna biru muda. Amati hasilnya

1) Mengapa sebuah tombol dapat disebut sebagai tombol kaca?

2) Efek apa yang meyebabkan sebuah tombol memiliki efek seperti

kaca?

f. Kunci Jawaban tes Formatif 7

1) Tombol disebut sebagai tombol kaca karena ada efek yang

menyebabkan tombol terlihat seperti kaca

(94)

8. Kegiatan Belajar 8 :Membuat Tombol Plastik

merancang image yang akan menjadi objek desain grafis web.

Tombol Plastik adalah tombol yang menggunakan efek seperti plastik.

Tombol plastik mirip cara pembuatannya dengan tombol kaca atau

tombol batang, yaitu menggunakan efek dari menu layer.

(95)

Untuk latihan membuat tombol plastik ikuti langkah-langkahnya sebagai

berikut :

1) Pilih menu File > New, sehingga tampil kotak dialog seperti pada

gambar berikut:

Isikan parameter seperti pada gambar diatas Width : 2, Height : 2.

Lalu klik Ok.

2) Klik Ellipse tool dari toolbox, lokasi Ellipse tool dapat dilihat seperti

yang ditunjukkan pada gambar berikut :

(96)

3) Gambarlah bentuklah oval berwarna biru atau #0B469E di canvas,

seperti pada gambar berikut:

Gambar 94. Hasil Rancangan Tombol Berbentuk Ellips

4) Klik menu Layer > Layer Style > Inner Glow. Ubahlah warnanya

menjadi warna merah hati atau #591C1C, lalu aturlah parameter

(97)

Hasilnya di canvas akan terlihat seperti pada gambar berikut ini:

Gambar 96. Hasil Efek Inner Glow

5) Berikan tanda cek pada Bevel and Emboss dari menu Layer.

Pilihlah pada bagian Gloss Contour : Half Round, lalu aturlah warna

(98)

Gambar 97. Kotak Dialog Layer Bevel and Emboss

6) Berikan tanda cek pada Contour. Pilihlah pada bagian Contour:

gaussian, lalu aturlah parameter lainnya seperti pada gambar

(99)

Hasil akhir di canvas akan terlihat seperti pada gambar berikut ini:

Gambar 99. Hasil Akhir Efek Contour

c. Rangkuman 8

Tombol plastik adalah tombol yang efeknya menyerupai plastik . Tombol

ini mirip dengan tombol kaca dan efeknya tetap menggunakan efek warna

dari tombol kaca.

d. Tugas 8

1) Buatlah tombol plastik dengan warna hijau muda

2) Buatlah tombol plastik dengan warna abu-abu dengan background

warna biru tua. Amati hasilnya.

1) Efek apa yang menyebabkan tombol kaca berubah menjadi tombol

plastik?

2) Apa yang anda gunakan untuk memberikan efek plastik pada sebuah

tombol?

(100)

1) Efek yang menyebabkan tombol kaca berubah menjadi efek tombol

plastik adalah warna dan gradasi.

(101)

9. Kegiatan Belajar 9 : Membuat Berbagai Efek Teks

image yang dilengkapi dengan teks menggunakan efek dan tekstur yang

akan menjadi objek desain grafis web.

Efek teks sering dipakai untuk memberi tekanan agar teks tersebut lebih

diperhatikan dari pada tulisan yang tidak menggunakan efek. Efek teks

dapat diperoleh dengan memberi warna, gradasi atau animasi.

Langkah Kerja

Untuk membuat Teks Gambar

1) Klik menu File > Open. Bukalah file sembarang gambar yang dapat

ditampilkan di Adobe Photoshop. Dalam contoh ini akan diambil

gambar scanner yang diletakkan diatas meja, tulisan scanner akan

diletakkan pada sisi meja yang berwarna coklat, sehingga tulisan

seolah-olah menyatu dengan meja seperti relief. Gambar awal akan

(102)

Gambar 100. Latar Belakang untuk Rancangan Teks

2) Klik tool Type dari toolbox, letak tool Type dapat anda lihat pada

gambar berikut ini :

3) Isikan ukuran huruf pada option palet dengan ukuran 72 pt, lihat

gambar berikut:

(103)

Gambar 102. Option Pallete

4) Klik satu kali pada canvas, lalu tuliskan sembarang kata atau kalimat,

dalam contoh ini akan dituliskan “scanner”. Letakkan tulisan yang

telah diketikkan ke lokasi gambar yang menjadi warna dominan.

Dalam contoh ini warna dominan adalah warna meja yaitu coklat.

Lihat gambar berikut :

Gambar 103. Teks yang Diletakkan pada Background

5) Klik tool Rectangle Marquee, lalu buatlah seleksi yang melingkupi

(104)

Gambar 104. Marquee selection

6) Klik menu Layer > Layer Style > Bevel and Emboss, isilah

parameternya sesuai dengan yang ditampilkan pada gambar berikut

(105)

Gambar 105. Kotak Bevel and Emboss

7) Klik Ok, sehingga tulisan yang menempel pada warna dominan dari

gambar akan seolah menyatu dengan corak relief pahatan seperti

pada gambar berikut ini :

Gambar 106. Hasil Akhir Teks dengan Corak Relief

Gambar dibawah ini adalah berbagai macam corak teks gambar

(106)

Gambar 107. Berbagai Contoh Teks

c. Rangkuman 9

Efek teks adalah usaha untuk memberikan tekanan pada sebuah tulisan

agar diperhatikan. Efek teks sederhana adalah dengan mencetak tebal,

membuat miring, atau garis bawah. Untuk efek yang bagus,

menggunakan efek cahaya dan animasi.

d. Tugas 9

1) Buatlah teks dengan efek kedip

2) Buatlah teks dengan efek goyang

(107)

1) Mengapa tulisan penting perlu diberikan efek khusus?

2) Apa yang harus dilakukan agar teks dapat dianggap menyatu dengan

latar belakang?

1) Tulisan perlu diberikan efek khusus agar teks tesebut diperhatikan dan

menarik

2) Agar tulisan kelihatan menyatu dengan warna latar belakangnya maka

(108)

10. Kegiatan Belajar 10 : Membuat Teks Lembut

merancang image yang dilengkapi dengan teks warna gradasi kabur

dan tekstur mengambang yang akan menjadi objek desain grafis web.

Teks lembut adalah tulisan yang batas antara teks tersebut dengan

warna latar belakang yang tidak jelas atau kabur, sehingga teks seolah

mengambang pada latar belakang.

Langkah Kerja

1) Buka file baru dengan menu File > New, isilah Width : 20, Height :

(109)

2) Klik tool Type, kemudian klik satu kali pada canvas dan tuliskan

“SoftText” seperti yang terlihat pada gambar berikut :

Gambar 108. Rancangan Teks

3) Klik menu Layer > Duplicate Layer untuk menggandakan teks

tersebut

4) Pada palet Layers, klik Layer Type Soft (layer yang bukan hasil

duplikasi). Lihat gambar berikut :

Gambar 109. Layers Option

(110)

6) Klik menu Filter > Blur > Gaussian Blur, isikan nilainya dengan 5

seperti pada gambar berikut :

Gambar 110. Kotak Dialog Gaussian Blur

7) Ubahlah warna teksnya dengan cara memilih pada palet Channels

Gambar 111. Channels Option

Hasil perubahan warna teks lembut adalah seperti pada gambar

(111)

Gambar 112. Hasil teks lembut

c. Rangkuman 10

Teks lembut adalah teks dengan efek warna kabur dan batas antara

teks dengan latar belakangnya tidak jelas. Teks lembut digunakan untuk

desain halaman web yang tidak untuk melakukan link ke halaman lain.

d. Tugas 10

1) Buatlah teks lembut dengan warna yang lain dari contoh diatas

2) Letakkanlah teks lembut ke rancangan halaman web

e. Tes Formatif 10

1) Apa alasan seseorang menggunakan teks lembut dalam rancangan

halaman web?

(112)

f. Kunci Jawaban tes Formatif 10

1) Untuk membuat tulisan tampak kabur dan membuat pembaca teks

tersebut melihat sebagai informasi yang harus dilihat secara detail

(113)

11. Kegiatan Belajar 11 : Membuat Berbagai Bentuk Interface

interface yang menarik.

b. Uraian Materi

Bentuk oval dan lengkung dapat digunakan sebagai desain halaman web.

Interface web memadukan seni grafis dan gambar hasil input image

scanner serta rancangan gambar eksternal yang dilakukan menggunakan

aplikasi lain seperti CorelDraw atau PaintBrush.

Langkah Kerja

1) Membuat bentuk lancip

Desain halaman web dengan bentuk lancip dapat dilakukan dengan

mengikuti langkah berikut :

• Klik tool Elliptical Marquee, lalu buatlah seleksi berbentuk ellips di

(114)

Gambar 113. Rancangan Bentuk Lancip dengan Ellips

• Klik menu Select > Tranform Selection, lalu isikan pada bagian

Rotate : 50 pada option bar. Untuk memutar seleksi yang

berbentuk ellips dapat juga dilakukan dengan mendrag mouse

disamping gambar seleksi pada saat kursor mouse berubah

menjadi tanda panah dua arah yang melengkung. Hasil rotasi akan

terlihat seperti pada gambar berikut ini :

(115)

• Klik tool Paint Bucket, lalu klik pada seleksi yang berbentuk ellips

agar ellips tersebut memiliki warna, seperti yang terlihat seperti

pada gambar berikut ini:

Gambar 115. Hasil Pewarnaan dengan Paint Bucket

• Klik tool Marquee lalu tekan secara bersamaan tombol SHIFT dan

tombol panah ke atas pada keyboard satu kali saja, lakukan hal

yang sama dengan tombol panah ke kanan untuk penggeseran ke

kanan dan seterusnya. Hasil penggeseran ke atas akan

(116)

Gambar 116. Menggeser Ellips Selection

• Tekan tombol Delete pada keyboard untuk menghapus bagian

yang terseleksi dari bentuk ellips tersebut, hasilnya akan terlihat

Gambar 117. Menghapus Area Terseleksi

• Tekan tombol SHIFT+panah atas pada keyboard untuk menggeser

(117)

Gambar 118. Menggeser Ellips Selection

• Klik tool Paint Bucket untuk memberi warna pada ellips kedua,

sehingga hasilnya akan tampak seperti pada gambar berikut ini:

Gambar 119. Pewarnaan Setelah Penggeseran

• Tekan tombol SHIFT+panah bawah satu kali untuk menggeser

seleksi ke bawah sehingga akan berubah menjadi seperti pada

(118)

Gambar 120. Seleksi Area yang Akan Dihapus

• Tekan tombol Delete pada keyboard untuk menghapus warna yang

terlingkupi ellips, sehingga hasil akhir akan terlihat seperti pada

gambar berikut ini :

Gambar 121. Hasil Akhir dari Bentuk Lancip

2) Membuat Bentuk Lengkung

(119)

• Klik tool Pen, buatlah titik titik seperti pada gambar dibawah ini:

Gambar 122. Desain Awal Bentuk Lengkung

• Klik tool Convert Point, lalu editlah dua buah titik pada bentuk

yang telah dibuat dengan tool Pen. Klik dan seret ke kanan pada

titik 1, lalu klik dan seret juga pada pada titik 2 ke kanan, sehingga

akan terlihat seperti pada gambar berikut ini:

Gambar 123. Efek dari Convert Point

• Klik menu Window > Paths, lalu klik segitiga hitam pada pojok

kanan atas palet, sehingga akan tampil menu seperti pada gambar

(120)

Gambar 124. Menu Make Selection pada Layer Path

• Pilih menu Make Selection pada menu seperti yang tampak pada

gambar diatas, sehingga akan tampil kotak dialog sebagai berikut :

Gambar 125. Kotak Dialog Make Selection

• Klik Ok, sehingga canvas akan menampilkan seleksi seperti

(121)

Gambar 126. Hasil dari Make Selection

• Klik menu Select > Transform Selection, lalu klik dan drag mouse

pada titik sebelah kanan ke arah kanan. Lakukan hal yang sama

pada titik sebelah kiri. Hasilnya akan tampak seperti pada gambar

berikut ini:

Gambar 127. Hasil dari Transform Selection

• Klik tool Paint Bucket, lalu klik pada area seleksi sehingga akan

tampak hasil pewarnaan bentuk lengkung sebagai berikut :

(122)

Agar batas gambar terlihat halus, klik menu Layer > New Fill

Layer >Solid Color, sehingga gambarnya nampak lebih halus.

• Tambahkan efek layer style Drop Shadow dan Bevel and

Emboss dengan nilai diatur seperti pada gambar berikut ini :

Gambar 129. Kotak Cek Layer Bevel and Emboss

(123)

• Klik menu Layer > Drop Shadow untuk memberi efek bayangan

disekitar bentuk lengkung , aturlah parameternya seperti pada

gambar berikut :

Gambar 131. Kotak Isian Layer Drop Shadow

• Klik Ok, sehingga akan terlihat hasilnya seperti pada gambar

berikut ini :

(124)

3) Membuat Lengkung Bentuk Cincin

• Buatlah file baru dengan menu File > New, tampil kotak dialog

kemudian isikan Width : 3 inchi dan Height : 3 inchi.

• Buatlah seleksi berbentuk ellips dengan Elliptical Marquee Tool

seperti yang terlihat pada gambar berikut :

Gambar 133. Elliptical Marquee Selection

• Klik tool Paint Bucket lalu klik pada ellips sehingga ellips memiliki

warna sesuai pilihan yang dikehendaki, dalam contoh ini ellips

(125)

• Klik menu Select > Modify > Contract sehingga tampil kotak

dialog Contract Selection, isikan Contract By : 10 seperti yang

terlihat pada gambar berikut ini :

Gambar 135. Kotak dialog Contract Selection

• Tekan tombol Delete pada keyboard sehingga bagian ellips tengah

terhapus, lalu klik menu Select > Deselect untuk menghilangkan

seleksi, sehingga hasilnya seperti yang ditunjukkan oleh gambar

berikut ini :

Gambar 136. Hasil Deselect pada ellips

• Klik Rectangular Marquee Tool lalu lingkupi gambar cincin dengan

seleksi, kemudian klik menu Filter > Blur > Gaussian Blur dan

(126)

Gambar 137. Hasil efek Gaussian Blur

• Klik RGB pada tab Channels, lalu klik menu Filter > Render >

Lighting Effects, isilah seperti yang terlihat pada gambar berikut :

Gambar 138. Kotak isian Lighting Effects

• Klik Ok, sehingga hasil akhir akan tampak seperti pada gambar

(127)

Gambar 139. Hasil Akhir Bentuk Cincin

4) Membuat Bentuk Segmentasi

• Gambarlah objek cincin seperti pada latihan sebelumnya. Klik

menu View > Show > Grid untuk menampilkan grid (garis bantu

untuk ketepatan posisi) seperti yang terlihat pada gambar berikut

ini

Gambar 140. Rancangan Bentuk Cincin Tersegmentasi

• Klik Rectangular Marquee Tool, buatlah seleksi berbentuk

(128)

Gambar 141. Seleksi Bentuk Memanjang

• Tekan tombol Delete untuk menghilangkan bagian lingkaran yang

terkena seleksi, lakukan pada bagian yang lain sehingga lingkaran

terbagi menjadi empat bagian seperti pada gambar berikut :

Gambar 142. Hasil Penghapusan Bagian yang Diseleksi

• Klik menu Edit > Transform > Distort. Geserlah titik-titik pada

lingkaran sehingga lingkaran tergeser posisinya sesuai kemiringan

(129)

Gambar 143. Hasil Penggeseran dengan Distort

5) Membuat Bentuk Navigasi

• Klik tool Rectangular Marquee, lalu gambar kotak dan berilah

warna dengan Paint Bucket tool dan hasilnya seperti yang

ditunjukkan pada gambar berikut ini:

Gambar 144. Bentuk Kotak untuk Membuat Navigasi

• Klik Polygonal Lasso untuk membuat seleksi seperti yang

(130)

Gambar 145. Bentuk Seleksi dengan Poligonal Lasso

• Tekan tombol Delete pada keyboard untuk menghapus warna

pada seleksi seperti yang hasilnya ditunjukkan pada gambar

berikut ini :

Gambar 146. Bentuk Seleksi Dihapus

• Buatlah seleksi dalam bentuk miring untuk membuat bentuk seperti

yang ditunjukkan pada gambar berikut ini: