How to Animate Thick Pin Stripe Background - Photoshop Tutorial
Jan 22nd, 2009 | By Adobe-Masters.com | Category: Photoshop, Tutorials | 2,562 views | Subscribe | PDFHere’s the original background found on the original Adding a Thick Pin Stripe Background to HTML Table - Dreamweaver tutorial …
We’ll be animating the “Kindle Ebooks” text from the original thick pin stripe background shown in this tutorial with Adobe Photoshop.
Separated the layers: This “KINDLE EBOOKS” text is contained in just one single layer. To animate the two (2) words individually, we’ll need to put each word in its own layer.
There may be a different ways to separate the layers, but here’s the method we’ll use. Delete the “EBOOKS” portion, and then duplicate the original “KINDLE” layer.
You’ll end up with two (2) “KINDLE” texts. Simply change “KINDLE” TO “EBOOKS” on the newly created layer.
Adding the animation: I used the How to Make An Animated Head Banner Gif photoshop tutorial to help remember how to add animation. It reminds us to click Windows > Animation.
When the animation window appears click the small icon on the bottom right that’s title “Convert to timeline animation”.
From here it’s just a matter of adjusting the timeline. Set the “Kindle” text to 1.00f and the “Ebooks” text to 2.00f on the time ruler as shown below.
Saving the Image: Use the “Save for Web & Devices” option in the “File” menu to save the new image as an animated gif.
You can view the outcome here.
Thank you for visiting Adobe-Masters.com. Don't forget to subscribe for free updates!
