| ronviers@gmail.com 2007-02-06, 6:15 pm |
| Hi,
If you would like to know how to make a drawing that looks like this:
http://picasaweb.google.com/ronvier...225849649373810
Into buttons that look like these:
http://picasaweb.google.com/ronvier...225231174083170
Hopefully you have time to download the higher resolution version at
this link:
http://lh6.google.com/image/ronvier...KIUAie2UWD0/Bu=
tton-red-chrome-animation.jpg?imgdl=3D1
(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=EFve.
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
|