127

I have no experience with any image processing/editing tools. I am doing a project which requires me to convert the images(small icon) with background colour(red/blue/white) to transparent for the website.

example

The goal is to transform the red background to transparent.

  1. What image editing tool(s) should I consider?
  2. How to filter that background colour and make it transparent?
General Grievance
  • 4,555
  • 31
  • 31
  • 45
Drogba
  • 4,186
  • 4
  • 23
  • 31
  • On Windows 10: ms paint3d has a transparent background feature. In theory, you could convert a doc see: https://www.guidingtech.com/transparent-background-paint-3d/ My use case: I needed to simulate a signature and for a new drawing it is easy to set background as transparent (see link above if you need guidance). – spioter Nov 25 '19 at 14:34

5 Answers5

291

I would recommend this (just found via search):

  1. http://lunapic.com/editor/?action=load
  2. Browse for image to upload OR enter URL of the file (below the image)
    https://i.stack.imgur.com/2gQWg.png
  3. Edit menu/Transparent (last one)
  4. Click on the red area
  5. Behold :) below is your image, it's just white triangle with transparency...
    [dragging the image around in your browser for visibility,
    the gray background and the border is not part of the image]
    your image made transparent
  6. File menu/Save Image
    GIF/PNG/ICO image file formats support transparency, JPG doesn't!
TWiStErRob
  • 44,762
  • 26
  • 170
  • 254
  • 5
    I've struggled with doing this with paint.net and other applications, and have never found anything that works as quickly and easily as lunapic. I just tried it for the first time, and it was a snap. The result looks great. – rfeague Feb 18 '14 at 18:55
  • @TWiStErRob How do I do the reverse? – zbz.lvlv Oct 03 '14 at 00:30
  • @zbz.lvlv ask another question! But in general you can just save it as a format that doesn't have transparency (bmp/jpg) OR edit in an editor with layer and put a solid colored layer behind your transparent image OR display it somewhere with the background you want and take a screenshot. All of the above is kind of silly because you lose quality/information. – TWiStErRob Oct 03 '14 at 11:45
  • 7
    Just a small remark: if you follow this procedure and click on "Save to: Your Computer" at the bottom of the screen, it will save it as a GIF file, because that is the default format. If you prefer PNG you have to go to the File menu, and then Save Image. From there you can choose the format. – Fabio says Reinstate Monica Mar 11 '15 at 13:22
  • The same thing you can do through Photoshop using patch tool – Hidayt Rahman Nov 20 '17 at 16:56
  • @HidaytRahman yes, a paid professional software of course is the best tool for the job, but the question starts with "I have no experience with any image processing/editing tools."; so from this assuming a 0 learning curve is the best course of action. – TWiStErRob Nov 30 '17 at 10:14
48

If you want a command-line solution, you can use the ImageMagick convert utility:

convert input.png -transparent red output.png
dat
  • 1,580
  • 1
  • 21
  • 30
  • Sometimes the threshold against cattywampus lines isn't the best, but in general a good way for disjoint colors with straight lines – chris Frisina Aug 03 '17 at 14:33
  • This didn't work for me. – Jacob Torres May 12 '18 at 18:18
  • @JacobTorres Would you be willing to provide additional details? It might aid in refining the answer so it can better serve other users. – dat May 14 '18 at 16:57
  • Running on MacOS. I ran the command as you posted and saw a drastic decrease in file size (~3 times if I remember correctly), but the whitespace was still there. I didn't dig into it (and I'm not versed in PNG format), but I can't imagine any way to see such a change in file size without stripping the color depth (although I couldn't tell visually). Perhaps the issue resulted from my image not having a high-contrast border? It was white to light grey. Lunapic had no issues identifying the border and making the background transparent. – Jacob Torres May 15 '18 at 18:24
4

Paint.net is a free photo-editing tool that allows for transparent backgrounds. There is a simple example on YouTube http://www.youtube.com/watch?v=cdFpS-AvNCE. If you are still on Windows XP SP2 and that's an issue, I would first recommend doing the free service pack upgrade. But if that is not an option there are older versions of Paint.net that you could download and try.

T Vernon
  • 83
  • 1
  • 5
3

Quick solution without downloading anything is to use online editors that has "Magic Wand Tool".

ViliusL
  • 4,589
  • 26
  • 28
1

For Photoshop you need to download Photoshop portable.... Load image e press "w" click in image e suave as png or gif....

Fellipe J. de Sousa
  • 35
  • 9