WARNING!!!
Tutorial ini dibuat dengan memakai PhotoShop 7.0. Tidak di rekomendasikan
Untuk versi dibawahnya. Gunakan kreatifitas kalian untuk memperbagus tampilan
Sesuai keinginan kalian.

How to make Web layout

Part 2 (ImageReady 7.0)

1. Mohon maaf karena keterlaluan dalam hal keterlambatan dalam memposting part 2. Karena kita masih pelajar dengan waktu yang amat sibuk melebihi nenek-nenek yang ngemut sirih. Maka baru tahun ini kami bisa memposting.

Note: Untuk Part 2 gak pake gambar bantuan. Untuk itu kami mohon maaf bila susah dimengerti (moga aja gak).

2. Saat dokumen layout kalian di Photoshop aktif tekan CTRL+SHIFT+M atau klik file  jump to  Image Ready 7.0.
3. Setelah proses loading image ready beres, pastikan pallete image map aktif dengan cara klik pada menu window  image map dan dia akan muncul jadi satu sama pallete animation dan slice. Tapi, kalau pada AIR CS2 pallete animation dipisah.
4. Setelah itu pilih Rectangle Image Map tool (kotak dengan gambar tangan lagi nunjuk) atau tekan aja “P”. Lalu buat bentuk persegi di sekeliling tulisan yang akan dijadikan Hyperlink (pada kasus ini tulisan “HOME”,”NEWS”,”GALLERY” dll)
5. Selanjutnya tabel Image Map akan aktif (sadarilah!).
6. Karena Tabel Image Map sudah aktif, maka kita bisa mengedit kolom Name, URL, Target dan ALT. Pada kolom name isikan sesuai teks yang kita buat jadi Hyperlink (Home namenya Home, News namenya News, dll).
7. Nah, intinya ada pada kolom URL, ketikkan URL yang sesuai dengan link yang akan dituju. Misalkan saja pada HOME kita isi http://www.death-indo.blogspot.com maka pada saat kita klik HOME akan tersambung ke link tersebut. Misalkan saja lagi, pada kolom DOWNLOAD kita isi http://www.death-indo.blogspot.com/download.php maka seperti halnya pada HOME, kita akan tersambung ke website tersebut.

Note: Tentu saja pada saat kita isikan alamat website pada kolom URL web tersebut benar-benar ada dalam internet.

8. Untuk kolom target pilih “_SELF”
9. Kolom ALT untuk saat ini kosongkan saja.
10. Lakukan langkah nomor 4 – 9 pada teks yang akan di jadikan link lainnya.

Note: Untuk memudahkan dalam pengeditan Link. Pilih Window  Rollovers pada AIR 7.0 dan Window  Web Content pada AIR CS2. Di situ akan ditampilkan mana saja link yang telah / akan kita edit secara berurutan.

11. Setelah semua selesai hal selanjutnya adalah men-Save-nya menjadi format HTML. Klik menu File  Save Optimized as, eit! Jangan main enter dulu, ubah Save Type-nya menjadi “HTML and Images” dan Settings-nya menjadi “Default Settings” setelah itu baru enter. Saya sarankan disimpan di desktop dan di desktop tidak ada folder dengan nama “Image”.
12. Selanjutnya kita beralih ke desktop. Jika anda menyimpan di desktop maka folder image akan berisi gambar layout web anda dengan format .gif. Oke, file gambar itu segeralah di Upload (rekomendasi kami adalah upload di photobucket.com)
13. Selanjutnya , jika anda menyimpan di desktop maka file HTML (entah dengan icon mozilla atau IE) yang telah disimpan kita klik kanan  Open With  Notepad / Wordpad.
14. Tada! Kita beralih ke HTML coding. Sebelumnya telah dijelaskan tentang HTML (lihat posting sebelumnya) dan yang perlu diubah disini adalah link [IMG SRC=”ini yang di edit”] dan [……..HREF=”ini yang diedit”].

Note: Untuk [IMG SRC=””] isikan dengan direct link biasanya akhirannya adalah .gif , .jpeg , .png. Kalau untuk photobuket langsung ada keterangan Direct Link.
Untuk [……HREF=””] di edit bila ada kesalahan penulisan.

15. HORE! Selesai juga Tutorial Web Layout! Kalau ada yang gak beres bisa kontak atau bertanya atau berbicara atau komen langsung di sini. Tidak menerima dalam bentuk surat pos, paket kilat, e-mail spam, kata-kata kasar maupun majas Ironi atau Sarkasme.