PS/AE Tutorial: Creating Animated Stream/Twitch Alerts

Follow me on Twitter –
Check out my Everything Pack –
► FREE Starter Pack (AEJuice ) –
Aejucie Website –

Video Description: In this video I take you guys along photoshop firstly to help create a clean twitch alert that with help your production on stream. To later bring you into After effect, where we go threw simple key framing in order to get an end result that looks super awesome. We finish the video inside streamlabs, where I help you guys setup and code twitch alerts with CSS.

Table of Contents:
3:00 – Sizing your Alert
5:00 – Creating Alert Box
10:01 – Adding alertbox to Aftereffects
13:00 – Start key framing
23:30 – Adding asset elements
29:00 – Rendering Alert Box
31:30 – Finalize .gif in PS
34:17 – .Gif save settings
36:14 – Applying the alert to Streamlabs
40:30 – Moving text with CSS, were to drop URL for hosted sites with .mov and .avi web players

Order Designs – ( Contact Form/Website )

Liquid Elements: ———————————————————————–

SAVE 36% with the Bundle!

Liquid Elements pack is included in the Motion Design Bundle:

You get this and other great products with a 36% discount

Support Center:

Become AEJuice Affiliate Partner:


Join my Discord –
Instagram –
Behance –

Secret Download –

Song – n/a (Beginning song is: Sorrow – Kalypso)
The soundtrack is used for entertainment purposes only. No copyright infringement intended. All credits for the song(s) go to artist(s)/label(s).



  • NOSTALJOHN 3 years ago

    Thanks for the html phrase to move the font more left but what if i want to put it lower or upper?

  • Jack Le Lievre 3 years ago

    When rendering in photoshop for web it says an unknown error has occured, any help?

  • AdamZayo 3 years ago

    great tutorial

  • Constantine1337 3 years ago

    whenever I try to do the animation out part of the key frames, it doesnt stay still inbetween them. Ive tried your way and the time-reverse, both screws up the animation and makes it nudge back and fourth abit.. So frustrating!

  • Maysin Black 3 years ago

    Great video my brotha.

  • QueenAndVB 3 years ago

    Nice work man! 🙂

  • KingsmanXV 3 years ago

    Hey man! Great video! When I am saving it on PS. It makes the edges very grainy once fully saved. Any clues on how to fix?

  • John Jimenez 3 years ago

    Can someone help me out? After I uploaded my alert to streamlabs it comes out funky looking…with a weird white border

  • Gregory Lubin 3 years ago

    God send my guy thank you brother

  • vijinx0uchiha 3 years ago

    Does anyone knows if this works too on Muxi? The sample image file there is a svg file, so I'm not sure if I can use gifs.

  • sirgonads 3 years ago


  • ItzK1LL5W17CH 3 years ago

    hey @seso was wondering if you would be willing to work with me to help me learn some of this stuff id be willing to pay

  • uLoseGooDaySirr 3 years ago

    Excellent video my dude. Thanks for the help!!!!!

  • Zayd Tawam 3 years ago

    I'm having a problem with exporting and saving to web every time I click save it says that an unknown error has occurred what should I do

  • Joshua Day 3 years ago

    just a little feedback, iknow it was a long video to do, but work on not talking or performing actions so fast. I'm a total noob at this shit and i had to put your video on .5x speed just to see how to get rid of the stupid pen path in photoshop haha. good shit though dude, you helped me alot

  • oNaczy_ 3 years ago

    32:11 I don't see the video layers button. Please help me out

  • Shrewd FX 3 years ago

    Hey, can you make a tutorial on making that text appearing animate? Like a typewriter effect.

  • xoerli 3 years ago

    when I create a gif file and watch the file afterwards the electricity and experimental design is showing a weird white explosion… does anyone know how to fix it? I did the same settings you did 🙁

  • Dennis Vlaanderen 3 years ago

    This wouldve been better with a little mask hiding the bar on the left side of the logo.
    But it's a good tutorial nonetheless!

  • AnduHken 3 years ago

    How to make a intro like your intro?

  • Will .Q 3 years ago

    its a cool tutorial man!
    btw may i ask why u have 3d renderer in your AE , did u install a plugin or it comew with AE ? Cus my Cs5 does not have it.

  • ItsFieryyy 3 years ago

    naruto? u read my mind

  • Royal 3 years ago

    dude your helping me so much from this video thank you so much

  • Gawzii 3 years ago

    Please be sure to talk a LITTLEEEEE slower cuz sometimes its hard to follow. Thanks for the help nonetheless and keep up the grind <3

  • logan walsh 3 years ago

    So essentially if you have a brand package in AE you can export everything blank and run your brand Identity in SLOBS via a CDN that you can upload to. Simple and clean

  • logan walsh 3 years ago

    To host MOV files you'd need to setup an AWS S3 bucket or run off firebase hosting. Both are fast and cheap and reliable

  • Roksana Gantova 3 years ago

    should to add code HTML/CSS for fade text more fast than image …. ur image have animation when starting, but when is hide ( ended ) is not have same animation… text should to add >>> [start] * here text with timer with fade out more fast than image * [end] <<<

  • AxipaxiFN 3 years ago

    no offence or anythng its a great tutorial just at the start slow down talking a touch i couldnt really hear but yeah great vid!

  • Jeff Crisp 3 years ago

    awesome video man, i think ill be using that AEjuice plugin :thumbsup:

  • LootinLarry 3 years ago

    Awesome video bro! Super clear walk through

  • MikeOnTheBox 3 years ago

    You can change the alert durations to whatever you want. I believe in your video you had it at 8 seconds

  • MikeOnTheBox 3 years ago

    RIP TwitchAlerts

  • Moltenink 3 years ago

    Export as a .WebM not a png sequence. Small and simple.

  • HejaSwezo 3 years ago

    For all of you who get "an unknown error has ecorred in photoshop whilst trying to save" when ur trying to save. put "looping options" from "once" to "forever"

  • zBlueHitzZ 3 years ago

    IT Says an unknown error has ecorred in photoshop whilst trying to save

  • Bittereye 3 years ago

    Use "WebM Bro" to convert to .webm

  • JudgeVFX 3 years ago

    10:22 That window doesnt show up for me (With the import options), and It always imports just the psd, with 1 layer. Anybody know how to fix?

  • ChaizenTV 3 years ago

    I’m having issues rendering the alert out with a transparent background. They always have a black or white background and I’ve tried multiple different settings but it never comes out transparent

  • Gabe Besa 3 years ago

    How do i make the GIF not fade away and actually do the transition i made?

  • Power Imajinasi 3 years ago

    can you upload channel youtube PS / AE Tutorials: create animated logos / characters twitch simple alerts?

    Your youtube channel is very entertaining and helps in learning design …!!!!

  • MIRO 3 years ago

    You are a legend

  • Jonaa 3 years ago

    Ty my dude!!

  • Optimus Prime 3 years ago

    how would you recommend doing an alert without a box without a background? in terms of size, timing, etc

  • FALC0N 3 years ago

    When I save for web I get an error…

  • Or Dor 3 years ago

    How you create your Logo??

  • SirAmras 3 years ago

    39:58 you can expand the allert suration under sound volume =)

  • Remixxer 3 years ago

    TNX alot i litteraly watched entire video and i learn it tnx alot !

  • Skiizo Gotti 3 years ago

    When adding an overlay, can it be an AVI file for obs or should it be an gif?

Comments are closed.