1. Updated Resource Submission Rules: All model & skin resource submissions must now include an in-game screenshot. This is to help speed up the moderation process and to show how the model and/or texture looks like from the in-game camera.
    Dismiss Notice
  2. DID YOU KNOW - That you can unlock new rank icons by posting on the forums or winning contests? Click here to customize your rank or read our User Rank Policy to see a list of ranks that you can unlock. Have you won a contest and still havn't received your rank award? Then please contact the administration.
    Dismiss Notice
  3. We have recently started the 16th edition of the Mini Mapping Contest. The theme is mini RPG. Do check it out and have fun.
    Dismiss Notice
  4. Dismiss Notice
  5. The Highway to Hell has been laid open. Come along and participate in the 5th Special Effect Contest.
    Dismiss Notice
  6. Check out the Staff job openings thread.
    Dismiss Notice
Dismiss Notice
60,000 passwords have been reset on July 8, 2019. If you cannot login, read this.

NFWar's Tutorials

Discussion in '2D Art Tutorials' started by NFWar, Sep 15, 2010.

  1. NFWar

    NFWar

    Joined:
    Jul 27, 2008
    Messages:
    1,314
    Resources:
    227
    Models:
    1
    Icons:
    215
    Packs:
    1
    Skins:
    2
    Spells:
    6
    Tutorials:
    2
    Resources:
    227
    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
    ___ARMOR___

    PlateArmor

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

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    Wip4
    Change the shape while adding details to armor.

    [​IMG]

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

    [​IMG]

    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).

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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).

    [​IMG]

    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%.

    [​IMG]

    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.

    [​IMG]

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

    [​IMG]


    ChainScaleArmor

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

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG] 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.

    [​IMG] 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.

    [​IMG]

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

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

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

    [​IMG]

    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.

    [​IMG]

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

    [​IMG]



    LeatherArmor


    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

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

    [​IMG]




    Weapons

    ___BOWS___

    Wooden

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

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

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

    [​IMG]

    ___AXES___

    Metal Axe

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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).

    [​IMG]

    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).

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    And here is the final result after resizing and sharpening.

    [​IMG]



    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: Mar 21, 2011
  2. 13L4M3

    13L4M3

    Joined:
    Feb 2, 2010
    Messages:
    473
    Resources:
    1
    Icons:
    1
    Resources:
    1
    This tutorial is very well made, it's very easy to understand and it's awesome.
    +Rep
     
  3. The Panda

    The Panda

    Icon Reviewer

    Joined:
    Jun 2, 2008
    Messages:
    7,702
    Resources:
    345
    Icons:
    281
    Packs:
    16
    Maps:
    48
    Resources:
    345
    Thanks man.
     
  4. warhog

    warhog

    Joined:
    Aug 18, 2008
    Messages:
    169
    Resources:
    2
    Icons:
    2
    Resources:
    2
    i cant see any pictures :(

    EDIT: nvm great tutorial sir!
     
  5. -SoulBurn

    -SoulBurn

    Joined:
    Jun 26, 2010
    Messages:
    507
    Resources:
    0
    Resources:
    0
    Well done. Can't wait for more.
     
  6. Sunchips

    Sunchips

    Joined:
    Jul 23, 2009
    Messages:
    872
    Resources:
    123
    Models:
    112
    Icons:
    4
    Packs:
    7
    Resources:
    123
    Looks promising you should make more tutorials would give rep if I could give you more :/
     
  7. Apheraz Lucent

    Apheraz Lucent

    Joined:
    Jan 31, 2010
    Messages:
    3,315
    Resources:
    4
    Tutorials:
    4
    Resources:
    4
    Very nice, detailed and the icon adores the face.
     
  8. Greedforce

    Greedforce

    Joined:
    Aug 11, 2010
    Messages:
    38
    Resources:
    0
    Resources:
    0
    Well let´s just say you just made me try to make an icon. :)
     
  9. -Kobas-

    -Kobas-

    Joined:
    Jan 17, 2010
    Messages:
    5,894
    Resources:
    28
    Icons:
    1
    Tools:
    2
    Maps:
    10
    Spells:
    4
    Template:
    5
    Tutorials:
    6
    Resources:
    28
    Finally some really good and nicely formatted tutorial!
    Really good job!
     
  10. PurgeandFire

    PurgeandFire

    Code Moderator

    Joined:
    Nov 11, 2006
    Messages:
    7,426
    Resources:
    18
    Icons:
    1
    Spells:
    4
    Tutorials:
    9
    JASS:
    4
    Resources:
    18
    Great tutorial. =) Always room for art tutorials in our database.

    ~Approved.
     
  11. Apheraz Lucent

    Apheraz Lucent

    Joined:
    Jan 31, 2010
    Messages:
    3,315
    Resources:
    4
    Tutorials:
    4
    Resources:
    4
    I just clicked ,,Weapons" and disappointed for the emptiness in there :D
     
  12. NFWar

    NFWar

    Joined:
    Jul 27, 2008
    Messages:
    1,314
    Resources:
    227
    Models:
    1
    Icons:
    215
    Packs:
    1
    Skins:
    2
    Spells:
    6
    Tutorials:
    2
    Resources:
    227
    Well, sorry. I will create something soon. Just need to think for something that will be good example.
     
  13. Apheraz Lucent

    Apheraz Lucent

    Joined:
    Jan 31, 2010
    Messages:
    3,315
    Resources:
    4
    Tutorials:
    4
    Resources:
    4
    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.
     
  14. Chizume

    Chizume

    Joined:
    May 26, 2009
    Messages:
    593
    Resources:
    1
    Maps:
    1
    Resources:
    1
    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
     
  15. Narandza

    Narandza

    Joined:
    Aug 30, 2008
    Messages:
    502
    Resources:
    33
    Models:
    16
    Icons:
    15
    Packs:
    1
    Maps:
    1
    Resources:
    33
    bow looks like its made out of dirt.. but it also looks good... wood is totally different...
     
  16. Apheraz Lucent

    Apheraz Lucent

    Joined:
    Jan 31, 2010
    Messages:
    3,315
    Resources:
    4
    Tutorials:
    4
    Resources:
    4
    I see no images for wooden weapon x)

    Edit: Oh, just a Chrome bug. Well, it is just very nice!
     
  17. CloudWolf

    CloudWolf

    Joined:
    Sep 30, 2008
    Messages:
    1,314
    Resources:
    56
    Models:
    3
    Icons:
    33
    Skins:
    16
    Maps:
    4
    Resources:
    56
    Great Tutorial! :) This is what I made by following it :p

    [​IMG]
     
  18. Hemske

    Hemske

    Joined:
    Mar 23, 2008
    Messages:
    1,568
    Resources:
    58
    Icons:
    56
    Packs:
    1
    Spells:
    1
    Resources:
    58
    Love these tutorial of yours as much as I love your works. But the latest axe you have made is a bit weird, the shading on the blade. Makes it look very bright/white. It make it looks like the blade isn't really a part of the rest of the axe. Might just be me though.
     
  19. 13L4M3

    13L4M3

    Joined:
    Feb 2, 2010
    Messages:
    473
    Resources:
    1
    Icons:
    1
    Resources:
    1
    Wow tutorial is much bigger now :D! as i said on the first post ;)
    Awesome tutorial, very easy to understand! nice work.
     
  20. Licheus

    Licheus

    Joined:
    Apr 18, 2009
    Messages:
    562
    Resources:
    0
    Resources:
    0
    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.