|
Learn How to Draw a Button with Hover State using FireworksIn this tutorial, we are going to draw this blue button with its corresponding orange hover state...
The hover state is the appearance of the button when the user hovers over it. 1. Create a new document 500px by 500px on white background at 72 pixel per inch as shown...
2. Draw a rounded rectangle as shown...
3. Switch button background to a linear gradient.
4. Select a blue for the left color stop.
5. Make the right color stop match the same blue.
6. Now that the right color stop is of the same blue as the left color stop, we can decrease the saturation of the right color stop by ...
7. Now we have a gradient that goes horizontal like ...
8. To make the gradient go in the vertical direction, drag the circle of the gradient handle to the bottom of the button. And drag the square of the gradient button to the top of the button so that it looks like the following.
9. Now add an light yellow text to the button....
10. Trim out the excess canvas with the command Modify -> Canvas -> Trim Canvas.
11. Save the file as button.png. My version of the file is linked here. Next Lesson:
|
 |
 |
| Roadmap | Lessons | Tutorials | Videos | Books | Links | About |
|
|
