How to Export PSD to CSS

by Foye Robinson

PSD is the file format for Adobe Photoshop files. Photoshop helps you generate cascading style sheets (CSS) for Web images. Displaying a large image on the Web slows down pages. So it's best to slice the image (divide it into smaller graphics) before the export. To save time, Photoshop lets you customize the naming convention for slices and specify how styles are referenced. You can export images with your CSS code or just export the code.

Open the image you want to export as a CSS in Photoshop.

Select the "Slice" tool from the Tools palette.

Place your mouse over the area you want to slice. Draw a box around the area and release your mouse to create the slice. Repeat this process to slice other areas of the image.

Select "File" and "Save for Web & Devices" from the menu. You are directed to the "Save for Web & Devices" dialog box.

Click "Save" to generate the CSS code. The "Save Optimized As" dialog box opens.

Change the "Format" drop-down option to "HTML and Images." Change the "Settings" drop-down option to "Other."

Change "HTML" to "Slices" in the drop-down list. Go to the "Slice Output" section and choose "Generate CSS." Set "Referenced" to "By ID," "Inline" or "By Class" for your CSS code. Choose a naming convention from the "Default Slice Naming" section.

Click "Save." The "Save Output Settings" dialog box opens. Name the output file, and click "Save" and "OK." You are redirected to the "Save Optimized As" window.

Double-click the folder where the code and images will be saved. Enter a file name and click "Save."

About the Author

Foye Robinson is a freelance writer and Web designer with Precision Web Crafting. She shares her love for family/relationships, fitness and Web design in her writing. Robinson holds a Bachelor of Science degree from Webster University and also writes miscellaneous articles and novels.