Ask DN: Which tool do you use to animate interactions of your Ui/UX templates?
over 10 years ago from Ludovic Riffault
Not prototyping, making .gif :)
over 10 years ago from Ludovic Riffault
Not prototyping, making .gif :)
After Effects, & Quartz
Usually Keynote
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.
PS is the tool of choice among some of the Apple teams.
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.
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.
I see that no one is using Adobe Flash anymore :p
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.
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?
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.
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!
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?)
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
I wonder how heavy it is
I bought Phosphor, it's actually pretty slick…
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.
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
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 :/
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
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