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..

css box tema warna biru

Artikel ini membuat box yang bertemakan warna biru.
Code dan hasilnya :

.codeboxBlue{
margin: 10px 42px 10px 0;
padding: 0 10px 10px 10px;
border: 2px dashed #8FCCF5;
background-color: #DCEEFA;
}

tutorial memasang Codebox di blogspot

Login->layout->Edit HTML->tick Expand Widget Templates.

tekan keyboard anda ctrl+f dan taip head. Apabila jumpa perkataan head dalam edit html tersebut anda lihat code selepas head tersebut yang mengandungi code css seperti

Code css terletak antara code pembuka head dan penutup head



Lihat gambar





#navbar-iframe {
code here
}


.alert {

code here

}




Mungkin code css berbeza namun saya nak tunjukkan kepada anda bahawa untuk mengenali code css ini amat mudah iaitu ia mengandungi tanda #, pembuka { dan penutup } dan . seperti yang saya tunjukkan di atas dan anda boleh juga lihat gambar yang saya sertakan.

Kemudian anda letak code css box yang anda buat sebagai contoh

.codeboxBlue{
margin: 10px 42px 10px 0;
padding: 0 10px 10px 10px;
border: 1px dashed #8FCCF5;
background-color: #DCEEFA;
}

Selepas itu simpan dan pergi ke posting. Pastikan semasa anda menulis posting guna mode edit html seperti gambar di bawah. Kita gunakan code p untuk memanggil sifat atau properties css yang kita buat di templates. selepas siap anda menulis posting simpan dan lihat hasilnya.



Lihat hasilnya pada posting sebelum-sebelum ini. sekiranya anda ada masalah boleh bertanya di ruang komen. selamat mencuba :)

code ii : Bina box css

Artikel ini pula akan mendedahkan kepada anda untuk membina box css yang tema yang berwarna hijau pula. Kalau anda perasan codenya adalah sama dengan code sebelum ini cuma di tukar dengan code warna yang berbeza. Jadi anda boleh menukar tema warna kegemaran anda sesuka hati dari code yang saya berikan. selamat mencuba.

Code dan hasilnya :

.codeboxHijau {
border:2px dotted #AEE329;
padding:0em 1em;
background-color: #CFFF40;
margin-bottom:1em;
}

selamat mencuba :)

code : Bina box menggunakan css

Artikel kali ini saya ingin kongsikan dengan anda untuk membuat box dengan menggunakan css. Dalam artikel ini sertakan sekali dengan code css. Lihat hasilnya di bawah ini.

Codenya :

.codebox {
border:1px dotted #FF4FFB;
padding:0em 1em;
background-color:#FCFBC4;
margin-bottom:1em;
}