0

I've got a PSD of a shirt mockup that has several effect layers for highlights and shadows, and then layers for shirt colors.

What I'm trying to do is use this in a web based editor where I can programatically set the background color without having to load a separate image per color - the base PNG would be an overlay allowing the color to show through.

I need to save the mockup to a transparent PNG with no shirt colors - just the highlights and shadows.

However, when I do save as a PNG or save for web as PNG with none of the shirt color layers visible, the resulting PNG doesn't maintain the transparency.

Here's the sample file: https://www.dropbox.com/s/f1j5bj4nk48l9l0/tee-mockup.psd

The shading group is set to passthrough, and the layers in it are set to color dodge, screen, color burn and multiply.

I can't for the life of me how to save this as a PNG with transparencies/layer effects intact. I know this is possible because many online editors are using mockups just like this. Is there a specific method for doing this? Any help is greatly appreciated. Thanks!

Improve this question
2
  • Hey Pat, welcome to GDSE and thanks for your question. If you want to know more about the site, please see the help center or ping one of us in chat once your reputation is sufficient (20). Keep contributing and enjoy the site!
    – Zach Saucier
    Apr 12, 2015 at 18:56
  • Hey Pat, the link you've provided gives me a 404 Not Found error, could you please check if it's correct?
    – Sergey Kritskiy
    Jan 19, 2020 at 19:38

2 Answers 2

Reset to default
1

Blending modes within Photoshop do NOT translate to PNG format. It is not a matter of "how". It is a matter if it being impossible based on current technology.

In order for a PNG to work properly all your Photoshop layers need to be set to Normal for the blending mode. This means you need to avoid using any blending modes when setting things up in Photoshop.

Blending modes use inter-layer calculations to formulate an appearance.
Essentially Photoshop does a calculation:
(this pixel / blending mode) + Underlying pixel = appearance

In the PNG format, there is no inter-layer communication. Within a PNG everything is 1 layer and a pixel is a color and an alpha, that's it. You can't tell a PNG to "alter color of this pixel based upon the pixel underneath it" because the PNG isn't aware of any pixel underneath it.

In short, you just can not achieve inter-layer interactions using PNG images. If using PNGs for highlights and shadows the best you can do is create dark and light pixels then adjust the alpha for those pixels but you just can not use blending modes.

Improve this answer
5
  • Thanks for the info. Unfortunately, I don't have a choice in how the layers are set up - the client provided a mockup PSD in the same format/layout as the example PSD I shared. What I need to know is how to get the PSD exported to NG format so that the shadows/highlights of the mockup still have transparency. Thanks for any advice.
    – Pat Friedl
    Apr 13, 2015 at 0:35
  • @PatFriedl As I posted... you can't. Current technology will not allow you to save a PNG with blending modes. You have no choice but to alter the psd and even then, you will never get the same appearance as using blending modes in Photoshop. it is just not possible. It's not a matter of proper steps. What you (or your client) is asking is impossible.
    – Scott
    Apr 13, 2015 at 0:44
  • For the record, the other "online editors" use multiple images... an image for each color of a garment. Or they are using things like Flash and SWF in some cases. They are not overlaying a PNG on a colored background.
    – Scott
    Apr 13, 2015 at 0:53
  • Actually, they aren't - teespring.com, teechip.com, represent.com and many more all use an image very similar to what's in the PSD I shared. Here's the overlay image used on Teepsring's editor: d1b2zzpxewkr9z.cloudfront.net/images/products/apparel/… And this is the one used on Represent.com: d2v48i7nl75u94.cloudfront.net/blanks/thunder/… If you save those images off, you'll see that they're overlays. So I know this can be done, I'm just not well versed enough in PS to pull it off. Thanks
    – Pat Friedl
    Apr 13, 2015 at 12:41
  • Yeah.. as I stated dark and light pixels with an alpha... not blending modes.
    – Scott
    Apr 13, 2015 at 17:07
0

You have to set the opacity of each layer in normal blending mode to a value which makes the nearest effect if it could be on its blending mode. Insert a background layer with the same color or image as the website background and you can check easely the effect but when you save the whole psd into png, do not forget to make the background illisible.

Improve this answer

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.