I was wondering if there's a way to remove the white outline on a GIF on my website.
Here
Is there any way to remove it? Or would I have to do this during creation of the GIF?
Regards, Owen.
Seems like that GIF has been saved with transparent background, and its half-transparent edges having a white background.
If you still have the GIF and something like Photoshop, try to set its background color to the color you are using in the webpage and save it again.
Try deleting the added white on the image, and then saving it as a PNG file. I know that works with images, so it will probably work for this. If you save it in a folder or a desktop, it will look like it still has the white background. But when you open that new file in Photoshop, you'll see it's gone.
So if when you put it on your website, the background will be clear.
Does this help? :)
Also if you do not have Photoshop, and are unable to do that, I'd be more than happy to do it for you. Just let me know and I'll give you a temporary email address to send it to me, and I'll send it back to you :)
Related
i am creating a Rock Paper Scissors game for The Odin Project.What i want to do is: instead of click buttons to do the choice, i want to put circular pictures of Rock/Paper/Scissors and click these to make the choice.
I found some pictures online, so i was trying to find a way to crop them in a circular way, and the background to be transparent.
I found online that a tool to do this, is GIMP. I did everything correctly there, the picture has this gray-grid background, but still when i put the picture on the html, still is shown as a square with white background.
This is what i see in GIMP:
and this is what i get on HTML:
.
I am doing everything correctly on GIMP and also i am exporting the picture to .png .
Any help would be highly appreciated
in GIMP, i added an Alpha channel, i did the crop, the background was transparent there, i exported the file as a .png (clicked "Do not save background colour), and still the picture doesn't appear transparent
Yesterday I saw image with such an extension: .00_png_srz. First I thought that it was same as normal png image but indeed it isn't. When I renamed it on png it's colors changed. While real one was dark black it became gray.
So I want to know what this extension is used for and what it is exactly. Why would someone create images in such extensions? and is there any way to convert it into normal png without picture changing.
Thanks.
How do I make the background in an image transparent? Most of my images have a white background. When I use them in my website with my body background color black it looks awkward.
I have unsuccessfully tried using Fireworks magic wand tool to remove the white background. I have also applied the CSS transparent property but it does not work for me either.
What is the best means of making the background color of an image transparent?
What image format you should use
You should use PNG pictures with alpha channel, so called RGBA image.
Save your work as PNG and make sure it is saved with RGBA colors.
Wikipedia.org, Portable Network Graphics
How to, using GIMP (should be similar with photoshop)
Open your picture file with GIMP.
If your picture layer does not contain alpha channel add it by right clicking on layer and selecting "Add Alpha Channel".
Use "Fuzzy Select", "Select By Color" or "Scissors Select" tool to select backround area.
Hit delete.
Save results as PNG format with RGBA colors.
It should look something like this after you're done with it:
Few notes
Play around with mentioned selection tools to learn which one to use in which situation.
Also pay attention to tool settings especially with fuzzy and color selection tools.
If your picture contains blurred transitions between subject and backround, you should try to make them so with final picture too. You could use
You'll want to alter the actual image to make it transparent -- sounds like it might not be? Often images themselves have white backgrounds, so laying these on top of anything might look odd. You can take the image and remove the white in it and save it as a transparent image, then try again.
Use photoshop to remove the background and save it as .png
remove it like this: http://www.addictivetips.com/windows-tips/how-to-remove-image-background-in-photoshop-tutorial/
or using magic eraser.
good luck!
You can do it in photoshop with background eraser tool
If you don't have Photoshop - the easiest way to do it is with MS Word (2010).
Change a background of your page to black (Page Layout --> Page Color --> Set to the color of your website)
Insert --> Picture
Once your have inserted pickture, go to Picture Tools and find Background Removal tool under Picture Tools.
Select area you want to remove and click "Remove" and then "Done"
use photoshop , select unwanted portion of image and then save it as png, But it'll may not work in IE, Use PNG Fix More details http://jquery.andreaseberhard.de/pngFix/
To remove the background of the images, you can use This Website. It is very easy.
Steps:
Go to the link
Select the photo or enter the URL
Download the image.
freakin' out because i didn't manage to create a preloader, which is working in internet explorer. it is a real small preloader (10x10px), which is shown in a textfield after the user started a search.
i first implemented a css-spinner from here: http://cssload.net/ which looks good everywhere but doesn t work in ie at all.
afterwards, i generated one animated gif at http://ajaxload.info/ , but the results are looking pretty ugly in small size. it doesn t make a difference, if the gif is transparent or not...
anyone a good idea for that?
thanks,
k
EDIT: mootools is supported, but i do not want a small flash-preloader for that case!
have you tried this one?
preloaders.net
there are many modification possibilities and it looks nice in small size as you can scale the image to the size you prefer.
implementing a gif as part of a veil component you are viewing above the component you are loading or which is processing the request will work on every browser.
thanks for all comments and infos!
i guess the problem was the transparency of the preloader. the background of the text input is grey, so with transparent gif i had white pixel at the "corners" during the animation. i just choosed the grey color as background-color from the gif, and it looks ok. thanks eyerbody!
I am working on a dutch site and i am having a problem with the logo of it.
I saved the logo as PNG24 sothat the characters "hvb" in the logo will be transparent.
for some odd reason, it shows the characters in plain old white.
Could somebody please tell me how this is possible.
By the way: it is not caused by the h1 tag it is wrapped around.
http://www.luukratief-design.nl/wp/
Help would be appreciated
EDIT:
I have never seen this befor, but you guys where right! The image HAS indeed have white letters!
The odd part about it is that the layers were hidden, so they look transparent in photoshop. Once i used save for web and exported it to png, all of a sudden they are white. Take a look at the screeny:
The solution:
As stupid as it sounds, i deleted the white layers (which werent even visible), and exported it again. As you can see it works now.
I can only choose 1 right answer, so i will choose the first guy who pointed this out. Thanks guys. Still strange, but thanks!
The letters are white in the image file.
The logo appears to have transparency for me. I am using Chrome.
Also transparency with PNGs does not work in IE6 or older without some javascript fiddling.
See: http://code.google.com/p/ie7-js/
I made the simple change for you and made the letters transparent. You can use it all you like. No charge! ;)
EDIT: Obviously you can do a much better job if you take a bit of time, but editing in image editing software is the only way for them to be transparent.
Seeing as the "h" of hvb has a nice flick at the end, surely its not meant to be transparent?!
When I change background to black, letters are white. There is no problem with implementation to site, I think problem is in image file.
I had difficulty with comprehension questions, second option:
Also if you using IE, and you have problems with transparent image corners and edges, use js code to fix it.
And if you want that letters be transparent, u need to edit image file with Adobe Ilustrator, or Photoshop or with somethnig else, what you using.
Link: IE Transparency