Button project

R
Posted By
ronviers
Feb 6, 2007
Views
1389
Replies
0
Status
Closed
Hi,

If you would like to know how to make a drawing that looks like this:

http://picasaweb.google.com/ronviers/ButtonProject/photo#502 8225849649373810

Into buttons that look like these:

http://picasaweb.google.com/ronviers/ButtonProject/photo#502 8225231174083170

Hopefully you have time to download the higher resolution version at this link:

http://lh6.google.com/image/ronviers/RcfYNQLJomI/AAAAAAAAAfk /KIUAie2UWD0/Button-red-chrome-animation.jpg?imgdl=1

(To get a look at how they really look)

Then go to the beginning of this album:

http://picasaweb.google.com/ronviers/ButtonProject

Start the slideshow and follow along with the captions. I could not make this a step by step it would take too long and there are too many steps but if you get lost then I will be happy to answer any questions.

This is called my button project but I seriously considered renaming it to my transparency project because after I got started I realized that my understanding of how Layer Styles worked was at best naïve. This project could also be called a button template project because the way it is structured any button design can be inserted in one end and at the other end is slices and layer stacks ready for Imageready to use to create animated rollover effects.
Overall the way this works is a button is conceived, then vectorized in Illustrator. These vectors are then Revolved using the 3D effects in Illustrator in order to generate shapes.
These shapes are then Placed as Smart Objects into Photoshop where Styles are used to apply appearance effects, not to the pixels that come from Illustrator, but to the shapes provided by Illustrator. These smart objects with their associated styles are then grouped into other smart objects that are to be treated similarly and again, styles are used to tie the object elements together.
These groups of smart objects are then duplicated, linked and further grouped into other smart objects where text is added to one or more, in this case five, of the objects, now buttons.
These groups of buttons are then grouped again then duplicated with lateral links and changes to are made to various style components to give the appearance of animation – in this case a Satin style is rotated in steps of -10 degrees.
The important thing is that any change anywhere in the document will be propagated longitudinally changing all buttons from top to bottom, and also laterally changing all buttons, even with different text, generating the modified layer stacks for use by Imageready for purposes of animation. In other words, a single change anywhere will trigger dozens of changes throughout the document.
This structure has potential for other applications.
Any suggestions of how to do this better or questions about how to do it on your own are very welcome.

Good luck,
Ron

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

Related Discussion Topics

Nice and short text about related topics in discussion sections