Translucent overlay image

Oracle1729 · Dec 9, 2013

I'm trying to set up a graphic that will automatically be overlaid on a large number of images. The software supports PNG's with transparent backgrounds, wherever it's transparent, the underlying image is visible.

The problem I'm having is my overlay has some areas where I want the overlay to be faintly visible on top of the underlying image. Basically partial transparency. Is that possible?

I'm using photoshop CS6 to set up the overlay, and it will be used by Breezesys Hotfolder to automatically combine the directory full of images.

Thanks for any help.

fig · Dec 9, 2013

I'm not sure I entirely understand the question.

If you asking if one PNG you're overlaying could have varying levels of transparency, it could be if it's filled at different opacities in different places on the image (before saving out to PNG).

Easiest way to do this would probably be creating two layers with your overlay, masking and adjusting the opacity of each layer as needed then saving them out as one PNG. You could also save out two separate PNGs if one were an overlay and one were an underlay, or something similar.

Oracle1729 · Dec 9, 2013

fig said:
I'm not sure I entirely understand the question.

If you asking if one PNG you're overlaying could have varying levels of transparency, it could be if it's filled at different opacities in different places on the image (before saving out to PNG).

Easiest way to do this would probably be creating two layers with your overlay, masking and adjusting the opacity of each layer as needed then saving them out as one PNG. You could also save out two separate PNGs if one were an overlay and one were an underlay, or something similar.

The breezesys software says it requires a file called "overlay.png" with transparency defined in the alpha channel.

What I've been given is a jpeg file with a while background. I can easily delete the white area to expose the background checkerboard and then save as a png. When I run the breezesys software, it replaces this empty area with the photo properly, but the area that's supposed to be translucent still has the solid white background in the png I saved, so my final output file shows the translucent area as translucent on solid white with none of the photo visible under it.

fig · Dec 9, 2013

Ok, I think I'm following.

When you make your PNG, after deleting your background try setting the Opacity level of your "solid" overlay image to 70% of so then save out as a PNG. That should allow a hint of the background to show through your original image while maintaining the pure transparency of the other areas.

Oracle1729 · Dec 9, 2013

fig said:
Ok, I think I'm following.

When you make your PNG, after deleting your background try setting the Opacity level of your "solid" overlay image to 70% of so then save out as a PNG. That should allow a hint of the background to show through your original image while maintaining the pure transparency of the other areas.

The problem is it's as if the image I'm using was already given that treatment and then saved as a jpeg (losing the transparency information). Part of the image is supposed to be solid, 100% opacity, and part of the image is supposed to be transparent (say 70% opacity). But since it's a jpeg, the transparent part is already blended with the white background. I need to make the transparent part transparent again but preferably bring back the lost saturation in that area as well and leave the solid part solid.

fisha · Dec 9, 2013

If it were me :

Open jpg, boost the saturations etc to get the overlay part back to normal

Create new photoshop file of same dimension with transparent background
Copy edited overlay into new layer
Delete out white of new layer

Adjustoverlay llayer to achieve transparency you want

Save out as png

fig · Dec 9, 2013

There are times when posting a picture of something can save a lot of time describing it. This is one of them

Oracle1729 · Dec 9, 2013

fig said:
There are times when posting a picture of something can save a lot of time describing it. This is one of them

I can post it, but it's an image I got from the web that's not mine. Are there forum rules against that?

fisha · Dec 10, 2013

I suppose for the purposes of education and learning, you could post a link to an image which highlights an example of the type of overlay that you are trying to achieve.

Oracle1729 · Dec 10, 2013

fisha said:
I suppose for the purposes of education and learning, you could post a link to an image which highlights an example of the type of overlay that you are trying to achieve.

Here's an example:

merry-christmas-and-happy-new-year-2013_400x300_99126.jpg

Basically, I want the main part of the image to be opaque over the photo, the reflection to be translucent so you see the reflection but also the photo through the image. The white background should be invisible (which is the easy part).

Thanks.

fig · Dec 11, 2013

Makes much more sense now, thanks.

And I'd do exactly what I suggested earlier, copy that layer and mask it to be two different sections so you have one layer with the solid area and one the reflection area. The transparent area will be trickier to mask, but once you have that area selected you can make that layer a lower opacity than your solid area and save it all out as one PNG.

That should give you some translucency through the reflection while maintaining the solid area of the main image.

Search

Search

Translucent overlay image

Oracle1729

macrumors 6502a

fig

macrumors 6502a

Oracle1729

macrumors 6502a

fig

macrumors 6502a

Oracle1729

macrumors 6502a

fisha

macrumors regular

fig

macrumors 6502a

Oracle1729

macrumors 6502a

fisha

macrumors regular

Oracle1729

macrumors 6502a

fig

macrumors 6502a

Our Staff