Using photoshop export to html,image and css

Semoga anda semua sihat dan dalam keadaan yang happy..

Pada hari ini penulis nak berkongsi dengan anda semua bagaimana menggunakan photoshop untuk menghasilkan file html, image dan css.

Pernahkah anda terfikir bagaimana seorang designer menghasilkan web dari design yang di buat menggunakan photoshop???

Ikuti langkah2 yang penulis akan terangkan ...


1. Langkah pertama anda buat satu design templates sebagai contoh di bawah menggunakan photoshop. Seterusnya anda perlu menggunakan tool slice untuk slice templates seperti contoh di bawah.


2. Seterusnya, Anda klik pada "file"-> "save for web dan devices" seperti gambar di bawah.



3. Kemudian anda paparan di bawah akan dipaparkan. Pastikan anda klik pada "4-Up" dan "save".


4. Selanjutnya, Paparan di bawah akan dipaparkan dan klik pada setting->other.


5. Setelah anda klik pada other->Paparan dibawah akan dipaparkan. Dengan ini anda pastikan Output HTML di tick dan Setting=custom. Kemudian klik Next.



6. Seterusnya Paparan dibawah ini akan dipaparkan dan anda perlu tick pada Generate css. Kemudian klik "OK".



7. Simpan nama file html anda contohnya index seperti di bawah dan "save" di dalam folder yang anda inginkan. Pastikan Save and type=html and image.


8. Kemudian buka folder yang anda simpan terhasil nama file index.html dan satu folder images. Buka file index menggunakan browser IE, firefox atau crome.


9. Hasilnya


10. Untuk melihat coding html dan css anda perlu buka menggunakan tool editor seperti dreamweaver.




11. Hasilnya seperti di bawah. Anda boleh lihat photoshop boleh hasilkan code css.



Semoga tutorial ini memberi manfaat kepada programmer dan designer untuk meningkatkan skill anda.

semoga berjaya..