Gimp-Forum.net
Trying to make an icon transparent for webpage - Printable Version

+- Gimp-Forum.net (https://www.gimp-forum.net)
+-- Forum: GIMP (https://www.gimp-forum.net/Forum-GIMP)
+--- Forum: General questions (https://www.gimp-forum.net/Forum-General-questions)
+--- Thread: Trying to make an icon transparent for webpage (/Thread-Trying-to-make-an-icon-transparent-for-webpage)



Trying to make an icon transparent for webpage - jrd656 - 03-25-2020

I've been trying to take an image and make it transparent for use on a webpage I'm making for a practice project.

I've found this icon, which looks ideal:
https://toppng.com/uploads/preview/arrow-down-icon-11549436707mosicxsqad.png

I've managed to add an alpha layer and remove the background so that I have a transparent layer on my website. The problem comes when I try to make the icon itself transparent. I've tried:

 - Using the layer tool to make the whole layer 50% opaque
 - Using the fill, eraser, colors>map>color exchange, etc features to make the icon transparent. They all make it look transparent on my GIMP software, but when I put them on my website it stops working.

Can anyone please help me out and save my sanity?


RE: Trying to make an icon transparent for webpage - Ofnuts - 03-25-2020

Normally you just need to set the layer as 50% transparent and export. But you have to export to an adequate format that supports partial transparency, JPG has no transparency, and GIF has binary transparency only (same AFAIK for the .ICO format, since you call this thing an "icon"). Recommended format would be PNG.

This said, the image is very simple to recreate from scratch, for instance with two overlapping and perpendicular rounded rectangles: make a vertical rectangle with rounded corners, duplicate it, rotate each copy 45° in opposite directions.