Texas Chicks Lightroom Classes Online Lightroom and Elements - All You Need

Photoshop Elements Tutorials: Transparent Backgrounds

by Erin Peloquin on February 3, 2011 · 53 comments

Creating images with transparent backgrounds in Photoshop Elements is something that people ask about a lot.  So I’m going to elaborate on JPEG, GIF, PNG, PSD, TIFF.  KWIM?

Why would anyone want to do this?

Logos on websites and scrapbooks are two big reasons.

Another is images that don’t have perfectly square corners.  You might want rounded corners, a circle or oval, you might even want an octagon.  Although I’d be surprised about that last one.

The number one rule for having images with transparent backgrounds in Elements is to save those files as PNGs.  If you save them as JPEGs, the background will save as white.

Since the background of my blog is white, it’s not good for showing you this type of example.  So I’m going to put the examples on a pretend gray blog page.

Here is my watermark saved as a PNG on a pretend gray blog background.

And here is is saved as a JPEG.

That is the same exact file, except for the PNG/JPG extension at the end.  The one with the white background is going to look like a square unless your blog or website is the same color white.  The PNG graphic, however, will look like a circle where ever you put it.

That brings us to an interesting concept about Elements.  You can only have rectangular files.  But if your design pixels are in the shape of a circle and you save as a PNG to keep your background transparent, your graphic will mirror the shape of your pixels.  You can see from this image that transparency, in PSE, is indicated by the gray and white checkerboard.

(You can actually customize the appearance of that checkerboard in PSE, if you don’t like it.  Go to the Edit Menu, select Preferences and then Transparency.  You can chance the color and size of the grid.)

I know you understand this by now and I don’t need to repeat myself, but I’ll say it again anyway. If I were to save the image above as a JPEG, it would look like a white square with a circular logo in the center.  If I save it as a PNG, it will look like a circular logo with no background.

Let’s look at with scrapbooking in mind.

I have this picture of my daughter jumping and I want to extract her and put her in a digital scrapbook layout with graphic embellishments around her.

After extracting her, I save the file as a PNG so that I can show her jumping out of any graphic I want.

So this is the version where I used the PNG on top of my graphic.And this is the version where I used the JPEG instead.  Way more sloppy, right?

In case you’re wondering how I selected my daughter to cut her out of the original picture, I didn’t.  Well, not exactly.  This is what I did:

  • Cropped the picture to get rid of the ground.
  • Grabbed the Magic Wand Tool (shortcut is W)
  • Clicked once in the sky to select most of the blue.  Then clicked on the second icon in the Magic Wand options bar at the top.  It says “Add to Selection” when you hover over it and looks like 2 sticky notes.
  • Clicked once in three places:  between her fingers, between the strands of the hair, and close to the edge of her shirt to refine the selection.  My selection looked something like this:
  • Note that it’s the sky that’s selected, not the girl.  So, I typed shift+control+I to invert the selection.
  • Refined the edges of the selection by going to the Select Menu/Refine Edge and choosing these settings:
  • Typed control+C to copy and pasted her into a new file.  I finished by selecting the Eraser tool, soft round airbrush style, and erasing those crazy strands of hair.
  • After saving as a PNG, this file is ready to be placed on any graphic.

{ 52 comments… read them below or add one }

Leave a Comment

{ 1 trackback }

Previous post:

Next post: