How to Make Plastic Pushbuttons
- How to Make Plastic Pushbuttons
- [Part 2 of 8]
- [Part 3 of 8]
- [Part 4 of 8]
- [Part 5 of 8]
- [Part 6 of 8]
- [Part 7 of 8]
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Overview Add Layer Effects to the graphics and icons for a panel of buttons, changing the effects to produce three button states; in ImageReady optimize the color and file size; slice the file into separate buttons; assign button states to produce an HTML file and images.
| PRECISELY! |
| When you create a panel of buttons for a Web page, precision and the "order of operations" are important. For instance, it's simpler if the file that goes from Photoshop to ImageReady is at the final on-screen resolution with the layers and "flattened" Layer Effects for three states for each of three buttons in the panel. Mistakes made in preparing the file can be carried from one button state to the next, and from Photoshop to ImageReady. So it helps to plan and carry out the project carefully and save copies of the file along the way in case you need to backtrack. |
TO MAKE A PANEL OF TRANSLUCENT BUTTONS, Photoshop 5/5.5's Layer Effects can be used to give a clear, beveled appearance to a graphic on a transparent layer to create the button faces. Then you can color the button icons, creating variations to use as rollover and mouse-down states. When you've completed the Photoshop file with all three states, you can open the file in ImageReady for optimizing, slicing, defining the rollover states, and saving the HTML file and sliced images.
There are five main parts to the button-making process described in the next six pages: Designing the button graphics (steps 1 through 6), producing and saving alternate states for the buttons (steps 7 through 10), optimizing color and file size (step 11), slicing the buttons apart (step 12), and assigning and saving the button states (step 13).
Note: The buttons shown above were designed to be used on a white Web page background. If you want to use similar buttons on a colored background, you'll need to experiment with the Layer Effects, especially those in Screen and Multiply modes, to get the result you want. For instance, a color glow Layer Effect in Screen mode doesn't color the white background -- that is, it disappears where it overlays the white gap between buttons. In contrast, on a dark color, the glow does show up against the background, so the glow from one button can "bump into" or overlap the glow from the one beside it, unless you reduce the Distance setting for the glow, or increase the space between buttons. Also, a shadow in Multiply mode will have no effect on a black background, so if your background is black, you can't count on the shadow to differentiate the "rest" state from the rollover or mouse-down condition.