BUAT OVERLAY LAYOUT MYSPACE

Setelah setahun aku mula menjinakkan diri dalam dunia MYSPACE,skang aku kembali memberi kod2 yg lame aku gunekan tuk decorate page MYSPACE korang…memula pening gak nak buat,sebab baik group dalam MYSPACE aku banyak lagi link2 kuat ke tutorial Overlay ni…kalo nak cari tutorial dia,mmg bersepah skang…ramai dah gunakan Overlay ini tuk cantikkan page sendiri…sesiape yg malas,mmg susahla…

ok…kat sini aku nak sertakan tutorial yang aku jumpe…follow je step2 dia….(aku amik tutorial ni kat salah satu group myspace aku dari united kingdom)

Keperluan:

- Adobe Photoshop

- Adobe ImageReady (sekali dengan photoshop)

- sedikit skill photoshop.

- Bace tutorial sampai paham.

- hosting image.




Perlu ingat:

- Pastikan buat tutorial ni dalam keadaan selamat.

- Profile layout untuk kegunaan sendiri

- Pastikan “interests & about me” kosong

Proses Merekabentuk DIV Overlay

1. Buka photoshop dan buat dokumen baru. pilih saiz 640×480 (saiz ni cukup untuk membuat layout Div Overlay yg simple)

2. Sekarang, buat sesuatu diatas page korang. Sekiranya anda kurang mahir menggunakan photoshop,disarankan menggunakan “shape tools” (untuk lukis sesuatu), menggunakan gambar sendiri, gune “text tool” utk menulis sebarang keterangan diatas page myspace korang nanti. contoh

3. Selepas selesai design,switch ke imageready..(tekan je button trnsfer.)

4. Didalam Imageready, gunakan “slice tool”. Sekiranya korang tak biase dengan slicing ni, korang dinasihatkan membuat kotak diaats dokumen page yang korang tengah buat tu. layout korang tadi akan terbahagi kepada berberape pecahan gambar kecil.

5. Pastikan slice gambar yang korang buat terpecah, ini untuk memasukkan link2 untuk page korang kedalam “Image ready’ slice propertise”. Contoh

6. Selepas habis slicing, pegi File → Output Settings → Slices .Pastikan setting dia camni

7. Sekarang, pegi File → Save Optimized As dan save file korang dengan setting ni plak

Coding & Plugging

1. Upload semua images yang digenerate oleh Imageready ke web host.

2. Buka HTML file yg digenerate dengan Imageready, pastu ubah URLs didalam image tag dengan url image yg korang upload.

3. Di dalam file HTML, sace sumer kod diantara

dan

4. Copy and paste kod ni kedalam “I’d Like To Meet”

Download code Here

korang boleh edit:

The ImageReady code from Step 3 (tulisan merah)

Background Color. Add background-image:url(’URL’); instead for a background image. (tulisan biru)

Headings, comments, timestamp colors. (tulisan hijau)


Navbar and other link colors. (tulisan kuning)

5. Siap ..layout korang akan jadi seperti Ini

SELAMAT MENCUBA KAWAN-KAWAN KU YANG DI SAYANG SEMUA.....ANAK SAPO LA NI!!!!!