Download: IconBuilder xp

IconBuilder xp User’s Guide

A Guide to Understanding the Filter Table of Contents An Introduction2AComplete List of Features 3 Overview of the Interface 4 Quick Guide to the Controls 5 Getting Started in Photoshop 6 Frequently Asked Questions 7 Tips & Tricks 8 ©2001 The Iconfactory. All rights reserved. The Iconfactory and Iconfactory logo are registered trademarks. All other product names mentioned are used for identification purposes only and may be trademarks or registered trademarks of their respective holders.,

IconBuilder xp An Introduction

What Is IconBuilder? IconBuilder is a filter for use with Adobe Photoshop that makes creating icons a snap. IconBuilder harnesses the flexibility of Photoshop to make a powerful icon creation tool for novice and advanced users. Written by veteran Photoshop filter author, Craig Hockenberry, IconBuilder is an ideal "real world" solution for creating 32-bit icons for Windows xp as well as the more traditional .ico resources of the past. Thanks to the use of layers (and their transparent properties), Photoshop makes the perfect editor to create the blended shadows, smooth outlines, and translucent areas that modern icons demand. IconBuilder has the ability to quickly and easily translate any kind of transparent effect done in Photoshop layers into icons for Windows XP and beyond. Keep in mind that IconBuilder itself is not an icon editor. You use Adobe Photoshop as your editor with IconBuilder as your assembly tool. Using this method, making icons has never been easier! Summary of IconBuilder xp Features • Creation of true 32-bit icon formats for Windows xp • Creation of all other Windows based .ico file formats (WIN 95, 98, NT, 2000) • Supports transparent/translucent masking of icons • QuickBuild™ feature creates all icon resources in a single click • Extract any icon into Photoshop for editing • Cycle background colors to view icons against a variety of possible desktops • Instant access to ToolTips for novice and advanced users • IconBuilder does it all - no need for additional icon editors System Requirements • Microsoft Windows (one of the following) 98 (including SE and ME) Windows 2000, Windows NT 4.0 with SP 4, 5 or 6a Windows XP • Photoshop 6.0 IconBuilder xp for Adobe Photoshop - IconBuilder lives in the • Color monitor with true color (32-bit) video card Plug-Ins folder of Adobe Photoshop and comes with everything you see here. • Monitor resolution of 800x600 or greater Please see the next page for a detailed explanation of features. Learn more about IconBuilder at www.iconfactory.com Send support questions to: email is hidden 2,

IconBuilder xp A Complete List of Features

IconBuilder was created by people who love to make icons. We wanted a tool that fits our needs as both hobbyists and professionals. Creation of true 32-bit icon formats - By combining custom icon data that you create or import with 1-bit or 8-bit transparent masks from Adobe Photoshop layers, IconBuilder can create transparent icons on the desktop in a matter of seconds. Create icons for the Windows Start Menu - In addition to the traditional icon sizes normally associated with .ico files (16x16, 32x32, and 48x48 pixels), IconBuilder also supports the creation of the 24x24 pixel resources needed by Windows for display in the Start Menu. This makes creating application icons easier than ever before. Supports transparent/translucent masking of icons - Thanks to the 256 levels of transparency possible in a standard Photoshop layer, IconBuilder is able to read these levels and create transparent masks quickly and effectively. Multiple layers can be combined to create complex transparent or translucent masks that can then be applied to standard icons. You can make the masks yourself, or have IconBuilder make them for you. QuickBuild feature creates all icon resources in a single click - If you want the The power of “deep” 8-bit masks - If you look closely at these ease of creating all versions of an icon instantly, IconBuilder's QuickBuild feature gives two trash can icons, you can see how the background pattern of it to you. Using this feature, you can create and save all the basic resources (data and the desktop shows through the translucent areas in the center. This masks). If you want to go back and tweak them afterwards, that's a snap too! is accomplished by setting different opacity levels in Photoshop layers and using them as the icon’s mask data. Experimenting with these methods can create some exciting effects on the desktop. Open .ico files into Photoshop for editing - IconBuilder allows you to Open almost any .ico file and see, for instance, how a particular icon's 8-bit mask was created. Using the "Apply View to Photoshop Layer" feature, you can then paste the icon's visual data and mask back out into Photoshop for editing. Cycle background colors to view icons on a variety of possible desktops - Want to know what your transparent icon will look like against a background other than gray? IconBuilder lets you select from a multitude of solid colors to display your work against. Check how your icons look against both "normal" and "funky" colored desktops. Instant access to ToolTips for novice and advanced users - The filter comes with roll-over ToolTips to help you find your way around the interface until you're comfortable with the controls. These tips can then be turned off and on as needed. IconBuilder does it all - no need for additional icon editors - Perhaps IconBuilder's greatest strength is that it is a one-stop tool for creating icons. Since the filter makes use of the ultimate graphics editor, Adobe Photoshop, for its editing tools, icon artists need no longer look to multiple programs to create icons. This becomes especially true as artists move away from the “pushing pixels” approach so common in classic icons, and begin the more modern “image editing” of Windows XP icons and beyond. Learn more about IconBuilder at www.iconfactory.com Send support questions to: email is hidden 3,

IconBuilder xp An Overview of the Interface

abcdAbout the Interface IconBuilder’s user interface is broken into four main sections - the Source Layer, the Target Icon, the Work Area, and Misc. Controls. It is important to know and understand the difference between these areas and their individual functions to help you build icons quickly and easily. Section A: The Source Layer - The Source Layer displays the icon data and mask information you have currently selected in Photoshop. This area of the interface includes controls to center the icon in the available work space, or create an entire icon in a single click with QuickBuild. The bottom of this section contains radio buttons that instantly tell you what size, color depth, and mask you are currently working with in the working area to the right. This section also contains the filter’s Menu bar which lets you select important commands like “Clear Resource” as well as access to the web buttons to surf to The Iconfactory. Section B: The Target Icon - This part of the interface shows how the icon will look when saved. This view can be customized to display just the icon’s image data, mask data, or a combination of both (the default). In addition, you can “extract” any combination of these settings back into Photoshop layers by pressing the “Apply View to Photoshop layer button. This is useful for getting complex transparent masks back into Adobe Photoshop. Section C: The Working Area - Whatever resources are shown in this area are contained within the icon (.ico file) you are currently working on. You build an icon either by adding resources to the grid one by one, or all at once with the QuickBuild feature. Building “Classic” icons means that the various icon resources (16x16, 32x32, and 48x48 pixels in size) will need to be completed in this area and saved. NOTE: The column labeled 24x24 should ONLY be used if you are creating icons specifically for the Windows Start Menu. To add a resource to a particular cell, simply click on it. This The Work Area - The above screen shots show the main work area portion of the interface also contains controls to change the background color, open of IconBuilder. This particular screen shot shows that the Smiley.ico file contains the traditional sizes and bit depths needed for a modern an existing .ico file into IconBuilder, create a new resource, and save the icon you are Windows icon file. The notable exception is the 16 color version (4- currently building. bit) of the 48x48 resource. It is important to exclude this resource due to a bug in certain versions of Windows NT. If you build this Section D: Miscellaneous Controls - Click the “Register” button to register your size and bit depth into the icon file and try to view it on NT, the copy of IconBuilder. Click “Done” to exit the filter and return to Photoshop. Clicking icon won’t display properly. the title graphic will display information about the filter’s about box. Learn more about IconBuilder at www.iconfactory.com Send support questions to: email is hidden 4,

IconBuilder xp A Quick Guide to the Controls

1 6 1178912 133414 15 16 17 18 0. Main Menu - Important commands like Clear Resource and the 11. The Working Area - This grid shows the various bit depths and web access buttons are located here. icon sizes that you use to build your icon. Columns represent the 1. Source Layer View - Displays the currently selected Photoshop resource size in pixels (16x16, 24x24, 32x32, and 48x48) and layer. rows represent the resource color bit depths (1-bit, 4-bit, 8-bit, 2. Add Resource - Adds both the data and mask to the target and 32-bit).You can click directly in the grid to manually select icon and the selected grid cell simultaneously. which resource you want to work with. 3. Center View - Quickly centers the icon in the Source Layer View. 12. Set Background Color - Choose what color to display behind 4. QuickBuild - Click this to instantly add data and mask info to the icons by clicking this button. the entire working area. 13. Cycle Background Color - Quickly cycles through the existing 5. Manual Controls - Select what grid cell to add data to in the color choices to display behind the icon resources. working area with these controls (or by simply clicking on an 14. New - Clears the current working area and create anew icon. individual grid cell itself). 15. Open - Opens an existing .ico file from the Windows desktop or file browser. 6. Target Icon File - Shows the current state of the target icon. 16. Save - Saves the current .ico file you are working on. 7. Both - View the target icon file by a combination of its data and mask. Gives the most accurate picture of how the icon will look. 17. About Box - Click the title graphic for version infomation and 8. Data - View the target icon by just its visual data. to view the filter’s credits. 9. Mask - View the target icon by just its mask (outline) data. 18. Register - Click this button to enter your registration information 10. Apply View to Photoshop Layer - Extract the target icon and remove the startup delay. Once registered, this button is file to the currently selected Photoshop layer. removed from the user interface. 19. Done - Click this button to exit IconBuilder and return to Adobe Photoshop. Learn more about IconBuilder at www.iconfactory.com Send support questions to: email is hidden 5,

IconBuilder xp Getting Started in Photoshop

Unlike conventional icon editors, IconBuilder utilizes the power of Photoshop for editing the actual icons. This has many advantages over stand-alone applications, but it also requires some re-learning about how to approach the process for icon construction. This section offers some helpful advice on using Photoshop in combination with IconBuilder as your icon editor of choice. Getting Organized Every icon has to start somewhere, and with IconBuilder that means creating individual layers in Adobe Photoshop to use as a launching pad for the filter. Depending upon how you like to organize your work, you can either create Photoshop files that are sized to your exact needs (32x32 for example) or you can create a Photoshop file that is large enough to contain all the various resource sizes at once. The IconBuilder Pro Tutorial contains a sample template file that is set up in this manner. The file can be found in the “Tutorial” folder of the ZIP file you downloaded. For a full understanding of how we use the template to construct icons, we suggest you walk through the IconBuilder Tutorial pdf. If you prefer to create your own template file to your own specifications, remember to completely delete the background layer from the layers palette. This is not absolutely necessary, but IconBuilder can only build transparent icons when they are created from individual layers, not the background. Deleting it now will only save time later on. Setting up the proper layers - The template file that is provided for you as part of the IconBuilder Tutorial has pre-formatted size boxes so you can accurately crop or scale your icons. By assembling The Advantages of Using Photoshop Layers them on a single layer, you can more easily construct the final icon once inside IconBuilder. Many times when creating icon suites for software, a developer will create a single “base” icon as the template for the set and then design multiple variations on that icon to composite as needed. Because Photoshop layers can be created, moved, re-arranged and have their opacity level set at will, they become the ideal environment for creating large, slightly varied sets of icons. Create your base “folder” icon on one of the lower layers, and then add additional layers for each type of element you’ll need to apply to the base folder. We call this “badging” because you are essentially adding a smaller icon or “badge” to the larger parent icon. Badges can even be used to represent the icon itself in the smaller 16x16 (or list view) version. One thing to remember when compositing - IconBuilder will only recognize the data in the currently selected layer, so you’ll need to merge or duplicate the multiple elements into a single, new layer prior to launching the filter. The same can also be said for setting opacity levels of a given layer when masking. Just remember to turn off the background layer prior to merging (if you’ve not already deleted it). “Badging” Folders - In the above example, a base template folder is placed near the bottom of the layers list, while the smaller elements are placed in their own layers above. This allows easy viewing and placement of the individual badges. Badges can be combined, blended, made transparent, etc to achieve a range of effects. Learn more about IconBuilder at www.iconfactory.com Send support questions to: email is hidden 6,

IconBuilder xp Frequently Asked Questions

For a complete list of frequently asked questions, please visit The Iconfactory . We’ve included some of the more common questions here for easy reference. Why won't IconBuilder launch? Check to make sure you're running IconBuilder on a PC with the base system requirements we list on the first page of this document. If you do not have at least this minimum configuration, IconBuilder may not run properly. There is a long pause when I run the filter. Why? IconBuilder is not free. The delay process is the filter's way of encouraging you to pay the registration fee. A great deal of time and effort went into making the filter as good as it can be. By registering to eliminate the startup delay, you are telling us that you support our efforts to bring you quality software products. Visit The Iconfactory for pricing and registration information, and if you like and use the filter, please register it. I’ve set a low transparency level on my layer, but the icon still shows as 100% opaque in IconBuilder, what is going on? Because of the way Photoshop handles individual layers, things like layer effects and opacity settings won’t register in IconBuilder until you do an Image -> Duplicate -> Merged Layers Only command. This will generate a new layer with your previous settings “fixed” in the layer. IconBuilder should then read your opacity and layer effects settings. When I click the save button, it seems to take a few seconds to save the file. Is there something wrong? This can be due to a number of factors: slow processor speeds, disk fragmentation, or other software running in the background. Try running only Photoshop or optimizing your hard drive and see if this helps eliminate delays in saving files. I've built several icons, but they are not showing up correctly. What is going on? Certain versions of Windows contain bugs that affect how icons are displayed on the desktop. If certain resources are built into the .ico file, the icon may not show up properly. The main IconBuilder Tutorial file outlines which of these resources you need to pay particular attention to when constructing your .ico file. We suggest you read this document completely before doing any actual icon construction. NOTE: The column labeled 24x24 should ONLY be used if you are creating icons specifically for the Windows Start Menu. Be sure this column is clear of all data, or your icon may not display properly. See page 4 for details. Duplicate the File - Certain layer settings won’t take effect in IconBuilder until you duplicate the layer. By doing this, you “freeze” How do I report a bug or submit a suggestion? Please send bug reports to us at opacity, layer effects and several other kinds of controls onto the email is hidden as well as any suggestions for features you'd like to see target layer and allow the filter to build the icon properly. in future versions of IconBuilder. Learn more about IconBuilder at www.iconfactory.com Send support questions to: email is hidden 7,

IconBuilder xp Tips & Tricks

The following is a collection of helpful tips and tricks that you might find useful when constructing icons with IconBuilder. If you come up with any additional tips or tricks, don’t forget to send them to us at email is hidden! Know the target OS - Before even one pixel is pushed, you should identify the OS the icon will be seen on. Why is this important? There are different color considerations when creating icons for different versions of Windows. Before Windows xp, virtually all .ico files contained the same sizes and bit depths. This is no longer the case, so know where the icon will be seen and used and design accordingly. Keep it simple - With the introduction of millions of colors and transparent effects in Windows XP, we can already see the desire for icon designers and artists to move Early Mac toward more complex, detail filled icons. While these features make it tempting to “go crazy” with your icon’s design, resist the urge and keep it simple and clean. The icon should hold up equally well whether at millions of colors or just 16 colors. Consult Microsoft’s user interface guidelines - If you’re using IconBuilder, then Mac OS 8.5 - 9.x chances are you are designing icons for corporate clients and / or software developers. When designing and building icons for Windows XP, it is important to consult the GUI guidelines Microsoft has set up for designers so that their icons look like they “belong” in the OS. Now, we’re not saying that these guidelines should be considered the only way to design icons, but when you have a client that needs solutions for this operating Mac OS X system, at the very least, keep them in mind. For the latest info on Windows XP design guidelines, head to and search for “Creating Windows XP icons” or use the Web Menu of IconBuilder to surf there. Start designing with the lowest common denominators - We are firm believers Win 3.1 that it is much easier to begin with a limited, all-purpose 256 palette when starting a new icon. From experience we’ve found that its easier to add colors and shades than it is to remove them. This also goes for icon sizes as well. Sometimes its best to get the 32x32 or even 16x16 designed and working right before proceeding onto larger 48x48 version. Win 98 /NT Name and save your layers - Using Photoshop and its multiple layers for compositing and building icons is a time saver, but not if you can’t find the layer you need. Try to remember to name a new layer as soon as you create it. This will help later on when you all of a sudden have 60+ layers with 16x16 badges on them and can’t find the Win XP one with “that widget” you’ve been looking for. Keeping it simple - Modern icons are steadily advancing towards Turn off ToolTips - Once you get a feel for the controls in IconBuilder, feel free to realistic and more detailed treatments like those in Mac OS X and Windows XP. Does this approach translate to good icon design? toggle the ToolTips off. This will speed up your productivity and keep the UI clear of Now, more than ever, it is important to have a solid concept and unnecessary elements. clean execution when designing icons. The new larger canvases, and expanded color palettes are unforgiving to the eye and the days Check out the Tutorial & Iconfactory home page - There are many more tips, of throwing a few pixels together to pass as an icon are long gone. Take a look at this slice of icon history and you’ll see what we mean. tricks, and helpful hints in the Tutorial.pdf file that came with the filter. Also, check The Iconfactory home page for the latest information on IconBuilder and other great icon related software. Learn more about IconBuilder at www.iconfactory.com Send support questions to: email is hidden 8]

15