• 🏆 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!

NFWar's Tutorials

This is Photoshop tutorial that will help you to create icons with mouse.
That is not much examples here, but I will update this tutorial, adding more examples.

___ARMOR___


Wip1
Creating of main shape. The line at middle shows when chest must to end.

153758-albums3811-picture35470.jpg


Wip2
Draw grey lines that will define the shape more. Fill up empty areas and burn lines paralel of those you made with gray colour, but they lost while filling areas.

153758-albums3811-picture35471.jpg


Wip3
Plate armor will hold on body some leather material (or metal. I made leather). Burn up lines you will not change, fix shape a bit if you are not happy with it.

153758-albums3811-picture35472.jpg


Wip4
Change the shape while adding details to armor.

153758-albums3811-picture35473.jpg


Wip5
Burning lines on stomash to create plate parts. Draw over uselss burned lines that you dont need anymore. Define some burned lines more.

153758-albums3811-picture35474.jpg


Wip6
Burn lines and create net on armor. It will be hard leather. You can make an other thing instead of net (plate parts with different shape for example).

153758-albums3811-picture35475.jpg


Wip7
Recoloring of areas when hard leather will be. I should draw over with brown color before making the net (was in haste). Shading every leather part. Because ligh will be from above, parts are not placed down each other (but touching with sides), and because every leather pard is not flat and point a bit out, I shade like that: light from up, dark from down.

153758-albums3811-picture35476.jpg


Wip8
More shading. Now shading must to define what is up to what. Two big plate parts are up to plate parts on stomash and those are up to leather. Also some shadings from right on leather to give some volume to armor.

153758-albums3811-picture35477.jpg


Wip9
Plate parts on stomash are not flat at all. Half side is dodged with shadows, and other half to the right is burned with hightlights and dodged with midtones. Sounds strange, but looks good.

153758-albums3811-picture35478.jpg


Wip10
Shading on uper plate parts. It is some small white lines paralel to burned lines and oposide to light source. Define object by dodging with shadows areas that are on object edges and blends with background. Burn down with hightlight on big plate parts and dodge with midtones. This area must be lighter from down, than from up (defining plus reflection).

153758-albums3811-picture35479.jpg


Wip11
With huge dodge brush in hightlight mode, shine up your armor and give it even mode volume. Every big plate part must be "selected" so you will not dodge areas you dont need. Smooth shiny shading created with HUGE dodge brush that had hardness 0%. Burn from the other side of plate part in same way: with huge burn brush with hardness 0%.

153758-albums3811-picture35480.jpg


Wip12
Create new layer. Set transparency of brush to 50%. Draw on new layer scraches just like dodging or burning on armor. At this way you can modify your armor easy if you do mistake or wish to change it. It is usefull for decorations. If you will create decorations that are not transparent (some new details on armor like shoulders, metal rims and such) that you posibly will need to create shadings for them also, but on an other layer with black transparent brush.

153758-albums3811-picture35481.jpg


Wip13
Resize to 64x64, run sharpen filter and TADAAAAAM! Blizzard like icon is almost ready, just need to add borders.

153758-albums3811-picture35482.jpg




Wip1
Create the basic shape. Mark parts of the armor with lines to get better picture of it.

153758-albums3811-picture35591.jpg


Wip2
With the base of those lines, I thinked about how the armor will be. I will make it simple. Fill the shape and start burning lines. While details are showing up, you will need to change the shape, so do it by pushing colour with smudge or drawing with brush.

153758-albums3811-picture35592.jpg


Wip3
Continue with creating of details, fixing the shape. Meaby than is too much of chain/scale material on the image, but it is just a simple example.

153758-albums3811-picture35593.jpg


Wip4
It is time to create the texture on the armor. Because I saw many Blizzard's armors with hexagons, I decided to do the same. But creating them on armor one by one is just a pain and I am sure it will turn out messy and ugly. I will show you my way (meaby you know a better way and I just wasted my time). Draw lines on armor, that will help you after. They dont must to be very parralel, because details, that you will create, will get wrong shape according to armor position. The image from right will explain better.

153758-albums3811-picture35594.jpg
TutImage1.jpg

Wip5
Creation of the net from hexagons that need attention. Create zig-zags that will be on helping lines. Try to create zig-zags, so angles on lower and uper lines will point on each other. Also try to make angle, so hexagons will not look very wrong. After, combine angles with lines. In this process, many small annoying lines have been created, so you will need to draw them over. ALL this procell could be do in other more lazy, complicated, but meaby faster way: create one hice hexagon (or an other shape you need), copy paste is many times and create net from those, warp it on armor and delete useless lines. Image on right, is closer look on those steps.

153758-albums3811-picture35595.jpg
TutImage2.jpg

Wip6
Recolour the area with nex of hexagons, because it is time for shading! Dodge with highlights uper part of every hexagon on net. Do it so the light will be a bit stronger frop up. As you see dodge brush was with 0% hardness. I chosed this, so every hexagon will looks like small bouble. When you end with dodging, burn with highlights lines of the net (I used brush with 0% hardness again). This looks like skin now, but soon it will get impression of metal.

153758-albums3811-picture35596.jpg


Wip7
Now, burn with midtones lower part of every hexagon.

153758-albums3811-picture35597.jpg


Wip8
Looks too dark now, so we gona fix this and at same time give impression of metal. Because metal reflact light a lot, dodge with shadows on dark area of every hexagon (no need to do it on hexagons that have lower part hiden: near belt for example). Dodged area must be small. In this way you reflected the light on lower part of hexagon from uper part of hexagon right down to it. Now it loos too shiny and pale. To fix this, burn with highlights the area in middle between light and light reflection. You could burn down part of hexagons with highlight right after burning it with midtones, but after dodging with shadows on lower part, reflection will take an other colour. It is not bad, it is just your choise how to do it. I chosed hard way.

153758-albums3811-picture35598.jpg


Wip9
Lets shade other details on the armor. Chose areas on metal when you will shade very dark and smudge the dark shading to the side with light. If those dark areas are very close to areas with strong light, they create a strong edge between. You can shade metal like this, if the object haven't strong reflections on it.

153758-albums3811-picture35599.jpg


Wip10
Almost forgot. Shade the sides of armor to give to it final volume.

153758-albums3811-picture35600.jpg


Wip11
Yes... I swaped colours (looks nicer). Define lines on shoulders, shade them, overlook your shadings, meaby you want to chage it a bit. Define dark areas on metal with shadows on near details (dodge edges of object from sides that blends with shading). Recolour belt, shade it at same way you did before on uper part of armor. When you finished with this, define (not too much) sides of armor that blends in black background, by dodging with shadows or midtones.

153758-albums3811-picture35630.jpg


And the last steps: resize the image to 64x64, run sharpen filter and the icon is ready.

153758-albums3811-picture35632.jpg






Wip1
Leather armors are mostly shirts or something simular. Leather have many colors and tones (example: orange/yellow leather, brown leather, grey leather). I decided to create armor with combination of light brown and dark brown leather. Create main shape with lines.

153758-albums3811-picture35747.jpg


Wip2
Fill empty areas and while doing this, burn lines to define the shape. As you see I already started with some big details. You can do the same while defining the shape as well.

153758-albums3811-picture35748.jpg


Wip3
This time, instead or recoloring, I drawed over shoulders with an other color. Recolor sometimes dont give you colour you need, so draw over with an other colour is better in such a situation. Dodge shoulders with midtones or highlights (I doddged with highlights, because it didnt make the colour pale). You can give different impression to leather, by shading it strong or soft (depends on headress of brush). It can also effect on impression of material as well.
At front on uper part of armor, dodge with highlights (brush hardness 0%) and keep some distance from edges of area you dodging. Smudge from center (where you dodged) to the sides, push colour when you need. You also can do it from sides to center. Placement of colour will create some details that you can define after. Burn lines that define the shape, to define it better.
As you can see, I already started the net on chest/stomash area.

153758-albums3811-picture35749.jpg


Wip4
Now something simple. Dodge with highlights every rhombus on net from up. Brush must have 100% headress, because the shape of every part is not smooth. You can do it smooth if you want. It is your choise. Also I dodged a bit more on corners of every rhombus, because corners are more shiny.

153758-albums3811-picture35750.jpg


Wip5
Now lets shade the net. The armor is a bit monotone, so I decided to change the colour, but I didn't did it by recoloring or drawing over. I burned with midtones (just a little, because too many burn gave too dark colour) and after dodged with highlights (again, just a little). Like that I created dark brown leather. When you finished with colouring, burn with highlights areas that are covering by shadows. This are: the place under uper part of armor and on sides.

153758-albums3811-picture35751.jpg


Wip6
And now, lets shade sleeves. The light comes on armor from front, so start to dodge from middle of sleeve. I needed to give impression of shiny cloth/lether material, so I dodged with highlights. You can dodge with midtones or combination of different dodge types. Just do what you like more. So, dodge wavy smooth line (brush 0% headress) and push colour to sides from different places. After that, dodge again the wavy line on places when wave starts. No need to do it on every wave. Shade the lower part of armor and use some smudge (just a bit) to push color from dark area to ligh and reverse.

153758-albums3811-picture35752.jpg


Wip7
Do something simulat on lower part of sleeve, but dodge up and down more to the sides. It will looks too sharp, so push colours with smudge in/out side. Also you can do the same up and down. I sugest you to smudge down more than up. When you finish, burn some plases under lighted areas of sleeve. Do it from iner side of armor (looks better) but do not burn too much to sleeve edges, or it will blend. From right side of sleeve, dodge with shadows or midtones (brush with 100% hardness is better). Dont make just a line, but shake it. Smudge a bit inside if this dodged area somes inside of sleeve too much.

153758-albums3811-picture35753.jpg


Wip8
Last wip, when you finish and fixing all the rest. Create a layer under the layer where your armor is and draw on it some details that show the armor from inside (you can skip it, because guys from Blizzard doint it sometimes also). Dodge some places to define details more (like I did on uper part of armor). Finish shading on other sleeve just like before. Because the lower part of armor is big enough and empty, create something nice on it.

153758-albums3811-picture35754.jpg


And last steps... Resize, run sharpen filter and it is done, just need to add borders.

153758-albums3811-picture35755.jpg






___BOWS___

Wip1
Create basic shape. If shape is crapy, smudge edges or erase it. I already burned some lines as you see.

153758-albums3811-picture36415.jpg


Wip2
Create a net, that will be scratches and details on wood. That is no need o create net on every bow. You can draw some scratches instead (parralel to the shape of bow). Dodge with shadows spikes on bow. They must be brighter on top than on botoom. Smudge colour from burned lines under spikes to the top. Make lines with different length.

153758-albums3811-picture36416.jpg


Wip3
Lets start to shade. Dodge with hightlight if you want strong colours, dodge with midtones if you need a bit pale colours. Burn with midtones or highlights (I burned with midtones). Fix shape if you are not happy with it. Dodge with highlights every segment of net, following your light source.

153758-albums3811-picture36417.jpg


Wip4
Shade spikes just a bit from one side and dodge the edge, that got shaded, with shadows. Draw cloth on new layer and burn lines on it.

153758-albums3811-picture36418.jpg


Wip5
Burn dark area on bow to make shading stronger. Shade cloth. Following the light source, dodge lines parralel to burned lines in every segment. Burn area between light and shadow on cloth. Dodge whole bow with shadows from the dark side to define it.

153758-albums3811-picture36419.jpg


Wip6
Draw cloth from the side of bow and shade it. If cloth looks off from bow, burn the bow under cloth or smudge the dark edge on cloth. Burn up the net on bow to define it. Draw thread (~75% grey colour) parralel to the place where archers put the arrow to shoot (or almost parralel). Thread must be thiner as it is closer to a side and dodged as it is closer to the center of bow. Burn it (not much) as it is closer to a side.

153758-albums3811-picture36420.jpg


Final steps. Resize, run sharpen filter, add borders and it is done.

153758-albums3811-picture36421.jpg


___AXES___

Axe is not the simplest icon to draw. They need better detalisation and some metal shading that is agressive.

Wip1
I am going to create an axe with angle to the view. Such an axe icons are realy good looking. Draw falling arc (arc shape depends on axe angle to the view point) and after make one more almost parralel (iner and outer edges of blade may have different shape). Close them and color the inside area. Change shape as you wish and start to draw the base of blade. In whole drawing process you may need to change the shape a bit.

153758-albums3811-picture39302.jpg


Wip2
Fill the color on the base (a bit darker than blade's color). Burn the line (meaby more then 1 time) that will define blade from it's base. The base on this axe is big. Big area of same colour doesnt look good sometimes. I burned up the base 2 times with small brush, doing circulad and after zig zag moves. It is a mess, but on 64x64 it will be nicer. Meaby you will see some nice details through this mess (damage on metal) that you would like to define. Then do so, by dodging from the side of light and burning from the side without light. Improvisation is good for extention of talant. I decided to add cuper border to the axe, so I burned lines to paint in with color.

153758-albums3811-picture39303.jpg


Wip3
Paint within burned lines on new layer. Because cuper is not so shiny as gold or steel, dodging will be with midtones and after just a big with dodge. Dodge borders with shadows (just a bit) in area where border will touch axis of axe. This is small reflection from shiny part of border that is not created yet. Burn areas on borders, that lacks of light.

153758-albums3811-picture39304.jpg


Wip4
Lets shade the blade. Create new layer and chose a place for special shading (the one that is almost at middle of blade). Such a shading you can see on blades and meaby other axes, that have been created by Blizzard. On new layer, pick a brush with almost same thickness as the blade and transparency you need. Click onece and smudge it to the smaller side of axe. Smudging from sides must be a bit stronger than on center. Looks ugly? pick huge Erase bruch with 0% hardness and erase the "tail" and it will looks smooth and nice (Erace may have transparence also). When you happy with it, combine with the blade or keep it for a while, or do not combine it at all. Now is the time to create some more detail on blade. Grinded metal have some shiny and dark lines with different thickness. It is because the axe was grinded. That is no need to make that if you are not sure how it must to be (I tryed to make this and it turns out well). Those lines are getting more shiny at the place with stronger lighting. You can draw lines with same dark and light saturation and just dodge with huge brush (0% hardness).

153758-albums3811-picture39305.jpg


Wip5
Time to create an axis. Those can be at so many different shapes, but this one will be easy one. go to the layer with border and continue to draw it. Dodge it at saem way, but a bit more with highlights, because the are there is almost perpendicular. Burn with highlights the area that havent light and after dodge with midtones/shadows to define from back (it also can be reflection from something). If it will blend into background, dodge with midtones or highlights from outside to define. Create new layer under blade and border and fill up the celinder, shade it from down. Dodge it from the side of light with shadows (brush with 100% hardness) and burn in the same way like borders on axis (same brush headress).

153758-albums3811-picture39306.jpg


Wip6
Burn lines on axis that will define borders. Burn the border from behind of the axis (it can be seen down). Take the same burned color and draw thin line to the base of axe, creating the rest of border. Dodge a bit with highlights the part of axis, where light is. Overlook shadings and fix whatever you dont like.

153758-albums3811-picture39307.jpg


Wip7
Create new layer up to the axis. Draw with strong wooden color the handle (wood have so many colors...). Make some details on wood by burning with highlights and after burn again with any brush transparency (your choise, my was 100% hardness) from the shaded side.

153758-albums3811-picture39308.jpg


Wip8
Dodge with midtones/highlights those areas that are defined with burned lines. Dodge more as closer is the area to the side with light. If the shaded side is too bright in your option, shade it with any brush transparency, but only from edge without light. After, dodge with shadown from the dark side.

153758-albums3811-picture39309.jpg


Wip9
Axes can be simetrical or with two different sides for any combat needs. Lets create a fat spike (on new layer) for piercing, blunt attacks. It is not nice if the spike is on randome place on axis so place it with some logic. I placed it as a part from blade base passing through the axis. Draw it with color simular to the color of blade. Then draw the down side of the spike with dark color. If it blends, define by dodging with shadows or midtones. Burn the spike from the base with highlights and at same time dodge with shadows the axis from the side of spike.

153758-albums3811-picture39310.jpg


Wip10
Fix shadings that you dislike and dodge with highlight areas on blade and spike that you want to stand out a bit more (if u need it to be like that). To make the axe less boring, erase the blade from edges or change the shape how you would like it to be.

153758-albums3811-picture39311.jpg


And here is the final result after resizing and sharpening.

153758-albums3811-picture39312.jpg




Tips: if sharpen filter making your icon too shiny, create a new layer over all layers you needed to create an icon, fill it with black and change opacity, so the icon will take saturation good for your eye.
 
Last edited:
Level 30
Joined
Jan 31, 2010
Messages
3,551
Well, most icons that are *trying* to be done are large varieties of huge swords, staffs, blades, claws and clubs/maces. I suggest to leave staffs for later, as you need to explain the magical auras of staffs and backgrounds on a higher level that would require more work, and will get more questions.
Oh, I forgot, I will grant you reputation just because of high level of usefulness of this tutorial.
 
Level 11
Joined
May 26, 2009
Messages
760
Simple and detailed tutorial. You make it look very simple. And the results are very blizzard-like and with great realism. I'm gonna attempt to make my own icon following this tutorial when I come home from school today! Thank you.

I personally think some information would be nice though. A short background on how much experience you have with drawing, how long time it took for you to create the icons and such similar things.

Yours,
Chizume
 
Level 10
Joined
Apr 18, 2009
Messages
576
I agree with the people. For me who's an amateur in icon making, this really helps. I appreciate that you can spare time for this.
 
Level 30
Joined
Jan 31, 2010
Messages
3,551
You seem to apply much more of "filtered" texture opposed to making the texture VERY bold and almost pixelated, which in turn translates to your icons being a bit blurry rather than having solid cartoonish effect you want to aim for.
However, it's a process of learning. I've myself used to "overtexturize" my icons in the past, as seen particularly on these:

98133-99697bf9912df36667f70861761fbacf_tn2.jpg
106900-2e6b4ceb08e46825361be6e698347bda_tn2.jpg


And then you just, with time, learn to adapt and follow the rule that less is, really, more.

98125-030296666a76a799d77e4e37c816c1b1_tn2.jpg
111028-ad460643619631d32a5dee5920627f21_tn2.jpg


In short, strong definition and sharp render of shadows and light impacts goes a long way, and if you need a hand in finding adequate tutorials or examples to practice both of these, I'll gladly share a link or two.
 
Level 30
Joined
Jan 31, 2010
Messages
3,551
This is a very long, but also very throughout tutorial about digital painting of swords which posses that Warcraft/League of Legends style. Best thing about it? It's super easy to follow up, since it's all in videos!

Creating Dynamic Weapon Concepts for Games in Photoshop | Pluralsight

Unfortunately, it seems that the original website that hosted these tutorials seems to be shutting down, but you can find this tutorial in many other places instead. I've not much time at the moment, but when I get back to my town, if you can't find the tutorial, I can share to you the files I've bought via pastebin.
 
Top