) and as a button in a toolbar that has been created at installation (
):Lesson 15 - Working with the Visual Studio® plug-in
Axialis IconWorkshop includes a handy feature which permits working efficiently with Visual Studio® 2005 and 2008 (the plug-in is not compatible with versions prior to 2005). During installation a plug-in has been added in your Visual Studio® configuration. In this lesson, we'll see how to enhance your development workflow by using this plug-in.
If you don't have Visual Studio® 2005/2008 or don't want to use this feature, go directly to Lesson 16 - Creating icons for toolbars.
Introducing the Visual Studio® plug-in
The plug-in is a piece of executable code that is included in the Visual Studio® user interface as a DLL and which is loaded in memory when you launch the VS IDE.
The principle of this plug-in, as we've made it, is to create a direct bridge between the VS IDE and IconWorkshop. It permits to easily edit in IconWorkshop an icon included in a solution. Just open the icon in the Visual Studio® resource editor and launch the associated plug-in command. The icon is automatically opened in IconWorkshop and you can work on it as necessary. When you save it in IconWorkshop, the VS IDE detects the change in the file and automatically refresh the icon document.
Let's see how it's implemented in the user interface:
1. Launch the Visual Studio® IDE.
2. The plug-in command is available at 2 different locations. In the menu Tools/Edit in Axialis IconWorkshop () and as a button in a toolbar that has been created at installation ():
3. The two commands are stricly identical. Click on one of them, the Axialis IconWorkshop application is launched or activated in foreground if it runs in background. It means that the bridge between the 2 applications is working. As no icon is opened in the VS IDE, no icon is opened in IconWorkshop. This is absolutely normal.
Modifying an icon in the solution using the plug-in
In this part, we'll see how to modify an icon included in a solution by transferring it in IconWorkshop with the plug-in. We'll use a C++ project using MFC. If you don't know C++ and MFC this is not a important since we won't work on the code. We'll only work on the icons and compile the solution.
4. In Visual Studio®, create a new project by choosing File/New/Project (Ctrl+Shift+N). A dialog box opens. Choose C++/MFC as project type and "MFC Application" as Visual Studio template (right pane). In the Name zone (bottom of the dialog) enter "Sample01". Click OK to continue.
5. The MFC application wizard opens. As we want to use the default settings, just click on Finish button. The project is created and opened.
6. In the Solution Explorer window (press Ctrl+Alt+L if not visible), double click on the item "Sample01Doc.ico" (). The icon file opens in a document window ():
7. Launch the plug-in command by clicking on the button (
) or by choosing Tools/Edit in Axialis IconWorkshop. The icon is opened in IconWorkshop:
8. At this point, we could simply draw the icon as required. A better idea is to use the image objects to create a professional icon in a snap. We'll create a document window with a picture placed on it. The images formats we'll add in the icon will match the Windows XP requirements:
 |
|
9. Create a new image format 48x48 - RGB/A. Choose Draw/New Image Format or press Ins.
10. A dialog box opens. In Colors, select "RGB/A Alpha Channel" and in Size in Pixels, select "48x48".
11. Uncheck the option "Creation Based on the Following Image" (
IMPORTANT!). A new empty 48x48 image format is added at the top of the format list. If the image format is not empty, delete it and redo from step 9 and be sure to uncheck the option in step 11.
12. In the Librarian window (choose View/Librarian if it is not visible), select the "Objects/Samples/Medium" folder (). A list
of available object is displayed in the contents window below. Find the "Document.png" file and select it (). When done,
use a mouse Drag-and-Drop to add
it into the project as shown below (). The object is added
to the project as a floating selection (
).
13. Find the "Document - Picture.png" file and select it (
) and redo the same operation to place it in the project (). The final image should look as shown above in the preview 1:1 window (
).
14. Before going further, we must remove the 2 formats 32x32-16 and 16x16-16 originally created by Visual Studio®. Right-click on them and choose "Remove Image Format" (the only format in the icon should be "48x48 - RGB/A")
Now let's add the other formats. We can do this simply by adding new formats from the existing one (48x48 - RGB/A) as we did in lesson 4. In such a case, add the formats and jump directly to step 20.
If you want create a professional icon, we recommend you to distinguish the images sizes 16x16 from the others. The 16x16 images must have less details and be more "crisp". See below the difference between a crisp 16x16 format and a normal one simply created from the 48x48 image:
15. Create a new empty format 16x16 as we did in step 9. Choose Draw/New Image Format or press Ins. In Colors, select "RGB/A Alpha Channel" and in Size, select "16x16". Be sure to uncheck the option "Creation Based on the Following Image". Click OK, the new format is added.
16. In the Librarian window (choose View/Librarian if it is not visible), select the "Objects/Samples/Small" folder (). In this folder you find some objects suitable for 16x16 formats. Find the "Document.png" file and select it (). When done,
use a mouse Drag-and-Drop to add
it into the project as shown below (). The object is added
to the project as a floating selection (). Do the same for the image "Document - Picture.png" (). The resulting icon project should look like this:
Now we can add the other formats from the 2 formats 16x16 and 48x48 we've just made. To do so, we'll use the following rules:
|
|
17. Right-click on the format 48x48-RGBA in the list, a menu opens, choose "Create 32x32 RGB/A Image Format". The new format is created.
18. Redo the previous step for the remaining formats following this order:
• 48x48-RGBA -> choose "Create 48x48 256 Colors"
• 48x48-RGBA -> choose "Create 32x32 256 Colors"
• 16x16-RGBA -> choose "Create 16x16 256 Colors"
• 48x48-RGBA -> choose "Create 48x48 16 Colors"
• 48x48-RGBA -> choose "Create 32x32 16 Colors"
• 16x16-RGBA -> choose "Create 16x16 16 Colors"
19. The resulting icon should now look like shown below. As you can see, the 16-color versions are "pixelated". Even if these versions are rarely used on today's screens, we recommend to retouch them slightly: remove bad pixels and enhance borders with a darker color.
20. Save your icon, select File/Save or press Ctrl+S. Close the document.
22. Switch back to Visual Studio®. The IDE prompts you "Sample01Doc.ico - This file has been modified outside of Visual Studio. Do you want to reload it?". Click Yes.
23. You have finished. Now you can compile your project. Your new document icon is now fully compatible with Windows® XP.
Adding a new Windows Vista™ icon in the solution
This part of the tutorial works only if you have Visual Studio 2008 or superior installed. We'll see here how to add a new icon in the solution. Additionally this icon will be compatible with Windows Vista™ (read more about Windows Vista™ icons).
24. In the Solution Explorer, double click on the file "Sample01.rc". The Resource View window opens. In the resource tree, right click on the Icon folder and choose "Insert Icon".
25. A new icon (in our case "IDI_ICON1") is added to the solution and automatically opened in a document window. It contains only 2 newly created formats 16x16 and 32x32 in 16 colors. Open it in IconWorkshop by choosing "Tools/Edit in IconWorkshop" or by clicking the associated button in the toolbar.
If you use Visual Studio 2005, you must save the file (in fact the associated RC file) and reload the icon file from the Solution Explorer before clicking on the plug-in button.
26. Once the file is opened in IconWorkshop, select "Draw/New Image Format" or press Ins. In Colors select "RGB / Alpha Channel", in Size select "256x256 (Vista)". As we want to make an icon fully compliant with Windows Vista, we'll compress the format in PNG: Select "PNG Compress 256x256 format". Be sure to leave the option "Creation based on the following image" unchecked. Click OK. The new 256x256 format is created.
27. Now you can do any icon by assembling available 256x256 image objects. For example, if you want to create document icons, we recommend you, in the Librarian, the folders "Objects/Samples/Large" and "Objects/Samples/File Types". In order to make things easier here, we'll start from an existing icon. What about a nice RSS icon? Ok, in the folder "Objects/Pack 4 - Web 2.0 Icons" (), locate the file "RSS.png" (). Add it to the project as we did in step 12 using drag & drop ( & ). The image is visible in the preview window ():
28. Before going further, we must remove the 2 formats 32x32-16 and 16x16-16 originally created by Visual Studio®. Right-click on them and choose "Remove Image Format" (the only format in the icon should be "256x256 - RGB/A").
29. Create all the following formats by using the same mathod as we've seen in Lesson 4:
64x64 - RGB/A
48x48 - RGB/A
32x32 - RGB/A
16x16 - RGB/A
48x48 - 256 colors
32x32 - 256 colors
16x16 - 256 colors
32x32 - 16 colors
16x16 - 16 colors
30. When you have finished, the icon document window should look like this:
31. Click on the various formats () and see the resulting icon at scale 1:1 in the preview window
(). Note that the first image 256x256 RGB/A is PNG compressed because the small image 
is displayed in the upper-right corner.
32. Save your icon, select File/Save or press Ctrl+S. Close the document.
33. Switch back to Visual Studio®. The IDE prompts you "icon1.ico - This file has been modified outside of Visual Studio. Do you want to reload it?". Click Yes.
34. You have finished. Now you can compile your project with your Windows Vista icon embedded.
Lesson 16 - Creating icons for toolbars
