1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Logo with transparent background?

Discussion in 'Off Topic' started by CyclingTribe, May 25, 2011.

  1. CyclingTribe

    CyclingTribe 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)

    Shaun :D
  2. trilogy33

    trilogy33 Well-Known Member

    In PS

    Set the size and resolution but make sure the Background Contents is set to: Transparent
  3. Brogan

    Brogan XenForo Moderator Staff Member

    Are you saving it in .png format?
  4. Awesome-o

    Awesome-o Active Member

    select a matte colour similar to the background upon which the image will be placed (for a .gif).

    Google PNG transparency
  5. trilogy33

    trilogy33 Well-Known Member

    Never save it as a JPG, you lose the transparency.
    The "final" should be saved as a PNG.

    EDIT: I snoozed, I lost. :ROFLMAO:
  6. Peggy

    Peggy Well-Known Member

    The issue is he is copying it in PS and pasting it in Fireworks. Between the copy and paste he's losing the transparency.
  7. Shelley

    Shelley Well-Known Member

    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.
  8. Awesome-o

    Awesome-o Active Member

    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.
  9. Shelley

    Shelley Well-Known Member

    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.
  10. CyclingTribe

    CyclingTribe Well-Known Member

    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 ... :)

    Shaun :D
  11. Shelley

    Shelley Well-Known Member

    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).
  12. Shelley

    Shelley Well-Known Member

    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.png trans2.png
    GeeksChat likes this.
  13. CyclingTribe

    CyclingTribe Well-Known Member

    Thanks Shelley ... I'll give that a whiz later :)
  14. CyclingTribe

    CyclingTribe Well-Known Member

    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
    Shelley likes this.
  15. Shelley

    Shelley Well-Known Member

    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.
    GeeksChat likes this.
  16. EQnoble

    EQnoble Well-Known Member

    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, 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 :)
  17. CyclingTribe

    CyclingTribe Well-Known Member

    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.

    Shaun :D
    Shelley likes this.
  18. Shelley

    Shelley Well-Known Member

    Good choice with regards to the png-8 (y)
    GeeksChat likes this.
  19. Awesome-o

    Awesome-o Active Member

    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

    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.
    GeeksChat likes this.
  20. CyclingTribe

    CyclingTribe Well-Known Member

    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).

    Shaun :D

Share This Page