How To: Creating a picture with a transparent background

WB
Posted By
Wayne_Burlingame
May 19, 2004
Views
806
Replies
10
Status
Closed
Hello,

Sorry for the Dummy Alert here, but I am new to PS and it looks like it takes a Engineering degree to figure it all out.

I want to do something really simple.

Create a picture with transparent background.I would also like to know how to take an existing .psd or .png file and use the text in the picture but make the current background transparent as I only want the text from the picture.The picture is one layer with a white background and some styled text.

What I can tell you is I am using :

Windows XP
Adobe CS
RGB 16 bit
Color profile is sRGB IEC61966-2.1

Can someone run through a quick settings check so I can verify if I have all my settings correct. Actually I have only changed one or two setting and can change them back to defaults if needed.

Thank you,

Wayne

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

CW
Colin_Walls
May 19, 2004
What are you going to do with this resulting image?
Your answer affects somewhat how you would go about this.
WB
Wayne_Burlingame
May 19, 2004
Hello,

I am currently using all these graphics for web pages so I am wanting the picture transparent to blend with my cell bacground.

Wayne
CW
Colin_Walls
May 19, 2004
OK, there are 2 ways:

1) If your picture is photographic, you’ll want to use a JPEG. This format does not support transparency, so you will have to recolour the background to match your Web page.

2) For simpler graphics, you can use a GIF. Just double-click on the layer name in the Layers palette and accept the dialog. Select the background [magic wand?] and delete it. Use Safe for Web and choose GIF.
WB
Wayne_Burlingame
May 19, 2004
Hello,

I have been able to do the following: Either open a .gif file, use the wand tool and use the same color as my cell in the web page.

Question on this issue: The picture sometimes looks choppy around the edges. Is there a way to smooth out the photo after doing this?

I also saw another string, where you can use .png or .gif and then make your background of the pik transparent. Is this possible?The string said to choose "file>save for the web…
I am a little confused about what settings to choose as there is .pgn .gif along with normal, dithered, diffussion transparency, etc… and a lot of other setting choices.

Thank you again,

Wayne
L
LenHewitt
May 19, 2004
Wayne,

If you go to Save for Web >Gif and in the GIF colour palette drag the background colour to the transparency icon at the bottom of the palette box it will become transparent
WB
Wayne_Burlingame
May 19, 2004
Hello,

Thank You, that seemed to work well.

Can I ask again this question: What is the best way to clean up the file after doing this as it seems choppy around the borders, has a little unwanted color,etc… It appears to just need a little more work to get to to look original but-without-the-original-background?

Wayne
GH
Gernot_Hoffmann
May 19, 2004
Wayne,

a transparent GIF is always "choppy" because there is no interpolation with respect to the background.
The GIF doesn´t know the prospective background.
Transparent GIFs should be prohibited, IMO.

It´s really better to use a JPEG with a well defined back- ground color.

The background in the table cell should be made by a repea- ted small JPEG (16×16 pixels) which is derived from the
source image background.
The table cell cannot be defined by hex numbers because the JPEG background is slightly different to the source image background (JPEG shifts the numbers).

Dither/Diffusion means: replace an image with many colors by an image with few colors by the creation of a pixel
pattern which looks reasonably, averaged by eye and brain. This is ONLY relevant for GIF, but not for JPEG, where we have 16 millions different colors.

Best regards –Gernot Hoffmann
WB
Wayne_Burlingame
May 19, 2004
Hello,

I am trying to understand all you are saying here and will have to read more to understand.

On the note of trying to use the .gif and transparency, I am using a requested hand drawn artwork text with a sorta white-grey background color. I am needing to get rid of this color as I need the text, but want a different color bg for the header area so it will match and not look like a big clunky picture was inserted. I have considered using a different font and just recreating the graphic but have not found a close enough font to get-by.

If there is an easier way to do this I can try that if someone has a suggestion?

Of course, if I wasn’t a novice with PS it would be a lot easier also ; )

I don’t really understand the jpeg thing you are talking about, but back to the .gif pik, it is transparent now but has white pixels near some of the edges which I need to color them grey like the text or a web-safe blue color in the cell.

Thank you for your reply,

Wayne
L
LenHewitt
May 20, 2004
Wayne,

In the S4W GIF dialog, you can select a Matte colour. Otherwise, any anti-aliasing will be done to white which is probably what you are seeing. If you select a blue as your matte that should solve your problem
PA
Peter Aitken
May 20, 2004
wrote in message
Hello,

Thank You, that seemed to work well.

Can I ask again this question: What is the best way to clean up the file
after doing this as it seems choppy around the borders, has a little unwanted color,etc… It appears to just need a little more work to get to to look original but-without-the-original-background?
Wayne

A GIF can have one and only one color defined as transparent. Let’s say that’s white. The problem you are seeing is when pixels at the edge of your text are almost but not quite white (due to anti-aliasing of the text). They will not be made transparent and will show up as white dots around the edge of the text.

Here’s how I approach this. Make the background simlar to the text. For example black text on a dark gray background, then define the dark gray as the transparency color. These missed pixels will then be darker gray and will look like part of the text.


Peter Aitken

Remove the crap from my email address before using.

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

Related Discussion Topics

Nice and short text about related topics in discussion sections