Monday, February 16, 2009

Small steps to code your Big design

There are many tutorials one could find over the Internet but to understand those prototypes, you need to have the basic knowledge of coding. I would try to answer the question "How to convert a PSD into validate CSS/HTML/XHTML", but for that you need to focus and spare sometime to this article. So they normally outsource their coding part and keep themselves intact with designing only. For those who are not familiar with the "the know how" of HTML coding, this article can be a little help for them. It is not hard to convert your design into validate CSS/HTML/XHTML markup, but what makes the difference is how well you are able to do it! Because at last, it is the "quality" of your coding which brings out the performance of the web page, and the reason for which any designers outsource their coding part to some professional. Ex: - If your web page contains many pictures, it would take time to load, but using CSS code with either HTML or XHTML will make it fast. Now, this is the final step. Save the result using "save optimized", inside the file menu. The job is done; image ready will create an "image" folder with all sliced images and html file containing all source codes. If you wish to see or edit the code, just open the file in your browser and display the code. Extract the code generated by Photoshop or image ready. You are done now, your codes are with you but you might need to modify them with your own and nip some part of it. Now if you think that you got it right and this article delivered you some valuable knowledge on slicing and HTML conversion, then you can surely dissect your web design and experiment it on a web site.

2 comments: