Icons - An Icon is Born

GooS

Azrael
Reaction score
154
An Icon is Born

iconborn.gif





focused on weapon icons but contains general information aswell.

By: GooS
Asked for in a nice no-preasure way by: Romek

Needed software: Photoshop (any version 7+ should do), Warcraft 3 Viewer
HOWEVER if you don't have Photoshop which I know some or most of you don't
GIMP should have all the required functions, but I do not know their name
and will mention everything as it's called in Photoshop.

Code:
1 - General
	1.1 - Introduction
	1.2 - Content of an Icon
	1.3 - Think of Blizzard
	1.4 - Brushing up a Blade
	1.5 - Basic Effects (Will be expanded when I have the time and energy)
2 - Making an Icon
	2.1 - Border
	2.2 - Adding Image
	2.3 - Fixing Effects
3 - Other Information (Will be added when I have the time and energy)
	3.1 - Some more advanced Effects
	3.2 - Tips

1 - General

1.1

This tutorial will go through some basic know-how, my own color, effect and angle
thoughts and in the end apply them to a weapon icon.

If you can use photoshop to paint a good looking regular sword, dont copy and paste,
by using your own works your icon will be unique in all points, but if you are new
to using photoshop I dont see it as a bad thing to copy and paste a picture, AS LONG as it's a general
picture, with this i mean, you should not open WoW or Wc3, take a screenshot flip it horizontally
and recolor. I mean that you can google sword and look for a regular sword in the angle you want
and then start cutting it up, adding fantasy elements like a dragonhilt, change toning and color,
length, perspective, backdrop and some effects. Remember to say that the complete work isn't
yours and if you can, link the original picture.

The reason I don't look down on this is that it is actually really hard to get the angles correct
in the beginning when making a picture in such a small scale. Believe me you really need angling
when making a weapon icon, cus you want the player to see a small representation of the weapon
and just the hilt doesn't cut it, just the blade doesn't help either, you need both.

(As an addition I do know that copyright laws apply, by saying a newcomer may use a C'n'P
I mean as a training tool until he's come into control over angles and lighting.)
1.2

What I think your weapon icon should show. (Please note What I, me, not a rule or an objective
standpoint, it's what I feel.)

Angling

Sword, from the front, hilt in upper right or left corner and the middle
of the blade should end at the opposite corner, this because you want to see as much as possible.
There are exceptions if you want to show of that it has a special hild or the blade
is filled with tribals or whatever make your heart beat faster.

Dagger, can be shown in a flat image, no depth angling needed since they are
relatively short.

Axe, Edge in upper left or right corner, shaft fading away in opposite corner. The shaft may often be completely ignored in an axe since it's often a booring piece of wood and the edge is so much more intresting.

Staff, The orb, crown or icon at the top of the staff shoul be centered or centered-
upper left/right, and the stick fading out down to the left or right corner.
This is because staffs are usually magical and with that in mind you can really go
wild on effects in that area, and effects are best centered to the image so there is
no pure black areas in the lower corners of the picture.

Colors

Blue, it's a very universal color in game related terms, arcane, ice, water, cold, air
lightning, energy. Fair to say they do often use diffrent tones of the color, ice,
cold, air and lightning are often light blue colors with a hard contrast of white and fading
fast into black from the light source. Arcane, Water and energy are often a deeper blue
fading slowly out towards black yet still with hard contrasts of white for reflection or
effect.

Green, a natural color and with nature comes poison, natural effect are light green colors,
signs of life and may be glimmering, hard contrasts of white over a light greend that fades
smoothly into darker green. Poison hover I feel is a bad color so dark and shady, changing
color tone here and there, soft changes into other colors such as brown and orange is a good
thing, think camouflage and you got all poisonous colors. Feel free to add swift fades to black,
if it's a poisonous liquid you should add white reflections at the top.

Yellow, Holy or light, glows often use yellow as the transition between white and yellow is so fine. The divinity of yellow, what makes it holy must be derived from light and pumped into our brain by evil companies, such as Blizzard. But since everyone already has these set impressions of the color, we might aswell fall inline behind them.

Red, blood and blood is life, may also be associated with heat/fire especially if you add yellow
with an orange fade in between. Not much more to say, though red is 'life' spells, weapons and other icons often use yellow (holy) or green (nature) for such icons, red remains as fire, blood, gore and pulsating darkness.

Purple, same as with yellow the meaning of this color has been set already, dark shades points hard towards toxic (not so much as green, but a hard second) or dark magics, but the lighter ones give more of an nature feeling, even tho it's not as comman as the use of the darker shades. Mixed with a dark shade of blue the image will be so evil that your mind might implode.


1.3 - Think of Blizzard

Now you may not want it if you are making an icon for your own map but most people like to see that icons match
the original Warcraft icons made by Blizzard. So there are some points you should follow in order to make it
more "warcrafty".

Highcontrast pictures, not extreme but Warcraft textures are usually not very smooth in transition.
So remember to use hard colors in most things except for backdrops.

Exagurated size, weapons, objects, well models are of exagurated size. Such as
large pauldrons or a weapon as long as a person is heigh. The same goes for icon images.
Blades are often wider, jagged, tarnished or have fantasy styles (like frostmourne) so don't just
make a real life broadsword cus it wont really fit in the regular warcraft world.

Highlights, are very good for contrast and makes the contours of the object easier to see and with it the object
becomes more clear. Exampel could be this:

1.4 - Brushing up a sword

Now lets start this tutorial, open photoshop and create a new file 64x64px and do as follows.

Turn the background black and create a new layer, if this takes you more than 20 seconds I'm forced
to ask you to read a very basic Photoshop tutorial before attempting any of following material.

Now set the regular brush to size 5px and hardness 100% and paint a white rect starting in the upper
left corner and ending in the lower right, then cut it diagonaly (45 degrees) slightly above the center
and you should have this:

Sword1.jpg


This will become the blade of the sword, now switch to the color black and set the opacity 30%,
brushsize 2px and hardness 0%. Make to parallel lines in the middle of the blade, starting at the bottom
ending at the top. Then two new ones following the same lines just not going all the way down.
Repeat three (3) more times and you should have this:

Sword2.jpg


Now, I'm sry to say we are going to do something that requires some feeling for lighting.
Set brushsize to 6 and opacity to 15%, create a new layer and brush along with the blade but only at one side.
If you did as I meant one half of the blade should be light and the other a bit darker. Here's
the feeling part, now well put in some details to the shading, right under the top (about 2-3px),
set brushsize to 1px and drag a small line from the lines already made towards the edge of the blade.
Repeat this line as we repeated before so that the line fades out, now theres a small corner between the lines,
fill it up with shade fading out towards the rest of the blade, repeat at the other side but a bit lighter and
you should have something like this:

Sword3.jpg


Now we need to switch brushset to Dry Media Brushes, Right-click the image while you have the brushtool selected
and in the popup you click the little arrow at the top right corner. When selected chose the brush
"Conté Pencil on Bumpy Surface". Now this is a default brushset in my Photoshop version but I don't know about
earlier ones, so otherwise just use a rough a bit spattery brush.
Set it's size to 3px and opacity to 20-25% and spatter some randomly over the blade, first with black then a bit
with white, we do this to give some texture to the surface of the sword.
Before I show you how mine is looking, so you can fail check or something, use the eraser with 1px size and a basic brush
and add some jagged edges on the sword in the first layer (the white one).
Now mine looks like this:

Sword4.jpg


So the blade is done, but it needs a hilt and a handle, so set color to #ffcc00, brushsize to 5px, hardness and opacity 100% and
lets keep on going.


Create a layer below the first blade layer and make a curve at the top, extending beyond the weapon edge, you know what
a hilt looks like. Make a similar curve but with black and 30% opacity and 3px down and to the left.

Sword5.jpg


Now for some touchy, feely shading, create contrast by adding extra dark shadow at the upper part of the darker part
of the hilt and fade it towards the middle. When you feel that it's done, set brushsize to 1px, color to white and
opacity to 40%. Now go to the top-left part of the hilt and brush a white line at the edge there, repeat until some
clear white appears.
This is currently mine:

Sword6.jpg


Now for the handle, create a new layer under the hilt and set color to #2d2711, brushsize 8px, hardness and opacity 100%,
now continue from in between the first two shader lines and all the way to the upper left corner (roughly), see to it that
the handle together with the blade form a straight line.
Set color to black, brushsize 1px, opacity and hardness to 50% and start brushing black lines across the handle.
It should have gotten some bulks in between the black lines, on these bulks to the left (up) pick a slightly brighter
color than the handle and add a little of it there, on the right (bottom) of the handles bulks, pick a darker color and add
a little there. Details on the handle are not so important, now we are done with the sword.

My finished sword looks like this:

Sword7.jpg


Take a breath and we'll go on with 1.5.

1.5 - Basic Effect

Ok, so here we are, now if you are doing an icon, weapon, potion, armor, whatever something you'll almost always need are effects.
HOLD effects are not only extreme graphics such as lightning swirling around a ice emitting pole that's on fire.
They can be subtle but still make a big diffrence, such as a small shining spot on an armor, or some vapor from a liquid etc.
So we'll start with thoose. I'll be applying them to the sword made in 1.4.

Shine

Shining is done by extending highlights longer along the outline they are following and fadding them more to the sides.
I cant describe it much better, here's a picture and you'll get it, hopefully.

shining.jpg


Glow

As for glow, you'll need to create one layer below the object displayed in the icon and one above.
Switch to a small brush with 0% hardness and 4px size if its a spatter brush, a bit larger if it's a normal
round brush. Set color to bright yellow something like #feef4b and opacity 5-10%. Now go to the layer below the object and
start following the outline of the object with the brush, theres no need for perfect line against it.
Once done repeat the same on the layer above the object but go more over the object, so we get a feeling of glow from
the surface aswell. After you've done that until you are pleased, lower the size a pixel or two and switch color to pure white.
and add some were you want it to glow the most.
Here's my glow:

glowing.jpg

2 - Making an Icon

2.1 - Border

Open photoshop and create a new file 64x64px and do as follows.
Skip this step if you already have a border template or download the border template from the
attachment at the bottom of this post.

Keep the background white for the moment and mark 4px from every border invards.

Create a new layer and color the marked area #b9b9b9 (RGB: 185,185,185), right-click the layer
and enter Layer Style add gradient, by default it should be black to white, change to black color to
#464646 (RGB: 70,70,70) and set the angle to 75, also check so that scale is 130% and opacity 100%.

Move on and check Bevel and Emboss, set Technique Chisel Hard, depth to 60%, direction Up, Size 1px,
soften 3, uncheck Use Global Light and set the angle to 65 and Altitude 42 leave the rest as default.

Check sub-alternative Contour of Bevel and Emboss and set it to 50%.

Now exit Layer Style and create a new layer, mark the innermost, and outermost pixels of the border, so
that there are only 2px in between the markings. (To make multiple markings hold down shift while making them).

Color the marked areas 100% black and set the opacity of this layer to 70, and the opacity of the main border
layer to 85%.

Make a marking of the complete border (4px from every imageborder) and create a layer below the border layer
just above the white layer. Color it 100% black.

Mark the three layers (NOT the background) and Convert to Smart Object and then Rasterize.
Note that this now finished border is much more smooth and fades perfect unlike extracted icons, you can
make them look more like on of these by saving it as a low quality .jpg and then extract the border
from the new image. However this really isn't a big problem since you will most likely convert the image
to .blp and with it reduce quality in that step.

Now swich to the Gradient Tool and Hide the border layer (so you only see a white image). Set the Gradient Tools
setting to Foreground to Transparent (Black to Transparent) and drag from the border towards the middle, it's
hard to say an exact measurement so I'll give you a picture, it should look like this:

DISBTN.jpg


Now, that is the layer you will use to make a DISBTN icon (Disabled Button).

Now for the PASBTN, you're done, Passive Buttons have no frame, on some of you're icons that require PASBTN's
You might want to think about keeping the edges smooth or fade the effects.
DISPASBTN (Disabled Passive Button) look the same as DISBTN so use the same layer.

Now, you should have three (3) layers one BTN, one DISBTN and the background which you now can turn black and go to step 2.2.
2.2 - Adding Picture From 1.4

You should now have a complete border template (.PSD) and we will add the sword from 1.4 or paint a new one if you like.

Open the PSD made in 1.4 and if the layers (NOT background) are not merged, do that by marking the layers, Right-Click -> Merge Layers.
then mark the image and copy paste it into the template.

If you made the effects within the already existing icon, congratualations you have yourself a finished Icon, but it to good use and start on your next.

Otherwise, just as you copied the sword into the border template, copy your effects into the template, remember to keep the same layer styles.

And as the third option if you havn't done any effects yet, make a new layer and follow any of the guidelines below or above this point and good luck.
 

MagnaGuard

Active Member
Reaction score
49
Extremely good tutorial with lots of pictures (I like). Good step-by-step instructions. +rep
 

mordocai

New Member
Reaction score
17
it is a good tutorial, could you make something other then a sword? a sword is pretty basic. Like an advanced iconing tutorial where you make something like crazyrussian type of icons? or your heart of winter type of stuff?
 

Romek

Super Moderator
Reaction score
963
> an advanced iconing tutorial
I believe that'll be added to this tutorial when GooS is ready.
For now, this is awesome for beginners.

Also GooS, feel free to make another thread for the advanced icon stuff. ^_^
 

Flare

Stops copies me!
Reaction score
662
I've probably said it before, but I'll say it again - this is awesome. I'll probably never make an icon ever, but the tutorial is extremely informative. One slight issue I'd have with it would be that it's quite specific to the sword icon (at least in part 4), it'd be nice to have some information (even if it's just a little) on terminology, and perhaps what can be achieved by tweaking the numbers a bit.

For example
Now set the regular brush to size 5px and hardness 100% and paint a white rect starting in the upper
left corner and ending in the lower right, then cut it diagonaly (45 degrees) slightly above the center
and you should have this:
This will become the blade of the sword, now switch to the color black and set the opacity 30%,
brushsize 2px and hardness 0%
I don't have a clue what hardness is - perhaps people who want to make icons have some bit of knowledge of PS or other image editting software, but there are probably those who don't. And would using a slightly larger brush size, or a different value for hardness still allow you to make a good icon, or would it just make the icon blurry, or just plain ugly?

If it'd work, are there any particular kinds of image that may go well (from your experience with icon making) with said brush sizes and hardness values?Hopefully, small bit of additional informations can go a long way to helping people make icons (in particular, those who are new to making icons and the associated tools)

Or, do you expect people who read this tutorial to have basic knowledge of some image editing program? If so, you can pretty much ignore everything above :p

Also, that image at the top is quite nice, although why is it looping through the icons in reverse order?

For now, this is awesome [del]for beginners.[/del]
Fixed :p
 

GooS

Azrael
Reaction score
154
Why not include something about wc3 borderizer.... its good for bordering!

I have no problem with it but I don't see a need for it, saving seperately takes me about 15 more seconds and that way I'm sure the borders are correct. :)

> an advanced iconing tutorial
I believe that'll be added to this tutorial when GooS is ready.
For now, this is awesome for beginners.

Also GooS, feel free to make another thread for the advanced icon stuff. ^_^

I'll keep that in mind when I feel like I can continue Romek :)

Or, do you expect people who read this tutorial to have basic knowledge of some image editing program? If so, you can pretty much ignore everything above

Both those that know a bit about it and those who don't.

I don't have a clue what hardness is - perhaps people who want to make icons have some bit of knowledge of PS or other image editting software, but there are probably those who don't. And would using a slightly larger brush size, or a different value for hardness still allow you to make a good icon, or would it just make the icon blurry, or just plain ugly?

Hardness does exactly what the name implies, it says how hard to make to brush, 0 hardness = smooth transitions (fades), 100 hardness = no transition (fade).

Since I more often make the icons in the format I want them, 64x64 that is, larger brushes should not be used since images of such a small scale would get blurred. But many people prefer, and in some cases of competitions (See Hive) you are required to paint in 200x200+ so that the judges can see that there is no copy pasting there. In the case of a 200x200 picture you can basically multiply the sizes said here by 3 (sizes, not hardness).

As for hardness I set it low to shade , but when painting in 1-2px sizes with the brush, hardness does close to nothing.

But as stated in the very beginning but a very ironic way
Turn the background black and create a new layer, if this takes you more than 20 seconds I'm forced
to ask you to read a very basic Photoshop tutorial before attempting any of following material.

Maybe I should make it more clear, one SHOULD go through a tutorial stating the basic funtions of PhotoShop before proceeding into this tutorial, such as manipulating the brush, which is basically all that I do.
Also, that image at the top is quite nice, although why is it looping through the icons in reverse order?

Does it matter :D?

I'll rephrase and add some basic info, such as the brush size and hardness are set by right-clicking the canvas when using the brushtool.

Thanks for the good reply!

//==GooS

Edit:

PS: As for it being specific to sword is because I feel like making a sword, the same techinques can be applied to all icons an are applied to all of my icons, one of the things I will add though is the use of blending options and layer styles, should come up in the 'advanced' guide though.
 

Romek

Super Moderator
Reaction score
963
I think it's fine being as specific to a sword as it is. You can get into more detail about the techniques you use and give nice examples.
Otherwise it'd be limited to "You could use this" or simply "Edit this".

Anyway, this is an awesome tutorial. Thanks for making it. =D
Good job, and keep them coming!

Approved.
 

Extremedesyr

New Member
Reaction score
6
there's no freaking way you can draw the middle 2 lines with a brush... no freaking way...

I tried it a Billion times and I keep ending up with a curved line
 

Extremedesyr

New Member
Reaction score
6
Now exit Layer Style and create a new layer, mark the innermost, and outermost pixels of the border, so
that there are only 2px in between the markings. (To make multiple markings hold down shift while making them).

Could someone explain what to do here? I dont know what exactly the tutorial says I should mark. '2 px in between the markings' should I set feather to 2px or what? nad which border?

thanks
 

GooS

Azrael
Reaction score
154
Could someone explain what to do here? I dont know what exactly the tutorial says I should mark. '2 px in between the markings' should I set feather to 2px or what? nad which border?

If you're following that part of the tutorial you are making a border, so that's the border in question. As for marking the border is 4px wide, you shall mark the innermost and outermost pixel

Like this:

||||
||||
||||

Marking the red, leaving the others.

HOWEVER, you should not create your own border but download or extract the blizzard borders as some sites if you wish to upload do not accept self-made borders and the blizzard ones are abit roughed up which I didn't take into consideration when making that part of the tutorial.

//==GooS
 

ironfist19

New Member
Reaction score
3
hello , how can i highlight? My icon is so noobie. I attached the .tga file from the w3 viewer. That is a sword :D Can you give some tips what will i use in photoshop? The brush or line and whatelse.
 

Attachments

  • SamuraiAura_T.tga
    16 KB · Views: 453
General chit-chat
Help Users
  • No one is chatting at the moment.

      The Helper Discord

      Members online

      No members online now.

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top