Topic: I need to change the color of a png while keeping it antialiased?

I need to change the color of a png while keeping it antialiased? The png image is only about 15px by 15px, and it's circular, and it sits within a gray box. When I enlarge it and add the color I want to it, it takes away the antialias. You know, all the pixels on the outer edge of the image bleed into the gray box color so it looks antialiased. So what's the best tool for this job? Thanks!

Last edited by Eric (2009-01-12 19:13:16)

Re: I need to change the color of a png while keeping it antialiased?

If you are working with a PNG, you should be able to open it up in Photoshop and add a new layer below the image and fill that with whatever background color you need. Any antialiasing should adapt automatically to the new background color.

You have a link to the image you are talking about?

Re: I need to change the color of a png while keeping it antialiased?

Cool! Here is the link. I need to change the blue circle to color #3FC. Do the same rules apply now armed with this link?
http://www.visibilityinherit.com/projec … h-icon.png

Re: I need to change the color of a png while keeping it antialiased?

Ummm... nevermind. I misread your comments and thought you were trying to do something else. Here are the proper steps:

Steps:

1 -- open the file in Photoshop
2 -- create a new layer above "layer 0" (which contains the original PNG), and name it "match"
3 -- using the pencil, paint in a small spot of the #33ffcc color on the "match" layer. This is just for matching later.
4 -- duplicate "layer 0", and place it between layer 0 and the "match" layer you just created in step 2. Rename the layer "copy" just for clarity's sake
5 -- select the duplicated layer, and then adjust the colors using Image > Adjustments > Hue/Saturation until it nearly matches the color you are looking for (the blue circle includes a gradient, so it won't be exactly #33ffcc). Compare it to the #33ffcc in the "match" layer. This will mostly be done by adjusting the "Hue" slider.  Make sure that the "preview" checkbox is on, so you can see what your changes will look like.
6 -- once you have adjusted it to your liking, do a Save for Web

Make sense?

Re: I need to change the color of a png while keeping it antialiased?

Thank you Ben! I'll try that. I didn't even notice that the blue had a gradient. If I want to duplicate the gradient with my color - are there different steps? Thanks again!

Re: I need to change the color of a png while keeping it antialiased?

Eric wrote:

Thank you Ben! I'll try that. I didn't even notice that the blue had a gradient. If I want to duplicate the gradient with my color - are there different steps? Thanks again!

No, the steps are the same. Hue/Saturation will adjust the gradient.  You'll see what I mean when you actually try it.

Re: I need to change the color of a png while keeping it antialiased?

Nice - I'll do it tomorrow morning when I have my gallon of coffee in me at 4am. While your here - by chance do you know (or any one) how to add text into a input field by default, but, have it disappear when you type in it?

Well I finally just found one method. Anyone know better http://www.456bereastreet.com/lab/autop … ut-fields/

Last edited by Eric (2009-01-12 21:04:14)

Re: I need to change the color of a png while keeping it antialiased?

you could set the default value using

<input value="default value here..." ... etc

and then clear it on click with javascript:

<script language="JavaScript" type="text/JavaScript">
function clearDefault(field) {
if (field.defaultValue==field.value) { field.value = ""; }
}
</script>

<input type="text" name="name" value="name" onFocus="clearDefault(this)">

Re: I need to change the color of a png while keeping it antialiased?

Huh. I hadn't seen your edit when I posted the above comment... The 456BereaStreet method works, but it sure seems like a lot of code for a very simple purpose. Perhaps there is something about the demo that I am not getting. I'd have to look at the post that went with the demo...

Re: I need to change the color of a png while keeping it antialiased?

Oh I put the wrong link in. here it is. http://www.456bereastreet.com/archive/2 … avascript/

I agree though - too much code. I'll try yours - if it works - I'm using it! Thanks again, again! 456bereastreet was making it more assessable I think - hence all the code. But that's not worth all the code to me...

Re: I need to change the color of a png while keeping it antialiased?

you could set the default value using

<input value="default value here..." ... etc

and then clear it on click with javascript:

<script language="JavaScript" type="text/JavaScript">
function clearDefault(field) {
if (field.defaultValue==field.value) { field.value = ""; }
}
</script>

<input type="text" name="name" value="name" onFocus="clearDefault(this)">


Awesome - works perfect - your the man!

Last edited by Eric (2009-01-12 21:32:32)

Re: I need to change the color of a png while keeping it antialiased?

falkencreative wrote:

Ummm... nevermind. I misread your comments and thought you were trying to do something else. Here are the proper steps:

Steps:

1 -- open the file in Photoshop
2 -- create a new layer above "layer 0" (which contains the original PNG), and name it "match"
3 -- using the pencil, paint in a small spot of the #33ffcc color on the "match" layer. This is just for matching later.
4 -- duplicate "layer 0", and place it between layer 0 and the "match" layer you just created in step 2. Rename the layer "copy" just for clarity's sake
5 -- select the duplicated layer, and then adjust the colors using Image > Adjustments > Hue/Saturation until it nearly matches the color you are looking for (the blue circle includes a gradient, so it won't be exactly #33ffcc). Compare it to the #33ffcc in the "match" layer. This will mostly be done by adjusting the "Hue" slider.  Make sure that the "preview" checkbox is on, so you can see what your changes will look like.
6 -- once you have adjusted it to your liking, do a Save for Web

Make sense?

Those directions were perfect. Did it - looks perfect! smile