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.
Well, you still need to define the correct background color, even when saving transparencies. This is a limitation of the GIF file format – Since it uses at most 256 discrete colors, edges will be blended with the BG. Only "pure" colors will be removed to create the illusion of transparencies (and even that can be supressed in some viewers/browsers, as it’s merely a thing of correct client-side interpretation of a special tag). If no user-color is defined, the program will use your current BG/ FG colors.
Mylenium is right; when you made the transparent background, you started with a white background, and that’s what you can still see. Start with a black background, then delete it to get the clear one.
(Incidentally, if you’re putting it on a black background, the one you have looks great; no need to make it transparent.)
wrote in message
Well, you still need to define the correct background color, even when saving transparencies. This is a limitation of the GIF file format – Since it uses at most 256 discrete colors, edges will be blended with the BG. Only "pure" colors will be removed to create the illusion of transparencies (and even that can be supressed in some viewers/browsers, as it’s merely a thing of correct client-side interpretation of a special tag). If no user-color is defined, the program will use your current BG/ FG colors.
Well here is the issue with that. The logo I am creating is going to be placed on the header of my site, and the header background is an image, Not a solid color. But a texture of blue, black, gray.
How would I go about defining that as the logo’s background then ? If I were trying to place it onto a solid color, transparency wouldn’t even be needed.
Pick a color close to one of those. It may not be perfect, but will be a lot less noticeable than white. Just don’t fixate on the fact that it doesn’t match perfectly … it is only because you are now looking for the problem that you see it.
Wait…why is nobody suggesting the image be saved in the PNG24 format?
No worries, then, about the color or texture of the background the transparent image is overlaid upon.
Oh, and Kris…there’s not one single thing wrong with using PS CS2. Never versions don’t offer anything extra that you’d be missing for the job you want to do.
Keep the text, the "target" icon, and the gray bar on separateand otherwise blank & transparentlayers. Ditch the Background or hide it.
Go to "Save For Web" and choose PNG24, "Transparency" box checked, with NO matte color.
And DO NOT scale your image by using width and height attributes for your <img> tags. Create the image the exact size you want it to be when it’s displayed on your webpage.
It sounds like you’re still starting with a background, and then deleting the background, which will always leave edges the color of the background.
Since you have this on a white background and also on black, you must also have a master copy somewhere of the text/logo with no background, don’t you?
You’ll have to have the background of the .psd transparent, and have text that has never been planted on a background, to have clean edges.
I wouldn’t worry about old browsers. I check what systems people are using on my web sites occasionally, and the percentage using very old, outdated browsers is very, very low, well under 1 percent (usually under .1 percent). Use a .png if you want.
But, still, as long as you aren’t trying to remove an existing background, a ..gif can still do a pretty good job.
wrote in message
Okay , I’ve tried converting it to PNG24 from PSD.
Now, I really want to avoid using ‘.png’ due to the fact that earlier browser versions do not support it, from what I read.
This one logo has takin two days. an still no luck.
When I save it to ‘.png’ and view it in the browser the background become white.
I’ve watched a few different video’s on creating a transparent image and I continue to have this issue.
Do you think I missing some step to making it transparent ? I started creation by: New -> Background content -> Transparent Then -> Merged the layers -> Save For Web -> PNG24 ( Also tried PNG8, GIF ) . ——————————————
Now I’ve watched others doing this by adding a layer mask, yet still seem to get failure with this, maybe I’m not doing it properly.. Is there any documentation or tutorials that would help me ?? Or some step that I’m missing, Do I have too add a layer mask ?
A quick-and-dirty approach is to use the textured background in Photoshop as a layer underneath your logo. Then alter the transparency of your logo on its separate layer, until you get the desired result. Once you’re happy, merge down the layers and save the file as a Jpeg and place it on your site. You may need to do some tweaking to get the texture to match up with the header graphic on your web page, but alternatively you can make the entire header a Jpeg image so it’s rendered exactly the way you want in the browser.
Sometimes a blunt instrument works better than technological elegance.
Now, I wouldn’t really know where to start putting the logo on such a small image, unless I re-sized the header image. And If I did that, I wouldn’t know the correct width to fill the browser.
How should I go about this ? I’d like to stick with the original header image as my background.
I apologize for all the questions, I’m fairly new to photoshop/graphic design.
If you create a JPEG image that combines the logo with the diagonally striped BG pattern, I think you realize how tough a job you’ll have lining it up with background-repeat: repeat-x; pattern so that it looks properly integrated.
It all comes down to the question of where best to spend the effort.
Nice, That’s exactly what I want, the top one. It’s just the matter of doing it. There has to be something I’m missing, or not doing right to make it transparent like that.
Kind of angers me to know I spent two days trying to accomplish the same thing you just did, yet failed.
Send your email address to phosphordigital [at] gmail [dot] com.
Then get ready for a 572 kb ZIP-compressed folder with some files for you to analyze. You’ll have fun with them, because they’ll open your eyes. The only problem you may encounter will be font substitution. No big deal…just "OK" the subs.
I’d’ve posted that eventually, after Kris had a chance to look at the various PSDs (with vector shapes and everything else grouped as Smart Objects) and PNGs I sent her.
I was going for an orderly progression of learning, but that’s cool. Saved me the trouble of finding it in my bookmarks barge!
I was kind of figuring Kris would continue the conversation in here. Maybe she’s busy.
Anyway, it really is as simplae a solution as described.
Keeping the type unrasterized, and creating the other shapes as vector objects allow them to be resized at will, with virtually no loss of image quality. Layer Styles creates the effects, a simple mask creates the faded reflection in the inverted text.
Saving the image through the Save for Web dialogue as a transparent PNG24 allows the logo to be placed over any background with no worries about setting a matte color, or flattening the PSD against a patterened or colored background. No fringing…just a perfectly clean logo.
so the solution is to use png format to save when you have a patterned background page and add the file for older browsers to enable the fomat I do web design very rarely but I have used png before and very happy with the results
