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.
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
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 :)
http://i.stack.imgur.com/xmtfc.png
I set the same color in photoshop and then in css. In photoshop (left) is just green but in css (right) is green, blue, red, etc...
The color is same (##6a6635). How can I set in css the colors like in photoshop?
thats not a problem it is the same color, just the graphic engine of the browser built it lil bit different from the engine of the photoshop, also u may be interesting read this:
http://usabilitypost.com/2008/07/30/photoshop-color-profiles-for-web-images/
What you are seeing is a kind of sub-pixel antialiasing that allows for sharper, clearer text. You can't disable it, that's how it's supposed to work. You're not supposed to take a screenshot and then scale it up - if you zoom into the webpage, the antialiasing is recalculated accordingly.
To translate your PS colors more accurately to CSS, why not try a tool like Project Parfait that Adobe recently put out? https://projectparfait.adobe.com/ You upload a PSD and can then select elements of your PSD to find its CSS or extract your assets. It's sometimes hard to get the exact color or gradient info in a comp from PS (especially for those of us who don't work in PS every day) and Project Parfait will go and grab that information for you.
i have images and i want to remove 2 angles of each image.
The removed part should be transparent, and this is the part i couldn't fix.
Here are 2 images the shows what i want to do:
This is an empty image. The white color is the part i want to show. The Blue part is showing the document background gradient color.
This is what should i get at the end. The blue part again, is transparent from document gradient color.
Anyone has idea?
In webkit browsers you can use mask-box-image. Put your image in a div with the image-mask class and then use mask-box-image with a transparent png
.image-mask {
-webkit-mask-box-image: url(your_mask.png);
}
There is an excellent article on the always brillient CSS Tricks website - http://css-tricks.com/webkit-image-wipes/
It's webkit only though I'm afraid.
Some may not like my non-code answer, but you could do it in the image itself? Please don't hate me for suggesting this, but sometimes code doesn't solve all.
Save the image as a PNG.
Make sure the layer you are working on is not the "background" layer, if you are in Photoshop.
Erase/use the marquis tool to delete the part of the image you want to be transparent. You can blur the edges of the marquis tool to make it "fade."
Depending on your settings in Photoshop or other editing program, the "transparent" section should be a checkered grey and white.
Save the image as a PNG and use it instead of the coded mask.
Granted, this doesn't work if you are dynamically loading images or have some other reason you are relying on code to mask your image, but it should work. Early versions of IE have some issues with PNGs, but I've not encountered it with IE9, IE8 or IE7 in my current project.
Say I have a very simple html page, containing a single line of text. I'm looking for a tool that would take that line of text, and superimpose it on a transparent PNG background. That logic would be applied to ALL elements on the page: if no background is specified, and the background of parent elements doesn't leak through, then a background should render as transparent.
As in transparent-pixel-in-image tranparent.
Is there a tool for this?
There are various command line tools for this sort of thing, most of which depend on WebKit somehow, eg. webkit2png, the hard part is going to be making the background transparent. Every screenshot tool I've ever tried sets the background opaque, even if the CSS background colour is transparent. The best approach might be to set the background to some unusual colour by default and then use a tool like ImageMagick to set that particular colour transparent.