wc3campaigns
WC3C Homepage - www.wc3c.netUser Control Panel (Requires Log-In)Engage in discussions with other users and join contests in the WC3C forums!Read one of our many tutorials, ranging in difficulty from beginner to advanced!Show off your artistic talents in the WC3C Gallery!Download quality models, textures, spells (vJASS/JASS), systems, and scripts!Download maps that have passed through our rigorous approval process!

Go Back   Wc3C.net > Tutorials > 2D Art Tutorials (Skinning)
User Name
Password
Register Rules Get Hosted! Chat Pastebin FAQ and Rules Members List Calendar



Reply
 
Thread Tools Search this Thread
Old 01-07-2006, 02:33 AM   #1
Tiki
Transform and roll out!
 
Tiki's Avatar


Respected User
 
Join Date: Dec 2002
Posts: 2,901

Submissions (11)

Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)

AI tournament - 3rd place

Default How to make an icon

Please rep me if you like it :)

Paths:

ReplaceableTextures\CommandButtons\BTNicon.blp
ReplaceableTextures\CommandButtonsDisabled\DISBTNicon.blp
ReplaceableTextures\PassiveButtons\PASBTNicon.blp
ReplaceableTextures\CommandButtonsDisabled\DISPASBTNicon.blp

I. Icon Templates
-- Enabled
-- Disabled
-- Passive

II. How to make your icon
-- Template
-- Outline
-- Coloring
-- Touchups

I. Icon Templates

Enabled Icon
Zoom (requires log in)
This will teach you how to make an enabled icon, pretty straight forward and isnt that hard to do. First take your icon template, which I will provide for you as well. This is the basic 64x64 icon that all warcraft icons have. To plainly start, draw within the center of the icon, mainly in the white area. You may learn more from my Steps Tutorial. Once you have finished your icon. (Icon I made from the steps below). You will have to make sure that its 64x64 which is fairly simple, just reduce the size. You will have to create a inner black shadow, heres an example: That inner black shadow makes it look more unique and not so squareish and finalizes the icon.You may do whatever you want to your icon but this is the basics to how I make one. The image above goes as so, Black Icon, Icon with graphics, Icon with graphics and inner shadow.
Zoom (requires log in)


Disabled Icon
Zoom (requires log in)
Alot of people do not know how to make a good disabled icon, heres a basic on how to do that. First take your completed icon, and create a new layer. Within that new layer, set the layers opacity to 50% and then cover the whole icon in black. If you did it right you should still be able to see your icon but its darkened (Image in Middle). Next create a layer ontop of the last created layer. Now draw a black 1 pixel line on the outside of the icon on all sides (on the new layer). Now on the layer with the pixel line, add these effects to it. Outer Glow: Blend Mode- Normal, Opacity- 100%, Noise- 0%, Color- Black(#000000), Technique- Softer, Spread- 0, Size- 4, Range- 2%, Jitter- 0%... and you should get a good looking icon like mine (far right). The image above goes as so, Icon, Icon with black masque, Icon with black masque and border.


Passive Icon
Zoom (requires log in)
Making a passive icon is exactly like making a disabled icon, so here we go. Next create a new layer. Now draw a black 1 pixel line on the outside of the icon on all sides (on the new layer). Now on the layer with the pixel line, add these effects to it. Outer Glow: Blend Mode- Normal, Opacity- 100%, Noise- 0%, Color- Black(#000000), Technique- Softer, Spread- 0, Size- 4, Range- 2%, Jitter- 0%... and you should get a good looking icon like mine (far right).



II. How to make your icon!
Zoom (requires log in)

Template
First off take your template. I have provided you with one in the Enabled Tutorial. If you are using Photoshop open the image, and then go to Image -> Image Size. Now that you are there, a window should have popped up. Under Pixel Dimensions (Width and Height) change the dropdowns to percent instead of pixels, and set the input boxes to 300% in both spaces. You should have something like this on the left. Now that you have done that, you are ready to start drawing your icon. If you are using something besides Photoshop, change the image size to 192 x 192 pixels, if you find that easier to do.
Or you may use the template above as your icon if you want, instead of blowing it up.


Outline
First before your start drawing, create a new layer above the icon template. Now set your brush to 3pixels and set the color to black. Make sure your document is set to RGB color mode. Now start drawing an outline of your icon, within the white area. If you go out of the white area thats what the new layer is for, select the area where you messed up and erase it or press the delete button. Everyone is different in drawing techniques, try the best you can. Mine is an icon of the Dreameater murloc hero.


Coloring
Now that you have the outline of your drawing on the icon, its time to color it in. First color in the base colors for each area of the icon, as like I did on the left. Next select the color using eye dropper, and go to a darker color of the selected color, and then draw an outline. If you are confused just look at the icon. Make sure that you cover the black lines from the first layer, if not it will look bunchy and the wrong colors. After you have colored the bases, sharpen it up a bit and make sure your lines are straight and colors or right and etc.


Touchups
This is the main part of your icon, this is where the icon comes alive. First take your base color and go darker, then draw with the darker color where the shadows would be with the icon. You can keep going darker and darker until you have your desired effect. Do the same with making it lighter, take the base color and choose a lighter color and draw were the sun would be hitting the icon. After you have done that, use the smudge and blur tools to sharpen the image up. After you have done use dodge and burn to shape your icon. Use burn to darken areas, mainly shadows... while using dodge to lighten areas, mainly were sun hits. After youve done this, just add all the little touchup and effects to the image as you need. For me I put the rune symbols along his face and forhead.


Finished
Now that you have created an icon, I suggest following step I and creating the 3 types of icons.
Attached Images
File Type: gif disabled.gif (10.6 KB, 1577 views)
File Type: gif enabled.gif (9.2 KB, 1741 views)
File Type: gif opacity.gif (8.1 KB, 1603 views)
File Type: gif passive.gif (7.1 KB, 1480 views)
File Type: gif steps.gif (56.3 KB, 1712 views)
__________________

www.sc2armory.com - Join our forums and community.
Latest and most up to date information about starcraft II.

Last edited by Tiki : 01-07-2007 at 01:02 AM.
Tiki is offline   Reply With Quote
Sponsored Links - Login to hide this ad!
Old 01-07-2006, 03:10 AM   #2
PlasticAngel
AWWWWW YEEEEEEEE


Respected User
 
Join Date: Nov 2004
Posts: 1,027

Submissions (3)

PlasticAngel has a spectacular aura about (144)

Default

That purple dood is obviously getting some pussy.
__________________
PlasticAngel is offline   Reply With Quote
Old 01-07-2006, 03:24 AM   #3
Vexorian
Free Software Terrorist
 
Vexorian's Avatar


Technical Director
 
Join Date: Apr 2003
Posts: 14,898

Submissions (37)

Vexorian has a reputation beyond repute (1062)Vexorian has a reputation beyond repute (1062)Vexorian has a reputation beyond repute (1062)Vexorian has a reputation beyond repute (1062)Vexorian has a reputation beyond repute (1062)Vexorian has a reputation beyond repute (1062)Vexorian has a reputation beyond repute (1062)

Hero Contest #3 - 2nd Place

Default

hmnn attach the images in the post (so we don't rely on external servers / leech bandwidth from them) and I will aprove it
__________________
Zoom (requires log in)Wc3 map optimizer 5.0
Someone should fix .wav sound in this thing.
Zoom (requires log in)JassHelper 0.A.2.A
Turns your simple code into something that is complicated enough to work.
Faster != more useful
Vexorian is offline   Reply With Quote
Old 01-07-2006, 07:57 AM   #4
Tiki
Transform and roll out!
 
Tiki's Avatar


Respected User
 
Join Date: Dec 2002
Posts: 2,901

Submissions (11)

Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)

AI tournament - 3rd place

Default

Done. I had to shorten some images, since max upload was 5.
__________________

www.sc2armory.com - Join our forums and community.
Latest and most up to date information about starcraft II.
Tiki is offline   Reply With Quote
Old 01-07-2006, 12:33 PM   #5
Vexorian
Free Software Terrorist
 
Vexorian's Avatar


Technical Director
 
Join Date: Apr 2003
Posts: 14,898

Submissions (37)

Vexorian has a reputation beyond repute (1062)Vexorian has a reputation beyond repute (1062)Vexorian has a reputation beyond repute (1062)Vexorian has a reputation beyond repute (1062)Vexorian has a reputation beyond repute (1062)Vexorian has a reputation beyond repute (1062)Vexorian has a reputation beyond repute (1062)

Hero Contest #3 - 2nd Place

Default

yeah I had the same problem when reenabling another tutorial, I think that 5 is too few will check if there is a way to change that limit.
Edit: no limit now
__________________
Zoom (requires log in)Wc3 map optimizer 5.0
Someone should fix .wav sound in this thing.
Zoom (requires log in)JassHelper 0.A.2.A
Turns your simple code into something that is complicated enough to work.
Faster != more useful
Vexorian is offline   Reply With Quote
Old 01-07-2006, 08:56 PM   #6
Tiki
Transform and roll out!
 
Tiki's Avatar


Respected User
 
Join Date: Dec 2002
Posts: 2,901

Submissions (11)

Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)

AI tournament - 3rd place

Default

Well it doesnt matter now but next time, so this is done.
__________________

www.sc2armory.com - Join our forums and community.
Latest and most up to date information about starcraft II.
Tiki is offline   Reply With Quote
Old 01-07-2006, 09:44 PM   #7
Belphegor666
User
 
Belphegor666's Avatar
 
Join Date: Jul 2004
Posts: 787

Submissions (1)

Belphegor666 is on a distinguished road (16)

Default

How you make Outer Glow in Gimp?
Belphegor666 is offline   Reply With Quote
Old 01-07-2006, 09:49 PM   #8
Tiki
Transform and roll out!
 
Tiki's Avatar


Respected User
 
Join Date: Dec 2002
Posts: 2,901

Submissions (11)

Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)

AI tournament - 3rd place

Default

Im not sure, you can do the glow manually by using the guide above.
__________________

www.sc2armory.com - Join our forums and community.
Latest and most up to date information about starcraft II.
Tiki is offline   Reply With Quote
Old 08-16-2006, 04:43 PM   #9
noix
User
 
Join Date: Aug 2006
Posts: 3

noix has little to show at this moment (0)

Default

this site is great , gg ^^
noix is offline   Reply With Quote
Old 09-07-2006, 10:07 AM   #10
DeaD_MeN_WalkiN
Robie williams ROFL
 
DeaD_MeN_WalkiN's Avatar
 
Join Date: Nov 2005
Posts: 292

DeaD_MeN_WalkiN will become famous soon enough (37)DeaD_MeN_WalkiN will become famous soon enough (37)

Send a message via AIM to DeaD_MeN_WalkiN Send a message via MSN to DeaD_MeN_WalkiN
Default

Is it me or those pictures were taken from wc3sear.ch tutorials?
__________________
Always rep People + Me
Nub who killed 500 other Nubs.

Retired (Well I'm still doing freelance works).
DeaD_MeN_WalkiN is offline   Reply With Quote
Old 09-07-2006, 09:34 PM   #11
Tiki
Transform and roll out!
 
Tiki's Avatar


Respected User
 
Join Date: Dec 2002
Posts: 2,901

Submissions (11)

Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)

AI tournament - 3rd place

Default

Quote:
Originally Posted by DeaD_MeN_WalkiN
Is it me or those pictures were taken from wc3sear.ch tutorials?
I wrote that tutorial, kthnx.
__________________

www.sc2armory.com - Join our forums and community.
Latest and most up to date information about starcraft II.
Tiki is offline   Reply With Quote
Old 09-08-2006, 07:24 AM   #12
DeaD_MeN_WalkiN
Robie williams ROFL
 
DeaD_MeN_WalkiN's Avatar
 
Join Date: Nov 2005
Posts: 292

DeaD_MeN_WalkiN will become famous soon enough (37)DeaD_MeN_WalkiN will become famous soon enough (37)

Send a message via AIM to DeaD_MeN_WalkiN Send a message via MSN to DeaD_MeN_WalkiN
Default

Oh ok :P.
__________________
Always rep People + Me
Nub who killed 500 other Nubs.

Retired (Well I'm still doing freelance works).
DeaD_MeN_WalkiN is offline   Reply With Quote
Old 12-28-2006, 11:58 PM   #13
illidan92
Banned
 
illidan92's Avatar
 
Join Date: Jul 2006
Posts: 289

illidan92 has a little shameless behaviour in the past (-10)

Default

How do I make my disabled imported icon work?
illidan92 is offline   Reply With Quote
Old 01-06-2007, 10:31 PM   #14
illidan92
Banned
 
illidan92's Avatar
 
Join Date: Jul 2006
Posts: 289

illidan92 has a little shameless behaviour in the past (-10)

Default

What are the paths to import disabled and passive icons? Put em' in there.
illidan92 is offline   Reply With Quote
Old 01-06-2007, 10:43 PM   #15
Tiki
Transform and roll out!
 
Tiki's Avatar


Respected User
 
Join Date: Dec 2002
Posts: 2,901

Submissions (11)

Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)Tiki is a jewel in the rough (244)

AI tournament - 3rd place

Default

You should know that yourself -_- but fine.
__________________

www.sc2armory.com - Join our forums and community.
Latest and most up to date information about starcraft II.
Tiki is offline   Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off


All times are GMT. The time now is 08:37 AM.


Affiliates
The Hubb The JASS Vault Clan WEnW Campaign Creations Clan CBS GamesModding Flixreel Videos

Powered by vBulletin (Copyright ©2000 - 2019, Jelsoft Enterprises Ltd).
Hosted by www.OICcam.com
IT Support and Services provided by Executive IT Services