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 trialTrent C
530 PointsEditing 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
39,199 PointsThis 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.
Devin Gray
39,261 PointsWell 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
530 PointsThanks 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
530 PointsI simply duplicated the layer several times so the images became opaque, where the second option was very helpful thereafter.
Thanks again!
Trent C
530 PointsTrent C
530 PointsThank you tenfold, James. I had no idea this kind of content was available!
James Barnett
39,199 PointsJames Barnett
39,199 PointsTrent 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
530 PointsTrent C
530 PointsJames Barnett again, thank you for these flawless links!