Saving png w/transparent background and blend mode

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)

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

Similar Messages

Saving image with transparent background for web/Dreamweaver

How do I save a little image, so that the background stays transparent. I already have the image set up in Photoshop with a transparent background and have saved it as gif and png. When I import it into Dreamweaver the background stays white instead of transparent. What am I not doing right, since I read several posts saying that png and gif are the right formats to save in, if you want a transparent background?
Thanks for any help with this,
Anne

Well now that you have told me to save with some sort of an alpha channel, it works perfectly.
In CS5:
Select layer,"Composition,Make movie". Then navigate to "Output module" and choose an option that has "alpha channel" in the title.Choose a name for your project "Output to". I now use "lossless alpha".I don't know if that is the best one, but it seems to be working fine.
There is no "Quicktime" option in CS5 as in older versions of AE.
I was trying to save as a video in general or for photoshop and that just wasn't working out well.
I don't know what the "Frames to Layers import assistant" is that you mentioned though. I still tend to drag and drop, rather then import.
Thanks for your help.

How do i save a .png with transparent background? cannot find in help

how do i save a .png with transparent background? cannot find in help

rickseng
With what program are you working and with what version of the program and on what computer operating system?
I suspect that you are working with some version of Photoshop Elements. If that is correct, then be advised that some how
your thread got posted in the Adobe Premiere Elements Forum (video editing) instead of the Adobe Photoshop Elements Forum (photo editing).
If Photoshop Elements question, then please re-post your thread in the Adobe Photoshop Elements Forum or wait for a moderator
here to see your thread here and move it from here to there.
Photoshop Elements
Thought....if are creating an image on a transparent background in Photoshop Elements Windows for a Premiere Elements Windows project, then you Save As png or psd.
Please clarify if I have misinterpreted your question.
Thank you.
ATR

Help export the graphic with transparent background and not braking the quality

hi I'd like some help please if its possible.
I've created a monitor graphic in Fireworks that looks like iMac and I would like to export it with transparent background.
the jpeg format looks great with no damage to the graphic at all but I can't have transparent background, although I changed the canvas fill to none. the png-8 format can apply transparent background, but damages the graphic.
Here are the previews
1st - the png-8 format
2nd - thejpeg format
A ny ideas on how I can export the graphic with transparent background and not braking the quality??

Fireworks questions are best answered at this link:
<http://forums.adobe.com/community/fireworks/fireworks_general>
Good luck.

Export locally png with transparent background

Is it possible to use Ps touch to remove the background from jpeg images and export them locally as png with transparent background (reducing the size of the picture)? I would need to use this feature to create more keynotetouch-friendly images.

Yes. That's possible. You can export a PSTouch project as png to the Camera Roll....and there are other channels as well where this is possible, like "Share By E-mail" , "Send to iTunes" etc.
Those options are accesible via the Share menu (see attached screenshot) as part of the PSTouch project organizer

Can I sample a layer's "true" color despite its opacity and blend mode?

I'm doing some painting with a lot of layers set to different blend modes. I find that every time I want to paint on one of these layers, I have to go to that layer, set the opacity back to 100, change the blend mode back to "normal" sample the color, then change everything back and continue painting. I realize I can save a swatch for the color, but it can get confusing when you're using subtle color differences on multiple layers. It seems like there should be a modifier key to the tool that samples the layers "true" color discarding opacity and blend mode. Does this exist? Thanks!

Perfect! This is exactly what I'm looking for chris....I don't suppose there's any way to toggle the tool's "current layer/all layers" functionality on the fly so i don't have to go to the tool and select which mode I"m in each time is there? I usually access this tool by just hitting "option" while using a brush. Would be cool if i could set "Option + shift" to use the eyedropper in "current layer" mode. Thanks for the speedy reply!

Spatial conform and blend mode; what does it mean and wherefore?

I can't find a explination in the help...: spatial conform and blend mode; what does it mean and when do you use it because there is e a big numbre of choises.
Ican't find a explination in the help...
Thanks!

Spatial conform is where you decide whether you want the (oversize) image to fit the video display size, or to be full-size (allowing room for animation).
Blend modes - far too many to describe here even if I knew them all, but Overlay is a nice one to start with. They specify how you want a layer to blend with the one below it. Try them and see what they do.
Andy

Wmode transparent and blend mode problem

Dear all,
I'm stuck with this problem so far, got headache after searching many days on google without solution. Our designer using blend mode: screen (in flash) for some movies and the flash's transparent to save the file size display and then ưe are using html background. All'r working fine for wmode transparent but in Internet Explorer, it's not working to display the blend mode and appear the black background. You can check the image below to see what happen:
Loading the movies within blend mode screen
Transparent's working fine with the normal transparent
Test blend mode with opaque wmode to see how it will display
I've tested with IE7, 8, 9. I'm using window 7 Ultimate, 64bit, Flash player latest version. (And my clients, friends, also got that issues when seeing it with IE).
My embed code:
<object width="1000" height="600" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" >
<param value="high" name="quality"></param>
<param value="intro.swf" name="movie"></param>
<param value="opaque" name="wmode"></param>
<embed width="1000" height="600" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" quality="high" src="intro.swf">
</object>
We can solve it manually that put the image background into the flash but it's not the good way to do it in our modern web industry.
Any solution?

dont why i can't submit in the bugbase, it's just hanged out though i submit all the required information T.T
Update: the bug only with IE9. (i concerned IE 7, 8 because i've tested it by IE9 development tool, not real IE 7, 8). Today i've tried testing with real IE7, 8 and it's working fine.

Smart Object and blend mode issue

I have an object that I moved from another image and needed to resize. The object is an image of a bottle and glass, with both the bottle and glass having reflections from their base. They both also have some layer masks with the reflections. I grouped the glass and bottle and created a smat object before the move to the new file). Anyway everything worked fine, except the reflections are much stonger in the new file (they are sitting over the same colored backgrond as in the original. If I open up the smart object and put a background behind the images and the reflections (background is transparent)everthing looks as they should. The reflections have a blend mode of multiply).
So why does the smart object not render the reflections properly (without lowering the opacity more within the smart object group) they appear almost at 100% in the new file. Any suggestions?
Can't post the files as this happened at work.
Thanks
Jeff

Anything to do with soft proofing? Does the new document have the same colour space as the original?

Masks and blend modes

Hello all,
So, I'm creating a chest caption and I wanted to have the text on a semi-transparent rectangle background. I also want to use a soft light blend mode on the rectangle. Now, I also want the rectangle to quickly appear from nowhere so I am using a mask, which I then move quickly off to the right of the screen thus revealing the rectangle.
Now, once I have added this mask, I don't seem to be able to use any different blend modes, just the normal one. I've tried changing it and it has no effect.
Can anyone tell me why this might be, and if there is a way around it?
Thanks
Chris

Try changing the blend mode of the group containing the rectangle and the mask. The elements below the rectangle of course need to be in a different group below this group.

How to export animated gif with transparent background and glow effect?

I've been having issues lately with creating animated gifs in flash. I finally figured out a way to export a gif with a transparent background but I'm now having an issue with it again because I'm using a glow effect. When the gif is exported the glow effect changes into a very poor quality and becomes less of a glow and more like a solid color. I've even exported a png sequence from flash and put it into photoshop then created a gif from there but I'm still having the same issue. Is there anyway I can properly export this in gif form so the quality is the same as when I test it in flash?
I've provided an image of what my issue looks like and the settings (I've messed around with the settings and this is the best I can come up with) . This is in photoshop but the result is similar in flash. The left one is what it originally looks like and the right is what it will look like after exporting. As you can see as I said before the glow changes into more of a solid color kind of like a border. Any help would be greatly appreciated, thanks in advance!

A GIF is limited to 256 colors while a glow effect likely wants to tie up thousands (let's just say 'lots') of variations of tone.

Combining 100 pngs with transparent background, vertically into one image PSE9

As the question suggests,
In PSE9 is it possible to combine 100+ PNG files (with identical dimensions & transparent background) into a single PNG file where the images are stacked vertically? and without trimming/cropping the transparent part of the image! I want to retain the exact original image dimensions so that they all stack neatly and precisely.
So far what I've tried is opening up the 100 PNG files in PSE9, create a new document with transparent background using the same width as the individual files and the height set to the individual file height multiplied by 100. (i.e. original image is 36 x 120 so the new file will be 36 x 12000) Then I get stuck! Whenever I drag a single file into the newly created document, it seems to be cropped to the image edges and no longer retains it's original height and width. Not to mention that hand dragging 100 files seems like a long-winded way of doing things... My automate button seems to be greyed out (so no contact sheet?) and I can't find any other automated process.
Any help would be greatly appreciated,
Thanks
N.
PSE 9 on Win 7

Please compare the resoultion of the two documents too. And a better way of arranging the layers would be to use distribute option in the move tool. You can find more about the move tool at http://helpx.adobe.com/photoshop-elements/using/moving-copying-selections.html#main-pars_h eading_0
Thus your workflow would be:
Create a new document with the required dimension.
Use File>Place to place all your png files on the created document as layers
Use distribute option in move tool
A still better workflow would be to use put all the files in a folder and write an ExtendScript to read the files and place them as layers on the document of said dimension

Problem importing PSD or PNG with transparent background

I am using eLearning Suite 2. (CP5 Photoshop CS5)
I am trying to import a PSD or PNG. I am using it as part of a master slide. It is a simple shape, with a transparent background containing a gradient overlay, inner shadow, bevel and emboss. When imported, it appears correctly in the design area of Captivate. However, when viewed in the browser, it acts as if it is an animation and I get what looks like a red color bar spectrum. I have tried to flatten the layers and I still have the problem. When I save it as a .JPG, it works fine. However, as a PSD or PNG, it is a problem. Seems like captivate may be having trouble rendering the gradient or transparent background. Anyone else run into this issue?
Files below:
CPTX File: http://coventry.mzinga.com/content/ss/temp/WCMS.cptx
PSD File: http://coventry.mzinga.com/content/ss/temp/bottom_wave.psd
Thanks,
Eric

So, I thought it might have something to do with the "effects" settings in Photoshop. HOWEVER, I took a regular photo, cut out a part, and put it on a tranparent background. This file as both a png and PSD have a halo that fades in and fades out. I checked timing and I have it set to no transition for the item and show for rest of slide. I did not have this issue prior to upgrading from 4. Hmmmm.
Eric

FCP, Photoshop and blend mode.

Hi all!
Created a photoshop file. One layer contains a picture which I applied the blend mode luminosity applied, yet when I bring it into FCP the mode is lost.
I have a transparent layer under this layer and still no luck. All other effects are working except this one.
Any ideas?

FCP cannot read Photoshop's blend modes if you're importing a layered PSD file.
You need to import a merged file (a single layer PSD or TIFF, for instance) with transparency preserved.

Export with transparent background and opacity

Apologies if these questions are a little basic , but taking my first steps in motion after playing with imovie , FCE and live type for a while
I have started to get a rough idea of motions capabilities but a couple of questions still are puzzling me .
In live type I created graphics , lower thirds etc with an alpha (transparent background) , for use in PIC in PIC in I movie , how do I do this in Motion , everything saved comes up with a background colour despite my canvas being set to transparent ?
Also opacity does not seem to show up at all , all my saved movies with layers with opacity changes (ie not 100%) show those layers as solids with no fading .
Any ideas where I am going wrong ?
Any answers or advice gratefully received with thanks

When you Share your creation you must select a movie standard with transparency - in Motion 4 you selected any option with Millions of Colors+ where the + was transparency.
In Motion 5 if you have transparency selected for your background already then when you export select "Current Settings" on the Export drop down selection which is normally default.
Alan

Saving png w/transparent background and blend mode

Similar Messages

Maybe you are looking for