Creating an icon using simple programs.

[Hanza-Ru]

Create an anime icon using your drawing hand.

By Hanza-Ru

Often the icons are made with quantities of instruments that stun the beginner. Forget that the greatest tool of man, the hand there. I will make this tutorial that many doubt the ability of novice user, and to show that you do not need any knowledge about it to make images of good quality.

Requirements:

1. A hand. (URL: your body.)
2. A Scanner (to scan your draw)
3. Photo Shop.
4. Paint (windows accessory)
5. W3Viewer
6. W3 Image Rename(W3IR)

Tutorial:

SECTION 0 – Name of Tools on Programs

Unique - Adobe and Paint Tools

SECTION 1 – Drawing with Your Hand

1.1 - Making a Simple Draw.
1.2 - Scanning
1.3 - Clearing the Image.

SECTION 2 - Coloring

2.1 - Using Simple Colors
2.2 - Editing the Hair.
2.3 - Editing the Face
2.4 - Adding Shadows and Lights
2.5 - Finalizing work.

SECTION 3 – Creating the Icons.

3.1 - Making Icon of last image created.
3.2 - Border Icon
3.3 - Converting the Icon to Warcraft
3.4 - Testing on World Editor (WE)...

SECTION 4 – FAQ

4.1 - Frequently Questions.
4.2 - Other Good Tutorials About Freehand Icons

SECTION 0 – Name of Tools on Programs

Unique - Adobe and Paint Tools

We start learning the names of the basic tools that we use.First, we will go to the Paint, look the picture below.



1. Erase.
2. Lines - straight to the left and curve left.
3. Transparence – Turns, between transparent or no transparent, white area of a selected area.

Now, we will go to Photo Shop.



1.

- Select – selects areas to move, copy, delete, etc.

- Move and Expand / Reduce - this tool is to select a pre-selected area (eg, using the 1st or select an area to cover.) and mobile and / or extends it or reduce it and therefore you should take with the mouse the corners of the image and move to one side.
2. Special Selection - Serves to areas with several contours, if you have accuracy, it will select exactly what you want.
3. Brush – rather use this. Serves to select a color of the image (hold alt and click on the color with the left mouse) and slowly paint the image.
4. Eraser – off parts of the image, of course.
5. Bucket of paint – To paint largest areas with colors on the same scale color clicked. Has more effect as the “bucket of paint” to paint program because it ignores the small variation of colors.
6. Blur / Finger – this tool has 3 functions in it: Blur, Focus, and use Finger. Only use Blur and use Finger. To change the tool, you must click with the right on the icon and choose the desired tool (this applies to all tools that have a black arrow in its corner.)
7. Sponge - serves to lighten areas. Warning: this tool lets you design often pale, use sparingly.
8. Select Color - often you will use the colors of image or from other drawings, the tool server you select the desired color.
9. Zoom – Zoom in or Zoom out of image.
10. File – has the buttons: new (to create a new) save, save as, etc.
Use this SECTION to reference to when some of these tools require some command. You do not need to decorate them. We will work with each for parties.


SECTION 1 – Drawing with Your Hand

Tools to This SECTION:

-Your Hand
-Scanner
-Paint

1.1 - Making a simple Draw.

You will use your hand and your scanner on this Topic.
First make a design face without trying to always make a face round as an anime. Side of it, do the eye. Soon after, on the side of the design make the mouth. Not do the nose.

Use pencil or pen ink. Try not to use a ballpoint pen, the drawings are not good.


This Image was scanned

1.2 - Scanning

Use your scanner to pick a image of your draw. Put on a normal resolution, with quality good.(look previous image)

1.3 - Clearing the Image

Open draw on Paint. Now you will use lines [Section 0 - Paint - Tool 2] to close all draw. You will color it later, then you should not leave any open place, if not, the whole design will be painted instead of just the part you want.



Save image. Now you go to Photo Shop.


SECTION 2 - Coloring


Tools to This SECTION:

-Adobe Photo Shop.
-Paint

2.1 - Using Simple Colors

Now you will open without open places on Photo Shop. Select the tool Bucket of Paint [Section 0 - Photo Shop - Tool 5] and paint parts with colors you want. if you do not have a very good knowledge about colors, open other colorful designs and hold alt and click with the right on the desired color, or select a color in the samples of Photoshop.



Color after all, the design should be like this, Do not worry about white dots in the drawing, it is irrelevant now:



Save Draw and Open it on Paint.

On the paint, use tool lines [Section 0 - Paint - Tool 2] to retouch all lines. The Design should be more or less in this state:



Finalized this, save and Go to Photo Shop.


2.2 - Editing the Hair

Ok, now, we will go make a some variations in color of hair. Use bright colors on dark colors and start to define from where comes the light. Use tool Bucket of Paint [Section 0 - Photo Shop - Tool 5] to these fuses color of hair, never aim the hair, only the black lines that you made within the hair, and avoid touching contour lines.



Finalized this, select the tool Brush [Section 0 - Photo Shop - Tool 3] and select a pure black color or a dark grey color. Put the pressure by 7% as the picture below and make some shadows on image, and mire in places that are still white. Do not worry about lighting; we solve this in the next part of the lighting:




Now, continue with Blush in 7% pressure. Select Color White. Define a point of light, and imagine the lights in the hair design. A good imagination leads to good works. Chosen a point (for ex. Lighting side as the drawing below) you should paint the parts with patience that are most affected by light.



Finalizing Coloring of Draw, you will select the tool “Finger” [Section 0 - Photo Shop - Tool 6] and make effects of thrust on hair. Think as if gently pulling the wires of the hair design. Pull the hair straight always. Remember you can always retouch colors using the brush again.



After all, ends of hair coloring. Save the image [Section 0 - Photo Shop - 10 (File), Save].

2.3 - Editing the Face

Now, we will do the face, starting with the eye. Open Image on Photo Shop and repeat the same procedure as we did with the hair, retouched to make the contour lines of eye. Use the tool 2 of paint for that. We'll use these lines to make a shading tool with finger on the photo shop later.



Finalized retouch, save and return to Photo Shop.

Opened on Photo Shop, Select tool special selection [Section 0 - Photo Shop - Tool 2]. Select Area of eye with a good accuracy. Selected, click with left mouse button on selected area, and click in “Layer by Cut” (not exactly so, but this sense of the word.) , creating a unique layer to the eye.




Now, Select the layer that you just created and click with right of mouse and click in duplicate layer.

Select layer that you just created with duplicate button and select the tool Move and Expand / Reduce [Section 0 - Photo Shop - Tool 1 -Right], click in one on corner of the selected so you can edit it. Now click with right of mouse on the selected and click in Horizontal reversal. (image below).



Whenever you create a new layer, link the new layer with the other, as shown in the figure below, in yellow.



Now, move the eyes to face of image using same tool [Move and Expand /Reduce]. Cut the mouth as Layer as you did with the eye and move the same way for the face.

With all the layers linked, as in previous figure, select the layer that is at the top and use the brush [Section 0 - Photo Shop - Tool 3] with pressurization 7%, repeating the colors for the normally white cuts disappear. You can increase pressurization until 15%, but I warn you be careful always. When finished, will be more or less well.



Save and Open image on Paint, and retouch the contour lines to next step.



Finalized this, Save and go to Next Step.


2.4 - Adding Shadows and Lights

Open image on Photo Shop.

Now, complete coloring eyes and paint with the brush [Section 0 - Photo Shop - Tool 3], a little dark now careful not to miss the side that the light you will make. Make this with pressurization 7% to no add much dark to places.



Use “Finger” [Section 0 - Photo Shop - Tool 6] to make shadows on face and use “Blur” [Section 0 - Photo Shop - Tool 6] to increase light on areas of face, or you can pick brush [Section 0 - Photo Shop - Tool 3] with color white increase light on this same areas.

to complete the work, clean the external area of the design and make the repairs with the latest tools you know so far.




2.5 - Finalizing work

Now, Use Bucket of Paint [Section 0 - Photo Shop - Tool 5] to fill the outer area with black.



Finished, put your name and Save.


SECTION 3 - Creating the Icons

Tools to This SECTION:

-Adobe Photo Shop.
-Warcraft 3 Image Renamer
-Warcraft 3 Viewer

3.1 - Making Icon of last image created

Open image with Photo Shop. Select a Square of face of your Image or a selection square that you want to appear in your icon. Copy this selected area with control+C. Done so, open a new one, with dimensions 64 by 64 (as in the picture below).



On this new image, put the copied area.



Use Move and Expand / Reduce [Section 0 - Photo Shop - Tool 1 - Right] to reduce image to visible square of image.



Save new image as TGA file.



3.2 - Border Icon

Now, create an exclusive folder for the icon you just created. Open Warcraft 3 Image Renamer.

Click the button "add borders" (marked on the image illustrates below) and another window will appear next to.



Now follow the steps using the above image as a reference:

1. In the window, select the folder where the icon is.

2. This window select the folder you want to put the files that you will want to add edge. (may be the same folder where is the icon.)

3. Select "64x64" and write in this box "BTN", that is a suffix to identify the icons.

In the box below, writes “DISBTN”. It will make the image of the disabled icon.

4. On this Box, Choose the type of image that you saved (in this case, save to TGA file.)

5. Click in this Button after completes the four procedures. After that, your icons are embroidered in the folder as "name+BTN.tga" and "name+DISBTN.tga" files.

3.3 - Converting the Icon to Warcraft

Warcraft 3 no reads TGA files. We should convert to a type of image that he can read, the BLP extension.

Before convert images, open icons borded on Photo Shop to check if they are right position. If no, remake border icons.



Open Warcraft 3 Viewer and click on “TGA ->BLP”button ( marked on image below) , select your iconBTN and save as a BLP file. Do the same with the DISBTN icon. If appears “blábla´bla´ [yes] or [no] , click yes.



Rename icons in format BLP as shown below.




3.4 - Testing on World Editor (WE)...

Now , import your BLP icons as you do normally with other icons.

Configure BTN icon with path “ReplaceableTextures\CommandButtons\BTNIcon.blp”

And Configure DISBTN icon with path “ReplaceableTextures\CommandButtonsDisabled\DISBTNIcon.blp”

You need remember that “Icon” remember that "name" is what you put in your icon.

Save map. Put Image on an Ability or Unit and Test. Success, your icon are ready to use. Fail, read this tutorial to find out what happened to your icon. It was probably time to using Warcraft 3 Viewer, the icon was not well converted.

Tutorial: "Complete Icon Tutorial with ALL about Icons" Flame_Phoenix


SECTION 4 - FAQ

4.1 - Frequently Questions.

1. What programs can I use to replace the Photo Shop.

Paint Pro and GIMP 2 are good choices, but has different tools to work, seek tutoring in hivework that use those programs that I spoke.

2. Where is this icon to I look it?

I put this icon to my model. You can check it in this link:Link!

Others Good Tutorials About Freehand Icons

1. Importing And Fixing Icons (RoC and TFT)
(Tutorial of How import icons “fast” to WE - world editor)

2. Icons Guide
(A tutorial good worked about import icons and all paths of icons.)

3. ICONS by Crazyrussian

(tutorial exemple of Photo Shop program.)

4. "Complete Icon Tutorial with ALL about Icons" Flame_Phoenix
(All about Icons)

5. How to Make an Icon
(Tutorial of Freehand Icons)

 

[Devine]

The technique is very questionable .. and in the end, you just got some animegirl ...
but it's a pretty nice tutorial.
Edit: I forgot to mention that your icon is blurry, lack shading ... it's streched that's why it's so blurry....

 

[HappyCockroach]

Simple programs??
Photoshop is no simple program, but an expensive and professional one.
GIMP is what I'd call simple instead.

 

[Rmx]

Great tutorial 5/5 i really liked it 8)

 

[Hanza-Ru]

while we use only those tools that I picked, it will be a simple program. but if you start using other tools, start getting complicated ...

 

[HappyCockroach]

The thing is that Photoshop is not simple to acquire.

 

[Hanza-Ru]

yes, but in own FAQ I already answered that question, has GIMP 2
several tools that can replace PhotoShop uses the above cited.

but , you want turns to a iconmaker after, i recommend photoshop.

 

[Pyritie]

Ehh, the tutorial isn't all that great and the end result isn't very good. I'm debating whether or not to just flat out graveyard this.

 

[Azeroc]

There are some grammar and typo mistakes

...the icons...

"icons" its multiple, so no "the", just icons...

Also in that section "Others Good Tutorials..." , not "Others", but "Other", also not "exemple", but "example"...

 

[Pyritie]

There are some grammar and typo mistakes

...the icons...

"icons" its multiple, so no "the", just icons...

"The icons" is acceptable grammar. I don't know what you're talking about :0

 

[HappyCockroach]

The biggest problem about it is that it says "create an icon using simple programs" and it requires a freaking SCANNER and PHOTOSHOP. Simple programs are MSPaint, or the GIMP (the one I use). And it says "an icon" and talks about how to create an anime girl's face. Overall, it's pretty random... =/

 

[Hanza-Ru]

The biggest problem about it is that it says "create an icon using simple programs" and it requires a freaking SCANNER and PHOTOSHOP. Simple programs are MSPaint, or the GIMP (the one I use). And it says "an icon" and talks about how to create an anime girl's face. Overall, it's pretty random... =/

Hmm, i can change title , if this cause.

"Create icons using your drawing hand"
or
"Create icons on Photo Shop and Paint."

i like first option. I want to delete the part of designing on the computer, because many people are bad in this, I am not too much, so the scanner. I put it very clear at the beginning: "Requeriments".

EDIT: I like this title , but i try edit on title , but I could not make it. " Create a anime icon using your drawing hand"

EDIT 2: with that title, is to imagine that you will use any means to move your image to inside the computer...

 

[HappyCockroach]

Creating icons? Better like 'creating anime girl's head', like many tutos about creating water, creating clothing and etc...

 

[Pyritie]

This is just full of no.