CreativeTechs Tips_ Build Animated GIFs in Photoshop.

CreativeTechs Tips: Build Animated GIFs in Photoshop. 11/17/07 12:24 AM « Preparing for Leopard: Helvetica is Dead. | Main | Learn Adobe's Pen Tool with Advanced Math. » Subscribe To Weekly Tips Subscribe (What's This?) Build Animated GIFs in Photoshop. Want Weekly Tips in Your Email? Enter your email address: Subscribe Small Is the New Big Seth Godin New $17.13 If you've ever wondered how to create animated GIFs in Photoshop, we've created a simple tutorial with some example files you can download and try out. Search Privacy Information We use a lot of animated GIF files in our weekly tips. They are fun to build, and better for our email subscribers because Flash animations are not supported in most email readers. Like This Tip? Make sure you don't miss the new tips coming next week: Weekly Email Tips — or — RSS Feed (What's RSS?) Search this blog: Search Categories Business Creative Tech Xtra A Simple Example For a quick hands-on tutorial on creating animated GIFs in Adobe Photoshop, we'll walk you through creating the following animation: Recent Tips Learn Adobe's Pen Tool http://www.creativetechs.com/iq/build_animated_gifs_in_photoshop.html Page 1 of 8 CreativeTechs Tips: Build Animated GIFs in Photoshop. 11/17/07 12:24 AM Learn Adobe's Pen Tool with Advanced Math. Build Animated GIFs in Photoshop. Preparing for Leopard: Helvetica is Dead. November 90-Minute MiniWorkshops. A List Aparts' 2007 Web Design Survey. Embed a free Flash MP3 player on your blog. Classic Halloween Vinyl Records on MP3s. Apple iWork '08 opens Microsoft Office 2007 files. Build a PowerBook and MacBook repair toolkit. This simple animation combines the two most common animation techniques in Photoshop: Turning layers off and on, and using the Tween command to animate the movement of an object on a layer. Use Safe Boot to Clear Font Caches. Photoshop CS3's clone tool adds "Ignore Adjustment Layers". 1-800-GOOG-411 How to smooth skin in Photoshop. October 90-Minute MiniWorkshops. Firefox Can’t Reach Internet? Acrobat 8's new Automatic Form Recognition Retouching Skin Workshop October 3, 2007 Find what Macs are sharing over your network. InDesign CS3's great Multiplace-and-Replace. CreativeTechs is Hiring! Control multiple Macs using one keyboard with Teleport. Photoshop lets you extract images from PDFs. Watch for Seattle's Ponytailed Software Geek! Sync all your web browsers using Bookit. Duplicate objects in InDesign's Control panel. September 90-Minute MiniWorkshops. Original Design Gangsta Rap Video. "Indent to Here" in InDesign or Quark. Clean Out Old Email Attachments. Reset a lost Mac OS X password. Create a "Yellow Highlighter" style in InDesign. August 90-Minute MiniWorkshops. How to change Photoshop's canvas color. Page 2 of 8 Step 1: Set up your layers. The first step in creating any animation in Photoshop is to build a layered Photoshop file with all the elements you plan to animate. Our example document has 7 layers containing the text for our countdown, and layers for the rocket and flame. You can download our example Photoshop file here: ExampleAnimation.psd Step 2: Create Animation Frames with Layer Visibility. http://www.creativetechs.com/iq/build_animated_gifs_in_photoshop.html CreativeTechs Tips: Build Animated GIFs in Photoshop. 11/17/07 12:24 AM canvas color. Email Your Current Document. What's New in Adobe CS3 the Booklets. Photoshop CS3's Automatic People Remover. Photoshop People Remover - The Video. Find Mac OS X's hidden UPS options. How does your website rank on Alexa.com? Update PDF Forms with Acrobat's Replace Pages. Microsoft Office for Mac won't save to your server? Remove unwanted people from public photos. Photoshop Brush Tool Cheatsheet. Basic Workstation Settings Cheatsheet. Hide all palettes fast. Except your toolbox! Fun 4th of July Fireworks Screensaver. Goodbye FreeHand. But is Illustrator Enough? Is your Mac OS X Server crashing? A possible fix. Chose Windows > Animation to show Photoshop's animation palette. On the first frame, turn off visibility for all layers you do not want visible at the start of your animation. Then add one frame at a time, and turn on the layers you want visible for each step in the animation. Changing layer visibility one frame at a time is a classic Photoshop animation technique that covers a wide variety of needs. In our example, continue this pattern to reveal the countdown and the flame at the bottom of our rocket. Use an Apple TV as Your Portfolio Theater. InDesign CS3's new Gradient Feather Tool. Edit overset text in InDesign's story editor. Photoshop Lasso Tool Cheatsheet. Important Router Settings Cheatsheet. Adobe CS3 Training Classes in Seattle. What is RSS? A description in plain English. Can I Upgrade to Adobe CS3 Yet? Controlling the Align Step 3: Create Animation Frames using Tween. http://www.creativetechs.com/iq/build_animated_gifs_in_photoshop.html Page 3 of 8 CreativeTechs Tips: Build Animated GIFs in Photoshop. 11/17/07 12:24 AM Controlling the Align feature in Illustrator. iStumbler finds all local wireless networks. Fold your own paper pinhole camera. Make The Logo Bigger. The Song. Don't install Version Cue (unless you use it). Make a PDF portfolio with interactive rollovers. Want both CS2 and CS3? Install CS2 first. Adobe Pen Tool Cheatsheet. Online backup that works: Mozy.com. Chase Jarvis FRAMES: 5days shooting in 4 minutes. Roll through your fonts in InDesign. Keep track of software updates with AppFresh. Highlight New Features in Photoshop CS3. Illustrator CS3 now opens FreeHand files! When to Upgrade to Adobe CS3? Wednesday's Fun: Seattle Broken Water Main. Now that the countdown is complete, we need to create the illusion that our rocket ship is taking off. Add one more frame, and this time select the group called "Rocket" in layers and move your rocket off the top of your image window. Then choose "Tween..." from the Animation palette's pop-out menu. Keep your Internet up using two providers. Quickly change ruler units in Adobe CS apps. Pair your Apple Remote to a specific Mac. Migrating from Expert fonts to OpenType. Remove Photoshop CS3 Beta before installing CS3. Quick Skin Tone Retouching in Photoshop. Avoid serial number headaches with CS3! Hidden Easter Eggs in Photoshop CS2 Hidden Easter Eggs in InDesign CS2 Hidden Easter Eggs in Illustrator CS2 Getting Ready for CS3, Leopard & New Macs. Free CS3 & Leopard Planning in Seattle. Build a Location Photography Laptop Case. Set how many frames to add, and Photoshop spreads the movement of your layer across those extra frames. InDesign Quick Kerning, Tracking & Leading. Don't touch your Mac during Software Updates. Photoshop Techniques circa 1995! Manage multiple libraries in Step 4: Adjust your Timing. http://www.creativetechs.com/iq/build_animated_gifs_in_photoshop.html Page 4 of 8 CreativeTechs Tips: Build Animated GIFs in Photoshop. 11/17/07 12:24 AM Manage multiple libraries in iTunes 7. DST changes and Microsoft Entourage. Free software training in Seattle. Stop Entourage background disk churning. Get to know InDesign's Info Palette. Digg This Button Cheat Sheet Adobe Creative Suite 3 to be announced March 27. Finally, go back through and adjust the delay for each frame of your animation. That time is shown in seconds below each frame. Tip: You can hold down the Shift-key to select a range of frames (such as the 9 frames we added for the rocket's takeoff) and change them together. Convert scans to searchable PDFs in Acrobat. Tom Fishburne's Brand Camp Cartoons. Use Photoshop's Background Eraser Tool. Update your Mac for Daylight Savings Time. Shortcut Cheat Sheet for Safari & FireFox. Fast way to straighten a photo in Photoshop. Convert MS Word 2007 .DOCX files for a Mac. Test your web design in different browsers. CreativeTechs welcomes Jason Hoppe. Use a scroll wheel to zoom in Adobe Photoshop. Fixes for Stuffit Expander and missing files. Create time-lapse videos with iMovie HD. Send all those W-9's using PDF Forms. Create your own Star Wars opening sequence. Add proofing messages with PDF watermarks. Set default applications in Mac OS X. Fonts & Mac OS X 2007 Update. Scale Layer Effects in Photoshop. Fold your own iPhone today. Helvetica: The Film. Make Suitcase play nice with InDesign fonts. WhatTheFont?! The font matching website. CreativeTechs' 2007 Backup Recommendations. Free Personalized Backup Strategy Session. Step 5: Export the Animated GIF. Finally, to export your animated GIF choose: In Photoshop CS3: File > Save For Web & Devices... In Earlier Photoshops: File > Save For Web... Make sure the image type is set to GIF, feel free to experiment with some of the other options, and save your file. To test your resulting animated GIF, drag the file onto you web browser. http://www.creativetechs.com/iq/build_animated_gifs_in_photoshop.html Business Card Holiday Ornaments. Storage and Backup Solutions For Your Photography Page 5 of 8 CreativeTechs Tips: Build Animated GIFs in Photoshop. 11/17/07 12:24 AM As a final reference, you can download our finished Photoshop file here: ExampleAnimation-Final.psd Source: The animated spokesperson at the top of this tip is a homage to Tacoma illustrator Mark Monlux's daily comic strip The Return of Stickman. Mark is a talented and funny guy, who generously allowed us to butcher his creation for this tip. Check out Mark's site, and sign up for his daily email Stickman comic. Nov 14, 9:30-11am — Photoshop: Preparing Images for the Web. This topic comes directly from client requests. What are the best ways to prepare images for the web in Adobe Photoshop? What formats work best? Can you create animated graphics directly in Photoshop? Come spend a fast-paced morning at CreativeTechs — your web developer will thank you for it. Email this • Add to del.icio.us • Stumble It! • Technorati Links • Digg This! • Subscribe to this feed Posted by Craig Swanson on November 11, 2007 08:25 PM Convert your old vinyl records to CD's or MP3's. Photoshop CS3 Beta 46% faster than CS2! Photoshop CS3 Beta Released! Garbled Fonts Troubleshooting Guide. Garbled Font Fix: Corrupt Font Cache Garbled Font Fix: Helvetica Fractions Garbled Font Fix: Times Phonetic Best data recovery utility for Mac? Data Rescue! Read Seth Godin's Free Bootstrapper's Bible. Explore alternate glyphs in OpenType fonts. Install AppleJack before you need it. CreativeTechs Tips on Toast? Chase Jarvis Speaks at the New York Apple Store SoHo Concerns when buying Mac Pro RAM. Create a rainy window in Photoshop. Free server planning sessions in Seattle. Great CSS Cheatsheet. Layout Gala: 40 simple 3column CSS layouts. Macs creating files with "._" prefix on servers? Great Web Developer extension for Firefox. The Zen of CSS Web Design. Is your personal name URL still available? Get it! Disable Microsoft Messenger's Security Warning. Transparent Gradients in Illustrator CS/CS2. Download "Night of the Living Dead" for free. Halloween Papercraft Toys Two Type Specimen Book Utilities. Six free Internet speed test sites. Compare document revisions in Acrobat Pro. AIGA's standard client contract. How to Answer: "I'd Like the Computer Files." Change Microsoft Office's serial number, Easy! PopChar X 3.0 helps find special characters. Hanging punctuation in various applications. http://www.creativetechs.com/iq/build_animated_gifs_in_photoshop.html Page 6 of 8 CreativeTechs Tips: Build Animated GIFs in Photoshop. 11/17/07 12:24 AM various applications. Network crashes in CS2? Try Adobe Dialog. Score your online buzz using SocialMeter.com Blog Your Portfolio Notes (September 18, 2006). Sort InDesign menus alphabetically. Subscribe to RSS news feeds in Safari. Organize RSS feeds using Safari bookmark folders. Visual Thesaurus. Growing Your Business with Google. Growing Your Business with Google - The Video. How to save Photoshop files larger than 2GB. Who visits your website? Use Google Analytics. Designing on an angle in Adobe Illustrator. LetterFu folding template. No envelope needed. Get to know Photoshop's Status Bar. Read Seth Godin's Free eBook about Blogs. Post Troubleshooting Checklist The online Concert Ticket Generator Make word-search puzzles w Excel & InDesign. 3 Theft-Recovery Software Products. StuffBak Device Recovery Stickers. Designers-Who-Blog.com Quickly "scrub" values in Photoshop dialogs. iFixit Guides to DIY Laptop Repair. Apple's Do-It-Yourself Repair Options. How much is your old G4 worth? Discover Nested Styles in Adobe InDesign Photoshop CS2 Shortcuts Cheatsheet. Wonderful documentary about Firefly Press. Mac Consultant Wanted: Know a tech-savy designer? Mac Maintenance Checklist. Time Management for System Administrators. Quickly saturate/desaturate colors in InDesign. Paparazzi! - Grab easy screenshots of a web page. An Exchange Server alternative for Mac studios. http://www.creativetechs.com/iq/build_animated_gifs_in_photoshop.html Page 7 of 8 CreativeTechs Tips: Build Animated GIFs in Photoshop. 11/17/07 12:24 AM alternative for Mac studios. Free! Icons for your Website, Blog, Etc. Best Fireworks Screensaver Ever! Add application aliases to your Finder windows. Create Letterhead Templates in MS Word. View Website Structure as a Graphic. My Mac Memory Book. Mac OS X Shortcuts! A Tiny Guide. My Mac Won't Start! A Tiny Guide. Discover PocketMod. The low-tech PDA. FreeHand to Illustrator Migration Guide. Convert Printed Documents to PDF w/ ScanSnap. Recently Commented Posts Use Photoshop's Background Eraser Tool. (1) The online Concert Ticket Generator (1) Fast way to straighten a photo in Photoshop. (1) Convert Printed Documents to PDF w/ ScanSnap. (1) Convert MS Word 2007 .DOCX files for a Mac. (2) Subscribe to this blog's feed [What is this?] Powered by Movable Type 3.2 http://www.creativetechs.com/iq/build_animated_gifs_in_photoshop.html Page 8 of 8