Tutorial Membuat Websitedengan Photoshop CS2Web yang sering dikunjungi orang merupakan nilai plus bagi seorang web designe...
4.1.2. Membuat Interface4.1.3. Membuat Tombol4.1.4. Menambahkan Efek Khusus4.1.5. Membuat Heading4.1.6. Menambahkan Image/...
4.1.1. Membuat Dokumen BaruDiasumsikan Anda menggunakan Adobe Photoshop 7, CS maupun CS2. Jalankanprogram Adobe Photoshop ...
5. Tekan tombol Alt+Backspace secara bersama-sama untuk memberi warna padalayer Background.6. Buatlah layer baru dengan na...
4.1.2. Membuat InterfaceBentuk interface yang bagus dapat membangkitkan “gairah” para penggunauntuk tetap menikmati berbag...
6. Aktifkan Convert Point tool untuk membuat efek lengkung.7. Klik pada segmen yang ingin diberi efek lengkung. Klik dan t...
11. Jika berhasil, pada Palet Layer akan muncul hasil duplikasi layer tersebutdengan nama Shape 1 copy.12. Aktifkan layer ...
16. Gunakan tombol panah ke kiri untuk menggeser dua buah segmentersebut.17. Langkah selanjutnya adalah membuat ilustrasi ...
20. Sehingga akan didapatkan sebuah bentuk interface yang impresif.21. Duplikasi Shape 2 dengan cara menyeret layer terseb...
4.1.3. Membuat TombolSetelah sebelumnya membuat bentuk interface untuk halaman situs, langkah selanjutnyaadalah membuat to...
6. Setelah kotak dialog Layer Style muncul, aturlah beberapa spesifikasi sepertinampak pada gambar berikut. Setelah selesa...
4.1.4. Menambahkan Efek KhususInterface tersebut mungkin masih sangat sederhana, kita perlu memberi efek khusus agarterlih...
5. Sekarang tekan tombol Ctrl+Shift+I atau pilih menu Select > Inverse untukmembalikkan posisi seleksi. Tekan huruf X untu...
6. Letakkan pointer di atas dan tarik ke bawah untuk membuat warna gradasi. TekanCtrl+D untuk membuang seleksi.4.1.6. Mena...
3. Aktifkan layer yang bergambar orang, klik dan tahan sambil menyeret layertersebut ke dokumen Situs Pribadi.4. Jika gamb...
4.1.7. Menambahkan Teks untuk MenuTombol-tombol yang telah dibuat tersebut belum dapat berfungsi sebagai menu karenatidak ...
terpisah dari menu Profile. Jangan memotong gambar yang memiliki dua menu karenaakan mengalami masalah ketika mengeditnya ...
4. Setelah tersusun beberapa garis bantu, langkah selanjutnya adalah memotonggambar tersebut menggunakan Slice tool. Kita ...
9. Setelah memotong gambar tersebut secara otomatis akan muncul angka 3 dan 4.Hal ini dikarenakan Adobe Photoshop secara o...
15. Berikutnya, memotong gambar yang bukan berfungsi sebagai tombol.16. Untuk gambar yang akan dijadikan latar belakang, i...
18. Apabila sudah mengiris gambar menjadi beberapa bagian maka akan nampasepeti gambar berikut.19. Dan untuk langkah selan...
21. Kemudian akan muncul kotak dialog Save Optimized As. Tentukan folder untukmenyimpan file kemudian beri nama file terse...
Upcoming SlideShare
Loading in …5
×

tutorial-membuat-website-dengan-photoshop-cs2-

1,179 views

Published on

Published in: Art & Photos, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,179
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
56
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

tutorial-membuat-website-dengan-photoshop-cs2-

  1. 1. Tutorial Membuat Websitedengan Photoshop CS2Web yang sering dikunjungi orang merupakan nilai plus bagi seorang web designer.Banyaknya pengunjung yang datang dapat dijadikan tolok ukur keberhasilan seseorangdalam merancang dan mengembangkan sebuah website profesional.Ada beberapa unsur yang mempengaruhi keberhasilan tersebut, diantaranya: mudahdigunakan, proses koneksi cepat, tampilan menarik, perpaduan warna sangat tepat,navigasi mudah dipahami dan digunakan, isi artikel sangat berguna, dan masih banyaklagi unsur lain. Semua itu bergantung pada respon pengunjung/pengguna terhadapwebsite yang kita buat.Saat ini website sudah menjadi salah satu bagian dari identitas sebuah institusi, samapentingnya dengan alamat perusahaan. Website dapat dijadikan “guide” bagi pelangganuntuk mengetahui lebih jauh tentang profil sebuah institusi secara online.Ada beberapa sofware yang dapat digunakan untuk merancang interface sebuah websitepribadi, diantaranya: Adobe Macromedia Firework dan Adobe Photoshop. Rancanganyang dibuat dalam Photoshop dapat disimpan menjadi html kemudian dapat diolehmenggunakan Adobe Macromedia Dreamweaver. Jadi anda tidak perlu lagi membuatkode html yang rumit dan panjang, cukup menggunakan perpaduan Adobe Photoshopdan Adobe Macromedia Dreamweaver.Bab 4. Proses Pengembangan4.1. Situs Pribadi4.1.1. Membuat Dokumen BaruGenerated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  2. 2. 4.1.2. Membuat Interface4.1.3. Membuat Tombol4.1.4. Menambahkan Efek Khusus4.1.5. Membuat Heading4.1.6. Menambahkan Image/Gambar4.1.7. Menambahkan Teks untuk Menu4.1.8. Memotong Gambar (Slice)4.2. Situs Bisnis4.2.1. Membuat Dokumen Baru4.2.2. Membuat Interface4.2.3. Menambahkan Efek pada Interface4.2.4. Membuat Tombol4.2.5. Membuat Heading4.2.6. Teknik SliceDengan melihat bentuk layout tersebut di atas, akan lebih mudah prosespengembangannya dalam Adobe Photoshop. Sebelum membuat dokumen baru, kita harusmengetahui bahwa tidak semua resolusi monitor pengguna sama dengan yang kita miliki.Sebagai contoh, resolusi monitor kita menggunakan ukuran 1024 x 768 pixel sedangkanpengguna (user) hanya memiliki resolusi 800 x 600 pixel. Apabila Anda membuat ukurandokumen 900 x 600 pixel maka menimbulkan ketidaknyamanan pengunjung karena harussering menggulung halaman website akibat ukuran dokumen terlalu lebar. Sebaiknyalebar 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).Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  3. 3. 4.1.1. Membuat Dokumen BaruDiasumsikan Anda menggunakan Adobe Photoshop 7, CS maupun CS2. Jalankanprogram 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 namadokumen baru tersebut (misal: Situs Pribadi), setelah selesai klik OK.2. Untuk mempermudah proses pembuatan interface situs, ada baiknya memasukkangambar bentuk layout ke dalam dokumen Adobe Photoshop. Anda dapatmenduplikasi (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 padakotak kode.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  4. 4. 5. Tekan tombol Alt+Backspace secara bersama-sama untuk memberi warna padalayer Background.6. Buatlah layer baru dengan nama “Up” kemudian aktifkan Rectangle Marqueetool dan buatlah seleksi seperti nampak pada gambar berikut.7. Tekan huruf D pada keyboard untuk mengubah warna default Foreground danBackground (Hitam dan Putih) kemudian tekan huruf X untuk membalik warnatersebut. Tekan tombol Alt+Backspace secara bersama-sama untuk memberiwarna putih pada layer “Up” . Tekan Ctrl+D untuk membuang seleksi.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  5. 5. 4.1.2. Membuat InterfaceBentuk interface yang bagus dapat membangkitkan “gairah” para penggunauntuk tetap menikmati berbagai berita dan informasi yang disajikan. Keunikanbentuk interface memiliki nilai tersendiri karena tidak semua orang memilikikemampuan untuk menciptakan bentuk tersebut. Berikut ini akan membahassalah 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 #ff5d6cpada kotak yang disediakan.5. Buatlah Shape menggunakan Pen tool dengan bentuk seperti nampak padagambar berikut.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  6. 6. 6. Aktifkan Convert Point tool untuk membuat efek lengkung.7. Klik pada segmen yang ingin diberi efek lengkung. Klik dan tahan sambilmenggeser salah satu convert point ke kanan secara perlahan agarmembentuk lengkungan yang diinginkan.8. Selanjutnya memilih segmen yang lain. Klik dan tahan sambil menyeretpointer ke kanan secara perlahan agar membentuk objek yang diinginkan.9. Jika telah selesai maka akan terbentuk sebuah asesoris modern sepertinampak pada gambar berikut.10. Aktifkan layer Shape 1, buatlah duplikat layer tersebut dengan caramengklik dan tahan sambil menggerakkan ke ikon Create New Layer.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  7. 7. 11. Jika berhasil, pada Palet Layer akan muncul hasil duplikasi layer tersebutdengan nama Shape 1 copy.12. Aktifkan layer Shape 1 copy kemudian tekan Ctrl+T untukmentransformasikan. Klik tombol mouse kanan dan pilih Flip Horizontal.Setelah selesai klik tombol Commit pada option bar atau dapat jugamenekan tombol Enter.13. Kurangi tingkat kepekatan (opacity) dengan cara menggeser slider padamenjadi 50%.14. Aktifkan Direct Selection tool.15. Buatlah seleksi untuk memilih dua buah segmen yang akan dipindahkansecara bersama-sama.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  8. 8. 16. Gunakan tombol panah ke kiri untuk menggeser dua buah segmentersebut.17. Langkah selanjutnya adalah membuat ilustrasi yang sama untukmemperindah tampilan. Buatlah duplikat layer Shape 1 sekali lagi dengancara menggeser layer tersebut ke ikon Create New Layer. Kemudianmodifikasi bentuknya menggunakan Convert Point tool sehingga akanmembentuk sebuah latar belakang yang modern. Ubahlah opacity-nyamenjadi 20%.18. Berikutnya, aktifkan Pen tool dan buatlah Shape yang berbentuk sepertigambar berikut.19. Seperti biasa, aktifkan Convert Point tool untuk membuat bagian yanglengkung.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  9. 9. 20. Sehingga akan didapatkan sebuah bentuk interface yang impresif.21. Duplikasi Shape 2 dengan cara menyeret layer tersebut ke ikon CreateNew Layer. Kemudian ubahlah bentuknya agar lebih menarik lagi. Untukmemodifikasi, gunakan Convert Point tool dan Direct Selection tool.Jika mengikuti petunjuk buku ini, bentuk shape akan seperti nampak padagambar berikut.22. Terakhir, aktifkan Rectangle tool.23. Kemudian buatlah Shape berbentuk kotak memanjang. Jangan lupamemberi warna Shape tersebut dengan kode warna #ea1c30.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  10. 10. 4.1.3. Membuat TombolSetelah sebelumnya membuat bentuk interface untuk halaman situs, langkah selanjutnyaadalah 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 empatbuah 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.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  11. 11. 6. Setelah kotak dialog Layer Style muncul, aturlah beberapa spesifikasi sepertinampak pada gambar berikut. Setelah selesai klik OK.7. Langkah selanjutnya adalah membuat beberapa duplikasi tombol tersebut dengancara menggesernya ke ikon Create New Layer.8. Buatlah tiga buah tombol lagi dengan cara yang sama seperti sebelumnya. Andadapat menduplikasi tombol yang sudah ada atau membuat tombol baru lagi. JikaAnda telah membuat tiga buah tombol, kira-kira bentuknya seperti gambar berikutini.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  12. 12. 4.1.4. Menambahkan Efek KhususInterface tersebut mungkin masih sangat sederhana, kita perlu memberi efek khusus agarterlihat menarik. Ada beberapa teknik ketika membuat efek khusus pada tombol (button)yaitu memberi warna putih agar kelihatan seperti “button gel” atau hanya memberikanefek shadow saja.1. Pertama kali aktifkan layer yang bentuk objeknya seperti nampak pada gambarberikut.2. Menuju ke palet Path, ubahlah path tersebut menjadi seleksi dengan caramengklik 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 akanterbentuk warna seperti nampak pada gambar berikut.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  13. 13. 5. Sekarang tekan tombol Ctrl+Shift+I atau pilih menu Select > Inverse untukmembalikkan posisi seleksi. Tekan huruf X untuk memilih warna Foregroundmenjadi Hitam.6. Arsirlah secara perlahan-lahan pada bagian yang lengkung menggunakan Brushtool sehingga akan memiliki efek bersinar dan muncul bayangan.4.1.5. Membuat HeadingUmumnya judul utama sebuah situs pribadi maupun perusahaan berada di bagian atas.Nama Domain dapat dijadikan sebagai judul heading dengan tujuan untuk lebihmengingatkan kepada pengunjung tentang alamat situs. Sebagai contoh, nama domainAnda : 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. Setelahkotak dialog Color Picker muncul, masukkan kode warna #ea1c30.3. Ketiklah judul heading, misal: Dixs-um.com, pilihlah jenis huruf (font) yang tidakberkait (Sans Sherif).4. Buatlah layer baru dengan nama “Color-head ”, kemudian buatlah seleksiberbentuk kotak menggunakan Rectangle Marquee tool.5. Aktifkan Gradient tool, kemudian pada option bar pilihlah tipe Linier. Aturlahwarna Foreground (#ea5765), dan Background (#ffffff).Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  14. 14. 6. Letakkan pointer di atas dan tarik ke bawah untuk membuat warna gradasi. TekanCtrl+D untuk membuang seleksi.4.1.6. Menambahkan Image/GambarGambar yang ditampilkan dalam sebuah situs dapat berupa foto maupun clipart. Padaumumnya, ilustrasi yang digunakan dalam bentuk fotografi karena memiliki beberapakelebihan 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 menempatkangambar (foto) pribadi seseorang dalam halaman utama. Baiklah, langsung saja kita akanmencoba melakukannya.1. Pertama kali bukalah foto yang akan dijadikan ilustrasi di halaman muka situs.2. Pilih menu Window > Arrange > Tile Vertically untuk menampilkan dua buahdokumen.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  15. 15. 3. Aktifkan layer yang bergambar orang, klik dan tahan sambil menyeret layertersebut ke dokumen Situs Pribadi.4. Jika gambarnya terlalu besar, ubahlah ukurannya dengan cara menekan tombolCtrl+T kemudian seretlah salah satu titik pegangan (handle) ke tempat tujuan.5. Aktifkan Horizontal Type tool, dan ketikkan beberapa kata sebagai identitassitus tersebut.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  16. 16. 4.1.7. Menambahkan Teks untuk MenuTombol-tombol yang telah dibuat tersebut belum dapat berfungsi sebagai menu karenatidak ada teksnya. Nah, pada bagian berikut ini kita akan mencoba menambahkan tekspada beberapa tombol yang telah dibuat agar dapat berfungsi sebagai menu.Menu tersebut dapat berupa mouse over maupun menu pull down. Jadi sebaiknya Andamemikirkan sejak awal sebelum memutuskan untuk memilih bentuk yang diinginkan.Apabila Anda mengikuti petunjuk dalam buku ini, bentuk menu yang akan dibuat adalahmenu pull down.1. Langkah yang pertama, aktifkan Horizontal Type tool kemudian buatlah area teksdengan cara mengklik pada tempat tombol sambil ditahan dan menyeretnya kebagian 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 MyriadPro 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 bidangsangat 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 adalahadanya teknik Slice. Dengan fasilitas tersebut, gambar akan secara otomatis terpotongsesuai dengan garis Slice. Anda tidak perlu memotong secara manual kemudianmenyimpan potongan gambar tersebut satu per satu.Hal yang perlu diperhatikan ketika memotong gambar adalah membaginya sesuaikeperluan saja. Artinya, jika gambar tersebut akan digunakan sebagai tombol menu makasebaiknya dipotong sesuai masing-masing judul menu tersebut. Misal menu Home harusGenerated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  17. 17. terpisah dari menu Profile. Jangan memotong gambar yang memiliki dua menu karenaakan mengalami masalah ketika mengeditnya dalam Macromedia Dreamweaver.1. Sebelum memotong gambar menggunakan Slice tool, kita memerlukan beberapagaris bantu untuk menandai bagian mana saja yang akan dipotong. Letakkanpointer pada ruler guide di sebelah kiri tangan Anda, klik dan tahan sambilmenyeret 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 dariruler guide di atas (horizontal ruler), sehingga hasilnya akan nampak sepertigambar berikut ini.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  18. 18. 4. Setelah tersusun beberapa garis bantu, langkah selanjutnya adalah memotonggambar tersebut menggunakan Slice tool. Kita harus memilih bagian mana sajayang perlu dipisahkan, dan umumnya semua tombol harus dipisahkan karenamemiliki fungsi yang berbeda. Sedangkan untuk bagian yang akan digunakansebagai latar belakang, sebaiknya tidak perlu dipisahkan. Untuk memotong bagiantersebut, pertama kali aktifkan Slice tool. Perlu diingat, setelah mengaktifkanSlice tool secara otomatis akan muncul angka 1 di sudut kiri atas. Hal itumemiliki 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 yangdiinginkan.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 untukmemotong gambar.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  19. 19. 9. Setelah memotong gambar tersebut secara otomatis akan muncul angka 3 dan 4.Hal ini dikarenakan Adobe Photoshop secara otomatis memotong pada bagianlain agar bentuknya tetap utuh. Anda dapat memotong gambar pada area yangtelah 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 lainyang telah ditandai dengan garis bantu.11. Lakukan dengan cara yang sama untuk memotong bagian lain sehingga akanterbentuk 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 tepatpada irisan sebelumnya agar tidak muncul irisan lain yang tidak diinginkan. Jikahal itu terjadi, hasilnya tidak akan maksimal dan tidak sesuai seperti yang kitaharapkan. Anda dapat memotong gambar yang terlalu besar menjadi beberapabagian agar proses koneksi lebih cepat ketika menampilkan gambar.14. Langkah selanjutnya, irislah tombol-tombol pada bagian kanan.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  20. 20. 15. Berikutnya, memotong gambar yang bukan berfungsi sebagai tombol.16. Untuk gambar yang akan dijadikan latar belakang, irislah menjadi dua bagian sajaseperti nampak pada gambar berikut.17. Begitu pula pada bagian lain, irislah gambar sesuai keperluan.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  21. 21. 18. Apabila sudah mengiris gambar menjadi beberapa bagian maka akan nampasepeti gambar berikut.19. Dan untuk langkah selanjutnya adalah menyimpan dokumen tersebut menjadiweb (Save for web). Pilih menu File > Save for Web.20. Maka akan muncul kotak dialog Save for Web. Klik tombol Save.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.
  22. 22. 21. Kemudian akan muncul kotak dialog Save Optimized As. Tentukan folder untukmenyimpan file kemudian beri nama file tersebut, misal index lalu pilih HTMLand 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 danfolder images yang berisi beberapa gambar yang telah dipotong menggunakanSlice tool.23. Tahap selanjutnya adalah mengeditnya menggunakan Adobe MacromediaDreamweaver untuk menambahkan teks dan membuat menu pull down agartampilan situs lebih menarik dan lebih profesional.Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.

×