8/4/2019 Modul Photoshop With Dreaweaver
1/10
Amiki | Muhammad Wali
Tutorial Membuat Web DenganPHOTOSHOP dan Dreamweaver
Sebelum kita memulai tutorial cara membuat website sederhana dengan menggunakan
photoshop dan dreamweaver ini, tentunya terlebih dahulu anda harus menginstal aplikasi
Photoshop dan Dreamweaver. Kedua aplikasi ini tidak gratis tapi merupakan pilihan yang tepat
untuk membuat project website, untuk membeli aplikasi ini anda dapat men-download-nya disitus resmi adobe yaitu www.adobe.com. Mari kita memulai project pembuatan website
sederhana apabila anda sudah memiliki kedua aplikasi tersebut. Berikut merupakan hasil dari
proyekWebsiteku
Membuat Desain Awal dengan Photoshop
jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu
gunakan setting berikut: Width : 1024 pixel Height : 764 pixel Resolution : 72 pixel/inch
Background Content : Transparent
Modul dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak
menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan
melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dariPenulis
8/4/2019 Modul Photoshop With Dreaweaver
2/10
Amiki | Muhammad Wali
Pilih rounded retangle tool pada tool panel
dan samakan setingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang
vertical seperti pada gambar dibawah dan samakan setingan dengan gambar dibawah kemudian
buat bidang berbentuk segi panjang vertical seperti pada gambar dibawah
Ubahlah warna sesuai keinginan anda pada tool sehingga shape berubah warnanya.
Selanjutnya buatlah 1 buah shape, seperti gambar dibawah ini
8/4/2019 Modul Photoshop With Dreaweaver
3/10
Amiki | Muhammad Wali
Dan pada Blending Option ubah seperti gambar dibawah ini :
8/4/2019 Modul Photoshop With Dreaweaver
4/10
Amiki | Muhammad Wali
Selanjutnya copy layer tersebut hingga menjadi gambar seperti dibawah ini
8/4/2019 Modul Photoshop With Dreaweaver
5/10
Amiki | Muhammad Wali
Ketik daftar menu gunakan Type Tool dengan lambang (T) pada tool panel
Sehingga gambar menjadi seperti :
Buatlah beberapa buah sehingga Hasil Akhir menjadi seperti ini
8/4/2019 Modul Photoshop With Dreaweaver
6/10
Amiki | Muhammad Wali
Kemudian Gunakan Slicetool
Bagi menjadi beberapa bagian sehingga Nampak seperti gambar berikut
8/4/2019 Modul Photoshop With Dreaweaver
7/10
Amiki | Muhammad Wali
pada opsi dibawah save, anda bisa menentukan format gambar yang akan di save mulai dari gif,
png, jpg.
apabila sudah memilih sebelum di save beri nama file anda dengan index, pilih opsi HTML and
Images, simpan layout anda pada satu folder yang anda beri nama Websiteku
8/4/2019 Modul Photoshop With Dreaweaver
8/10
Amiki | Muhammad Wali
Sampai sini design untuk layout dengan menggunakan photoshop sudah selesai dan selanjutnya
anda tinggal melakukan mark-up atas file index.html yang telah kita save tadi dengan
macromedia Dreamweaver
Set dengan DreamweaverSetelah desain web di-slice dengan photoshop, sekarang saatnya kita melakukan sedikit
modifikasi dengan menggunakan Dreamweaver. dreamweaver yang saya gunakan adalah
dreamweaver versi 8 padahal sekarang sudah ada lho yang versi CS 4, hihi. Langsung saja
jalankan aplikasi buatan Macromedia ini dan Anda akan melihat tampilan seperti gambar
dibawah ini:
buka file index.html yang telah kita save pada sesi photoshop dengan cara pilih File-
>Open setelah file index.html dibuka pada dreamweaver
Langkah selanjutnya kembalikan tampilan dreamweaver ke design view "Show Design View"kemudian isi bagian kolom content dengan hal-hal yang ingin anda publikasikan pada website
anda. setelah selesai save index.html, lalu save as dengan nama file yang berbeda desain.html
pada folder yang sama, save as lagi dengan nama file info.html dan yang terakhir
contactus.html. Sehingga kini anda memiliki 6 (empat) file html yang berbeda (semuanya harus
dalam folder yang sama).
Isi kolom content pada masing-masing file yang sudah anda buat sesuai dengan tema masing-
masing file.
8/4/2019 Modul Photoshop With Dreaweaver
9/10
Amiki | Muhammad Wali
Membuat Link
Klik Pada Tab Desain, setting pengaturan seperti gambar dibawah ini :
Lakukan cara yang sama, selamat Mencoba.
8/4/2019 Modul Photoshop With Dreaweaver
10/10
Amiki | Muhammad Wali
Top Related