Jump to content

Problem with transparent areas.

Recommended Posts

This is my first attempt to get beyond simple things like resizing and cropping images. I must be doing something obvious wrong. I want to take an image, make an oval, discard the bits outside of the oval, and post it on a web page. I want the text and other objects on the web page to be be seen in the areas that had been covered by the trimmed corners. My problem is, when I upload the .png images the areas that I have trimmed become black rather than transparent. Complete description with links to examples below.

I take a simple .jpg like this one:


I take the ellipse tool and make a pretty big oval, then hit the "crop to selection button. Just for fun I create another oval in the center of the image and hit the delete button. Then I save the image as a .png file clicking the "auto detect" option. I have now created what I hope will be an image donut. I then upload it to my web site creation program (EasySiteWizard Pro on aplus.net), and find that the areas that had been checkerboard on my computer, are black on my webpage.

Here is what the .png looks like by itself.


<sigh> Time to start troubleshooting. I take my Donut.png image, hit Edit, Select All, and Copy. I open up another .jpg, and paste my Donut.jpg onto a new layer. It WORKS. You can see through the center of the donut to what was beneath. So I thought the problem must be with my webhost and their software, and open a trouble ticket. The calmly tell my that my .png file is faulty. Surely they are just finger-pointing, and I will PROVE it! So I go to the web and download somebody else's oval shaped .png file. Sure enough when I open it up in paint.net I can see the checkerboard around the outside of the oval up to the apparently required rectangular edges.

Here is the image that I used:


But when I uploaded the HumansimSymbol.png to aplus.net the checkerboard areas didn't turn black!!

Augggghhhh! Why do the checkerboard areas on the .png's I make turn black, but other people's apparently do not. I am clearly doing SOMETHING wrong!

I also pasted the HumanismSymbol.png on my sample image so you can see that my donut works fine within paint.net. I also thought it was interesting that the corner of the humanismsymbol.png took a bite out of the Donut.png that had been pasted on before.

Here is my sample image:


And I put up a test page with all four images on it:


And before you tell me about all of the wonderful web creation software out that that doesn't have this kind of problem, I have been playing around with NVU. The problem is I plan to have a tricky menu structure, and EasySiteWizard Pro does a great job of letting me create menus with sub menus. Plus, I generally want to be able to upload images with transparency into aplus.net.

So how do I make my transparent areas truly transparent when used outside of paint.net?

Link to comment
Share on other sites

Un Be Lievable I found the oddest workaround to the problem. If I upload my .png image directly into the Images folder using the File Manager, the .png images I create maintain their transparent areas. So I can make this work. I still wish I knew why the .png I downloaded from the web was correctly uploaded into EasySiteWizard, while my .pngs were not. An answer would be appreciated. But I have a workaround after TOO much time messing around with this problem. BTW, transparent donut is now also on the sample page.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...