MENGEDIT WEB DG DREAMWEAVER

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 (download: situs_bisnis.zip) 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.

1. 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. Sebagai contoh, klik image di
 bagian bawah teks New Product.

3. Pada bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak dapat
memasukan teks di atas gambar tersebut karena objek tersebut adalah image, bukan merupakan
background. Tekan Del untuk menghapusnya.

4. Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar belakang
(background). Oleh karena nama file yang baru saja dihapus adalah index_26.gif maka gunakan file
tersebut sebagai latar belakang.
5. Ketikkan images/index_26.gif pada kolom Bg.

6. Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar belakang agar
kita dapat memasukkan objek berupa teks, animasi, maupun gambar.

2. Memasukkan Objek
Objek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam Macromedia
Dreamweaver proses memasukkan objek sangat mudah karena sudah disediakan tool yang sangat
lengkap. Anda tinggal memilih objek apa yang akan dimasukkan. Berikut ini akan membahas
masalah teknik memasukkan objek berupa teks.

1. Letakkan kursor pada tempat yang akan ditambahkan teks.

2. Pada penel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.
3. Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut seperti
nampak pada gambar berikut.

4. Anda bisa memasukkan image di antara teks tersebut. Untuk melakukan hal itu, pertama kali
letakkan kursor di awal paragraf kemudian pilih menu Insert > Image.

5. Pilih file gambar yang akan dimasukkan dalam dokumen tersebut.

6. Apabila berhasil memasukkan gambar, maka akan terlihat objek tersebut berada di depan
paragraf. Namun posisinya masih kurang sempurna karena susunan teks terdorong oleh gambar
tersebut.
7. Agar tampilan lebih rapi, Anda dapat mengatur posisi gambar sehingga seluruh teks akan
berada di sebelah kanan gambar. Untuk melakukan hal tersebut, pada panel Properties pilih Left
untuk Align.

MEMBUAT LINK DAN NAVIGASI

Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika mencari informasi
yang dibutuhkan. Sebaiknya menggunakan tombol menu yang umum, seperti: Home, Product,
Service, dan Contact Us
Dalam Macromedia Dreamweaver, kita membuat Pop-up Menu, dan Jumping Menu secara mudah.
Anda tidak bersusah payah menuliskan script yang panjang dalam bahasa Javascript karena telah
disediakan tool yang sangat mudah dan fleksibel.

1. Membuat Pop-up Menu

Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain yang sejenis
adalah adanya tool untuk membuat menu pop-up yang dibuat dengan bahasa Java. Bagi mereka
yang masih awan dengan bahasa Java, tidak perlu bingung karena disediakan panel Behavior untuk
mempermudah dalam pembuatan menu pop-up.

Sebelum membuat pop-up menu terlebih dulu harus menyiapkan nama file sebagai link. Sebagai
contoh: ketika user memilih menu PC maka yang akan muncul adalah pilihan nama computer
seperti Acer, HP, BenQ, dan lain sebagainya. Dan ketika user memilih salah satu opsi (missal: Acer)
maka akan terhubung ke file tersebut.

Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang sama seperti
halaman utama, yaitu menyimpan dengan nama lain (contoh: Save As > acer.html). Diasumsikan,
Anda telah memiliki beberapa file sebagai link yang dimaksud.

1. Pertama kali, klik menu PC.

2. Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih
menuWindow > Behaviors.

3. Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk
membuka menu.

4. Selanjutnya pilih Show Pop up Menu.

5. Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-up Menu yang
masih kosong.

6. Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).
7. Kemudian masukkan alamat URL pada kolom Link.

8. Selanjutnya pada kolom Target, pilih _parent.

9. Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian lakukan hal
sama seperti pada tahap 6.

10. Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar belakang pop up
menu. Tentukan jenis dan ukuran font yang digunakan. Lalu tentukan pula warna teks dan warna
cell ketika mouse berada di atas teks.

11. Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up menu.

12. Klik Tab Position untuk menentukan posisi pop up menu.

13. Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.

14. Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain.
2. Membuat Rollover Image
Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop up Menu juga
menyediakan tool untuk membuat Rollover Image sebagai tombol. Yang harus Anda lakukan
pertama kali adalah menyediakan dua buah gambar yang ukurannya sama tapi warnanya berbeda.

1. Buatlah duplikasi gambar tombol yang telah ada.

2. Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih
menu Image > Adjustment > Hue/Saturation.

3. Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian geser
Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan dokumen tersebut
 dengan cara menekan Ctrl+S.

4. Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.

5. Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menuInsert >
Image Objects > Rollover Image.

6. Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom Image
name kemudian tentukan gambar asli pada kolom Original Image. Untuk mempermudah pencarian
file, klik tombol Browse. Tentukan pula file untuk gambar rollover pada kolom Rollover Image.

7. Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika tombol
tersebut di klik.

8. Untuk melihat hasilnya, tekan tombol F12.

18. JAN, 2007 236 COMMENTS
Tutorial Membuat Website dengan Photoshop CS2
Web yang sering dikunjungi orang merupakan nilai plus bagi seorang web designer. Banyaknya
pengunjung yang datang dapat dijadikan tolok ukur keberhasilan
seseorang dalam merancang dan mengembangkan sebuah
website profesional.

Ada beberapa unsur yang mempengaruhi keberhasilan tersebut,

diantaranya: mudah digunakan, proses koneksi cepat, tampilan
menarik, perpaduan warna sangat tepat, navigasi mudah dipahami
dan digunakan, isi artikel sangat berguna, dan masih banyak lagi
unsur lain. Semua itu bergantung pada respon
pengunjung/pengguna terhadap website yang kita buat.
Saat ini website sudah menjadi salah satu bagian dari identitas
sebuah institusi, sama pentingnya dengan alamat perusahaan.
Website dapat dijadikan “guide” bagi pelanggan untuk mengetahui
lebih jauh tentang profil sebuah institusi secara online.

Ada beberapa sofware yang dapat digunakan untuk merancang

interface sebuah website pribadi, diantaranya: Adobe Macromedia
Firework dan Adobe Photoshop. Rancangan yang dibuat dalam Photoshop dapat disimpan menjadi
html kemudian dapat dioleh menggunakan Adobe Macromedia Dreamweaver. Jadi anda tidak perlu
lagi membuat kode html yang rumit dan panjang, cukup menggunakan perpaduan Adobe Photoshop
dan Adobe Macromedia Dreamweaver.
Berikut ini, saya akan memberikan sedikit tutorial tentang pembuatan website pribadi yang impresif
menggunakan Adobe Photoshop. Artikel yang saya muat di sini merupakan cuplikan dari salah satu
bab buku saya yang dalam proses pencetakan di penerbit Datakom Lintas Buana. Jadi, apabila
tutorial ini kurang dari sempurna, sebaiknya membeli buku tersebut .

Buku tersebut terdiri dari 5 bab yaitu:

Bab 1. Pengantar Web Design

1.1. Tips Membuat Web Profesional
1.2. Prinsip dalam Mendesain Website
1.3. Software Desain Grafis
1.4. Format Grafis
Bab 2. Konsep Dasar Pembuatan Website

Bab 3. Merancang Web

3.1. Kategori Web
3.2. Dasar-dasar Pemilihan Warna
3.3. Mengatur Layout
Bab 4. Proses Pengembangan
4.1. Situs Pribadi
4.1.1. Membuat Dokumen Baru
4.1.2. Membuat Interface
4.1.3. Membuat Tombol
4.1.4. Menambahkan Efek Khusus
4.1.5. Membuat Heading
4.1.6. Menambahkan Image/Gambar
4.1.7. Menambahkan Teks untuk Menu
4.1.8. Memotong Gambar (Slice)
4.2. Situs Bisnis
4.2.1. Membuat Dokumen Baru
4.2.2. Membuat Interface
4.2.3. Menambahkan Efek pada Interface
4.2.4. Membuat Tombol
4.2.5. Membuat Heading
4.2.6. Teknik Slice

Bab 5. Proses Editing

5.1. Editing Awal
5.1.1. Mengubah Objek menjadi Background
5.1.2. Memasukkan Objek
5.2. Membuat Link dan Navigasi
5.2.1. Membuat Pop-up Menu
5.2.2. Membuat Rollover Image 116

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.
 OKE. kita mulai saja pembahasan membuat website pribadi dengan Adobe Photoshop (Anda bisa
menggunakan Adobe Photoshop versi 7, 8, atau 9).

4.1.1. Membuat Dokumen Baru

Diasumsikan Anda menggunakan Adobe Photoshop 7, CS maupun CS2. Jalankan program Adobe
Photoshop kemudian ikuti beberapa petunjuk berikut ini.
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 #0066cc 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.

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.

4.1.2. 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 Pen tool.

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 #ff5d6c pada kotak yang
disediakan.

5. Buatlah Shape menggunakan Pen tool dengan bentuk seperti nampak pada gambar
berikut.

6. Aktifkan Convert Point tool untuk membuat efek lengkung.

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.

17. Langkah selanjutnya adalah membuat ilustrasi yang sama untuk memperindah tampilan.
Buatlah duplikat layer Shape 1 sekali lagi dengan cara menggeser layer tersebut ke ikon Create
New Layer. Kemudian modifikasi bentuknya menggunakan Convert Point toolsehingga 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 impresif.

21. Duplikasi Shape 2 dengan cara menyeret layer tersebut ke ikon Create New Layer.
Kemudian ubahlah bentuknya agar lebih menarik lagi. Untuk memodifikasi, gunakanConvert Point
tool dan Direct Selection tool. Jika mengikuti petunjuk buku ini, bentuk shape akan seperti nampak
 pada gambar berikut.

22. Terakhir, aktifkan Rectangle tool.

23. Kemudian buatlah Shape berbentuk kotak memanjang. Jangan lupa memberi warna Shape
tersebut dengan kode warna #ea1c30.

4.1.3. 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. Aktifkan Direct Selection tool kemudian buatlah seleksi untuk memilih empat buah segmen
di bagian bawah.

4. Geser ke kanan sebanyak 10 kali menggunakan tombol tanda panah ke kanan.

5. Berilah efek bayangan (Drop Shadow) dengan cara mengklik ikon Layer Style (f) di bagian
bawah Palet Layers.

6. Setelah kotak dialog Layer Style muncul, aturlah beberapa spesifikasi seperti nampak pada
gambar berikut. Setelah selesai klik OK.
7. Langkah selanjutnya adalah membuat beberapa duplikasi tombol tersebut dengan cara
menggesernya ke ikon Create New Layer.

8. Buatlah tiga buah tombol lagi dengan cara yang sama seperti sebelumnya. Anda dapat
menduplikasi tombol yang sudah ada atau membuat tombol baru lagi. Jika Anda telah membuat tiga
buah tombol, kira-kira bentuknya seperti gambar berikut ini.

4.1.4. Menambahkan Efek Khusus

Interface tersebut mungkin masih sangat sederhana, kita perlu memberi efek khusus agar terlihat
menarik. Ada beberapa teknik ketika membuat efek khusus pada tombol (button) yaitu memberi
warna putih agar kelihatan seperti “button gel”ﾝ atau hanya memberikan efek shadow saja.
1. Pertama kali aktifkan layer yang bentuk objeknya seperti nampak pada gambar berikut.
2. Menuju ke palet Path, ubahlah path tersebut menjadi seleksi dengan cara mengklik tombol
ikon Load path as selection di bagian bawah palet Path.

3. Buatlah layer baru dengan nama “Light”ﾝ. Kemudian aktifkan Brush tool, pilihlah ukurannya
9 pixel. Pada option bar, kurangi opacity menjadi sekitar 6% saja. Tekan huruf D lalu huruf X ﾝ.

4. Goreskan pada bagian yang lengkung secara perlahan-lahan sehingga akan terbentuk
warna seperti nampak pada gambar berikut.

5. Sekarang tekan tombol Ctrl+Shift+I atau pilih menu Select > Inverse untuk membalikkan
posisi seleksi. Tekan huruf X ﾝ untuk memilih warna Foreground menjadi Hitam.
6. Arsirlah secara perlahan-lahan pada bagian yang lengkung menggunakan Brush tool
sehingga akan memiliki efek bersinar dan muncul bayangan.

4.1.5. 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 : dix-um.com. Ambillah nama
domain tersebut sebagai judul heading.
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 #ea1c30.

3. Ketiklah judul heading, misal: Dixs-um.com, pilihlah jenis huruf (font) yang tidak berkait
(Sans Sherif).

4. Buatlah layer baru dengan nama “Color-head ﾝ”, kemudian buatlah seleksi berbentuk kotak
menggunakan Rectangle Marquee tool.

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

4.1.6. 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.

2. Pilih menu Window > Arrange > Tile Vertically untuk menampilkan dua buah dokumen.

3. Aktifkan layer yang bergambar orang, klik dan tahan sambil menyeret layer tersebut ke
dokumen Situs Pribadi.
4. Jika gambarnya terlalu besar, ubahlah ukurannya dengan cara menekan
tombol Ctrl+Tkemudian seretlah salah satu titik pegangan (handle) ke tempat tujuan.

5. Aktifkan Horizontal Type tool, dan ketikkan beberapa kata sebagai identitas situs tersebut.

4.1.7. 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.

3. Lakukan hal yang sama untuk membuat menu di bagian lain.

4.1.8. 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.
2. Buatlah beberapa garis bantu untuk menandai bagian yang akan dipotong. Apabila
mengikuti pentunjuk dalam buku ini, kurang lebih seperti gambar berikut.

3. Sekarang buatlah garis bantu secara horisontal dengan cara mengambilnya dari ruler guide
di atas (horizontal ruler), sehingga hasilnya akan nampak seperti gambar berikut ini.

4. Setelah tersusun beberapa garis bantu, langkah selanjutnya adalah memotong gambar
tersebut menggunakan Slice tool. 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.

5. Letakkan pointer di sudut kiri atas.

6. Kemudian klik dan tahan sambil menyeret ke sebelah kanan sesuai luas yang diinginkan.

7. Setelah memotong gambar tersebut secara otomatis akan muncul angka 2.

8. Letakkan pointer di atas angka 2, klik dan tahan sambil menyeret ke kanan untuk memotong
gambar.

9. Setelah memotong gambar tersebut secara otomatis akan muncul angka 3 dan 4. Hal ini
dikarenakan Adobe Photoshop secara otomatis memotong pada bagian lain agar bentuknya tetap
utuh. Anda dapat memotong gambar pada area yang telah ditandai angka tersebut.

10. Langkah selanjutnya adalah memotong tombol-tombol yang ada secara terpisah. Letakkan
pointer pada angka 3, klik dan tahan sambil menyeret ke bagian lain yang telah ditandai dengan
garis bantu.

11. Lakukan dengan cara yang sama untuk memotong bagian lain sehingga akan terbentuk
seperti gambar berikut.

12. Untuk bagian yang memiliki fungsi sama, sebaiknya tidak perlu dipisah/dipotong.

13. Perlu diperhatikan, ketika 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.
14. Langkah selanjutnya, irislah tombol-tombol pada bagian kanan.

15. Berikutnya, memotong gambar yang bukan berfungsi sebagai tombol.

16. Untuk gambar yang akan dijadikan latar belakang, irislah menjadi dua bagian saja seperti
nampak pada gambar berikut.

17. Begitu pula pada bagian lain, irislah gambar sesuai keperluan.

18. Apabila sudah mengiris gambar menjadi beberapa bagian maka akan nampa sepeti gambar
berikut.
19. Dan untuk langkah selanjutnya adalah menyimpan dokumen tersebut menjadi web (Save for
web). Pilih menu File > Save for Web.

20. Maka akan muncul kotak dialog Save for Web. Klik tombol Save.

21. Kemudian akan muncul kotak dialog Save Optimized As. Tentukan folder untuk menyimpan
file kemudian beri nama file tersebut, misal index lalu pilih HTML and images untuk Save as type,
Seting=Default Setting, dan Slice=All Slices. Setelah selesai klik tombol Save untuk menyimpan.
22. Setelah menyimpan dokumen tersebut, akan nampak nama file index.html dan folder images
yang berisi beberapa gambar yang telah dipotong menggunakan Slice tool.

23. Tahap selanjutnya adalah mengeditnya menggunakan Adobe 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 tersebut, silakan
baca artikel terkait di sini [cref 215 http://slametriyanto.net/2008/03/31/ebook-web-professional-
dengan-photoshop-dreamweaver]. Silakan beli bukunya ya..

DIGITAL PAINTING DG PHOTOSHOP

Dengung kecanggihan software yang bernama Adobe Photoshop masih saja menggema di seluruh
dunia. Digitalisasi telah menjamur secara multidimensi, tak terkecuali bidang seni lukis. Sebelum
lahirnya Adobe Photoshop, kebanyakan orang masih beranggapan bahwa tidak mungkin dapat
melukis atau membuat ilustrasi dengan komputer. Ternyata, anggapan itu lenyap seketika setelah
muncul beberapa software yang mampu berperan sebagai kanvas digital.

Kita tahu, sampai saat ini sudah tak terhitung lagi berapa jumah software yang berkembang sebagai
sarana pengolah gambar secara digital. Meski begitu, Adobe Photoshop masih memiliki ranking
tertinggi sebagai satu-satunya software untuk keperluan wed design, photography, photo retouching,
photo manipulating, graphic design, digital painting, dan masih banyak lagi keperluan lain yang
mengandalkan program yang terkenal cerdas tersebut dan handal itu.
Jika Anda memiliki jiwa seni terutama seni lukis, saya anjurkan untuk belajar lebih mendalam
menggunakan program seperti Adobe Photoshop. Atau Anda yang bergerak di bidang animasi,
Adobe Photoshop mampu menghasilkan gambar sebagai latar belakang (background) animasi.
Anda yang bergerak di bidang ilustrasi (Illustrator) juga bisa menggunakan Adobe Photoshop
sebagai kanvas manual untuk menciptakan karya seni lukis Anda.

Proses pembuatannya sangat mudah dan efisien. Hanya dengan menggoreskan pensil di atas
kertas putih, kemudian di-scan dan disimpan ke dalam komputer, maka selanjutnya dapat diproses
dengan Adobe Photoshop secara canggih dan cepat. Anda juga bisa langsung menggambar dalam
Photoshop.
Anda jangan memikirkan jumlah kanvas, jumlah kuas, jumlah warna, atau hal-hal lain karena Adobe
Photoshop sudah menyiapkan semuanya. Studio lukis terlengkap hanya ada pada Adobe
Photoshop. Untuk menggunakan fasilitas digital painting, Anda bisa menggunakan Adobe
Photoshop versi sampai 7-10 atau untuk versi terbaru nanti.

Membuat Sketsa
1. Melukis digital tidak serumit yang Anda bayangkan, justeru dengan adanya komputer
pekerjaan kita akan semakin mudah dan efisien. Langkah awal yang harus Anda lakukan
adalah membuat sketsa dasar pada kertas putih, lalu buatlah gambar sesuai yang ada
dalam pikiran Anda. Selanjutnya di-scan dan disimpan ke dalam hardisk komputer Anda.

2. Setelah terbuka, Anda tinggal memberi warna pada gambar tersebut. Sebelum memberikan
warna pada objek tersebut perlu diketahui bahwa gambar tersebut masih menggunakan
mode Grayscale 8 bits/channel. Anda harus ubah menjadi RGB, caranya pilih Image >
Mode > RGB Color.

3. Klik ikon Set Foreground color untuk memilih warna. Setelah kotak dialog Color Picker
muncul, masukkan kode #FBBA56 dalam kotak isian jika Anda mengikuti petunjuk dalam
buku ini. Perlu Anda ketahui, bahwa mungkin saja warna yang Anda pilih tidak sama dengan
yang diberikan oleh buku ini. Perbedaan tersebut ada beberapa aspek, salah satunya
 adalah kemampuan membaca monitor yang berbeda-beda dikarenakan resolusi yang
rendah atau perbedaan merek monitor itu sendiri.

Mewarnai Objek
1. Buatlah layer baru dengan nama “Paruh”ﾝ, dengan cara mengklik ikon New Layer di bagian
bawah palet Layers. Aktifkan tool Brush, lalu goreskan pada layer Paruh untuk memberikan
warna pada paruh burung tersebut. Anda dapat mengkombinasikan ukuran brush sesuai
keperluan.

2. Agar gambar sketsa tidak tertutup oleh warna yang kita goreskan pada layer Paruh, ubahlah
blending mode menjadi Multiple.

3. Selanjutnya, membuat bulu di bagian kepala dan leher. Warna bulu kepala dan leher burung
elang biasanya putih. Oleh karena warna dasar (background) juga berwarna putih, kita sulit
melihat hasilnya. Untuk itu Anda harus memberikan warna lain untuk latar belakang. Aktifkan
layer Background, klik ikon New Layer dan beri nama “Latar” ﾝ, kemudian beri warna yang
gelap (saya menggunakan warna #0081C6).
4. Kemudian klik ikon set Foreground and Background untuk memilih warna baru. Setelah
kotak dialog Color Picker muncul, masukkan kode #221E1F pada kode warna. Aktifkan tool
Brush, pilihlah jenis brush yang memiliki tipe hard. Lalu aturlah ukurannya sesuai keperluan.
Sapukan pada bagian bawah leher hingga badan secara perlahan-lahan. Untuk memilih
ukuran dan tipe brush secara cepat, klik tombol mouse kanan lalu pilihlah salah satu tipe
brush dan seret slider di bagian atas untuk mengubah ukuran brush. Anda dapat
mengkombinasikan tingkat kepeketan (opacity) maupun mencampur dengan warna yang
lebih muda.

5. Langkah selanjutnya membuat mata. Pertama kali, Anda harus menampilkan sketsa burung
tersebut terutama bagian mata. Perkecil tingkat kepekatan (opacity) dengan cara menggeser
slider ke kiri. Setelah sketsa muncul, Anda tinggal membuat mata dengan brush yang sudah
dipilih. Sebaiknya Anda menggunakan ukuran brush yang berbeda sesuai dengan bagian
yang lebih detail. Dan gunakan warna hitam yang lembut (tidak pekat) atau
mengkombinasikan warna hitam dengan kepekatan yang berbeda. Ini sangat penting agar
menghasilkan sebuah lukisan yang benar-benar nyata, mirip bentuk dan detail asli objek
 tersebut. Anda juga dapat membuat mata tanpa menggunakan tool Brush, yaitu dengan
memanfaatkan tool Burn. Pada menu option di bagian atas, aturlah Range=Highlight.
Kemudian atur juga ukuran brush untuk mengarsirnya. Gunakan brush yang lembut dan
kurangi tingkat kepekatannya (opacity).

Membuat Detail Objek

1. Warna yang telah Anda gunakan untuk bagian-bagian tertentu masih sebagai warna dasar,
sehingga belum nampak sebuah lukisan yang bermutu. Tugas Anda berikutnya adalah
mengarsir gambar tersebut agar nampak seperti aslinya. Dalam Adobe Photoshop, Anda
tidak perlu menambahkan warna untuk membuat detail gambar namun cukup menggunakan
tool Dodge dan tool Burn. Fungsi tool Dodge adalah untuk membuat bagian yang diarsir
lebih terang dari warna sebelumnya, sedangkan tool Burn kebalikannya. Pertama kali,
ubahlah blending mode seluruh layer menjadi Normal. Kemudian aktifkan layer Paruh.
Aktifkan tool Dodge dan aturlah ukuran brush=75 px, Range=Shadow, Exposure=30%.
Ketika membuat detail pada paruh mungkin Anda merasa kesulitan karena gambar sketsa
yang berfungsi sebagai panduan tidak nampak. Untuk itu Anda perlu menampilkannya
dengan cara mengurangi tingkat kepekatan (opacity) layer tersebut menjadi 90%. Mulailah
mengarsir pada bagian yang ingin dibuat lebih terang. Gunakan pula tool Burn untuk
membuat bagian yang diarsir lebih gelap. Ketika Anda menggunakan tool Burn, pada menu
option ubahlah Range= Highlight, Exposure=10%. Semakin Anda mengarsir pada tempat
yang sama maka warnanya semakin gelap. Begitu pula ketika Anda menggunakan tool
Dodge, maka akan semakin terang bagian yang diarsir secara terus menerus.
2. Agar hasilnya lebih maksimal, Anda dapat memanfaatkan filter Noise dan Gaussian Blur.
Pertama kali, tekan tombol Ctrl pada keyboard sambil mengklik layer paruh secara
bersama-sama untuk membuat seleksi. Kemudian pilih menu Filter > Noise Add Noise,
masukkan angka 9% pada kotak Amount lalu pilih Uniform pada opsi Distribution.
Selanjutnya, pilih menu Filter > Blur > Gaussian Blur, masukkan angka 2 pixels. Tentu saja
Anda dapat mengganti nilai-nilai tersebut sesuai keperluan agar nampak lebih realistis.

3. Langkah berikutnya adalah membuat detail mata elang. Sama seperti saat ketika membuat
detail paruh, Anda juga dapat memanfaatkan tool Dodge dan tool Burn untuk membuat
bagian-bagian yang lebih detail atau menggunakan tool Brush.
Aktifkan layer Bulu, arsirlah bagian bola mata menggunakan tool Burn kemudian beri warna
bola mata dengan warna #A99676 menggunakan tool Brush, dan jangan lupa membuat titik
hitam pada bola mata menggunakan brush dengan tipe hard, lalu aturlah besarnya brush 42
pixels. Seleksi bola mata yang selain hitam menggunakan tool Magic Wand, klik pada area
tersebut untuk membuat seleksi. Kemudian pilih menu Filter > Noise > Add Noise,
masukkan angka 22% pada kotak Amount dan pilih Uniform untuk opsi Distribution. Pilih
menu Filter > Blur > Gaussian Blur, masukkan angka 1.5 pixels pada kotak isian.
4. Untuk mempertegas tampilan mata yang tajam, beri arsiran pada tepi mata tersebut.
Aktifkan tool Burn, aturlah Exposure=10%, Range=Highlight, dan size=7 pixels atau sesuai
kebutuhan. Anda dapat pula menggunakan brush tipe=Spatter 24 pixels agar hasilnya lebih
maksimal.

5. Langkah berikutnya membuat arsiran di bagian pelipis (antar mata dan paruh). Pertama kali,
buatlah layer baru dengan nama Pelipis. Aktifkan tool Lasso dan buatlah seleksi membetuk
bagian pelipis. Tujuan pembuatan seleksi ini adalah untuk melindungi layer lain agar tidak
tertutup oleh warna yang nanti akan kita buat.
Tentukan warna Foregound=#A19558 dan Background=#794C5E. Pilih menu Filter >
Render > Clouds, lalu pilih menu Filter > Noise > Add Noise, masukkan angka 45% pada
kotak Amount dan pilih Uniform untuk opsi Distribution. Selanjutnya pilih menuFilter > Blur >
Gaussian Blur, masukkan angka 2 pixels.
Membuat Bulu
1. Dalam teknik pembuatan bulu jika belum terbiasa dan belum tahu rahasianya tentu akan
merasa kesulitan. Tak perlu khawatir, di sini kita akan mencoba mempraktekkannya.
Pertama kali aktifkan layer Bulu, tekan Ctrl sambil mengklik layer tersebut secara bersama-
sama untuk membuat seleksi. Aktifkan tool Brush, lalu arsirlah menggunakan warna
#F8FACB. Kurangi tingkat kepekatannya hingga 10%. Lakukan secara acak agar
menghasilkan warna yang maksimal. Kita akan mencoba membuat bentuk bulu sederhana
namun akan berdampak luar biasa. Aktfikan tool Brush dan pilih tipe Spatter 24 px, lalu
aktifkan tool Smudge. Pada menu option, aturlah Mode=Normal, Strength=45%. Mulailah
mengarsir pada tepi bulu tersebut secara acak. Untuk bagian bawah, arsirlah sambil
membentuk sebuah bulu.

2. Untuk mempertegas bentuk bulu, Anda perlu membuatnya secara acak dan warna yang
tipis. Aktifkan tool brush, aturlah ukurannya hingga 10 pixels. Aturlah warnanya
menggunakan #6B655D, kurangi kepekatannya hingga 10%.
Perlu diketahui, warna yang saya lihat pada monitor tentu berbeda dengan warna yang
dihasilkan oleh monitor Anda. Untuk itu, Anda bisa mencari warna lain jika kurang puas atau
tidak setuju dengan yang diberikan buku ini.
Dan ketika Anda mencetak pada printer, mungkin ada sedikit perbedaan karena
kemampuan masing-masing komputer dalam menterjemahkan warna dari komputer
berbeda-beda.
Di bawah ini terdapat beberapa contoh gambar yang dibuat menggunakan Adobe Photoshop.
Teknik pembuatan gambar tersebut telah diterbitkan oleh Elexmedia Komputindo 2 tahun lalu
berjudul: Special Project Melukis Digital dengan Adobe Photoshop.