• 🏆 Texturing Contest #33 is OPEN! Contestants must re-texture a SD unit model found in-game (Warcraft 3 Classic), recreating the unit into a peaceful NPC version. 🔗Click here to enter!
  • It's time for the first HD Modeling Contest of 2024. Join the theme discussion for Hive's HD Modeling Contest #6! Click here to post your idea!

Important things about icons, my style - an icon tutorial

Level 24
Joined
Jun 16, 2008
Messages
1,939

How to make an icon



get some program like gimp or photoshop, then start.



First make a background, i mostly use black, then create a new layer (transparent) which you will work on.

tut1.jpg

When making an icon, start with outlining the object and then filling it with a fitting color. like this:

tut2.jpg

tut3.jpg

i usually go on with adding shadings, the light will come from the top left corner of the icon. we will draw the light's characteristics step by step.


tut4.jpg

darken the color with you palet from white too dark. the number of steps between those varies up to personal preference, i think i used 5 to 6 steps here.


tut5.jpg

when drawing the shadows already try to outline the object a little and think about how light affects the body. as you can see i made the middle of the blade slightly lighter than the edges. now, before we go on, we remove those ugly lines, time to smudge a little. :grin:


tut6.jpg

lets see how it looks ingame. when working with 1000x1000 solution you can just change the view to 6,25% zoom.

tut7.jpg

since a sword usually is not undamaged and should be used in battle, add some scratches to it.


tut8.jpg

also outline the object. vary the thickness of the scratches until you are satisfied with the ingame appearance (zoom out).
now, we are gonna add two bigger scratches, where the blade was hit by another one. highlight the edges of those holes.


tut9.jpg

select the spray brush and use a relatively big size. add light and shadow now by drawing in white and black with about 15-20 % transperency. also create some contrast between blade and handle by creating deeper shadows at the edge where they meet.


tut10.jpg

well done, you finished the blade.

next, we go over to the guard.
first, it needs some outlines, i use a thin yellow brush with 40 to 50% transperency.
in the middle of the guard we will place a demon head or something similar to it.

tut11.jpg

now again we're gonna use smudge to define the object and add shapes to it. i also smudged the yellow outlines we just drew.

tut12.jpg

in the next step we do a lot of things. we use the same shading method as we did for the blade for every single part of the guard to define its form. then we select a thin black pencil and draw some outlines. at some parts, care that the light will come from the top left.

tut13.jpg

now highlight the parts in the direction of the light source.

tut14.jpg

add shadows (again with the brush (scaled to 3,00) and black color with high transperency).

tut15.jpg

draw more generic shadows depending on the light source.

tut16.jpg

we finished the guard, now add a handle using the same techniques. always remember where the light source comes from.

tut17.jpg

make sure you forgot nothing, draw some more outlines until you are satisfied with the object itself (dont forget to check ingame appearance).

tut18.jpg

good. now we will continue with some special effects. :grin:
create a new layer.

tut19.jpg

scale the whole image down to 500x500. its easier to work with because the pencils become bigger.

tut20.jpg

move the object layer under the background, so it will not disturb you.

tut21.jpg

select a very big brush with transperency and start to draw something like this:

tut22.jpg

then use smudge to draw rays of light. start with the outer part and work through to the inner.

tut23.jpg

then put the object layer back where it was before and see how the pic looks.

tut24.jpg

add some more extreme light :)fp: more white ).

tut25.jpg

when you are satisfied with your result then save the image. i called it SacredSword and saved it as an xcf (gimp format). i usually save it as a psd as well to give a wip when submitting an icon.

after that you scale it down to 64x64 and save it first as a bmp, then as a png.

when saving as a png make sure you chose the highest quality.

tut26.jpg

Congratulations, you finished the tutorial.

you can find the icon here:

http://www.hiveworkshop.com/forums/icons-541/btnsacredsword-139529/

an important thing about style:

the most important thing is that you like your work, but when you submit it you might get bad feedback because others do not like it. if you are really searching for ways to improve then ask some experienced 2d artist what to improve and ignore all the flamers in your thread.

if someone offends you, report the post.

also, icons will be actually used in a map only if they more or less fit the blizzard style, so try to match it.

good icons makers you can look up to are:

mr goblin, kel thuzad, crazyrussian, goos, paladon, zombie2279, kimberly and bigapple.

if you have questions or suggestions concerning icons or this tutorial then feel free to post here or write me a visitor/private message.

~pala
 

Attachments

  • SacredSword.png
    SacredSword.png
    8.2 KB · Views: 1,621
Last edited:

Rmx

Rmx

Level 19
Joined
Aug 27, 2007
Messages
1,164
Never made an icon, only one and it got rejected.

I am a spell maker, still don't know anything about icons.

But i will rate this tutorial 5/5 :D

Coz my first best icon was made from this tutorial :D

You can see the Picture, still it isn't very good.

But if an icon maker did it, it wil be much much much better :wink:

+REP for that Awesome Tutorial :D
 

Attachments

  • BTNTutorialSword.blp
    5.2 KB · Views: 298
  • DISBTNTutorialSword.blp
    5.2 KB · Views: 247
Top