Back to Top
The nuts and bolts for
Creative web development

Code a Photoshop File to a Working Website

“Learn how to convert your PSDs to HTML”

In this PSD to HTML tutorial you will learn how to code a page In Adobe Photoshop. Michael John Burns is not really into coding, more of a design person and this is his first coding tutorial. He will try his best to guide you through the whole thing. He will be coding this from scratch and by the end you will have an awesome and fully functional page layout.

 

Michael John Burns knows that in converting PSD to HTML/CSS he will need to go back and forth in Photoshop (or other image editing tool) to measure the sizes, distance, and colours. So make sure you open up the PSD file in Adobe Photoshop. You will need to create a directory folder and inside of it you should have /images directory for images and /js directory for JavaScript. He placed the CSS file in the root folder including the HTML file. Also we need to export the images to be used in the PSD file. For example the The Logo, you will need to select the layer from the layers panel, copy and paste it in a different document and CTRL + ALT + SHIFT + S in order to save for web and devices, the appropriate file type for the logo should be .png.

Read the full article

Share this Article