By Prof November 21, 2009, 10:13am
Learn more about Corel Paint Shop Pro Photo X2
Save up to 30%
Paint Shop Pro Photo X2 Ultimate
New $69.99 - Upgrade $49.99
Free e-book
Free Shipping



(Please note that in registering use only 8 characters or less for Password)
Welcome, Guest. Please login or register.

Forum Login
Login Name: Create a new account
Password:     Forgot password

PSPUG Message Board    Help and Discussion Forums    PSP v.X2 Evaluations and Problems  ›  Transparent Edges Moderators: D_Spider, Pete
Users Browsing Forum
No Members and 2 Guests

Transparent Edges  This thread currently has 107 views. Print
1 Pages 1 Recommend Thread
houston
November 5, 2009, 3:35am Report to Moderator
Member
Posts: 1
Posts Per Day: 0.06
Time Online: 10 minutes
I would like to have my web photos edges fade into the background color of my web page I would like to apply a transparency to them so the edges are not sharp.  I am having trouble finding out how to do that. Can someone point me in the right direction.

Cheers
Logged Offline
E-mail Private Message

2007 Curriculum Guides #01 - #28 Now Posted
Tim
November 5, 2009, 5:12am Report to Moderator

Super Member
Posts: 550
Posts Per Day: 0.29
Reputation: 100.00%
Time Online: 6 days 22 hours 22 minutes
Unfortunately, that isn't as straightforward as it might seem. The first way that you would think of doing it would be to create an image with transparent edges, so that the background would show through. Photos on a web site will usually be JPGs... but JPGs can't have transparent areas, so that's out. The only two formats that support transparency, and can be displayed in a web browser, are GIF and PNG. GIF is no good because it can only display 256 colours and can't display partial transparency. This would mean that your photo would look awful, and would either have a sharply cut off edge, or a speckled, dithered edge rather than a smooth fade out to transparency.
PNG would sort of work. It will display all the colours and supports partial transparency. The problem is that Internet Explorer 6, and older, can't display transparent PNGs, so maybe 30% of your site's viewers would see a coloured block around the image. The other problem is that photo PNGs typically have about 5 or 6 times the file size of a JPG of the same dimensions. This might mean that 20 images that take up about 2 MB as JPGs would take up 10 or 12 MB as PNGs, and might well be unusably slow to load for viewers with a slow connection.

The usual solution is to fake it by creating JPGs that fade to your page's background colour at the edges rather than to transparency. This will really only work if your web page background is a single colour. It might be workable if the background was a very simple gradient or texture, but might take a lot of work to get the alignment right, and might give inconsistent results with different browsers.
The simplest way to do this is to set PSP's background material to the same as your web page's background. Open your image (a copy, not the original) and press Ctrl + A to select all. Feather the inside of the selection with Selections > Modify > Inside/Outside Feather... it might take a bit of experimenting to work out the amount of inside feather to apply. Then invert the selection (Selections > Invert) and press the Delete (or 'Del') key.
You can get more control over the process by using layers. Add an new layer, that is flood filled with your web page background, under the layer holding your image. You can then either use the same select, feather, invert and delete process as above, or you can erase the edge of the top layer with the Eraser tool, or you could apply a mask to the top layer.
Logged Offline
E-mail Private Message Reply: 1 - 2
D_Spider
November 5, 2009, 9:29am Report to Moderator

Board Moderator
Posts: 1766
Posts Per Day: 0.98
Reputation: 100.00%
Time Online: 29 days 23 hours 32 minutes
Location: Klamath Falls, Oregon
But if you really want that translucent effect on your web page, a

is your answer.

To make old versions of IE display the translucent PNG properly, all you need are 3 lines in your HTML heading and a 2-kb java script, "pngfix.js," in the folder where your page's HTML and images are.  

Go to this web site for the java script & clear instructions.  This is the page that has the code you should copy and a link to the java script.

If you want your translucent PNG to load quickly, use PSP's image slicer (File > Export > Image Slicer; it's below the JPG & PNG optimizers on the Export menu).  It will make a table of pieces of your image which, when included in your web page's HTML, will load the whole, seamless image very quickly.   I had a tutorial on using the Image Slicer on a Yahoo free site, which is finally no longer visible.  If you want to see it, post back and I'll get it onto another web page.


       PSP5       PSP10       Said Yoda: "Do or do not.  There is no try."     (The Empire Strikes Back)
Logged Offline
Site E-mail Private Message Reply: 2 - 2
1 Pages 1 Recommend Thread
Print


Thread Rating
There is currently no rating for this thread
 


Powered by E-Blah Forum Software 10.3 © 2001-2007

Valid XHTML Valid CSS Sourceforge.net Powered by Perl