Coding Your Design
Once your home page and inner pages designs are approved and finalized as Individual graphic elements (PSD files), they are transferred to the web development team to code the design into live and functional multi-device web pages.
Transitioning from Web Design to Coding
After completing the graphic design phase of a new website, the design files created need to be coded. Browsers and search engines use two primary languages to understand and properly present your pages: CSS and HTML. Other languages may be used for specific functionalities. JavaScript and Ajax are two common additional languages. “PSD to HTML” refers to the process of converting design files created in Adobe Photoshop to code, whether CSS, HTML, JavaScript or another language. Other image editing software may be used instead of Photoshop, and the process would remain the same. When Photoshop is used, these design files are PSD files, hence “PSD to HTML.” There are four steps to this process:
- Designing the website in Photoshop so that it looks exactly how the finished site should look
- Dividing the imagery into these PSD files with the slice tool
- Optimizing and exporting the sliced images for publication online
- Writing CSS and HTML that will correctly display the images into the page layout
Designing your website in Photoshop initially, before coding, makes it easy to experiment and find the perfect design for your site.
