12
Ask DN: Which tool do you use to animate interactions of your Ui/UX templates?
almost 10 years ago from Ludovic Riffault
Not prototyping, making .gif :)
26 comments
Pasquale D'Silva, almost 10 years ago
After Effects, & Quartz
Matt Sisto, almost 10 years ago
Usually Keynote
c kizer, almost 10 years ago
I love and hate you right now. I always use keynote for slick presentation animations. It never crossed my mind to use it to animate a few PSD layers. Smacks forehead
This is a great thread. I'd love to hear more about it. Especially anyone who has tutorials on Photoshop animation. Obviously there are tons of Photoshop animation tutorials, but too often they assume I'm a 12 year old kid, and not a Photoshop Expert.
Hans van de Bruggen, almost 10 years ago
PS is the tool of choice among some of the Apple teams.
Stephan Junghanns, almost 10 years ago
I guess everybody wants to use Quartz Composer lately ;)
I use Axure for the very basic animations, such as slide-right, slide-up,... When it comes to more detailed animations (When swiped up, fade in shadow and parallax scroll the background image) I currently use After Effects, but I am also looking for a better (and easier) solution.
Michael Buck, almost 10 years ago
I tend to use Licecap, it allows to record on screen content straight to gif, that gif can easily be edited or touched up with Photoshop.
http://www.cockos.com/licecap/ + Photoshop / After Effects / Edge Animate / CSS&JS Browser content.
You could theoretically even record a photoshop window and just move layers around.
Ludovic Riffault, almost 10 years ago
I see that no one is using Adobe Flash anymore :p
Cole Townsend, almost 10 years ago
I use radii and hype. It's basically just image / svg manipulation via JS, which might not be ideal but it's easily embeddable.
What's radii?
Radii was an animation software kind of like Hype. I've now put most of my efforts into learning Framer and/or QZ.
Nick W, almost 10 years ago
I've been seeing a lot of gifs for presenting concepts online lately. I'm guessing one of the approaches mentioned in this thread are suitable for this?
Miguel Oliva Márquez, almost 10 years ago
I would go for AfterEffects.
QuartzComposer is really complicated and doing basic things as a drop shadow takes ages, Adobe Edge is nice but it won't let you work on big compositions for retina devices (due to the fact that you can't zoom out more than 50%). It is not easy to make modifications in AfterEffects but it gives you a lot of freedom and nice acceleration features.
Titouan Mathis, almost 10 years ago
I use Adobe Edge Animate, the code isn't beautiful at all, but you can animate things with events and test them in the browser.
I see, but you can't export your animation as a .gif to post over Dribbble for example.
You can post a still frame and link to a demo page, people might like it more than a simple gif because of the ability to really test how your element behave.
Another solution (if you have knowledges in development) is to code the animation with CSS or JS and record it with Screenflow to make a .gif
I do this most often, however it's tedious to do it by hand for something that might get thrown away. I tried to use Hype.app, but it doesn't export to true css3 animations. Which is great for mockups though!
Florian Pnn, almost 10 years ago
I use Adobe Edge Animate, record with Screenflow and made gif with the .mov :)
Oh, I even didn't know the existence of Adobe Edge Animate, I'll try this out! Thanks (no export in .gif right?)
Max Schultz, almost 10 years ago
Quicktime Player screencap - open in photoshop - edit and export as gif. Going to give this a try next time I get a chance: http://www.divergentmedia.com/phosphor
Simon Brown, almost 10 years ago
I wonder how heavy it is
I bought Phosphor, it's actually pretty slick…
Jesse Head, almost 10 years ago
Yeh, I guess After Effect's is a little huge... but for the sake of super smooth animations and ease of use (once you get going with it), there's no other app I'd use.
Dean Hudson, almost 10 years ago (edited almost 10 years ago )
Photoshop does a decent job of animation using the Video Timeline palette. Exports as .mp4 files
There's a tutorial on Adobe's site: http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-746fa.html
Andrea Cantú , almost 10 years ago
For making .gif photoshop is easy.
I agree with that but to do something "smoother" and more dynamic, it's not a good tool and After Effect is a bit huge for that too :/
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now