Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am trying to fix some issues I have with Photoshop as a web developer creating graphics for web. I'm using Photoshop CC/14 and have previously used Fireworks.

I have a "button" layer on top of a lot of background layers. The button has a feathered border.

How do I easily export the graphics for this button without all the background layers and instead a transparent background?

I could hide all the background layers and then create a layer slice which then is easy to export. But hiding all the background layers every time I need to do that seems stupid.

What's the smart and brilliant way to do this I have overlooked? alternatively just explain how you normally do it?

share|improve this question
Place the background ayers in a Layer Group then just hide the group? – Scott Oct 13 '13 at 20:45
This is a simple example. Re-arranging layers can always solve it this way, but some times the document is a bit cluttered so it would be easier with a solution that just focused on the specific layers. – Maya Kathrine Andersen Oct 14 '13 at 8:12
up vote 2 down vote accepted

I have three suggestions:

Method 1 - Using Layer Comp + Slice tool

With Layer Comps you can save the visibility of your layers. To do this, first locate the Layer Comps panel (Window > Layer Comps), create a New Layer Comp, name it for example 'Demo', then hide all the background layers, create another layer comp and name it e.g. 'Slice Ready'. Then use the slice tool (Won't explain this as it seems like you already know it). Whenever you want to export (File > Save for Web & Devices...) you select the Slice Ready layer comp first.. Then easily select the 'Demo' layer comp to revert back..

Method 2 - Deep knockout + Slice Tool

Assuming that all the button is above the background layer, create a solid black layer just below the button (but above the background layers). Right click the solid black layer, pick Blending Options..., under Advanced Blending set Knockout to Deep, under Blend if, This Layer drag the black knob a bit to the right, the background should now disappear. And again, use the slice tool to export the buttons..

Method 3 - Smart Objects + Save each object

This will probably not be your best choice if you're having several buttons, but want to mention it anyway.. Convert a button to a smart object by selecting the layers for one button, right click on it and press Convert to Smart Object. Open a smart object by double clicking on it. After converting a button to a smart object you would save it as a .png, .jpg or whatever format you want..

share|improve this answer
TY. I like the flexibility of Method 1. The ultimate(but non-existing) way for occasionally exporting single graphics(with transparent backgrounds) and not an entire slice-up: 1. Select the layers to export for web 2. Click "Save to web" 3. A preview is shown with a cropped version of the document showing only the contents of the selected layers. 4. Optimize settings 5. Save – Maya Kathrine Andersen Oct 16 '13 at 6:38

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.