membuat web statis dengan photoshop dan image ready

11
Membuat web statis dengan photoshop CS 3

Upload: abdul-rahman

Post on 13-Jun-2015

604 views

Category:

Documents


9 download

TRANSCRIPT

Page 1: Membuat Web Statis Dengan Photoshop Dan Image Ready

Membuat web statis dengan photoshop CS 3

Page 2: Membuat Web Statis Dengan Photoshop Dan Image Ready

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

Page 3: Membuat Web Statis Dengan Photoshop Dan Image Ready

Halaman utama

Page 4: Membuat Web Statis Dengan Photoshop Dan Image Ready

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

Halaman About Halaman gallery

Page 5: Membuat Web Statis Dengan Photoshop Dan Image Ready

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

Page 6: Membuat Web Statis Dengan Photoshop Dan Image Ready

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

Page 7: Membuat Web Statis Dengan Photoshop Dan Image Ready

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 )

Page 8: Membuat Web Statis Dengan Photoshop Dan Image Ready

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 )

Page 9: Membuat Web Statis Dengan Photoshop Dan Image Ready

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 )

Page 10: Membuat Web Statis Dengan Photoshop Dan Image Ready

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

Page 11: Membuat Web Statis Dengan Photoshop Dan Image Ready

SELESAI

Jika ada kesulitan bisa tanya lewat Face book : [email protected]