How to Create Buttons in CS4

Design and create interactive Web buttons with Adobe CS4.

The Adobe Creative Suite CS4 is a powerful package of graphic, photographic and Web-editing programs that can be useful to everyone from amateur photographers to professional Web designers. Many Web and Web 2.0 designs employ graphic buttons that help browsers navigate their way around websites. CS4 includes programs that will help you through the process of creating these buttons, from the visual design phase all the way to adding interactive properties and animation.

Instructions

1. The quickest way to create the visual part of the button in CS4 is to use a combination of Photoshop's shape tools, text tools and layer style effects to create a button from scratch. Photoshop CS4 even comes with a group of button and glass button layer styles that can transform a simple shape layer into a three-dimensional button with a single mouse click. To access these layer styles, select "Window > Styles" from the menu bar, and select "Buttons," "Glass Buttons" or "Web Styles" from the fly-out menu in the upper right-hand corner of the "Styles" palette. You can adjust colors or customize the extent of the applied style effects by opening the "Layers" palette and double-clicking on the effect you want to change. You can also use the "Save for Web" option to apply HTML properties to your button.

2. Create your button in Illustrator, also using a combination of the program's shape tools and special fill options, such as gradient fill. Where Photoshop is a faster program, Illustrator art is created as a vector, allowing you to resize your button up or down without affecting its quality. Illustrator also offers a wide variety of text and transformation effects that you can apply to your buttons. As in Photoshop, Illustrator allows you to apply basic HTML properties to your work using the "Save for Web" interface.

3. Convert any image, shape or text object created in or imported to InDesign into a button using the program's "Convert to Button" function. Though InDesign offers fewer effects and style options than other CS4 programs, the "Convert to Button" function surpasses both Photoshop and Illustrator in allowing you to easily designate rollover and mouse-off transformations for your button, providing an easy interface for you to add interactive features. To create a button in InDesign, place or create an object on your layout, select it with the "Selection Tool," and select "Object > Interactive > Convert to Button." A dialog box will then open, prompting you to select your interactive preferences for the button.

4. Add animation and further interactive capabilities to your button using Flash. Flash includes animated button templates that help give you a framework for how your button will act once it is on the Web. Like InDesign, Flash is not the best program in which to design your button from scratch, but it is the best program in CS4 into which to import a previously designed button in order to add interactive elements to it. Choose one of the button templates from the Welcome screen, and select "File > Import > Import to Stage" to bring in a button designed in one of CS4's other programs. You can tweak the button as needed using Flash's Tools Panel at the right of the application window. Use the tools in the program's Timeline and Motion Editor tabs along the bottom of the application window to create animation actions for your button.

References

• Adobe InDesign CS4: Create buttons
• Adobe Photoshop CS4: Apply preset styles
• Adobe Flash CS4: Templates
• Adobe Illustrator CS4: Apply a gradient to an objects