0

Is it somehow possible to edit the color of something that's in a .png file that cannot be edited?

I'm trying to change colors of icons in a .png file that's used as a .css sprite. The originals are from Twitter Bootstrap.

A guy who did manage to change the color (See attachments. White and Black are Originals, Blue is the edit), said he did it using GIMP.

But how is this possible? Does anyone know the procedure? I'd like to create some 2 more colors in all.

Would really appreciate some help on this.

Original Black

Original White

Edit Blue

2 Answers 2

6

To be honest, I'm not quite sure what your problem is. At least in my download of bootstrap, there is no .png file, just font files (as .ttf, .woff, .svg and .eot).

So here are some ideas:

1: If you literally want to change the picture you have uploaded, open it in Photoshop, set Image -> Mode to RGB and color it using a Hue/Saturation Layer with colorize turned on.

Should your .png file literally be blocked (and to be honest, I've never heard of that) just download the version from your post here. I can open, edit and save it just fine.

2: Should you want higher resolution, just install the font glyphicons-halflings-regular.tt), create a new Photoshop document, insert all icons in the size you want them in and just set the text color.

3: If you want to use it in a website, don't change anything - just set the css-color-property where ever changes are necessary.

I hope this helps.

4
  • These png files are available in the older version of Bootstrap here: http://getbootstrap.com/2.3.2/assets/bootstrap.zip The latest version uses something totally different.
    – Norman
    Commented Jun 16, 2014 at 5:50
  • Again, I can edit them just fine using Photoshop CS6 (I can test it with Photoshop CC when I get back home). What program are you using and what message do you get? Commented Jun 16, 2014 at 7:17
  • I have a trial version of Adobe Photoshop CS Version 8.0 and Gimp 2.8.10. My problem is, I just don't know how to use these two things. I did try your suggestions, but end up filling the entire image with color.
    – Norman
    Commented Jun 16, 2014 at 7:51
  • Oh, okay. youtube.com/watch?v=XZfA-jcTO54 - this video seems to be explaining it just fine. Make sure to tick the "colorize" box. Also, the image should have a transparent background. If it doesn't, you might have accidentially saved it as a non-transparent version at some point. In that case, just download it again and the layer will only change the icons. Commented Jun 16, 2014 at 7:55
0

A better response is to use Font Awesome then to use html/css to change the color of the icon. It is much simpler and has more icons.

Hope that helped.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.