Filed under Photoshop Tutorials - Head Nerd @ February 22nd, 2006
Creating Eye Opener Rollover Button |
| Start by creating a rounded rectangle in a new file. |
 |
| Press Shift and create a circular shape at one end of the rectangle. |
 |
| Apply 3 pixels stroke to the button shapes. |
 |
| Type text "Eye Opner Article". |
 |
| Create an ellipse in the circular portion of the button. |
 |
| Select the ellipse using direct selection tool. Using convert point tool click on the right and left node of this ellipse. This will create an eye shape out of the ellipse. |
 |
| Apply stroke using following settings. |
 |
| Create a circle for the eye lid. |
 |
| Add more details to the eye using pen tool as per your requirement. |
 |
 |
| Duplicate the eye shape (only the white background eye shape layer). |
 |
| Merge all other eye layers. Hide the merged layer. Select the duplicate layer. Press Alt and using up arrow move the eye shape a few pixels up. This will create a duplicate of the shape. |
 |
| Press subtract from shape area from the top bar. This will create a closed eye position. |
 |
 |
| Swith to imageready by clicking edit in imageready button at the bottom of the tool bar. In image ready make sure your web content palette and layer’s palette are open. |
 |
| Select the blue button layer. From layer menu select new layer based slice. |
 |
| This will create a slice shape surrounding the button automatically. This will be the hit area of the button. |
 |
| In web content palette click "create rollover state" button. This will create a seprate over state. |
 |
| With over state selected, hide the closed eye layer and unhide the open eye layer. |
 |
| Press Ctrl+Alt+Shift+S to save the roll over button. Save as an HTML file along with images. Photoshop will take care of the java script code that is required for rollover button to function. |
 |
| Roll over the button below to see it in action. The eye will open as you rollover the button. |
 |
Copyright 2005-2006 - All Rights Reserved.