How are you making these?
5 months ago
@Brent Caswell I believe the way he is animating this splendid design is using Photoshop CS6 animate feature I am not absolutely sure as i am not the one to design this but that is one way to animate.
And Jordi amazing design love the look of it!! Everything flows naturally.
@Andrew Galipeault @Brent Caswell In his last shot he said he uses After Effects to animate these.
After Effects (it's even on the tags ;P).
Added a full size preview,
This is fantastic!
@Jordi Verdu Oh whoops, I missed it. Thanks! They're really cool!
@Jordi Verdu Godamnit I love these animations so much. Please post a video tutorial. Please. For the love of god.
Looks awesome and playful. I agree with @Alex S. Lakas A tutorial is a must!
I have to learn some basics of motion design, cause this is way too cool.
@Jordi Verdu great work! I'm wondering about the benefits of using animated gif instead of CSS/jquery. I know the CSS animations will only work in "modern" browsers, but gif images can get huge in comparison. 600kb is pretty big just to wait for things to move. @Paul Morel I also want to learn more about motion design *today* since FLASH MX was the last time I seriously played with it. :) And I stopped doing animated gifs in Fireworks soon-after.
@Alan Houser I really can't answer that question since I don't have any experience animating with CSS/Jquery. As a really curious and self-taught person, I always need a playground where I can mess around, tweak things and learn from my own mistakes. I always found css extremely frustrating for my own learning methodology, so I guess After Effects made more sense to me since I can always experiment and analyze the results. Even if I had to pick between Quartz Composer and CSS, I think I'll choose the former. (actually I really enjoy QC, looks like an old Ms-20)
Anyway, I still find frustrating that all this work is mostly for showcasing purposes, since it can't easily be turned into code. Marcus Eckert did an amazing job with Wide Sky, creating a custom framework to put all his AE animations into the menus and UI, so the possibility to easily turn .aep to tapable animations is somewhere there. If I could invest some time and money in a single project, that would be it. As far as I know, there's still this huge gap between what you can create in Motion Graphics with After Effects and what can actually be implemented. I can't believe anyone at Adobe hasn't figure out this yet.
@Alex S. Lakas Regarding the tutorial, check Mattrunks tutorial for animating vector shapes. I pretty much used the same technique, although changin the displacement for rotation. Ease and Wizz also comes handy, but a lot of this is just manual graph editing.
@Jordi Verdu Agreed, and thanks for the reply! It's a conversation that the design world needs again I think. Animated gifs have made a comeback for sure, even if mostly novelty. I've also worked a little in AE, but mostly in the Video world— where I needed to animate an opener/illustration/title, etc.
I'm pretty sure that Adobe Edge wants to be what we're talking about - the HTML5 solution for what they typically pushed us to do in Flash. But they really really still want us to convert original video content to a web-ready FLV file, or I guess I should say, that's the easiest 'Adobe' way. But there's no way I'm ever going that direction ever again.
It comes-down to the fact that there's some really amazing things that are being done in CSS/jQuery, but if the world can't see them on their turd-like browser, then we're no better off. So for me, I focus on making static things work 100%, then add some animation/effects for the cool people just because.
But if the animation is key to the interaction (app demos are a great example), then I'm with you— animated gifs will work fo-sho.
Interesting color theme and smooth animation! You have my support on this!
@Alan Houser I tried a couple of times Adobe Edge but the results weren't fulfilling.
I really think animation go hand on hand with mobile UI. Just compare this animation to my previous one and you can see that just with the way things bend, fade or move it communicates something completely different. I spent quite a while figuring out the best way to communicate Playfulness with the way the labels are revealed... I made it bounce and it was too much, I made it fade in and it was too serious... and I bear in mind that they are dynamic elements and I don't want my programmer to go nuts trying to figure out how to achieve it, but if we could have total freedom to create a .aep not caring about the limitations that conversion impose, apps would be a much more immersive experience.
Just see Mr. Div work and imagine that on your hands, morphing as you touch...
Love this conversation. I totally agree.
Also shocking: the amount of time it takes to emulate the interaction to be pixel-perfect, and the dev/process that will be used to make things dance is completely different. And to make things worse, getting the dev to understand the importance of the tiny little gesture/animation/pause/color-shift/ripple/bounce aaaahhhhhhhh! :)
playful! great work
Que bien trabajas Jordi.
Te sigo, a ver si puedo aprender algo de esta rama.
@Alan Houser it really depends on the context. CSS animation/transition is great for smaller file size, not increasing HTTP request (image download) and such, but as you pointed out compatibility is a huge issue. Also, for some mobile devices, it tends to crash because it requires too much processing, which is devastating for web apps, in which case animated GIFs are relatively "safer". Also with faster internet speed, it is a bit more forgiving to have slightly larger GIF files to achieve the effect you want (I can hear the uproar already haha). It really is about figuring out who your audience is, which device they use mostly and on which platform your product will live.
@Jordi Verdu completely agree. Animations are becoming ever more important in mobile UI with the increasing attention to UX, faster connectivity and also ios7's heavy focus on them. As UI/UX designers I think it's very important to code or at least know how to come up with prototypes because interaction is all about the feedbacks and that doesn't really show through with static images. Also with animations and transitions, if you know how to code, you can do the final tweak on top of engineers' code before you ship it. I really think design schools should encourage students to learn how to code more.
4 days ago
*I really think design schools should encourage students to learn how to code more. DEFINITELY.
And companies should encourage designers on dev teams to code more too.
1 day ago
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter