I've put some nice effects on a layer in Photoshop, and the effect is repeated across several layers. Now, I have to cut it up for the web, and I want to be efficient with how I display the effect.

For example, I had an outer glow for a quiz game I had to use for a bunch of images, and could be switched on/off. So instead of exporting each image with/without, I can just export it separately and use it/not on each image.

How do you separate the layer from its effects, so you can export only the effects?

  • I was just thinking some styles can be made with CSS, no images required. You could do an outer glow using the box-shadow property. – Hanna Oct 17 '13 at 17:55
  • 1
    In an ideal world, for sure; but in one where we have to support IE8 and the glow has meaningful information, not so much. How I abhor IE. – jonallard Oct 17 '13 at 19:26
  • but you can support glows in IE with CSS3 Pie or Modernizr – DᴀʀᴛʜVᴀᴅᴇʀ Oct 17 '13 at 20:57

Another way to do it would be:

  1. Create New Layer.
  2. Set Fill Opacity to 0%.
  3. Right click the layer in the Layers panel that you want to isolate layer styles from and select Copy Layer Styles.
  4. Right click the new layer and select Paste Layer Styles.

I only mention this method because the Copy/Paste Layer Styles has more than one use and could be helpful for your workflow in other tasks.

An even simpler method specifically for your case would be to just right click the layer, select Duplicate Layers.. and then lower the Fill Opacity to 0% on the duplicated layer.

Simplest of all.. set the original layers Fill Opacity to 0% and export/save it and then set it back to 100% if necessary; with this method the project file size would be smaller (assuming that you want to save it when finished).


How to separate layer styles on to their own layers? has the answer in the question. I also came across Photoshop Tip: Isolating Layer Styles that explains it with screenshots.

Select the layer. Go to Layer > Layer Style > Create Layers. There you go!

  • 1
    Your link may solve the issue in hand but can you post a little about the link encase the site goes down and to prevent a dead link? – DᴀʀᴛʜVᴀᴅᴇʀ Oct 17 '13 at 16:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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