Friday, 19 March 2010

TRANSPARENT BACKGROUNDS FOR IMAGES & TEXT

An online friend asked for some help re getting transparent images to show up properly on her blog. In particular, she wanted to make some blog buttons and text buttons, and these kept loading up with a white background.  So I thought it well worth doing a little tutorial. 

 Original image


Transparent image (png) uploaded directly from my computer

Transparent image (the same png file) uploaded from Photobucket

Several people who have emailed me have been puzzled that their text images, carefully saved as gifs, don't seem to work any better than pngs or jpgs- if they upload at all. Yet their computer books and lots of online tutorials tell you that you should save text as a gif because it gives the sharpest image.

OK... this is where we lose our tempers with Blogger, just a little. I've found that Blogger doesn't like gifs. I don't know why, but I THINK it's because the file sizes are huge: denser somehow, even when the image size is reduced.

So here's a simple down-and-dirty way to get images with a transparent background with the least amount of hassle. It may not be pretty, it may not be what all the books tell you - but it WORKS.

1. Open a new document, and set the background colour:



I have the (very old) Photoshop 7 programme, and it gives me 3 choices:
  • Background colour (which would be whatever the last colour was in any older document)
  • White
  • Transparent
Choose Transparent.

Layer any artwork you want onto this, then MERGE the layers. Don't choose Flatten as this will turn the background white. (If you need to get rid of the backgrounds, see the section below).

Then do any adjustments, like size, brightening the colour or sharpening the image (reducing the size can alter how the colours look) and if you've done a few adjustments, you need to MERGE again.

Save as a png. 

Upload to Photobucket, which is a free image hosting site. Why? Because for some reason, transparent files uploaded directly from your computer to Blogger end up with white backgrounds. Why? I honestly don't know. But I do know it happens a lot (found this out when uploading my own headers to my own blog via my own computer). If you upload an image file from Photobucket, the image stays transparent.

2. With an existing image:

Looking at this little rose, it's on a coloured background. If I layer this onto my transparent background, I will still have all this coloured background showing. So how do I get rid of it?

There are several ways: using the Extract or Pen tools, which need a bit of practice. However, here's my get-the-job-done solution:


Click on Layers in the toolbar section to the right (this will be very similar in most graphics programmes) and you'll see the background layer named in the Layers pane.


Double-click on the title, which brings up a box (or may open the box in the Layers pane, depending on your graphics programme) and you can then change the name, eg: rose. This means you can now do stuff to that background layer (which you can't when it's the very bottom layer as it's locked. This is how you UNlock it.)


Now click on the Magic Wand tool. Click on the background surrounding the rose image, and you'll get those 'marching ants'.

Click Delete, and the background will go transparent.


Do any cropping, rotating, resizing, colour enhancement etc and MERGE all layers then Save As as a png.

If creating a scrapbook background, multi-image collage etc, create a new transparent document and open any other images you want to use. Work with each image in the same way then drag&drop to this new document. Each will add as a separate layer (you'll see them in the Layers pane).


Once postioned and sized as you want them,  MERGE all layers then Save As as a png (it's always a good idea choose a different name and save as a different document, thus preserving your original images).

TEXT

For text, do exactly the same thing: create a document, type a text layer, crop it to size and save it as a png.


For text on top of an image, create a text layer - and don't forget to MERGE when you are finished. Save as a png.

RE Blogger, Photobucket etc, yes - gifs do seem to cause problems.  
So save all your images with transparent backgrounds as pngs.

TROUBLESHOOTING:

You ARE  resizing these images to 96-100dpi as well as the actual pixel size, aren't you? (see my picture at the top of this article).  If you aren't, that could also cause a problem and also make your blog load more slowly.

RELATED TUTORIALS:

post signature

9 comments:

  1. Again, I cannot thank you enough, chickee!
    xoxo,
    Connie

    ReplyDelete
  2. Hey Susie...

    I don't know much about JPGs, PNGs and GIFs, but I was having the same issue when creating a custom blog design with a dark background.

    I was using Blogger's/Picasa's embed code and that doesn't work.

    For some reason the embed code is a flattened (is that the right term?) of the original file.

    That's why one gets the white background as if the image was mounted on typing paper.

    While your solution is certainly theeee best one, I also have been working with a workaround that I posted to my blog.

    If you can explain why the reduced size images are flattened in the first place while the original remains as transparent as ever I'd love to know!

    ReplyDelete
  3. Connie - you are so welcome, and I'm really pleased to have sorted the problem. You inspired the tutorial!

    Glamour Bomb - the short answer is that I really don't know.

    I think the problem is at Blogger's end, not ours. If I upload a button or header with a transparent background directly from my computer, sometimes Blogger will load it with a transparent background... other times it's a white background. If I upload via Photobucket, it is ALWAYS transparent.

    Gifs are richer/denser/more concentrated (best way I can explain it) and pngs seem to be the same - Blogger seems to try to condense the images even more, hence it flattens and goes white. I've noticed I can upload two pix, each the same height and width dimensions and similar file sizes - yet Blogger (and Picasa) will treat them differently.

    Photobucket (no affil!) seems to have a bigger capacity or something. You need 1mg for a background: Picasa (last time I looked, anyway) doesn't have this size capability.

    So maybe it boils down to bandwith - when using Photobucket, Blogger isn't using its own bandwidth as the image file is hosted elsewhere.

    I hope this helps!

    ReplyDelete
  4. Thanks, Susie. Like I said, I don't know much about PhotoShop, image manipulation or anything of that nature. But I'll bet you're right when you say it's a bandwidthe issue.

    ReplyDelete
  5. Great blog. I think I shall be back at regular intervals!

    ReplyDelete
  6. Susie, you are a saint!!
    Trying this today but using Paint Shop Pro.
    Hope it works!! The frustration with removing backgrounds is getting the best of me lol.

    xox
    Celia

    ReplyDelete
  7. You saved me from going crazy on Blogger! Thank you!!!!

    -Small Bird Studio

    ReplyDelete
  8. Hey Susie! I followed all the rules, uploaded to photobucket, created a transparent .png file, saved it correctly, and still I'm getting the white box. Not only that, but it's linking back to photobucket as a clickable link image. Grrr! I wanted to make a signature and it's not working! Any ideas? I even tried Glamour's idea's by removing the S and number following in blogger, still no luck there either.

    Thank you!

    ReplyDelete
  9. : What a pain! Pngs can be very temperamental.

    What I suggest: resave the original image as a png, at a higher resolution (if you saved the png at 8 bits, try saving at 24) and THEN load to photobucket. Don't load up first in some other format, then save as a png.

    Use the .IMG. link (you'll need to delete the square brackets and IMG and /IMG coding) and enter this where shown. This should now work.

    If you find you are getting those 'ant tracks' around the signature, I suggest you again work with the original image and add a fine outline in the same colour (1 pixel wide) which should just emphasise the edges nicely. Then Save As a png again, then upload to photobucket etc etc

    I hope this solves it for you!

    ReplyDelete

I absolutely love to receive comments!

But please note - I DO check for spam, and I moderate all comments - any spam is deleted at source.