Skip navigation
Currently Being Moderated

Saving png w/transparent background and blend mode

Apr 10, 2013 4:25 PM

Tags: #transparent_background #cs4; #layer; #blend_mode; #linear_dodge;

I have a logo that I want to layer on top of a background image that will together act as the header for the webpage.


The easy thing to do would be to create an image on photoshop layering the background image and the logo, with the logo blend effect, and then save and upload. Problem is that I want the background image to resize with the browser window - without resizing the logo.


Therefore, I figured I could save the background image and logo files separately, and then layer them using HTML and CSS. For it to look comparable therefore, I want to keep the background of the logo transparent. I would also like to set the blend mode of the logo to linear dodge (add) - so that whatever size the background image is scaled to, the logo remains the same size, with the same blend mode. The problem is that when I save the logo as a transparent png file (24-bit), it is not maintaining the blend mode.


What am I doing wrong?


(Photoshop CS4)

  • Currently Being Moderated
    Apr 10, 2013 4:39 PM   in reply to zchaen9kahjos

    You're doing nothing wrong. The PNG file does not store a blending mode. Maybe CSS3 will allow you to specify linear dodge (add).

    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 2:26 AM   in reply to zchaen9kahjos

    Blending modes are algorithms in the rendering device/ application (Photoshop, other image editors, browsers), not data. there is no way to retain them just by saving to a specific format. if you dumbed down PS and removed all belnding modes, it would behave just the same as your browser.



    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points