ulla (ullaaa) wrote in icon_tutorial,
ulla
ullaaa
icon_tutorial





1. first of all, create a 100x100px document.

2. choose your base. if you aren't doing just the coloring, i'd recommend you a picture which is "whole". so that there aren't other shoulder or other side of face missing.
of course you can do this with any picture, you just need to work on it more ^__^ and pics with easy (not too many colors or things) backgrounds are easier to deal with.
i chose THIS pretty picture of ashely greene. you can see her body's outlines and it doesn't miss anything important, so i'm ready to start.

3. then copy your picture to the blank canvas.
before you copy it, resize your picture if it is huge! (but don't resize too much)
more about the size coming later...

4. so now you have a blank canvas and a layer with your picture.
so it's time fiddle around your pic's size! hit ctrl+t to select it (it should look like THIS) and when shrinking it, hold shift down!
the size is up to you, but with this tut i prefer small pics > the textures and stuff come out better.
when you are done and when you have found a nice size, hit enter to unselect.
and locate your picture where you want it with move tool!
so my icon looks like this now:


5. i want my icon look brighter, so i duplicate the picture layer and set it to screen. play around with the opacity to make your icon look good! my opacity is 59%
merge the normal & screen layers. (screen layer>click on right>merge down (i assume your screen layer is on top of your normal layer : D))


6.and now to the hardest part maybe? smudging!
at this point i usually do a "back up copy" duplicate your picture layer and set other one invinsible, so if you screw one up, you have the other there safe : >
select smudge tool:
settings like these:
(brush size may be changed while smudging, just try different sizes)
then start smudging. start with easy places and follow lines and stuff. as you can see, i continued the green wall and kept the white/green border straight.
when you come closer to yor person, smaller your brush size and lower the strenght, 50% is pretty good one.
(a tip: if you smudge to much on the place you don't want to be smudged: you've got your back-up copy! duplicate it, place it on right place on top of smudged layer and erase the not needed-things with sof rounded eraser. i did this : >)
this is how i did my smudging: > > (lowered strenght)
and there's a white gap between hat and shoulder so i take a small brush and color it with screen.
and my icon looks like this:


7. and now you've prepared your base and you're ready for coloring and textures! : D
a color fill layer (layer>new fill layer>solid color)
fill with #f6dee1, linear burn 11%


8. curves layer (layer>new adjustment layer>curves)

normal 63%
(i think i've hit the auto button here..)


9. selective color layer. (layer>new adjustment layer..)
reds: -100, 9, 95, 26
cyans: 100, 0, 0, 0


10. by chaoticfae , set to color burn 43%


11. hue/saturation layer (layer> adjustment layer..)
master>saturation +8


12. color fill layer. #c0cdd3, multiply 100%


13. curves layer againn.


first point: output: 63 input: 59
second point: output: 175 input: 141



14. color fill. #e6f2fb, multiply 100%

15. duplicate ^that layer, set to multiply 70%


16. color balance layer. (layer>new adjustment layer..)
midtones: 6, -1, -28


17. , by shark_bitten, set to screen 100%. place this near face.


18. , by cielo_gris, set to screen 100%. resize this (ctrl+t..) if you want.
place to next some border.


19. fill layer. #f3c7c7. overlay 15%


20.fill layer #f1d4d4. soft light 46%


21. selective color layer.
reds: -59, 0, 0, 5
(the difference is so small, no need to post a pic x D)

22. duplicate fill layer from step 20, set it to multiply 10%


23. color balance layer.
midtones: -7, -35, -40


24. by phaantasia, set to sreen 100%.
erase the parts which you don't want and place where you want.
mine is down in right corner, you can see just a tiny piece of it.


25. by phaantasia, set to lighten 38%


26. by crazy_delight, set to screen 100%
i placed this down in right corner and erased the borders of the texture with soft rounded brush.


27. curves layer.

first point: output: 102 input: 127
second point: output: 134 input: 157
(lowering this layer's opacity might be a good idea if your icon is too dark or if you want it to be lighter.)


28. by tralala_icons , set to soft light 18%


29. by bambinainnero, color burn 28%


and you're ready!
just sharpen your icon a bit (filter>sharpen>unsharp mask)
amount: up to your icon
radius:0,7 pixels
thredhold: 3pixels

and then be happy with your result!

mine's this:
or didn't your icon turn out well?
too bright? do a multiply layer of a whole icon. hit ctrl+alt+shift+e and set it to multiply, play around with the opacity.
too dark? ^ do a screen layer.



i'd be grateful if you directed all comments & questions HERE
Tags: colouring: curves, colouring: selective colouring, graphic effects: textures, program: photoshop, tutorial: colouring
Subscribe

  • Tableau Online Training Demo Video - IgmGuru

    IgmGuru's Salesforce Administrator and App Builder Certification Training course is designed according to the Salesforce Administrator & App…

  • Icon Coloring

    Does anyone know how to achieve this coloring? Photos are by Jessie Willner, this coloring is all over her Instagram.…

  • animated icons

    Hello, I was wondering if anyone could guide me into doing icons similar to these? Sorry, I do not know the name of the maker(s) or I'd add…

  • Post a new comment

    Error

    Comments allowed for members only

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 3 comments