4

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?

Improve this question
2
  • Place the background ayers in a Layer Group then just hide the group?
    – Scott
    Oct 13, 2013 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, 2013 at 8:12

1 Answer 1

Reset to default
3

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

Improve this answer
1
  • 1
    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, 2013 at 6:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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