icon coloring tut.
This is my first tutorial, but it is just a guideline to help people that had the same problems i did.
You should also be somewhat familliar with gimp at this point, if you are not you may want to
go to gimp-users to find beginners tutorials.
the tutorial was written for gimp, but i'm sure can be translated in to photoshop.
1. Crop the image
start with this picture of kristen bell. crop it anyway you want as long at it is no larger than 100x100.
2. Add new layer
First go to fill color and change the color to a neon blue. (#7eede6)
Then add a new layer and select Foreground color. Your dialogue should look like this
3. Set layer mode
Your new layer should look like this. Now that you have the first color, find the mode drop down menu in the layers section and select the burn mode at opacity 100%.
4. Create another new layer
This step will be very similar to step 2, execpt this time we are using a different color. Now change the fill color to a neon pink. (#eaa0d6). Then do the same as the end of step 2, add a new layer, select foreground color your dialogue should now look like this (its a bad jpg i know)
5. Set layer mode
This layer mode should be set to overlay at opacity 100%.
6. Duplicate layer
Since the pink undertones are a little hard to see, duplicate the layer by click on the button with 2 pieces of paper on it and it will duplicate the layer for you. Make sure you set the opacity for this layer at 65% instead of 100%, because the 65% will make the icon less pink and will help the blue to stand out.
7. Add a new layer
Select fill color like a peachy orange (#f1d7ba). Make sure the new layer is set to foreground color again, and click OK. Now make sure that you set the mode to overlay, and the opacity at 20% this helps to make kristen's skin not so pink and give it a slight peachy natural color, but it also keeps the coloring in the rest of the icon.
-------------FROM THIS POINT ON EVERYTHING IS OPTIONAL----------------
8A. Brightness/Contrast
I like my icons not too bright, but at the same time not too dark. So in the image area, find the layer menu, click on it and select colors > brightness-contrast... My settings were
Brightness : -30
Contrast : 10
8B. Sharpen Image
Make sure you have your actual image/background selected, don't have one of the color layers selected or it will not work. Again in the image area, find the filters drop down menu. Go to filters > enhance > sharpen. And I put my settings at 10.
8C. Merge Image
If you are satisfied with the way your icon looks, you can merge the images (cntrl + m, select clipped to bottom layer). Then save, I would suggest saving as png image because it doesn't make the images look crappy or lose color after they've been saved. If you know you would like to go back and edit the image or layers again, save it the image as xcf image. XCF is the gimp file extention, it allows you to save the image as layers instead of having to flatten or merge them so you can go back and make any changes layer. I personally save them as both png & xcf in 2 different folders so just incase i don't like that icon i can change it, or i can upload it when necessary.
I would love to see what you all came up with, hopefully it doesn't look exactly like mine, but its something unique that you made yourself.
x-posted: countryfied, gimp-users, icon-tutorial