How to Create a Glitchy Interface Animation
This tutorial will teach you how to recreate a stylized Glitch Interface Animation that resembles a high tech control system, with an analog monitor startup. Anthony Errisuriz provides his step by step process for creating this amazing effect with design from Illustrator and animating in After Effects.
Preview
RSS readers: click post title to view preview video at Aetuts+.
Download Preview .flv
File size .8MB
Download iPhone Preview
File size .6MB
Tutorial
Download Tutorial .flv
File size 316MB
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Anthony Errisuriz
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
WORKS by Macgregor - More
After Effects Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Aetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Sweet!
Nice
COOL!
Excellent !!!
nice:)
Wow – luks great – cnt wait to watch the tut for this…
I like it. Kinda retro but it works. As for the tutorial 316 MBs!! Little bit much. I’ll take and 8bit version please.
Wow.. the preview looks awesome.. cant wait to watch the tutorial
Really Cool stuff, now I can get some idea about my HUD design, thanks !
Already have something to do that….easily. It’s called Twitch.
Billy, bro, I love ya, but you kill me sometimes… Please watch the tutorial before you comment. It’s not a tutorial on creating a glitch, it’s about creating the interface, that conveniently happens to be glitchy… It’s a simple process, but I think the end product is impressive.
right..Billy, we have been agreeing in many tuts regarding the views but i think in this i disagree. i think the point of this tut is to show the workfflow with illustrator and AE. and twitch, well it would be to achieve more dramatic effect. no hard feelings mate.
Muito bom! parabéns obrigado por compatilhar!
Love it….. reminds me of old school arcade games and tron of course…..
Gotta love the old arcades. Glad you enjoy!
This looks amazing!
I was hoping I could create a main menu for my film, And this is hat I was looking for!
Thanks a lot man.
Glad I could help out. This is an easy way to obtain this look for a scene composite later. I actually developed this tutorial from a project I used on a film once.
Cheers!
tuts nice. but file video tutorials more than big. hi hi hi
I did watch it Adam. But….you know me, Adam….if I want an illustrator shape tutorial….I’ll go find an illustrator shape creation tool. Probably on a tuts site dedicated to such things…..like vector.vectortuts.com. I’m sure you are familiar with it.
Overall this is a very basic tutorial. Basic keyframing, basic masking, some basic shortcut keys….that the first 30 minutes. Then the rest can be done with Twitch. Interestingly enough, he even uses a VCP project! I had to laugh!
Basic tutorials are not bad….but its pretty much been all we’ve seen almost all of them have been since early August….with the noteable exceptions being the Particlar 2 tutorial and the two tutorials on the Mac OSX wallpaper (I loved Saquib’s Invigorator tutorial by the way! I’d love to see more tuts with Zaxwerk’s plugins featured).
Not slamming the tutorial (if you haven’t noticed I have been pretty quite about the tutorials lately), just pointing out the obvious, I guess.
Im at the stage now where you annoy the ****ing **it out of me.
Why are you on this site? And if your so good, and arogant to constantly slate people, lets see you contribute, or show us some of your “amazing” work!
I’m expecting a sarcastic and lame reply, but at the end of the day – you contribute nothing to this site. ( except insanely arrogant comments, whatever you justify them as!)
Unfortunately this site is not here to cater specifically for you, which you seem to have forgotten. It’s actually here to cater for users of all levels of learning and experience, and if you don’t like something – keep it to yourself. I know exactly what your response to this will be, as I have read them many times before, but seriously mate your seriously boring me, and insulting people on here.
this was a pent up rant, I realise you have been quiet, and this is by far not your worst comments, but I just think your slightly to cocky and I had to voice my opinion.
Keep the tuts coming AEtuts.
Good stuff, always something to learn, even in the most basic tutorials. Always love to see work flow tips between software, no matter how long I’ve been doing it for.
Ben, I don’t know how to express the level of my remorse knowingyou don’t like what I have do say. I simply don’t know what I’ll do now….except to say that if you don’t like what I post….don’t read it. Pretty simple. I couldn’t even attempt to care any less whether I am boring you….or angering you…or anything else.
I didn’t “insult” anyone. You should look up the meaning of the word. I stated the obvious. Another beginners tutorial. We’ve had quite a few recently…and many, many more than we’ve ever seen. Go back and look at the early tutorial and the difference is quite obvious. I’ve complimented just as many tutorials since aetuts opened (as I did just above in my last post) as I have criticized…and I’ve never insulted anyone.
So, you have the right to comment on anything you desire to comment on….just as I have the right to say what I would like…and to ignore you. Sorry “mate.”
I totally agree with you Ben.
Billy, take a pill and be nice. If you do not like peaches, do not shake the tree. All I mean is that you are not the only one who checks the website and your comments do not add absolutely anything to it. Add a tutorial and YOU make the difference.
Have a nice day.
Les
ps.
would LOVE (underline, highlight and sparkle that), to see your work.
I think your attitutude is limiting you. All creative styles, applications and techniques are interchangable. I have found that a lot that I learned from music sequencing applies to after effects. A lot of hobby modeling that I have done applies to Cinema 4D. I do not claim to know you, but you should try to think a little more dynamically. It can ONLY do you good.
“Basic tutorials are not bad….but its pretty much been all we’ve seen almost all of them have been since early August”…
Then build your own http://www.ultramegaadvancedae.tutsplusandbeyond.com site, get people to write for you and demand them to write ultra-advanced tutorials for people who has IQ over 170 and 15+ years of experience in the industry and stop visiting this site.
I check often all of the tuts.plus sites and i have across basic photoshop, illustrator and cg tutorials. You know what i do? i realize they are all free tutorials, and move on to the next post to see if it is something i dont know or a skill i would like to improve.
Complain when you pay for “basic” tutorials, not for FREE tutorials.
Nice tutorial by the way.
I’d like to see some advanced stuff as well, stuff like that urban Jungle 2 part tut.
But until then, I’ll watch or read whatever comes on here…..you can always pick up new tips and pointers.
p.s.
I just moved to new house….once I get settled in and that I’m gonna make some 3ds max tuts.
Thanks homie…been a fan of your work since way back and I’m glad to get to learn your tricks. It’s a simple tut with lots of tips and tricks that I wouldn’t have thought of myself. The final output looks great. Want to see more tuts from you. holla.
Thanks Mes….I had fun creating this first tutorial, and I will definitely create more in the near future.
Hey, I love this tutorial, but this website is called AEtuts.com. I understand sometimes you really need to create things in other programs, but I don’t have illustrator. Maybe you should let us download the project file?
moviemaker….to fully appreciate AE’s potential you REALLY need both photoshop and illustrator. I understand both are pricey but if you can swing it….you’ll never regret it.
Most of the more advanced tutorials around here (and obviously some of the more basic) employ a third party plug-in like the trapcode products, photoshop, illustrator, zaxwerks, etc. Try to add to your AE arsenal if you can!
Hum….erm, although I don´t disagree with that I have to say that you can survive and make some very decent things without Illustrator. I have Photoshop and AE and I think they work great together…but I don´t think FLash and Illustrator are as crucial as Trapcodes for example. However, I do agree that they should make the vectors and .ai files for people.
This was a very nice tut, by the way, one of the most “advanced” in the recent months.
Didn’t say anything else was essential….said it would aid you. I would agree that if you can buy particular or illustrator that you should ALWAYS buy particular. Some things are more essential…but illustrator can aid greatly. You need Illustrator if you are going to make Zaxwerks plugins work as well as they can, for example.
Woooooooohao
This is brilliant
Damn… that’s awesome….great work!!!
Anyways guys plz. check my blog and leave ur comments & criticisms……..& help improve
http://aftereffectsunlimited.blogspot.com/
Nice work
Man, now this is an incredible tut!
thanks for this!!
- Derrick
a great tut I must say!
320mb is way too much though. Please consider to resize next time. Some of us live in such an unfortunate country that access to this with download limits.
I live in the US and this file size is unfortunate.
Would you be interested in another version that is a bit more compressed?
Can’t you post the tutorial in another server rather than Vimeo? Vimeo is too slow, look at this -> http://gallery.precisodesite.com.br/storage/cf12e75633/704326f5845d2088d9ab930a34f5f08d.jpeg
I have a 1mb ADSL and It’s downloading at 5kb/s, wich would take 17 HOURS to complete =\
LOL!
Looks pro, good job! Very handy, thanks.
Thanks for all of the positive comments everyone, and I am glad to help out and provide a solid tutorial. I apologize about the file size and will do my best in the future to make them a little shorter.
I could also probably upload a smaller file size that is not 720p or compressed a bit more. AEtuts likes providing everyone with hi res HD renders, but for those with download limits, I can hook you guys up if you’d like.
that’s gotta be hella awesome! Thank you Anthony!
I don’t know what file format Andrew Kramer (VC) uses on his tuts but it’s really affordable and pleasant to watch all of his works. it’s like his 35mins tut size is around 100mb.
Thanks again!
Anthony Love the tutorial its class, I’m new to illustrator thou so was wondering how you exported each layer seperately rather then as a pdf file???
Pleez someone Help!!
Kind regards
Thanks man…. as I worked in Illustrator, I was sure to use LAYERS for each individual object I planned to animate. Illustrator can be a little funny about its layering system, and if you’re not careful it will look like layers, but it’s really objects all in one layer. Be sure they are separate Layers and save as an AI file. Then you should have no problem importing into After Effects.
Thanks Man, Once again Great tut!
good stuff mate
YES!
Very nice! The shortcuts and the expression alone are gold.
is there a project file ?
There will be when we launch our plus program
As an AE tutorial, I concur that a lot of the interface he shows could have been created right in AE with solids and masks. Sure, Illustrator has more design tools for drawing shapes. But it would have been nice to take the tutorial a step further and show how to create everything in one program.
Brilliant! Looks amazing!
Hi!
Very nice tutorial, but where better for me when you can put the illustrator archive to know how i must create the layers and work with the illustrator!
Really briliant tutorial ! Proffesional, teach a lot in few minutes , Great Job! This is what i needed to start with AE
how do you import each individual layer from the ai file?
Here’s how to import below.
As I worked in Illustrator, I was sure to use LAYERS for each individual object I planned to animate. Illustrator can be a little funny about its layering system, and if you’re not careful it will look like layers, but it’s really objects all in one layer. Be sure they are separate Layers and save as an AI file. Then you should have no problem importing into After Effects.
This was just stupid.. I did all the illustrator things and then you just expect me to know how to make it look as good as yours and even import it to after effects.. You need to teach beginners how to do the things in the tutorial.. 0/5
If you would have told me how you made the rest of the design and put it onto AE it would be 5/5
This is going to be really nooby but looking at the Illustrator part how do you make it so the lines overlap? i’ve been playing around but i’m not used to Illustrator at all so just really a basic question
that advert is driving me crazy