Logo with transparent background?

CTXMedia

CTXMedia

Well-known member
I didn't want to post this in the Graphics forum as it seemed to be a place for people to distribute graphics they'd created.

I'm using Flexile for my three XF sites and it has a gradient background in the header.

I wanted to know how I can create a logo graphic with a transparent background that won't look rubbish (grey/white anti-aliased blocks around the edges)?

I've got Photoshop and Fireworks, but when I turn off the background in PS and copy the image over to FW - it inherits a white background that I cannot get rid of.

Any tips very welcome. (y)

Thanks,
Shaun :D
 
The issue is he is copying it in PS and pasting it in Fireworks. Between the copy and paste he's losing the transparency.
 
Save with transparency (png). Not with matte. If the image is used in different locations and is applied to those locations which have different background colours/patterns you'll get the matte showing which you won't want. And since you are applying the logo onto a gradient the matting won't be able to distinguish between the myriad of colours on the gradient because it uses one matte colour.

If memory recalls the options are in the top right where you can set alpha transparency.
 
I believe it depends on the PNG format. Some do use a matte colour, if I recall correctly... PNG-8 is it?

There are legacy issues with PNGs and some older browsers. Sometimes GIF is still the way to go in some applications.
 
Awesome-o said:
I believe it depends on the PNG format. Some do use a matte colour, if I recall correctly... PNG-8 is it?

There are legacy issues with PNGs and some older browsers. Sometimes GIF is still the way to go in some applications.
Click to expand...

It'll use a matte colour correct but the logo he's putting up will be applied upon a gradient background, the matting (because it's one colour) won't be able to distinguish between the other variations of colour from the gradient which is why I suggested go without matting. If he's wanting to save in gif then I guess he'll have no choice but to apply matting because the alternative is not desirable visually (jaggy edges etc). ;)

I don't support older browsers, if they can't support the future.

You could always do a little trick i used to do and that is crop the gradient background and add it to the bottom layer of the logo in photoshop if your wanting to support older browsers and using gif but i suggest you use .png and save with transparency.
 
trilogy33 said:
In PS
File>New
Set the size and resolution but make sure the Background Contents is set to: Transparent
Click to expand...

That's not the issue, but thanks anyway :)

Brogan said:
Are you saving it in .png format?
Click to expand...

Yes, at least I'm trying to, hence the copying from PS to FW (which copies as a flattened image with a white background and removes the PS transparency).

Awesome-o said:
select a matte colour similar to the background upon which the image will be placed (for a .gif).

Google PNG transparency
Click to expand...

The background is a gradient, and if I set white as the transparent colour the white elements in the image itself become transparent, which I don't want . :)

Shelley said:
You could always do a little trick i used to do and that is crop the gradient background and add it to the bottom layer of the logo in photoshop if your wanting to support older browsers.
Click to expand...

Thanks Shelley, I'll give that a go, but still no definitive answer then. :(

It's a bit like the smileys here - they seem to have no problem when they're placed on a variety of background colours, and seem to "gel" with the background without any fuzziness.

That's really what I'm after - that clean finish as if the graphic itself has absolutely no background whatsoever.

I'll experiment some more ... :)

Cheers,
Shaun :D
 
GeeksChat said:
That's not the issue, but thanks anyway :)

Yes, at least I'm trying to, hence the copying from PS to FW (which copies as a flattened image with a white background and removes the PS transparency).

The background is a gradient, and if I set white as the transparent colour the white elements in the image itself become transparent, which I don't want . :)

Thanks Shelley, I'll give that a go, but still no definitive answer then. :(

It's a bit like the smileys here - they seem to have no problem when they're placed on a variety of background colours, and seem to "gel" with the background without any fuzziness.

That's really what I'm after - that clean finish as if the graphic itself has absolutely no background whatsoever.

I'll experiment some more ... :)

Cheers,
Shaun :D
Click to expand...

It's a pity I had fireworks installed on my old desktop and only uninstalled it yesterday. If you are still having trouble you could always attach the image here and let someone do this but I suspect you want to learn this for yourself.

If you look in the top right after opening the source file (your logo) you'll get a selection of formats to choose from normally the default is set to gif which is probably the reason why you have matting showing which is not what you want. Anyway in the top right, the format options are there where I suggest you choose png (png8 or png) and select alpha transparency for png-8 or transparency for png (png-8 in fireworks options will allow you to optimise it).
 
If you load up the image you want to apply transparency and then goto the format box change it from gif to png and click the matte box. Afterwhich another popup will pop up you'll notice a icon with a red line running diagonal inside this tiny box click that and then save job done.

trans1.webp
trans2.webp
 
Wahey ... thanks Shelley.

I couldn't get the matte thing working, but by removing the background layer in FW and saving as PNG32, it saves it with a transparent background (did a test with the Geeks logo on the pet chat site, which looks really good and no fuzz - http://mypetchat.net/).

Geek has happy! :D
 
GeeksChat said:
Wahey ... thanks Shelley.

I couldn't get the matte thing working, but by removing the background layer in FW and saving as PNG32, it saves it with a transparent background (did a test with the Geeks logo on the pet chat site, which looks really good and no fuzz - http://mypetchat.net/).

Geek has happy! :D
Click to expand...

You can still get the high quality transparency effect using png-8 which would be the optimization route (using matte was never going to be an option for various reasons) in fireworks you can select png-8 >> rebuild colors (this tells you how many colours are in the image) then select (from the colors dropdown menu) the amount of colours you want to use and then save. This will save you KB and retain the visual quality pending that the colours in the logo are not exceeding 256.
 
Logo looks nice:-)

I need to learn the names of the tools in PS, Illustrator, and fireworks is what this thread has taught me. I can do a lot with those but I have no clue what anything is called inside the apps which always made it hard to get any help when I needed it.

Shelley said:
You can still get the high quality transparency effect using png-8 which would be the optimization route (using matte was never going to be an option for various reasons) in fireworks you can select png-8 >> rebuild colors (this tells you how many colours are in the image) then select (from the colors dropdown menu) the amount of colours you want to use and then save. This will save you KB and retain the visual quality pending that the colours in the logo are not exceeding 256.
Click to expand...
Shelley, how long have you been using the adobe line of drawing and design products?. I just want to know what number to multiply times ten to figure out how long before I will be able to explain anything in photoshop :-)
 
Shelley said:
You can still get the high quality transparency effect using png-8 which would be the optimization route (using matte was never going to be an option for various reasons) in fireworks you can select png-8 >> rebuild colors (this tells you how many colours are in the image) then select (from the colors dropdown menu) the amount of colours you want to use and then save. This will save you KB and retain the visual quality pending that the colours in the logo are not exceeding 256.
Click to expand...

Thanks again Shelley ... never notice the colour rebuild tool before, and going from PNG-32 to PNG-8 reduced the logo from 17k down to 4.7k :)

I've gone for a very generic, simple logo that took about 20 mins. to throw together, which can be updated later on. The key thing is to get the site going.

Thanks for your help.

Cheers,
Shaun :D
 
GeeksChat said:
The background is a gradient, and if I set white as the transparent colour the white elements in the image itself become transparent, which I don't want . :)
Click to expand...
Sounds like you have this sorted, great. Just to clarify, if this comes up again, you should select a matte colour that is in the middle of your gradient gamut of colours, not white. In this case the gradient is quite subtle so the approximation is not terribly stark visually.

the gif would be
matte.gif


and the composite would be
gradientTest.webp


It's not as good as a PNG (which is the best thing to use!) but the technique does work with a gif (if necessary) if your gradient is mild, as in this case.
 
Oh, and just to clarify - I didn't copy 'n' paste from Photoshop - I opened the Photoshop file in Fireworks which allowed me to remove the background layer and give proper transparency before saving (I think that's where I'd been hitting a brick wall previously - the copy had flattened the layers).

Cheers,
Shaun :D
 
Top Bottom