Transparent partial slicing in Photoshop

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?


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

Source : Link , Question Author : Maya Kathrine Andersen , Answer Author : DᴀʀᴛʜVᴀᴅᴇʀ

Leave a Comment