Jump to content

Recommended Posts

Posted (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 by Eric
Posted

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?

Posted

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?

Posted
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.

Posted (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 by Eric
Posted

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...

Posted (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 by Eric
Posted
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! :)

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...