We help IT Professionals succeed at work.

Set Transparencyon logo image

duncanb7
duncanb7 asked
on
Dear Expert,

I try to upload chrome image to my webpage for browser support, and the image
I download it from google seach. And I found the image has white background.
So I try to paint pro 7 tool to set transparency on the image, but it fail even I followed
its working step. Transparency means No background color, right ?

http://www.angelfire.com/nm/thehtmlsource/jazzup/image/transparent.html

The question is , could you help me to try it on your side ? if it is successful , you can put
background gray for div tag background color for testing as following simple html code and
see white background of logo is gone or not.
Second question, probably, if the orginal chromo logo image is from image capture tool, it might
NOT set the tranparency on the image because during capture processing, it need to capture the
image in any rectangle area. Is it the main reason ?

Please advise, and if you get the logo without background, please send it to me

THanks

Ducan
<html>
<head>
<style>
div {
margin:0;
padding:0;
border:0px;
background-color:gray;
}
</style>
</head>
<body>
</body>
<div>
<img  src="http://www.mywebsite.com/image/chrome-logo.jpg"/>
</div>
</html>

Open in new window

chrome-logo.JPG
Comment
Watch Question

Commented:


Here itt is:

 PNG

chrome-logo.psd

regards

Nrisimha
Commented:


You are right. Every rectangular capture tool take a snapshot with background color and objects in background so such given image can't be transparent by taking a snapshot.

It must be edited like I did in a Photoshop or some other graphic editor.

And when you set transparency you have to save it as a GIF ( only 265 colors - 8-bit colors ), but the standard is transparent PNG with 24-bit color.
JPG and BMP don't have ability to allow transparency.

regards

Nrisimha


Author

Commented:
So I go to the link and following its step again but
I need to save the file into gif format with only 256 color

OR save it in png format which is already inherited 24-bit format.

Is it what you mention above ?

Duncan
Commented:

Yes, but save image as a transparent PNG 24-bit colors. Not as GIF because your JPG image is 24-bit so you will loose many colors and get distorted image. Remember that GIF has maximum 256 colors.

But, my work was not successful at first time. So, I send to you new:

1. Photoshop file with layers, and I think that in Paint shop PRO you can open PSD ( Photoshop ) file or have to go to File menu and then select Import. But, first try to open.

2. transparent PNG 24-bit,

3. PNG 24-bit with gray background.

4. a one BIG Google Chrome LOGO.

Here it is:

Chrome.zip


regards

Nrisimha

Author

Commented:
Dear  Nrisimha,

1-So all image with all  format  can be set for transparent if you won't care to lose color Is it right by adjusting down color opacity or depth ?
2-PNG format can be in layer format, so it can be easier to be set
for transparent  without losing core image color, just delete the
layer we want in photoshop software , Is it that right ?

3- The PNG 24-bit with gray background you sent to me that is
2 layer I just veiw, what I can do just delete the bottom layer to take
out the backgorund color ?
4- I tried to set transparency option on PS pro 7 toolsfor item-3 above, it just
merger two layer into one layer after file save , the gray color is still there.
So What I should do.

5- Could you summarize for us in different format. When
I get example image, how can I know I can set transparent on the image,
(Yes of course if image  is no background itself, it must be no problem because the image is from drawing not from capture)

For example, png format must be able to set transparent
PNG: YEs since it can be in layer format
JPG: Never or depend on the image is from drawing or capture
BMP:Never or depend on the image is from drawing or capture
GIF:Never or depend on the image is from drawing or capture

I am trying doing tutorial at this link for image basis
http://www.scantips.com/basics09.html

Please advise

Duncan

Commented:


1-So all image with all  format  can be set for transparent if you won't care to lose color Is it right by adjusting down color opacity or depth ?

Yes Duncan, you can open image like JPG, TIFF, BMP, PCX and clear the unwanted color around a object that you want to set a transparency and save image.
But, I repeat again - you can save transparent image only in two image format that enable transparency and those are GIF with maximum 256 colors 8-bit, and PNG with 16777216 colors 24-bit.
PNG has a much, much better quality because this image format enable 16777216 colors to be shown in your image.

I think that I have to explain how to get this number of color. The formula is very simple:

 D1
Is that clear now?

2-PNG format can be in layer format, so it can be easier to be set
for transparent  without losing core image color, just delete the
layer we want in photoshop software , Is it that right ?

No, PNG isn't a kind of files that support layers. You can open PSD file and then delete a grey layer and select a File menu, choose a Save as and select file type to be PNG and then you can save image in that format. But, I must explain something. If you open a Photoshop PSD file in Paint Shop PRO then it is enough to click on the "eye" little button on the left side of a grey layer and you will get only a Chrome layer that is transparent and you can go to Save as and save this as a PNG file.
You don't need to DELETE grey layer. If you turn off grey layer the Paint Shop PRO will see only upper layer with Chrome symbol and you can save this as transparent PNG:

 D2
3- The PNG 24-bit with gray background you sent to me that is
2 layer I just veiw, what I can do just delete the bottom layer to take
out the backgorund color ?

As I said, the PNG format doesn't support a layers !!! This picture with grey background is a PNG with Chrome symbol and grey area around a symbol just as a JPG.
Such image is called flatten image - the image without a layers.

I will continue for 15 minutes.

Nrisimha

Author

Commented:
Thanks for Nir

Now better to understand itand I will
go into new thread if any issue

Duncan

Commented:

4- I tried to set transparency option on PS pro 7 tools for item-3 above, it just
merger two layer into one layer after file save , the gray color is still there.
So What I should do.

I have just explained this - you don't need to delete grey layer, but you didn't click with mouse on  a "eye" on the left side of grey layer. And the result is that you save a PNG with 2 layers and of course you have got a PNG with grey background.

Look at the image of Paint Shop PRO above. I marked with red rectangular upper layer that has "EYE" sign turn on.
But look then at the layer bellow with grey colour. I clicked with the mouse on the "EYE" sign near this layer and you can't see "EYE" sign anymore !!! Look at the image when you disable grey layer - it is a transparent ! How you can know this?
Very easy. All graphic editors have the same area that represent transparency - the grey and white boxes that represent transparent area. It looks like a chess table, but the black boxes are replaced with grey boxes. It is a normal standard for graphic programs to show a transparent area in that way.


5- Could you summarize for us in different format. When
I get example image, how can I know I can set transparent on the image,
(Yes of course if image  is no background itself, it must be no problem because the image is from drawing not from capture)

I wrote before - you can SET a transparency when you open any type of image !!!

But, I said to you and now I repeat it again - one thing is to SET transparency and the other is to SAVE transparent image.
You can open BMP or JPG image and erase with tools in Paint Shop PRO all areas you don't need and such ares where you need a transparency, but REMEMBER that you can SAVE such a transparent image only as a GIF 8-bit image or for higher quality a PNG 24-bit image.


For example, png format must be able to set transparent
PNG: YEs since it can be in layer format
JPG: Never or depend on the image is from drawing or capture
BMP:Never or depend on the image is from drawing or capture
GIF:Never or depend on the image is from drawing or capture

As I said - PNG doesn't support a layers. The PNG and GIF are files that support TRANSPARENCY !!!

Once again - PNG and GIF image formats are the only image formats that support transparency !!!

What does it mean? It means that you can save an image in graphic program, but TRANSPARENCY can be SAVED only in PNG and GIFimage format, because they support this transparency when you SAVE it - in fact they recognize transparency because these two formats are made many years ago just for such a cases. It is connected with programming. Some programers make a code for image format that will contain information about a transparency in this file.
And first transparent standard was a GIF - Graphic Image File.
And after that PNG - Portable Network Graphic that supportmuch more colors than GIF.

Anyone can open BMP or JPG file and erase areas on the image and these areas are shown as a transparent in any graphic program.
Well, try to save such modified image in a JPG or BMP or TIFF image format.
What will you get ?  If you save such image in JPG format, the transparency that was shown in the graphic editor will disappear and that JPG file will not have a transparency. All areas that you erase will be filled with color and it will be probably a white color.


Well, I have to take a brake. I have wrote one kind of Tutorial for beginners who are interested
in graphic and like graphic.
That's a pitty I can't explain all these things in written form. For such education people have to watch a video tutorial about that and have to learn to work good in one of the graphic editor.

If you have a questions write them and I will try to answer.
I became a member of this expert site at 18 of November 2011 and I sent to some people video tutorials that I made with screen recorder. And they were all very, very happy because they saw explanations that I gave to them. To read a posts isn't enough.

regards

Nrisimha