How to create transparent image ?

Hi guys,

Anyone knows how to create transparent image so it can blend with background image on website ?
I want to make an image with rounded border and blend it with background image.

 

What software are you using?

If you are using photoshop when you open a new document, just start it with a transparent background. Then, when you save for web either save it as a .gif - or as a .psd EDITED>>> Yep - meant to say png... thanks gns

It will then blend with any background.

 

You can also save as png that also saves transparence much better then gif

 

PNG is grate for transparent images that have shading pixels. For example if you have an item that has a drop shadow applied to it, where the shadow pixels are lets say from 50% to 80% black and the rest of 50% - 20% the color behind the object then PNG is the right one for you.

If on the other hand, the size of the image is more important and if you don't have semi-transparent pixels then I'd suggest you use GIF.

If you need more info, just google PNG vs GIF or something like that and you'll find out all you want to know and more

 

png is good , but does not work in IE 6.0 or less browsers

 

I didn't know that ) Anyway, in a year or so, no1 will be using IE 6 ore less so who cares ?

 

yes i despise microsoft for not implementing png transparency in IE
hehe its hard to explain how much easier everyones lives would be

 

U can use adobe photoshop for creating transparent images...

 

Thanks for the tips
I'm going to try it, hopefullly it works i'm not familiar with adobe photoshop

 

you can make it in adobe photoshop. any type of photo work can be done in photoshop.

 

Easy.

The picture you want to put on the background, click the background color and select the box with a red line through it.

Then, put the content on top of that layer and save the file as a jpg.

 

send me i will do it for you dear.

 

ok let me give you a good TIP:
The best for quality image is to use png images, but as said above it will not work in IE.. no worries here is the fix:

STEP 1

Create file png_fix.css where your site is located and paste this:

* html img,
* html .png{
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Code (markup):

STEP 2

Go to your html file (or php.. whatever is the file you have the png picture or the header setting of your website) and put after </title> tag ( inside head tags )

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="png_fix.css" />
<![endif]-->

HTML:

- this will only show if the page is opened with IE 6 where the bug is located.

STEP 3 ( final one )
* if you use the png as background picture put class="png" where the background is set. Something like this:

<td width="267" height="138" background="images/bg_top.png" class="png">

HTML:

* if you put the image as <img..> you should not have any problem and no class needed, but only if its not working add class="png" in the img tag.

Hope this helps!

If you like my lil tutorial in how to fix png transparency in IE6 GREEN REP me
Thanks!

 

dude you just made my day, i didnt realize this was possible