Modul pelatihan web disain

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 diberlakuk d iberlakukan, an, 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

4|Dadan Irwan

Menu Bar

Option Bar Worksheet Pallete

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 lapisanlapisan/ 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 Free diperkecil Untuk kebutuhan ini dapat dilakukan dengan jalan : Klik menu Edit 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 di butuhkan.

6|Dadan Irwan

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. Layer Style Drop Shadow, kemudian 6. Kemudian tambahkan sedikit Drop Shadow, Layer 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. 5.

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” Rectangle kemudian aktifkan 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 kotak yang #b3cbf4pada disediakan. 5. Buatlah Shape menggunakan Pen tool dengan bentuk seperti nampak pada gambar dibawah

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

20.

Seperti biasa, aktifkan Convert Point tool untuk membuat bagian yang lengkung 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.


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.


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. Aktif Aktifkan kan Grad Gradie ient nt tool, tool, kemudi kemudian an pada pada optio option n bar pilih pilihlah lah tipe tipe Linier Linier ( ). Aturl Aturlah ah 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/Gam I mage/Gambar bar 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 m emotong gambar yang memiliki dua menu karena akan mengalami masalah ketika mengeditnya dalam Macromedia Dreamweaver. 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. 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 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 menambahkan teks dan membuat menu pull pull down agar tampilan situs lebih menarik dan lebih profesional. Teknik pembuatannya akan dibahas pada bab selanjutnya dalam buku ini .


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 bukan latar belakang . 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 y ang 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.


Latihan : Buatlah sebuah Disain Web dengan Layout seperti Gambar di bawah ini: Sesuaikan warna menurut kebutuhan dan kreativitas anda.


Modul pelatihan web disain

Recommend Documents