Icons - An Icon is Born

An Icon is Born

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

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.

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:

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:



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:



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:



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:



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.



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:



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:



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

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.



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:

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:



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.

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.