Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design How to Make a Website Creating HTML Content Structure the Image Gallery

Trent C
Trent C
530 Points
Posted by Trent C
Trent C
530 Points

Editing contact images/brand assets

Regarding the Facebook, Twitter and Mail icons Treehouse provides, I very much like the size and style the images are in. For my future needs, I'd prefer them in white, and fully opaque.

I've attempted to modify the images themselves, as well as obtain and modify originals from the respective brand assets pages, but I'm no PS whizz. If anyone has any suggestions, I'd appreciate it. Alternatively any links to blogs or pages offering my finicky request would be great.

Thank you

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

This is what icon fonts are for, fontawesome has a nice selection of brand icons that can easily resized and have backgrounds modified all with CSS.

Trent C
Trent C
530 Points
Trent C
Trent C
530 Points

Thank you tenfold, James. I had no idea this kind of content was available!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Trent C - When I discovered icon fonts it blew my mind.

You can also check out the very neat proof of concept http://weloveiconfonts.com.

They are pretty simple to use http://codepen.io/jamesbarnett/pen/ngbIw

Trent C
Trent C
530 Points
Trent C
Trent C
530 Points

James Barnett again, thank you for these flawless links!

Devin Gray
Devin Gray
39,261 Points
Devin Gray
Devin Gray
39,261 Points

Well it depends which version of PS you have, I work with CS6 for a living and there are a variety of ways to do this.

1) the quickest and easiest way is to select whatever parts of the icon you want to change with the magic wand tool.

2) go to edit > adjustments > replace color to replace it to the color you want.

Or after you select the parts of the icon you want to change

1) Open an adjustments window I believe you can do this in the window's option and when you have an adjustments window open with the colors you want changed selected, you "add hue/saturation layer" this will help you change the color of the layer without messing up the original image. then you change the hue saturation layers you like or you can go to the bottom where it says "Fx" you click on that and click "cover overlay" then you can put in the exact hex code you want the color to be and the type of overlay you want the color to display in.

Sorry I don't have PS in front of me so my instructions might be a little bit off.

But treehouse has a great intro to photoshop course and it teaches you what you need to know about masks and changing colors and that should help you if I could not.

Trent C
Trent C
530 Points
Trent C
Trent C
530 Points

Thanks for your advice, Devin.

The problem with the images Treehouse provides is that they aren't smooth vectors, so the magic wand didn't work as I initially expected. Allow me to try your second option, and I'll get back to you.

Thanks again, friend.

Trent C
Trent C
530 Points
Trent C
Trent C
530 Points

I simply duplicated the layer several times so the images became opaque, where the second option was very helpful thereafter.

Thanks again!