Everyone knows about the bright-hyper-flashing-color banner that on sites to promote advertisements through games and annoyance. The animated gif allows a designer to inject movement into webpage graphics to draw the attention of the viewer.
Step 1: Open photoshop. Bring in the images of what you would like to animate. For me it was a purple background, a mini-car, and some text.
Step 2: Go to 'Window' then click on 'Animation'. Somewhere on the screen should show a 'Animation (Frame)' window. That is where you will begin your motion graphics.
Step 3: Initially you want hide everything that you do not want shown in the frame and show everything that you do want show. Once you have everything you want to show in your first frame, you would proceed to create another layer. It is the typical 'New Layer' icon you see on the bottom of the Animation window.
Step 4: Click on the new layer and start showing what you want in the last frame. Once you created the frame you want continue to select all the frames by holding down 'shift' and clicking on the two frames/layers. Then look next the 'New Layer' icon you will see a icon that is labeled 'Tweens animation frames' or it is normally called tweening. This lets you create the frames in between the first and last frame you have created so that you don't have to duplicate each layer manually. Imagine if it had to be 40 frames long, that would suck.
Step 5: Make minor adjustments by going through each frame/layer and showing or hiding the content to properly display the intended motion. At this stage you can use the 'play' button that is on the bottom of the Animation window.
Step 6: To save you have to 'Save for Web and Devices' and make sure it is a gif file. Then you should be able to preview it.
Sad to say I can not show my example because I know longer have the psd file and I have no idea how to link a random html file to blogger. So if you are in need of visual aid then please visit Wikipedia for more answers.
No comments:
Post a Comment