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 }

thatgirlblogs February 4, 2011 at 11:31 am

I am going to read this 10 more times until I understand it, but thank you!

Reply

admin February 4, 2011 at 11:45 am

Oh no, I hope it doesn’t take 10 times! Let me know if you ave questions!

Reply

Bre February 4, 2011 at 11:34 am

When you save it as a PNG do you interlace it or select none? I am using PSE 6. Also, when I send these files to others who do not have PS or PSE they open with either a gray or black background….does this mean it is not working on their end? Any suggestions or help would be great! You can email me at brianaj518@mywdo.com

Reply

admin February 4, 2011 at 11:49 am

I select none, but only because that’s the default. Are these people opening the file in a browser? I know there are issues with older versions of Internet Explorer and transparencies. Does that help?

Reply

ingrid February 4, 2011 at 11:51 am

Great! Thanks for sharing! I really need to go through your archives. I’m pretty sure I’m missing out on some helpful info.

Happy Friday!
~ingrid

Reply

admin February 4, 2011 at 11:56 am

Thank you Ingrid!

Reply

Andrea February 4, 2011 at 12:49 pm

Thanks,
I needed that one little tidbit…I had forgotten about that png..trick. It’s gonna my life so much easier!!! lol

Reply

Diane February 4, 2011 at 12:51 pm

Thanks so much for explaining everything!!!

Reply

Malissa February 4, 2011 at 1:26 pm

THIS IS SOOOOOOOOO TIMELY!!!! (sorry to yell- I’m so excited and happy!!!)
THANK YOU, THANK YOU, THANK YOU!!! Actually, I am working on my blog design and have been trying to figure this out for awhile now so I wouldn’t have to have a white background and also for my photography logo. I was going to do some research online today and you saved me a tremendous amount of time! I am so glad I receive your newsletters! They are full of information.

Reply

admin February 4, 2011 at 2:23 pm

Thank you Malissa! I’m so glad I could help!

Reply

ShaBean February 4, 2011 at 1:48 pm

The timing on this couldn’t have been better for me!! I have literally been stomping all over the internet getting more and more frustrated trying to figure out how to create a logo with a transparent background so I don’t have to recreate it every single time on the image I want to add it too or have a block of a photo. I’d almost given up hope! THANK YOU!

Reply

admin February 4, 2011 at 2:24 pm

I am so glad to help!

Reply

Diane @ InMyOwnStyle February 5, 2011 at 9:42 am

Thank you so much for posting this great tute. I am giddy with excitement that I will be able to do this now. Thank you so much! I can’t wait to try it.
My best- Diane

Reply

admin February 5, 2011 at 9:44 am

You are welcome, Diane! I’m glad you like it!

Reply

oh amanda February 5, 2011 at 8:18 pm

Awesome. Thanks for this tutorial! I’ve been looking for some PSE stuff and I’m off to look thru the rest of your posts now! :)

Reply

Tamara June 30, 2011 at 7:08 pm

I have a bit of a related question. I’ve got some scrapbooking .png files that look like they are transparent (small checkerboard background) but are not. I can only extract the image. I’m told if .png files are coming into my PSE6 program (Mac version) this way, they are coming in because of a setting that needs to be adjusted. I’ve looked at the transparency setting in preferences and it doesn’t seem to relate. Any thoughts?

Reply

Erin July 1, 2011 at 9:21 am

Hi Tamara, when do you realize that they’re not transparent? When you put them in a layout? When you print them?

Reply

Bev Cavera December 27, 2011 at 11:52 pm

Followed your directions…I really must be doing something wrong! I get the marching ants around the perimeter but not around the object to be extracted. I am using PSE9.

Reply

Diane December 28, 2011 at 8:21 am

I never thought about selecting the b/g and inverting to get my extraction. Much easier than trying to get those fingers and hairs! Thanks for all your help and advice!

Reply

Corinna February 26, 2012 at 9:27 pm

Thank you so much!! This was sooo helpful:)

Reply

tina April 21, 2012 at 9:54 am

I need to create a block style transparent number that I can slip a digital paper design in as the back ground? any thoughts on how i begin :( thanks!

Reply

Michelle Harllee August 29, 2012 at 1:34 pm

I have read many directions for using photoshop while doing google searches. Yours in very reader friendly and simple. Thank you! -Michelle

Reply

Erin August 29, 2012 at 3:35 pm

Thanks so much, Michelle! Glad I could help!

Reply

Lou Anne September 21, 2012 at 6:44 pm

When I try to upload a png with a transparent background into my blog, it still has a white background. Do you have a tutorial for how to fix that?

Reply

Janelle September 26, 2012 at 11:25 am

THANK YOU so much!!!!! I had an image I was trying to edit for my husband, and I needed to edit out the white background around a circle, but couldn’t figure out how to keep the circle without just changing the background color — I didn’t know how to invert the selection.

Reply

Geri November 5, 2012 at 8:06 am

Hi and thanks, unless I missed something I believe it should be mentioned that when we save as a .png we must also select “merge visible” rather than flatten. Flattening will keep the background white. Correct?

Reply

Erin November 5, 2012 at 8:21 am

PNGs only have one layer. No need to Merge Visible or Flatten.

Reply

manas November 21, 2012 at 8:13 am

Thanks this is helpful :)

Reply

Photgirl December 10, 2012 at 11:33 pm

I have followed all the instructions, and it looks transparent, but no matter what I do, when I go to place in onto another image, it shows up with a grey box. I am adding a logo that I created in Photoshop as a watermark to a new layer on another photo by dragging it from the bin at the bottom. Any help would be appreciated :)

Reply

rob December 23, 2012 at 11:17 am

hi i got same prob as photgirl i extracted an image using poly lasso and saved as png ut when i put it over another image i get a grey box around it help

Reply

rob December 24, 2012 at 12:34 pm

update on my last post for photgirl the method described here will not work for pse6 unless you use the magic extractor to extract the image then save as a png or if itis a difficult subject for the ME then open the image and duplicate the layer then turnoff the original then extract the image using the other tools ie polygonal lasso then in save file save it for web as a png hope this helps

Reply

Juls December 29, 2012 at 2:07 am

Saved as .png ; looked OK…. However when placed into Windows Movie maker as a slide, it appeared with white rectangular background
Any idea? Thanks, Juls

Reply

Beth Y April 1, 2013 at 2:54 pm

Oh you are wonderful!!! Thank you so much for helping me create my own png elements!! I am so excited. My world is suddenly very, very big.

Reply

danish muneer April 20, 2013 at 12:33 pm
Kevin April 26, 2013 at 3:54 pm

Thank you soooooo much!

You really saved the day!!!!!!!!
Peace,
kiGZterSHMK

Reply

jack May 15, 2013 at 8:48 pm

You Rock…had a problem with saving a logo, read your blog and “voila” problem solved…Thanks so much.

Cheers

Jack

Reply

Erin May 16, 2013 at 10:35 am

So glad I could help!

Reply

Brianna June 23, 2013 at 2:03 pm

First off, great tutorial! I doubted the instructions but as soon as I open Photoshop Elements side-by-side to your tutorial it was really easy to do!
The only issue is when I get to the part of Copying & Pasting the image, it pastes the background to the image on a transparent background (for example, it pastes the sky portion in your photo and the transparent part is your daughter’s outline). I can’t seem to figure out what’s causing this. Everything else went according to your tutorial until the paste part. Is there something that is clicked by default that I don’t know about that is causing this?
Screen shot at this link: http://img545.imageshack.us/img545/2701/caq.png

Reply

Erin Peloquin July 11, 2013 at 2:27 pm

You missed this step: Note that it’s the sky that’s selected, not the girl. So, I typed shift+control+I to invert the selection.

Reply

Holly July 15, 2013 at 10:40 am

I am so thankful to have stumbled upon your blog/website. I find your instructions to be clear and easy for non-techies to understand. The PSE forums have yet to help me in any way. They tend to make me even more confused than I was before I clicked on it!
I finally understand how to add elements to the magic wand thing in PSE. And understand how to save images with a transparent background.
YOU ARE A SAINT! THANK YOU SO MUCH!

Reply

Erin Peloquin July 17, 2013 at 12:10 pm

Thank you so much, Holly! I am glad I can help!

Reply

Angie Steingass September 7, 2013 at 3:10 pm

Just started working on a new project where I needed this skill. LIFESAVER!! Thank you for making it so simple.

Reply

soegaraedy October 11, 2013 at 5:03 pm

Afterward, I only need to add transparent background in the new .PNG image.

Many thanks !!

Reply

Bethany October 13, 2013 at 11:16 am

I have a logo that I have already created and is saved as a JPEG. When I try and upload it onto my photo the white background apprears. I want it to show just the logo or the writing. I tried to resave it as a png but the white background still appears. How do I get rid of the white background if the logo is already saved as JPEG? Thank you in advance!

Reply

Adele February 5, 2014 at 12:33 am

Easy to understand, step by step without being condescending, clear and concise. THANK YOU!

Reply

Stacie March 6, 2014 at 3:58 pm

THANK YOU!!! So simple to understand thank you!!!

Reply

RosL March 30, 2014 at 9:51 am

Thanks for this. For work (a very small charity) we have a logo that is saved as a jpg and there are times when we’d like a transparent version. I’ve tried saving it as a png both with interlacing and without but it still retains the white background.

It’s not a solid shape, but wording, and a shape with a hollow centre containing letters. So using the magic wand tool also would be quite fiddly. Is there an easy way to do this please since simply saving an existing jpg file as a png isn’t doing it.

I only have a very old version of Photoshop Elements, 4.0 and no cash to upgrade.

Thanks

Reply

The Ginger Mama March 31, 2014 at 7:08 pm

I have tried this with my logo and I may need some help. I’ve saved and resaved as a PNG and it’s not making the background transparent…

Reply

Lyndal April 1, 2014 at 6:11 am

Exactly what I was looking for. Thank you!!

Reply

Laura Perryman April 15, 2014 at 8:09 am

Ok the problem I’m having and is still confusing is I have a photo booth software with DSLR remote pro. And on order to make logos I have to make JPEG files for the printer to pick it up. Is there a way around that?

Reply

gio220 April 30, 2014 at 5:06 am

I am so going to rock making my daughters Gymnastics collage. Thank you so so much. Of all the times and tutorials I have tried, with this one I was done in a few minutes. Did I say Thank You!!!!!!!

Reply

Erin Peloquin May 1, 2014 at 2:41 pm

Yay! So glad to help!

Reply

Leave a Comment

{ 1 trackback }

Previous post:

Next post: