Transparent Background on an existing graphic

**AndyD** · 12 July 2006, 09:51 AM

HI All,

I received a graphic to add to a website but it has a white background. I'm not too sure how to remove the background so that the image can be placed onto the website and not be an obvious "added" graphic. I wondered whether anyone could help? The graphic is from the Scottish Tourist Board, and is below.

Many thanks in advance.
Andy

**Soquili** · 12 July 2006, 11:48 AM

Hi Andy,

I created an ellipse the same size as the oval in the logo. I centered it on the image and then selected both. Use the Arrange Menu > Combine Shapes > Intersect Shapes to remove the white background.

I then placed the logo on a 20% black background and selected only the logo. Export as gif with transparency or png with transparency.

The gif is on the left and the png is on the right. Internet Explorere doesn't aways display png files accurately.

**AndyD** · 12 July 2006, 01:23 PM

May I ask why you put the image on a 20% black background? I'm at that stage at the moment... I'll need to reduce the ize of the image a bit too for the purpose it's to be used for, but that should be easy enough shouldn't it?

Andy

**Soquili** · 12 July 2006, 01:28 PM

Andy, I used the 20% black background because it is a neutral colour value and can help reduce any fringe effects that may occur when putting a gif with transparency over a background that isn't the same as that used to create the gif.

The best thing to do is to use the same colour as the web page the image will be use on, but not know that colour I used the 20% black to optimize the ability to use the image I posted on a wide variety of backgrounds.

Reducing the size should work well. If you wanted to enlarge the size of the bitmap you may run into problems with large blocks or jaggies.

**AndyD** · 12 July 2006, 01:33 PM

I'm going to add it to a friends' website at www.kingdomoffun.co.uk although unsure where to add it at the moment.... any ideas where best to position it to avoid any anomalies?

Andy

**Albacore** · 12 July 2006, 01:55 PM

I would put your logo down beside the others at the bottom. I think I mentioned this before to you, do you realise that the site does not display well in Firefox as the text does not centre on the page making it look unproffesional. If you have a editor that supports CSS you will be able to quickly sort the problem as Firefox users account for around a 1/4 off users who use the internet.

**AndyD** · 12 July 2006, 01:55 PM

I decided to use the original image and reduce it's size and move around the text in the blimp's trailer, placing the Tourist Board notice on the whie background. One problem I often have is trying to group the "strings" connecting the blimp and its trailer. It takes me an age to group them all together as the background gets group before the string, and the sky background is only used for optimisation. IS there an easier way to incorporating the "strings"?

Cheers
Andy

**AndyD** · 12 July 2006, 02:29 PM

Originally Posted by Albacore

I would put your logo down beside the others at the bottom. I think I mentioned this before to you, do you realise that the site does not display well in Firefox as the text does not centre on the page making it look unproffesional. If you have a editor that supports CSS you will be able to quickly sort the problem as Firefox users account for around a 1/4 off users who use the internet.

Thanks for reminding me, I'll need to get that sorted, but not sure what the solution actually is... the old box model I presume...

Andy