How to Export PSD to CSS

Save

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."

References

Promoted By Zergnet

Comments

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!