PSD to CSS Using CS3 and CS4

PSD to CSS Using CS3 and CS4

I’ve been skirting the mystical writings of CSS for many moons now. In fact, I still am, because I’m too lazy to hand code if I don’t need to. So with a little digging around I’ve found an easy way to export basic CSS from Photoshop. This is a feature that is buried under layers of other features within Photoshop – three layers to be exact. You don’t have time to read through pages of explanations so lets get rocking on this.¬†

First, I assume you already have a PSD that you want to “slice and dice” as I like to call it. If you are new to slices I suggest you get your learn on and do a couple practice runs so you feel comfortable working with slices beforehand. Once you’re up to speed with slices, you can start here. Okay so we have our document and we have our image slices all ready to go. All we need now is to get those slices output as images along with an HTML document that holds our CSS. Easy enough.¬†

Second, Once you have your document ready, go ahead and go to File –> Save For Web & Devices. Select the output settings your prefer – JPG, GIF, or PNG and click Save.¬†Next you’ll see a dialog box “Save Optimized As.” At the bottom of this dialog there are three settings – Format, Settings, and Slices. Under Format, you’ll need to select “HTML and Images” in the menu. The next selection down is “Settings” click the pop-up menu button and pull down to “Other…” – this will give you a new dialog box called “Output Settings.”¬†

Third, You’re going to see a series of pop-up menus – potentially confusing at first – don’t fret. Right below the first option marked “Settings” you’ll see the second pop-up menu – go ahead and click that. You’ll see HTML, Slices, Background and Saving Files. Select “Slices.” In this option you have a choice¬†of generating tables or CSS for your images slices. Click the CSS option – I have mine referenced by ID. Because you arrived at this tutorial and you probably want to use this setting often, go ahead and save yourself some time and save this option so it shows up in your menu all the time. Click the “Save” button to the right and name your file “CSS.iros” and click “Save.” Now click “OK.”

Lastly, you want to make sure you are outputting all your slices. Go to the last setting labeled “Slices” and select “All Slices” from the menu. Your setting should look like this.

New Settings

New Settings

Now click “Save”. You should now have an images folder with all your images and an HTML file with all your CSS. You can now make a separate CSS¬† file by cutting your CSS from your HTML and pasting it into a new .css document. I don’t do CSS tutorials so you’ll have to check with other resources like Webmonkey¬†for an extensive explanation.

I’m curious to know if this worked well for you, I don’t do tech support but send me an email and let me know if this helped you out.

admin -

Comments are closed on this post.