What's new
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Odd PNG problem


Daniel Wiberg

New Member
Messages
4
Likes
0
I have problems using a PNG image and would appriciate some help.

I am making a header for my blog. The header has to be transparent to work with the blog's background.
This is my old header: i.imgur.com/oMOr8.png

The black background indicates that the transparency is working fine. (It's a screenshot from the blog, not the real png)

But, now I've made a new header. When I upload it, the background is white and filled with weird lines. I've really messed something up. On my computer and on imgur the image shows fine, but not on my blog.
Here's what the new one looks like: i.imgur.com/yUX9x.png

I'm sure it's going to turn out to be something simple, but I've been googling for an hour without luck.
 

Attachments

  • yUX9x.png
    yUX9x.png
    495 KB · Views: 3

ibclare

Queen Bee
Messages
11,034
Likes
4,638
Do you have an image of the white with lines that you can show us? Put it on a dark bg so we can see the problem. Maybe the png was not made properly to begin with. It would be easy to retrace it, mask it, and get rid of all the bg and that should solve your problem. But your description is a bit vague. Don't show us a screen capture please.
 

Daniel Wiberg

New Member
Messages
4
Likes
0
The image works fine everywhere except my blog, that's why I took a screenshot. Both the old and new header works just fine on both my computer and on imgur.
The lines are visible in the attatchment.

Thank you for replying. :)
 

ibclare

Queen Bee
Messages
11,034
Likes
4,638
So you have said, but we still cannot see the problem and we are visual artists so it would help if we could. If you figured out the problem, share what it was with us. Thanks.
 

Daniel Wiberg

New Member
Messages
4
Likes
0
I don't really understand. I both attatched an image and linked to an image which shows the problem. Here's the link again: i.imgur.com/yUX9x.png
Or do you mean something else? Sorry for the confusion.
 

Daniel Wiberg

New Member
Messages
4
Likes
0
Here's the original png and not a screenshot. It works just fine on imgur, but the screenshot in my post above shows what it looks like on by website. Link: i.imgur.com/J5Rjk.png
 

ibclare

Queen Bee
Messages
11,034
Likes
4,638
You see the problem is, that from the images you keep posting or linking to show up on a white background, so we can't see the problem. You need to copy the problem onto a dark BG so we can see what you are describing. Otherwise all we see is the design and nothing wrong with it.
 

Tom Mann

Guru
Messages
7,223
Likes
4,343
Part of the difficulty in diagnosing the problem arises from the fact that different software displays transparent areas of a png differently. However, I know (with 100% confidence) that Photoshop will display transparent areas of gifs and pngs correctly, so I downloaded the three images that you cited (in order), and opened each of them in PS CS6 and then took a screen grab of how PS displayed each of them.

The first one I looked at is the screenshot that you took of your blog, oMOr8.png, presumably as displayed in a browser, so I expect the background not to be transparent. It should show whatever background you put the png over. Assuming it was a black background, this seems to be exactly what I would expect. To simplify the discussion, I'm going to call this image #1.
 

Attachments

  • 1st_screenshot_of_PS_display-oMOr8.jpg
    1st_screenshot_of_PS_display-oMOr8.jpg
    137.8 KB · Views: 17
Last edited:

Tom Mann

Guru
Messages
7,223
Likes
4,343
The 3rd image that you cite, J5Rjk.png, you state as being the original png. When I view this in PS, I see the transparent background that you intended. No surprises here, either. I'm going to call this image #3.
 

Attachments

  • 3rd_screenshot_of_PS_display-J5Rjk.jpg
    3rd_screenshot_of_PS_display-J5Rjk.jpg
    285.3 KB · Views: 17

ibclare

Queen Bee
Messages
11,034
Likes
4,638
Well then, it looks fine. You work too hard Tom, to the advantage of us all. Surely you're not referring to the checkerboard in the background Daniel . . . because that is the Photoshop canvas you are seeing. But I don't think that's the problem since you say it shows up fine on your computer. I'm still confused.
 

Tom Mann

Guru
Messages
7,223
Likes
4,343
The problem image (ie, the unexpected orange rectangles and narrow black areas bordering the central, desired material) is obviously yUX9x.png (which I'll call image #2).

From the two previous results, it's clear that PS is working correctly in terms of properly displaying transparent vs opaque regions. This tells me that however you obtained yUX9x.png, whether it is (a) a screen shot of the display in some program/browser, or (b) the actual component file used in your webpage, it clearly has a solid, non-opaque background with unexpected structure.

You need to clarify to us and yourself which of these two possibilities is correct -- ie, exactly how did you obtain yUX9x.png?

If (b), then you likely had some unintended odd opaque background under the desired areas when you flattened the image and saved it as a png for use in your website.

If yUX9x.png is the result of (a), then the problem could still be that you inadvertently saved your png with a non-transparent background, OR, it could be that the png indeed has the correct transparent region, but there is something under it on the web page, ie, an error in web page construction, not png construction.

Probably the easiest way to tell if its a web page problem is simply to construct a blank web page with, say, a gray background, and then overlay yUX9x.png. If you see gray through the transparent regions, your source png is good. If you see anything other than gray, you botched the construction of the source png.

I hope the above is clear.

Best of luck,

Tom M
 

Attachments

  • 2nd_screenshot_of_PS_display-yUX9x-annotated.jpg
    2nd_screenshot_of_PS_display-yUX9x-annotated.jpg
    259.4 KB · Views: 11

dworx

Active Member
Messages
36
Likes
3
I am not sure about this but there may also be a problem in your blog template, so just check it.
 

dv8_fx

Retired Administrator
Messages
13,761
Likes
4,789
The problem image (ie, the unexpected orange rectangles and narrow black areas bordering the central, desired material) is obviously yUX9x.png (which I'll call image #2).

From the two previous results, it's clear that PS is working correctly in terms of properly displaying transparent vs opaque regions. This tells me that however you obtained yUX9x.png, whether it is (a) a screen shot of the display in some program/browser, or (b) the actual component file used in your webpage, it clearly has a solid, non-opaque background with unexpected structure.

You need to clarify to us and yourself which of these two possibilities is correct -- ie, exactly how did you obtain yUX9x.png?

If (b), then you likely had some unintended odd opaque background under the desired areas when you flattened the image and saved it as a png for use in your website.

If yUX9x.png is the result of (a), then the problem could still be that you inadvertently saved your png with a non-transparent background, OR, it could be that the png indeed has the correct transparent region, but there is something under it on the web page, ie, an error in web page construction, not png construction.

Probably the easiest way to tell if its a web page problem is simply to construct a blank web page with, say, a gray background, and then overlay yUX9x.png. If you see gray through the transparent regions, your source png is good. If you see anything other than gray, you botched the construction of the source png.

I hope the above is clear.

Best of luck,

Tom M

I think you got it Tom...
 

Top