I'll put the little fish to work one more time before moving on to the magnetic lasso.

Suppose you need an image with a transparent background for your website or blog.  A logo, maybe, and you need the background color or image of the web page to show right up to the edges of the logo, like this:

 

Instead of this:

 

Photoshop Elements Help files recommend using the background eraser.  That works, but it can be time consuming.  Here's one quickie way to create an image with a transparent background:

First I opened up the fish-mailbox image.  Click on the magic wand.

 

Click the magic wand in the white background area.  When you release the mouse button, the white background is selected.

 

 

Click Select -> Inverse to change the selection from the background to the fish.

 

Leave the fish file open, and the fish selected.  Don't touch it for a moment.  Click File -> New -> Blank File

 

In the Background Contents dropdown box select Transparent.  Set your desired dimensions in the Width and Height boxes.

 

Elements will create a new blank file.  Notice the checkerboard pattern indicating the background is transparent.

 

Click back on the fish image to make it active.  Click on the Move tool. 

 

Click on the fish, and drag it into the new, blank, transparent-background file.

 

The .JPG (or .JPEG if your prefer) is the most common image file type on the web.  But JPG doesn't support background transparency.  To keep the background transparent, the file needs to be saved as a .GIF.  GIFs are also pretty common on the web. 

Short history:  The GIF format actually predates the JPG format.  It was  in 1987, by CompuServe Corporation  to be used for the storage and online retrieval of bitmapped graphical data.  The JPG Standard was issued in 1992 and approved in 1994.

Click File -> Save For Web

 

In the dropdown file type menu, choose GIF.  Be sure the Transparency box is checked. 

 

Click OK.

 
Post is included in group: Photography
Post is included in group: Photoshop Elements for Real Estate
Post is included in group: e-PRO Internet Technology

33 Comments on Create Image With Transparent Background

20 Most Recent Comments Displayed Show All

DEC
10
2007
Im just getting started with mine so Iwill look forword to seeing more.
5:00pm • #14

excellent tip.. not everyone knows how to use the transparent backgrounds..

 
5:39pm • #15
DEC
11
2007
362,046 Points 5 Featured Posts Localism Sponsor Attended Rain Camp
Good heavens!  You make me want to try figuring out PhotoShop again.... but I just don't have the time right now.  Thank you for the great info.
9:23am • #16
APR
25
2008

Thanks for the tip. It worked like a charm.

All the best !!!!
Stanley Ogunor
8:50am • #17
APR
26
2008
 I am wanting to purchase a photo editing program and have no clue how to use any of this...I hear a lot about Elements. Do you feel that it is a good one to start with?
8:49pm • #18
APR
27
2008
490,839 Points 28 Featured Posts Outside Blog Hit Router Attended Rain Camp Called Shot Master

Misty: I thinks Photoshop Elements is probably the best to start with.  If you ever decide to move up to the full version of Photoshop, much will already be familiar to you.  But Elements can do so much, you may never feel the need to move up.

For basic stuff like resizing and cropping you could also look at Irfanview.  It's free software, and a lot of people really like it.  I still use Irfanview to batch process several images at once.

You could download Irfanview and play around with it for a while, just to get the feel of Photo Editing.  Ditto for Picasa.  It's free, too, and can handle several basic editing tasks.
5:23am • #19

Cheryl,

Thank you so much for your tips! I already use irfanview but I will try Picasa and Elements. Don't be surprised if you hear from me again with questions! ;o)
9:52am • #20
MAY
07
2008
 Thanks for the information. Can you do a post on how to put your name or a watermark on a picture? Also I want to learn how to blur the background on a photo.
10:25am • #21
MAY
12
2008
1,008,955 Points 13 Featured Posts Localism Sponsor Outside Blog

Neat tip and the new file for the transparent photo makes it much easier and faster plus I am guessing you are able to leave the original jpg unchanged.
7:30pm • #22
JUN
04
2008

I did everything exactly as directed, but when I post my picture to my blog it still has the white background.  I use Blogger and was just adding it as a picture in my sidebar.  Does Blogger not accept the GIF format with transparent background?

If you can think of why this doesn't work on my blog, that would be great.
Albina Rose
5:10pm • #23
NOV
12
2008
204,621 Points 12 Featured Posts Localism Sponsor

you have to save it as a .gif. jpeg doesn't ohld transparancy. 
9:53am • #24
DEC
17
2008

thanks a lot...
Hemant
10:10pm • #25
DEC
18
2008
154,637 Points

You always come up with good stuff!
5:01pm • #26
DEC
29
2008
1,008,955 Points 13 Featured Posts Localism Sponsor Outside Blog

I liked this post so well that I have forwarded it to a few of my team members.
8:40am • #27
117,606 Points

Hi Cheryl,

Great post! But I had to laugh at the dialog between you and Margaret about doing hair. It can be an aboslute nightmare, no matter how you do it. Here's a glamour retouch of a bride I'm doing, and I'm still not happy with the hair. I know, maybe I will send it to you guys!

: )
9:48am • #28
490,839 Points 28 Featured Posts Outside Blog Hit Router Attended Rain Camp Called Shot Master

Michael,

That is a gorgeous editing job!   (Lovely bride, too.)  :-)
1:31pm • #29
DEC
30
2008
117,606 Points

Hi Cheryl,

Thank you for the compliment. But I did have pretty good subject matter to start with. I'm just trying to make her look a little better. This kind of retouching is fun though. And things like reshaping a waistline, or adding lip gloss and eyelashes, are a whole lot different than straightening verticals and making gray skies blue. But that's fun too.

: )
4:58am • #30
JAN
28
2011
169,299 Points 1 Featured Post

MAGIC!!  I hope I can do this.
11:50am • #31
JUL
27
2011
Outside Blog

Cheryl,

I'm a few years late to the post, but just wanted to let you know that I just used your post to create a picture with a transparent background and it worked great. Thanks,
4:09pm • #32
JUL
28
2011
490,839 Points 28 Featured Posts Outside Blog Hit Router Attended Rain Camp Called Shot Master

Thanks, Gary.   I'm been tinkering with Adobe Premiere Elements (video editing) lately.  I spose I should opost some of my notes here.  So I can find them again when I forget what I learn.  :-)
4:56pm • #33

20 Most Recent Comments Displayed Show All

Login or register to leave a comment
 
Cat-hat-cj Rainmaker_large

Cheryl Johnson

Highland Park, CA

More about me…

Cheryl Johnson, Bob Taylor Properties, Inc., Los Angeles, CA

Address: 5526 N. Figueroa Street, Los Angeles, CA, 90042

Office Phone: (323) 257-1080

Email Me

Caution: CAT BLOG AHEAD

Including random thoughts on life, art, business, stuff, and occasionally Real Estate.

What is a CAT BLOG?

According to Seth Godin: "Cat blogs are for, by, and about the person blogging. A cat blog is about your cat and your dating travails and your boss and whatever else you feel like sharing in your public diary." Well, I am the boss, my dating years are behind me, but I do love my cats.

Enjoy!

We’re Bloodhounds. We teach our clients to demand better service from real estate professionals.



Listings

Links

Archives

RSS 2.0 Feed for this blog