Anda di halaman 1dari 21

MODUL

PELATIHAN WEB DISAIN


MENGGUNAKAN PHOTOSHOP CS
DAN
MACROMEDIA DREAMWEAVER MX

KERJA SAMA
PROGRAM STUDI TEKNIK KOMPUTER UNISMA BEKASI
DENGAN
IKATAN OSIS SE-KOTA BEKASI (IKOSI)

UNISMA
AHAD, 30 JANUARI 2011

1|Dadan Irwan
BAB I
MENGENAL PHOTOSHOP CS

1. Mengenal Adobe Photoshop CS

Adobe® Photoshop® merupakan suatu aplikasi yang paling populer dikalangan desainer
grafis dan pengolahan citra (image processing). Sejak pertama diperkenalkan oleh Adobe
corporation pada dekade 90-an, Photoshop langsung mendapatkan hati dikalangan
profesional dan praktisi imege-editing dengan segala kecanggihan fitur dan kemampuan
yang maksimal serta kemudahan dalam penggunaannya (user friendly). Adobe® Photoshop®
yang dirilis pada tahun 2003 yang lalu oleh Adobe corp., adalah Adobe® Photoshop® CS
dengan slogan yang cukup menjanjikan The Professional Standard in Desktop Digital
Imaging merupakan pengembangan dari Adobe Photoshop generasi sebelumnya, dan pada
edisi terakhir ini sudah dilengkapi dengan fasilitas Image Ready® CS. Kelengkapan ini
dimaksudkan untuk memberikan fleksibelitas, efisiensi dan kemudahan dalam penggunaan,
sehingga anda dapat dengan mudah membuat dan menyunting image dengan kualitas tinggi
yang siap untuk dicetak, publisher, ataupun untuk ditempatkan di web, yang selama ini
merupakan kendala untuk menempatkan image berkualitas tinggi pada web, karena
berhubungan erat dengan beban loading data di sisi client pengguna. Adobe Photoshop CS,
yang kemudian hanya disebut Photoshop CS saja, merupakan program aplikasi yang canggih
yang telah membantu pekerjaan para profesional dalam bidang image processing, seperti
fotografi, pracetak, periklanan dan web designer serta berbagai disiplin pekerjaan lainnya
yang berhubungan dengan imaging.

2. Membuka Aplikasi Photoshop CS

Untuk memastikan Photoshop


berjalan dengan baik, maka
aktifkan Photoshop hasil
instalasi dengan mengklik
menu Start  All
ProgramsAdobe
Photoshop Photshop CS,
sehingga muncul Welcome
Screen, yang merupakan
halaman Photoshop saat
pertama kali diaktifkan. Untuk
me-nonaktifkan welcome
screen tiap kali Photoshop
dijalankan, hilangkan tanda
”centang” pada box Show this
dialog at startup.

Memulai Adobe Photoshop CS


Untuk mulai menggunakan Adobe Photoshop sebagai salah satu aplikasi pendukung
dalam proses perancangan aplikasi multimedia pembelajaran, maka dapat diikuti
langkah-langkah sebagai berikut :
2|Dadan Irwan
a. Klik Tombol Start  All Program  Adobe Photoshop Photshop CS,
sehingga tampil halaman kerja Photoshp CS, seperti pada Gambar 12.
b. Untuk membuat sebuah file baru, klik menu File New, kemudian muncul kotak
dialog untuk membuat sebuah file photoshop baru, Klik OK

Name
Menunjukkan
nama file yang akan
dibuat, pada awal
dapat diisi atau
abaikan
Preset
Menunjukkan pola
ukuran file yang akan
dibuat dengan
standar photoshop,
atau
dapat juga dibuat
secara kustom.
Width Menunjukkan lebar file yang akan dibuat, sebaiknya dalam satuan pixel
Hight Menunjukkan tinggi file yang akan dibuat, sebaiknya dalam satuan pixel
Resolution menunjukkan kedalaman gambar yang tampil pada layer
Color Mode Mode pewarnaan yang diberlakukan, standarnya adalah RGB
Background Defaultnya Putih, namun dapat diubah sesuai kebutuhan.

Menyimpan Dokumen Phothoshop


Untuk menyimpan dokumen hasil pengolahan dengan Photoshop, dapat dilakukan dengan
langkah-langkah sebagai berikut :
1. Klik menu File Save As, kemudian
tentukan lokasi direktori penyimpanan
data
2. Masukkan nama file pada File Name , dan
Format data pada Format
3. Akhiri dengan mengklik tombol Save

Membuka File
Untuk membuka file dokumen dengan
Photoshop, dapat dilakukan dengan
langkahlangkah
sebagai berikut :
1. Klik menu File Save As, kemudian tentukan
lokasi direktori penyimpanan data

3|Dadan Irwan
2. Masukkan nama file pada File Name , dan Format data pada Format.

3. Akhiri dengan mengklik tombol


Open

Adobe Photoshop Interface


Untuk melakukan pengolah data gambar dengan menggunakan Adobe Photoshop,
maka terlebih dahulu harus diketahui antarmuka (interface) yang akan sering
digunakan oleh seorang user, sepeti terlihat pada Gambar di bawah ini:

Tool Box Title Bar Menu Bar Option Bar Worksheet Pallete

4|Dadan Irwan
Toolbox
Berikut ini akan dijelaskan mengenai fungsi dari masing-masing tools yang terdapat pada
toolbox Adobe Photoshop 8.0.

A. Marquee tool B. Move tool

C. Lasso tool D. Magic Wand tool

E. Crop tool F. Slice tool

G. Patch tool H. Brush tool

I. Stamp tool J. History Brush tool

K. Eraser tool L. Paint Bucket tool

M. Sharpen tool N. Burn tool

O. Path Selection tool P. Type tool

Q. Pen tool R. Custom Shape tool

S. Notes tool T. Eyedropper tool

U. Hand tool V. Zoom tool

Menggunakan Rulers
1. Untuk menampilkan atau menyembunyikan rulers, pilih menu View > Rulers, atau
dengan shortcut Ctrl+R.
2. Untuk mengubah posisi titik pusat koordinat ruler (0,0), klik dan seret (drag) dari
pojok kiri ruler. Untuk mereset ke posisi awal, double klik di pojok kiri ruler. (gambar
2.10 a dan b)
3. Untuk mengubah satuan ukuran rulers dengan cepat, klik kanan pada rulers,
kemudian pilih satuan ukuran rulers yang diinginkan (gambar 2.10 c).

Konsep Layer dan Struktur Image dalam Photoshop

Sturktur pengolahan suatu


image di dalam Photoshop
dibentuk ke dalam lapisan-
lapisan/ layer, masing-masing
layer akan memuat satu
komponen dari image yang
diolah. Manfaat yang dapat
diperoleh dengan
menggunakan konsep layering
di dalam photoshop adalah
kemudahan dalam proses
editing dan manipulasi image
5|Dadan Irwan
selanjutnya. Karena jika masing-masing image/ teks yang diolah dalam photoshop tidak
dibagi menjadi layer-layer yang terpisah, maka proses editing ulang terhadap gambar/
image yang diolah akan mengalami kesulitan, namun dengan menggunakan model layer,
jika terjadi kesalahan dan kekeliruan, maka designer cukur hanya merevisi layer tersebut
saja, tanpa harus merombak atau mengulang kembali pekerjaan dari awal.

Mengubah Ukuran File Image

Mengubah ukuran suatu image akan serin kita lakukan, pada saat melakukan manipulasi
terhadap suatu image yang akan diolah dalam photoshop. Secara garis besar, proses
pegubahan ini dikelompokkan menjadi dua :
1. Mengubah ukuran image dari eksternal Photoshop
Proses ini adalah proses pengubahan ukuran suatu file yang diimport ke Photoshop, yang
mungkin saja mempunyai ukuran sangat besar, sehingga perlu diperkecil Untuk kebutuhan
ini dapat dilakukan dengan jalan : Klik menu Image Image Size
2. Mengubah ukuran image dalam Photoshop
Proses ini adalah proses pengubahan ukuran suatu gambar yang akan ditempat pada suatu
area kerja Photoshop, yang mungkin saja mempunyai ukuran sangat besar, sehingga perlu
diperkecil Untuk kebutuhan ini dapat dilakukan dengan jalan : Klik menu Edit  Free
Trasnform

Latihan 1. Mengubah Ukuran Gambar/ Image

1. Buka sebuah file Gambar


2. Tekan tombol Ctrl + A untuk melakukan seleksi gambar
3. Pilih menu Image  Pilih dan Klik Image Size
4. Ketik ukuran file yang Anda inginkan pada Width dan
Height, gunakan pilihan pixels lalu klik OK

Latihan 2. Menempelkan banyak gambar pada


sebuah Gambar Utama.

1. Buka 4 buah file gambar, buat 1 file gambar sebagai


gambar utama
2. Jadikan 3 buah gambar
yang lain untuk
ditempatkan di atas gambar
utama (nantinya akan
terbentuk 4 buah layer).
3. Ubah 3 ukuran gambar
tersebut menjadi lebih kecil
dengan menggunakan Klik
menu Edit Free
Transform (ctrl + T).
4. Selanjutnya ‘Drag’ salah
satu seleksi, sambil
menekan tombol shift,
untuk mempertahankan
kesimetrisan Gambar, ubah ukuran Gambar sesuai dengan ukuran yang dibutuhkan.

6|Dadan Irwan
5. Selanjutnya berikan sedikit efek (dibahas lebih jauh dalam Image Effect), yaitu efek Stroke
dan Drop Shadow, masih berada pada Layer 1, selanjutnya Klik menu Layer  Layer Styl
Stroke, kemudian atur nilai-nilainya sebagai berikut : size =4, color = white.
6. Kemudian tambahkan sedikit Drop Shadow, Layer Layer Style Drop Shadow, kemudian
atur nilai-nilainya sebagi berikut : Opacity = 76 %, Angle =120, Distance = 10, Spread = 5, Size
= 7.
7. Hasil masnipulasi tersebut di atas, akan dapat dilihat hasilnya pada Gambar di atas.

Pola Seleksi

a. Rectangular Marquee Tool


Rectangular Marquee Tool, digunakan untuk melakukan seleksi, dengan pola persegi
b. Elliptical Marquee Tool
Rectangular Marquee Tool, digunakan untuk melakukan seleksi, dengan pola ellips
c. Single Row Marquee Tool
Rectangular Marquee Tool, digunakan untuk melakukan seleksi, dengan pola satu baris
d. Single Column Marquee Tool
Rectangular Marquee Tool, digunakan untuk melakukan seleksi, dengan pola satu kolom

Image Effect

Memberikan effect pada suautu image, merupakan salah satu bentuk image processing yang akan
sering dilakukan dengan Photoshop. Beberapa menu yang dapat difungsikan untuk kebutuhan image
effect ini, antara lain :
a. Image Adjusments : digunakan untuk melakukan pebaikan terhadap kualitas suatu image
b. Layer Layer Style : Berhubungan dengan pemberian stylish pada suatu layer atau image
c. Filter filter option : diguniakan untuk melakukan filter terhadap suatu image

Bekerja dengan Teks

Penembahan teks sebagai auatu informasi atau keterangan dalam suatu perancangan interface atau
banner merupakan suatu kebutuhan mutlak.
1. Membuat Teks
Untuk membuat suatu Teks, pada Photoshop dapat digunakan komponen Type
Tool ( ), yang terdapat pada toolbox
2. Mengedit Teks
Untuk mengedit teks, maka dapat dilakukan langkag sebagai berikut :
a. Klik layer tempat penempatan teks yang akan diedit
b. Klik Type Tool
c. Klik kursor pada awal teks yang akan diedit
d. Lakukan pengeditan sesuai dengan kebutuhan

Tips :
Untuk mempermudah proses pengeditan Teks, maka sebaiknya untuk setiap Teks yang berbeda
diempatkan pada satu layer yang terpisah

7|Dadan Irwan
Text Effect
Untuk memberikan teks effect, prosesnya akan sama dengan pemberian effek pada
image.

Latihan Teks
1. Buat sebuah file baru dengan ukuran 400 x 100 pixel (width x high), dengan
setingan sebagai berikut :

2. Klik type tool, kemudian tempatkan pada


halaman kerja, buat kalimat dengan tulisan
“Teknik Otomotif”, dengan ukuran : Huruf =
Book Antiqua, Size = 36, Color = Blue, seperti
terlihat pada Gambar.

3.Setting warna background menjadi


kuning, dengan mengklik
tombol pada
gambar belakang,
selanjutnya pilih warna kuning muda.
4.Klik layer background, kemudian klik
menu Edit Fill, pilih option Background
Color.

5. Klik layer
teks, selanjutnya berikan effek stroke, Bevel &
emboss dan drop shadow, dengan mengklik menu
Layer Layer Style Stroke, atur pemerian
stroke dengan warna putih, dengan ukuran sesuai
kebutuhan,
kemudian
ulangi untuk
emboss dan drop shadow, sehingga diperoleh hasil
akhir sebagai berikut :

8|Dadan Irwan
BAB II
PROSES PENGEMBANGAN WEB
WITH PHOTOSHOP CS

2.1 MENENTUKAN LAYOUT

Ketika merancang tata letak (layout) halaman web bisa dapat menggunakan beberapa
teknik, salah satunya adalah dengan cara membuat sketsa pada kertas gambar
menggunakan pensil. Atau dapat juga membuat sketsa menggunakan program pengolah
vector seperti CorelDraw, Adobe Illustrator, maupun Macromedia Freehand. Pada contoh
berikut ini, penulis memanfaatkan CorelDraw untuk membuat sketsa layout halaman web.
Sebagai bahan praktek untuk membuat website, berikut ini merupakan bentuk sketsa layout
halaman web sebagai panduan untuk membuat navigasi maupun fitur lain yang diperlukan.

Contoh Layout yang dibuat di CorelDRAW

Pada bagian ini kita akan membahas tentang teknik pengembangan situs sesuai
dengan sketsa yang telah dibuat sebelumnya. Proses pengembangan diawali dengan
pembuatan layout halaman menggunakan Adobe Photoshop, kemudian diolah dalam
Macromedia Dreamweaver untuk menambahkan isi (content) dan sedikit tambahan menu
pop up (pull down) menggunakan Javascript.
Dengan melihat bentuk layout tersebut di atas, akan lebih mudah proses pengembangannya
dalam Adobe Photoshop. Sebelum membuat dokumen baru, kita harus mengetahui bahwa
tidak semua resolusi monitor pengguna sama dengan yang kita miliki. Sebagai contoh,
resolusi monitor kita menggunakan ukuran 1024 x 768 pixel sedangkan pengguna (user)
hanya memiliki resolusi 800 x 600 pixel. Apabila Anda membuat ukuran dokumen 900 x 600
pixel maka menimbulkan ketidaknyamanan pengunjung karena harus sering menggulung
halaman website akibat ukuran dokumen terlalu lebar. Sebaiknya lebar tidak melebihi 800
pixel.

9|Dadan Irwan
Membuat Dokumen Baru
1. Buatlah dokumen baru
dengan ukuran 800 x
600 pixel. Mode warna
RGB, resolusinya 72
pixel, mode warna RGB
8 bit dan latar belakang
white. Beri nama
dokumen baru tersebut
(misal: Situs Pribadi),
setelah selesai klik OK.
2. Untuk mempermudah
proses pembuatan
interface situs, ada
baiknya memasukkan
gambar bentuk layout ke dalam dokumen Adobe Photoshop. Anda dapat
menduplikasi (copy dan paste) ke dalam dokumen tersebut.
3. Klik Set Foreground color untuk memilih warna sebagai latar
belakang.
4. Setelah kotak dialog Color Picker
muncul, masukkan kode warna #
bfc2ee pada kotak kode
5. Tekan tombol Alt+Backspace secara
bersama-sama untuk memberi warna
pada layer Background.
6. Buatlah layer baru dengan nama “Up”
kemudian aktifkan Rectangle
Marquee tool dan buatlah seleksi
seperti Nampak pada gambar berikut.

10 | D a d a n I r w a n
7. Tekan huruf D pada
keyboard untuk
mengubah warna
default Foreground
dan Background
(Hitam dan Putih)
kemudian tekan
huruf X untuk
membalik warna
tersebut. Tekan
tombol
Alt+Backspace secara
bersama-sama untuk
memberi warna putih pada layer “Up”. Tekan Ctrl+D untuk membuang seleksi.

Membuat Interface

Bentuk interface yang bagus dapat membangkitkan “gairah” para pengguna untuk tetap
menikmati berbagai berita dan informasi yang disajikan. Keunikan bentuk interface
memiliki nilai tersendiri karena tidak semua orang memiliki kemampuan untuk
menciptakan bentuk tersebut. Berikut ini akan membahas salah bentuk interface yang
modern.
1. Pertama kali, aktifkan tool Pen.
2. Pada menu option di bagian atas, pilih
Shape Layers
3. Klik Set Foreground Color
untuk memilih warna
4. Setelah kotak dialog Color
Picker muncul, masukkan
kode
warna #b3cbf4pada kotak yang
disediakan.
5. Buatlah Shape menggunakan Pen tool
dengan bentuk seperti
nampak pada gambar dibawah

6. Aktifkan Convert Point tool untuk membuat efek


lengkung

11 | D a d a n I r w a n
7. Klik pada segmen yang ingin diberi efek
lengkung. Klik dan tahan sambil menggeser salah
satu convert point ke kanan secara perlahan
agar membentuk lengkungan yang diinginkan
8. Selanjutnya
memilih
segmen yang lain. Klik dan tahan sambil menyeret
pointer ke kanan secara perlahan agar membentuk
objek yang diinginkan.
9. Jika telah selesai maka akan terbentuk sebuah
asesoris modern seperti nampak pada gambar berikut.

10. Aktifkan layer Shape 1, buatlah duplikat layer tersebut dengan cara mengklik dan
tahan sambil menggerakkan ke ikon Create New Layer.
11. Jika berhasil, pada Palet Layer akan muncul hasil duplikasi layer tersebut dengan
nama Shape 1 copy.
12. Aktifkan layer Shape 1 copy kemudian tekan Ctrl+T untuk mentransformasikan. Klik
tombol mouse kanan dan pilih Flip Horizontal. Setelah selesai klik tombol Commit
pada option bar atau dapat juga menekan
tombol Enter
13. Kurangi tingkat kepekatan (opacity)
dengan cara menggeser slider pada
menjadi 50%.
14. Aktifkan Direct
Selection tool

15. Buatlah seleksi untuk memilih dua buah


segmen yang akan dipindahkan secara
bersama-sama.

16. Gunakan tombol panah ke kiri untuk


menggeser dua buah segmen tersebut.

12 | D a d a n I r w a n
17. Langkah selanjutnya adalah membuat ilustrasi yang sama untuk memperindah
tampilan. Buatlah sebuah layer baru dengan menggunakan pen tool kemudian bentuk
sesuai dengan gambar (keinginan Anda). Kemudian modifikasi bentuknya menggunakan
Convert Point tool sehingga akan membentuk sebuah latar belakang yang modern.
Ubahlah opacity-nya menjadi 20%.
18. Berikutnya, aktifkan Pen tool dan buatlah Shape yang berbentuk seperti gambar
berikut

19. Seperti biasa, aktifkan


Convert Point tool
untuk membuat
bagian yang lengkung
20. Sehingga akan
didapatkan sebuah
bentuk interface yang
modern.

21. Buatlah sebuah


layer baru dengan
menggunakan pen
tool Kemudian
ubahlah bentuknya
agar lebih menarik
lagi. Untuk
memodifikasi,
gunakan Convert
Point tool dan
Direct Selection
tool.

13 | D a d a n I r w a n
Membuat Tombol

Setelah sebelumnya membuat bentuk interface untuk halaman situs, langkah selanjutnya
adalah membuat tombol yang eksklusif.
1. Pertama kali, aktifkan Rectangle Rounded
tool
2. Buatlah sebuah tombol berbentuk kotak.
3. Berilah efek bayangan (Drop Shadow)
dengan cara mengklik
ikon Layer Style (f) di bagian bawah
Palet Layers.
4. Setelah kotak dialog Layer Style
muncul, aturlah beberapa spesifikasi
seperti nampak pada gambar
Setelah selesai klik OK.
5. Langkah selanjutnya adalah
membuat beberapa duplikasi
tombol tersebut dengan cara menggesernya ke ikon Create
New Layer

Membuat Heading

Umumnya judul utama sebuah situs pribadi maupun perusahaan berada di bagian atas.
Nama Domain dapat dijadikan sebagai judul heading dengan tujuan untuk lebih
mengingatkan kepada pengunjung tentang alamat situs. Sebagai contoh, nama domain
Anda : dadanirwan.com. Ambillah nama domain tersebut sebagai judul heading.

14 | D a d a n I r w a n
1. Untuk membuat sebuah heading,
pertama kali aktifkan Horizontal
Type tool.
2. Kemudian, klik ikon Foreground
Color untuk menentukan
warna teks. Setelah kotak
dialog Color Picker muncul,
masukkan kode warna #
576f87
3. Buatlah layer baru dengan
nama “warna-head”,
kemudian buatlah seleksi berbentuk kotak menggunakan Rectangle Marquee tool.

4. Aktifkan Gradient tool, kemudian pada option bar pilihlah tipe Linier ( ). Aturlah
warna Foreground (#576f87), dan Background (#ffffff).
5. Letakkan pointer di atas dan tarik ke bawah untuk membuat warna gradasi. Tekan
Ctrl+D untuk membuang seleksi.

Menambahkan Image/Gambar

Gambar yang ditampilkan dalam sebuah situs dapat berupa foto maupun clipart. Pada
umumnya, ilustrasi yang digunakan dalam bentuk fotografi karena memiliki beberapa
kelebihan diantaranya, warna realistis, bentuknya sesuai dengan objek sesungguhnya, lebih
alami, dan masih banyak lagi kelebihannya. Oleh karena yang akan kita buat adalah situs
pribadi, tidak ada salahnya menempatkan gambar (foto) pribadi seseorang dalam
halaman utama. Baiklah, langsung saja kita akan mencoba melakukannya.
1. Pertama kali bukalah foto yang akan dijadikan ilustrasi di halaman muka situs (lihat
gambar 4.1.6.1).
2. Pilih menu Window > Arrange > Tile Vertically untuk menampilkan dua buah
dokumen (lihat gambar 4.1.6.2).
3. Aktifkan layer yang bergambar orang, klik dan tahan sambilmenyeret layer tersebut
ke dokumen Situs Pribadi
4. Jika gambarnya terlalu besar, ubahlah ukurannya dengan cara menekan tombol
Ctrl+T kemudian seretlah salah satu titik pegangan (handle) ke tempat tujuan

15 | D a d a n I r w a n
5. Aktifkan Horizontal Type tool, dan ketikkan beberapa kata sebagai identitas situs
tersebut.

Menambahkan Teks untuk Menu

Tombol-tombol yang telah dibuat tersebut belum dapat berfungsi sebagai menu karena
tidak ada teksnya. Nah, pada bagian berikut ini kita akan mencoba menambahkan teks pada
beberapa tombol yang telah dibuat agar dapat berfungsi sebagai menu. Menu tersebut
dapat berupa mouse over maupun menu pull down. Jadi sebaiknya Anda memikirkan sejak
awal sebelum memutuskan untuk memilih bentuk yang diinginkan. Apabila Anda mengikuti
petunjuk dalam buku ini, bentuk menu yang akan dibuat adalah menu pull down.
1. Langkah yang pertama, aktifkan Horizontal Type tool kemudian buatlah area teks
dengan cara mengklik pada tempat tombol sambil ditahan dan menyeretnya ke
bagian lain membentuk kotak teks.
2. Buatlah teks sebagai menu (misal: Home, Profile, Gallery, News, dan Contact). Anda
bebas memilih jenis huruf (font), penulis menggunakan jenis font Myriad Pro 10
point. Gunakan warna putih untuk teks tersebut.

Lakukan hal yang sama untuk membuat menu di bagian lain

Memotong Gambar (Slice)

Adobe Photoshop memang dapat diandalkan dalam segala hal, terbukti beberapa bidang
sangat memerlukan software yang satu ini diantaranya untuk keperluan fotografi,
percetakan, animasi, periklanan, maupun untuk membuat website. Salah satu keunggulan
Adobe Photoshop dalam membuat sebuah halaman web adalah adanya teknik Slice. Dengan
fasilitas tersebut, gambar akan secara otomatis terpotong sesuai dengan garis Slice. Anda
tidak perlu memotong secara manual kemudian menyimpan potongan gambar tersebut
satu per satu. Hal yang perlu diperhatikan ketika memotong gambar adalah membaginya
sesuai keperluan saja. Artinya, jika gambar tersebut akan digunakan sebagai tombol menu
maka sebaiknya dipotong sesuai masing-masing judul menu tersebut. Misal menu Home
harus terpisah dari menu Profile. Jangan memotong gambar yang memiliki dua menu karena
akan mengalami masalah ketika mengeditnya dalam Macromedia Dreamweaver.
1. Sebelum memotong gambar menggunakan Slice tool, kita memerlukan beberapa
garis bantu untuk menandai bagian mana saja yang akan dipotong. Letakkan pointer
pada ruler guide di sebelah kiri tangan Anda, klik dan tahan sambil menyeret ke
kanan.

16 | D a d a n I r w a n
2. Setelah tersusun beberapa garis bantu, langkah selanjutnya adalah memotong
gambar tersebut menggunakan Slice tool.
3. Kita harus memilih bagian mana saja yang
perlu dipisahkan, dan umumnya semua tombol
harus dipisahkan karena memiliki fungsi yang
berbeda. Sedangkan untuk bagian yang akan
digunakan sebagai latar belakang, sebaiknya
tidak perlu dipisahkan. Untuk memotong
bagian tersebut, pertama kali aktifkan Slice
tool. Perlu diingat, setelah mengaktifkan Slice
tool secara otomatis akan muncul angka 1 di sudut kiri atas. Hal itu memiliki arti
gambar tersebut telah siap dipotong.
4. Letakkan pointer di sudut kiri atas.
5. Setelah memotong gambar tersebut secara
otomatis akan muncul angka 01

6. Langkah selanjutnya adalah memotong


tombol-tombol yang ada secara
terpisah. Letakkan pointer pada angka
08, klik dan tahan sambil menyeret ke
bagian lain yang telah ditandai dengan garis bantu Perlu diperhatikan, ketika

17 | D a d a n I r w a n
memotong pada bagian lain usahakan irisannya tepat pada irisan sebelumnya agar
tidak muncul irisan lain yang tidak diinginkan. Jika hal itu terjadi, hasilnya tidak akan
maksimal dan tidak sesuai seperti yang kita harapkan. Anda dapat memotong
gambar yang terlalu besar menjadi beberapa bagian agar proses koneksi lebih cepat
ketika menampilkan gambar.
7. Apabila sudah mengiris gambar menjadi beberapa bagian maka akan nampa sepeti
gambar berikut

8. Dan untuk langkah selanjutnya adalah menyimpan


dokumen tersebut menjadi web (Save for web).
Pilih menu File > Save for Web.
9. Maka akan muncul kotak dialog Save for Web. Klik
tombol Save.

10. Maka akan muncul kotak dialog Save Optimized As. Tentukan folder untuk
menyimpan file kemudian beri nama file tersebut, misal index lalu pilih HTML and

18 | D a d a n I r w a n
images untuk Save as
type, Seting=Default
Setting, dan Slice=All
Slices. Setelah selesai klik
tombol Save untuk
menyimpan
11. Setelah menyimpan
dokumen tersebut, akan
nampak nama file
index.html dan folder
images yang berisi
beberapa gambar yang telah dipotong menggunakan Slice tool.

12. Tahap selanjutnya adalah mengeditnya menggunakan Macromedia Dreamweaver


untuk menambahkan teks dan membuat menu pull down agar tampilan situs lebih
menarik dan lebih profesional. Teknik pembuatannya akan dibahas pada bab
selanjutnya dalam buku ini.

19 | D a d a n I r w a n
BAB III

PROSES EDITING

Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe
Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah
dan lebih praktis dibandingkan harus membuat kode html. Ketika dokumen Adobe
Photoshop tersimpan dalam bentuk web maka secara otomatis akan membuat tag html
sendiri sehingga tidak perlu bersusah payah mengetik kode html. Anda dapat membuktikan
sendiri seperti nampak pada gambar berikut

EDITING AWAL
Situs yang telah dibuat, tidak secara otomatis dapat diisi dengan komponen (baik teks
maupun grafik/gambar). Hal ini dikarenakan kode html masih dalam bentuk gambar <img
src> bukan latar belakang <background>. Apabila kode html masih dalam status objek
gambar maka Anda tidak dapat memasukkan teks maupun grafik.

Mengubah Objek menjadi Background


Tidak semua gambar (image) yang pada web yang telah kita buat diganti. Jika image
tersebut berfungsi sebagai tombol, maka Anda dapat menambahkan menu pull down agar
tampilan website lebih menarik. Anda juga dapat membuat tombol dalam bentuk mouse
over, dan lain sebagainya. Pada bagian ini, kita akan mencoba membahas tentang teknik
penggantian objek gambar menjadi latar belakang (backgrdound) agar kita dapat
memasukkan beberapa komponen di dalamnya (teks maupun grafik).
1. Pertama kali, bukalah file index.html menggunakan Macromedia Dreamweaver.
2. Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan di jadikan
latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol.

20 | D a d a n I r w a n
Latihan :
Buatlah sebuah Disain Web dengan Layout seperti Gambar di bawah ini:
Sesuaikan warna menurut kebutuhan dan kreativitas anda.

21 | D a d a n I r w a n