Konversi Desain Photoshop jadi kode HTML

Setelah beberapa waktu sebelumnya kita belajar membuat desain sederhana laman website (sekolah) dengan Photoshop, kita akan melanjutkan lagi hingga desain tersebut menjadi file HTML dan CSS besertanya assetnya (gambar) yang bisa diakses dengan browser.

Karena Prosesnya cukup panjang, video panduannya dibagi menjadi tiga:

1 . Slicing images dan struktur layout web, proses pemotongan gambar dalam file PSD menjadi beberapa foto kecil yang akan disematkan dalam tag ‘img’, juga pembuatan struktur layout laman website dan style dasarnya dengan HTML dan CSS

2 . Styling: melengkapi kode CSS agar laman website menjadi semirip mungkin dengan desain aslinya dalam file PSD, hal ini mencakup: navbar (menu navigasi), logo, caption (ketengan pada tiap gambar).

3 . Finishing: pembenahan dan koreksi pada kode CSS yang ditulis dalam video panduan sebelumnya, seperti penambahan warna background gradasi, warna background transparan pada caption, penyesuaian padding dan sebagainya.

Mudah-mudahan dengan serial singkat ini, kamu bisa punya gambaran alur pembuatan website khusunya pada proses konversi desain Photoshop menjadi file HTML dan CSS. Happy Practicing…

Comments