membuat web statis dengan photoshop dan image ready

Membuat web statis dengan photoshop CS 3

Pembuatan layout halaman

• Pilih file new, gunakan ukuran kertas 1024 X 768 pixel

• Buat layout yang diinginkan( dengan menu utama minimal : Home, About, dan Gallery ) menggunakan software photo shop

• Dan beri nama halaman utama.psd

Halaman utama

Buat 2 halaman lagi masing masing untuk about.psd dan gallery.psd

Halaman About Halaman gallery

Membuat Slice Pada Photoshop CS 3

1. Gunakan Slice tool untuk membuat slice pada tombol tang akan di buat (mis pada text : Home, Gallery dan About me )

2. Slice pada home, gallery dan about me

Slice ToolSlice Tool

3. Gunakan Slice Select tool untuk memilih seleksi (dengan cara menekan Slice tool sampai keluar flyout dan pilih slice select tool ) dan seleksi slice home, Gallery dan About me

4. Klik Slice Option pada tool option bar ( pastikan yang anda pilih adalah slice select tool )

Slice OptionSlice select

tool

Pada Halaman Utama

Dan ISIKAN•HOME,

•URL : index.html•Target : _Self ( open) /_blank ( open new tab )

• Gallery •URL : gallery.html•Target : _Self ( open) /_blank ( open new tab )

• About• URL : about.html•Target : _Self ( open) /_blank ( open new tab )

Catatan : Pada Message Text dan ALT Tag boleh di isi atau tidak (untuk sementara di kosongkan saja )

Menyimpan halaman utama dengan nama index.html

• Setelah selesai pengeditan Halaman utama simpan untuk halaman web dengan memilih file --> Save for web and device, setelah muncul kotak dialog, pilih save pada file name isikan index.html ( pastikan pada save as type berisi HTML and Image )

Lakukan Hal yang sama pada halaman GALLERY dan ABOUT

•Pilih Slice tool dan slice pada Area HOME, Gallery, dan About•Pilih Slice select tool untuk memilih obyek dan isikan :

•HOME, •URL : index.html•Target : _Self ( open) /_blank ( open new tab )

• Gallery •URL : gallery.html•Target : _Self ( open) /_blank ( open new tab )

• About• URL : about.html•Target : _Self ( open) /_blank ( open new tab )

Menyimpan Dengan Format *.html

• Setelah selesai pengeditan galery dan about, selanjutnya simpan dengan format html dengan memilih

• File --> Save for web and device– Halaman Utama simpan dengan nama : index.html– Halaman Gallery simpan dengan nama : gallery.html– Halaman About simpan dengan nama :about.html

• Catatan : pada save as type pilih Text and Image

SELESAI

Jika ada kesulitan bisa tanya lewat Face book : djogja777@gmail.com