A Web Designers Journey Through Life and Business.

This is an tutorial on how to take a template in Photoshop and Export it to HTML and CSS!

First things first, lets get a basic template created! This tutorial is not to teach the advanced applications of photoshop other then the slice tool. Basic to Advanced Photoshop skills are assumed when viewing this tutorial.

Step 1: Template Setup
Using the pen tool and shape tools make a basic template you would like to use for your website. I am building something very simple to get the point across. The picture on the left is the basic template I created for this tutorial.

Step 2: Slice Template
Using the slice tool cut the images into sections that you would like to be the separate div’s. For example your banner, your navigation and your content will all need to be separate slices.

Do this buy selecting the slice tool as shown by the image. Then make a box around the selected area.

Step 3: Getting Ready to Export

Ok now we have a sliced photoshop template! Congratulations, now we want to export it so we get some HTML and CSS.

Go to File > Save for Web this will bring up a dialog box that lets you change the way your files are exported. If you want to have some transparency I would use PNG’s and if you don’t care JPG’s are where it’s at.

Ok so you have by now hopefully changed all your slices to the correct file type and are ready to export. Click Save and then a dialog box will pop up.

*Important* Before you export we need to change some settings to the output settings! So in the dialog box that is labeled ’settings’ select the ‘Other…’ option and when you do this another dialog box will pop up. On the drop down menu select ‘Slices’ and click the ‘Generate CSS’ option and make sure the drop down menu says ‘By Class’.  I would recommend saving this setting so it may be used for the future.

Now that we have the settings correct we can now export! Select the directory you want to save the files to and click ‘Save’ and your done!

If you have any further questions please feel free to post them in the comments section!