Transparent image (png) uploaded directly from my computer
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)
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).
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.
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.
- Write your own grab button
- Fonts fonts fonts
- How to resize images for the web
- How to install my headers