PicnicTutorials Posted January 13, 2009 Report Share Posted January 13, 2009 (edited) 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! Edited January 13, 2009 by Eric Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 13, 2009 Report Share Posted January 13, 2009 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? Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted January 13, 2009 Author Report Share Posted January 13, 2009 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/projects/images/search-icon.png Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 13, 2009 Report Share Posted January 13, 2009 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? Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted January 13, 2009 Author Report Share Posted January 13, 2009 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! Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 13, 2009 Report Share Posted January 13, 2009 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted January 13, 2009 Author Report Share Posted January 13, 2009 (edited) 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/autopopulating-text-input-fields/ Edited January 13, 2009 by Eric Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 13, 2009 Report Share Posted January 13, 2009 you could set the default value using and then clear it on click with javascript: function clearDefault(field) { if (field.defaultValue==field.value) { field.value = ""; } } Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 13, 2009 Report Share Posted January 13, 2009 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... Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted January 13, 2009 Author Report Share Posted January 13, 2009 Oh I put the wrong link in. here it is. http://www.456bereastreet.com/archive/200710/autopopulating_text_input_fields_with_javascript/ 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... Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted January 13, 2009 Author Report Share Posted January 13, 2009 (edited) you could set the default value using and then clear it on click with javascript: function clearDefault(field) { if (field.defaultValue==field.value) { field.value = ""; } } Awesome - works perfect - your the man! Edited January 13, 2009 by Eric Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted January 13, 2009 Author Report Share Posted January 13, 2009 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! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.