Solved

I need an icon with a transparent background

Posted on 2006-07-12
11
290 Views
Last Modified: 2010-04-06
I woild like to take my existing icon and make the background transparent or create and icon with same. How can I do this?
Thanks.

0
Comment
Question by:expertsexchangehunter
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +1
11 Comments
 
LVL 16

Expert Comment

by:BongSoo
ID: 17091310
Open the file with photoshop, select the background, delete it, save it out as a gif. (I can give you more detail if you like)

BongSoo
0
 

Author Comment

by:expertsexchangehunter
ID: 17091343
Does the file have to be a jpeg file?
0
 
LVL 16

Expert Comment

by:BongSoo
ID: 17091456
JPEG doesn't support transparency. I think it has to be a GIF file, although PNG might work too.

BongSoo
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 38

Expert Comment

by:lherrou
ID: 17091537
BooSong is correct, the file type must be .gif or .png. If the background is already uniform in color, and that color is not used elsewhere in the image, you can simply open in Photoshop, select Save for Web, and then select gif as the file type to save. You'll see a color pallete of the colors in the image on the right side. Click on the background color and then click on the little checkboard icon below the pallete of colors to make that be the transparent color. If you don't have photoshop, post back and we can give you some suggestions of free software and how to get your job done.

Cheers,
LHerrou
0
 

Author Comment

by:expertsexchangehunter
ID: 17092061
I opened up the gif file and followed the directions from above and after saving and closing he file the background is still blue.
0
 

Author Comment

by:expertsexchangehunter
ID: 17092174
This means the icon background is still not transparent
0
 
LVL 38

Expert Comment

by:lherrou
ID: 17092351
Can you post a link to the file? You can use http://www.ee-stuff.com if you don't have hosting elsewhere.
0
 

Author Comment

by:expertsexchangehunter
ID: 17092501
file has been uploaded
0
 
LVL 38

Expert Comment

by:lherrou
ID: 17092607
It looks like the "blue" of your image background is not a single color... you'll need to mask it off using the mask tool and then fill it with a single color, then make that color transparent (or mask it off and erase the masked area so it is transparent).

0
 
LVL 18

Expert Comment

by:Jose Parrot
ID: 17094670
Hi,

In the case of icons, the filetype ico is the choice.

A very good editor for icons is the ArtIcons. You can download a tryal at
http://www.aha-soft.com/articons/index.htm
Please note that 24-bit icons are displayed incorrectly in some systems and they should be converted to 256-color icons for proper displaying.

Jose
0
 
LVL 18

Accepted Solution

by:
Jose Parrot earned 250 total points
ID: 17098859
Hi,

My understanding is that your image is not suitable for an automatic color selection to transform it in transparent.

Let me suggest instead to work firstly on the drawing, then make the background transparent.
By adopting the word FIGURE for what is your foreground image and BACKGROUND for what will be turned transparent, the procedure can be:

1. Open your file with ArtIcons (or other icon editor). Don't use the JPG as starting file to the project. If you have the original artwork, the better. If not, use the .ico or .bmp or .gif you have.
2. Zomm in until you see each pixel comfortably.
3. Turn each pixel of what you want as BACKGROUND to yellow (or another contrasting color regard blue). This colouring must be manual, as there are more than one tonality of blue, as stated by lherrou.
4. After your FIGURE is exactly as you want (you can edit the FIGURE too, of course)
5. Set, in the editor, the BACKGROUND color as transparent.

You can notice some green pixels around the FIGURE, if the antialiasing (combination of opacity and soft settings)feature is working. These colors are part of the FIGURE and part of the BACKGROUND. The result will be a soft contour for the image.
Now, a very important step of the project:

6. Save as .png if you want the icon adaptable for any desktop paper or any image you put the icon on. You can select .ico with the alpha channel set to the BACKGROUND, with the same result (ArtIcons has such feature). By "adaptable" I mean the intermediate colors will be now intermediate transparency levels. This is a feature not need if the FIGURES are geometric squares, but interesting if the FIGURE has curve bounds.
If the image is saved as .jpg, it will lost the transparency property, as stated by BongSoo. If the image is saved as .gif, the intermediate colors will be turned part of the FIGURE and, when applicated on contrasting colors to the intermediate ones, will occurr an undesirable effect of jigged contour.

Hope it helps!

Jose
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Need to add watermark and photographer's credits in a batch mode... 10 262
Making an image transparent 7 335
Animated Gif Templates? 6 202
Free stock image website 3 129
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
Learn how to create interesting presentations by including videos to keep your audience engaged using Prezi. Select "Insert" from the top menu in your Prezi editor: Select "YouTube Video": Paste the video URL into the prompt: "Select "Insert":…
Learn the basics of inputting and editing your text components in Prezi. We will cover how to set styles, position, and group your text components. In your Prezi editor, click anywhere on the canvas to add text: A flashing cursor informs you that yo…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question