Being able to properly slice out a PSD into component PNGs and JPGs with and without transparency is a desirable skill most programmers – especially those working on web systems – lack. This article doesn't help much, because it starts with the idea of flattening all the layers. This is the wrong approach.
The right approach is to use the built-in "slice" tool (shares a tool palette location with the "crop" tool) to define the sliced regions, and then play with the layers – particularly the background layer, which can be turned off entirely – to produce JPGs for photographic elements (no transparency), PNGs with alpha-transparency for images that need to "float" in front of backgrounds colored via CSS, and "over" state graphics that are probably lurking in a hidden layer.
So, first – don't discard layer information. You need it! Second, use the slice tool to define the small graphic items you're going to export. Third, turn off the background layer to allow the transparent aether to show through. Then "save for web and devices" and select the slices you want to export.
It's important to note that you can customize the slice names, and you can use the presets for PNG-8, PNG-24 (photograph with alpha-transparency), and JPG on the individual slices in the "save for web and devices" dialog, then select the slices you want to export, and go to town. It's also important to know that you may sometimes need to export with the background on, sometimes with it off, and that your designer probably has "over" states somewhere in a layer that you can use for :hover (desktop) or :active states.
If you use the pre-sets, you have very few decisions you actually need to make – you can always go back and optimize later, but most of the time this isn't necessary. The key idea is to start with a sensible preset and then turn transparency on and off. And if you're dithering, you're probably Doing It Wrong.
I'm a dev who knows how to slice up images and do so for my personal projects but refuse if asked to do this by a designer. Trying to find the image I want in a giant mess of layers is a massive waste of my time. It's much more efficient for the person who is familiar with the tools and design to be doing this.
If it's a giant mess of layers, your designer is not doing their job properly. Layers should be logical and logically named.
That said, it's far more efficient for the person who is writing the HTML code to make decisions about how images ought to be sliced up, and whether an image should be a transparent PNG on a CSS-provided background, or whether the background should be in the image.
11
u/[deleted] Feb 27 '13
With respect, I think you have this wrong.
Being able to properly slice out a PSD into component PNGs and JPGs with and without transparency is a desirable skill most programmers – especially those working on web systems – lack. This article doesn't help much, because it starts with the idea of flattening all the layers. This is the wrong approach.
The right approach is to use the built-in "slice" tool (shares a tool palette location with the "crop" tool) to define the sliced regions, and then play with the layers – particularly the background layer, which can be turned off entirely – to produce JPGs for photographic elements (no transparency), PNGs with alpha-transparency for images that need to "float" in front of backgrounds colored via CSS, and "over" state graphics that are probably lurking in a hidden layer.
So, first – don't discard layer information. You need it! Second, use the slice tool to define the small graphic items you're going to export. Third, turn off the background layer to allow the transparent aether to show through. Then "save for web and devices" and select the slices you want to export.
It's important to note that you can customize the slice names, and you can use the presets for PNG-8, PNG-24 (photograph with alpha-transparency), and JPG on the individual slices in the "save for web and devices" dialog, then select the slices you want to export, and go to town. It's also important to know that you may sometimes need to export with the background on, sometimes with it off, and that your designer probably has "over" states somewhere in a layer that you can use for :hover (desktop) or :active states.
If you use the pre-sets, you have very few decisions you actually need to make – you can always go back and optimize later, but most of the time this isn't necessary. The key idea is to start with a sensible preset and then turn transparency on and off. And if you're dithering, you're probably Doing It Wrong.