Visual C++ .Net Applications Resources: Icons

An icon is a small picture that can be used to represent a Windows control, application, or anything else appropriate on the monitor screen. For example, icons are used to represent applications in My Computer or Windows Explorer.

1. Start Microsoft Visual Studio .NET
2. On the Start Page, click New Project (alternatively, on the main menu, you can click File -> New -> Project...)
3. On the New Project dialog box, in the Project Types tree list, click Visual C++ Projects
4. In the Templates list, click Managed C++ Empty Project
5. In the Name edit box, replace the <Enter name> content with Icon Design and Nothing Else
6. In the Location combo box, accept the suggestion or type your own. If you don't have any, type C:\Programs\MSVC.NET
7. Click OK

1. To create an icon, on the main menu, click Project -> Add Resource...
2. In the Add Resource dialog box, click Icon:
    
   
3. Click New
4. While the new icon is still selected, on the Properties window, click Filename, type Belgium and press Enter. Notice that an extension was added to the file name.
    
   If the Image Editor toolbar is not displaying, on the main menu, click View -> Toolbars -> Image Editor
    
   
    
   If the Colors window is not displaying, on the main menu, click Image -> Show Colors Window
    
   
5. On the Image Editor toolbar, click the Rectangle Tool button .
6. On the Colors window, click the gray button (2nd column, 2nd row)
7. On the drawing area, draw a rectangle as follows:
    
   
8. On the Image Editor toolbar, click the Fill Tool button
9. On the Colors window , click the red color (3rd column, 2nd row)
10. Click inside of the drawn rectangle
11. On the Image Editor toolbar, click the Filled Rectangle Tool button.
12. On the Colors window, click the yellow color (4th column, 2nd row).
13. Draw a rectangle as follows (if you make a mistake, to modify the color of one of the areas, change the color using the Colors window):
     
    
14. On the Colors window, click the black color (1st column, 1st row)
15. Draw a rectangle as follows:
     
    
16. To associate an equivalent smaller icon, on the main menu, click Image -> New Image Type...
     
    
17. Make sure that 16x16, 16 Colors is selected and click OK.
18. On the Image Editor toolbar, click the arrow of the Magnification Tool and click 8x
19. On the Image Editor toolbar, click the Filled Rectangle button.
20. On the Colors window, click the red color.
21. Draw a red rectangle as follows:
     
    
22. On the Colors window, click the yellow color
23. Draw a yellow rectangle as follows:
     
    
24. On the Colors window, click the black color
25. Complete the flag as follows:
     
    
26. To save the icon, click the Save All button
27. To create another icon, on the main menu, click Project -> Add Resource...
28. In the Add Resource dialog box, double-click Icon.
29. On the Properties window, click Filename. Type Diamond and press Enter
30. On the Image Editor toolbar, click the arrow of the Magnification Tool and click 8x
31. On the Image Editor toolbar, click the Line Tool button 
32. In the Colors window, click the blue color (7th column, 2nd row)
33. In the empty drawing area, count 15 pixels from the top left to the right. On the 16th box, click and drag right and down for an angle of 45˚ for 7 boxes. Release the mouse
34. Click the same top blue box and drag left and down at 45˚ for 7 boxes:
     
    
35. Draw a diamond under the first one as follows:
     
    
36. On the Colors window, click the red color (3rd column, 2nd row).
37. Draw a reverse graphic with regard to the above dialog as follows:
     
    
38. Using the blue and the red colors, design the other diamonds as follows:
     
    
39. On the Colors window, click the white button
40. Using the Line Tool, draw four borders as follows:
     
    
41. Still using the Line Tool and the white color, draw new white lines as follows:
     
    
42. On the Image Editor toolbar, click the Fill Tool button .
43. Using the white, red, and blue colors, fill the icon as follows:
     
    
44. To create the smaller equivalent icon, on the main menu, click Image -> New Image Type...
45. Make sure that 16x16, 16 Colors is selected and click OK.
46. Using the same above approach, design the icon as follows:
     
    
47. Save the icon
48. To create a new icon, on the main menu, click Project -> Add Resource…
49. Double-click Icon and zoom for 8x ratio
50. Save the icon as Feather
51. On the Image Editor toolbar, click the Curve Tool.
52. In the drawing area, position your mouse on the top right corner 3 pixels from the right border and one pixel from top.
53. Click and drag down and left to draw a diagonal line to stop at 3 pixels from the left border and 1 pixel from the bottom border:
     
    
54. While the curve is still selected, click the 3rd pixel from left and 1st from top as follows:
     
55. As the curve is still continuing, to smooth the curved line, click somewhere in the middle left section as follows:
     
56. With the Curve Tool still selected, draw the same diagonal line you drew earlier:
     
    
57. Click the 3rd pixel from right and the bottom borders:
     
58. Click somewhere in the middle center of the icon:
     
    
59. While the Curve tool is selected, draw one more diagonal line similar to the previous ones:
     
    
60. To make the line curved, click somewhere in the middle top section of the icon. Click somewhere in the Center left section of the icon to complete the curved middle line:
     
    
61. As you may realize, we are drawing a leaf or feather. Therefore, add a few black pixels to decorate the icon. Using the Fill Tool, add a green background to the icon:
     
    
62. In the same way, design an equivalent 16x16 pixels icon
63. Save All