PS/AE Tutorial: Creating Animated Stream/Twitch Alerts



Follow me on Twitter – https://twitter.com/SesOHQ
Check out my Everything Pack – http://goo.gl/TbOnjO
► FREE Starter Pack (AEJuice ) – http://bit.ly/2RRBHbu
Aejucie Website – http://bit.ly/2DE3vqZ

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 – http://bit.ly/2mXlCiF ( Contact Form/Website )

https://www.sesohq.com

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 – https://discord.gg/ZbyEQHD
Instagram – https://www.instagram.com/sesohq
Behance – https://www.behance.net/SesOHQ

Secret Download – http://bit.ly/2Wq6j2t

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).

source

48 comments

  • NOSTALJOHN 5 months 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 5 months ago

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

  • AdamZayo 5 months ago

    great tutorial

  • Constantine1337 5 months 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 5 months ago

    Great video my brotha.

  • QueenAndVB 5 months ago

    Nice work man! 🙂

  • KingsmanXV 5 months 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 5 months 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 5 months ago

    God send my guy thank you brother

  • vijinx0uchiha 5 months 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 5 months ago

    gibberish

  • ItzK1LL5W17CH 5 months 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 5 months ago

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

  • Zayd Tawam 5 months 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 5 months 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_ 5 months ago

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

  • Shrewd FX 5 months ago

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

  • xoerli 5 months 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 5 months 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 5 months ago

    How to make a intro like your intro?

  • Will .Q 5 months 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 5 months ago

    naruto? u read my mind

  • Royal 5 months ago

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

  • Gawzii 5 months 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 5 months 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 5 months 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 5 months 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 5 months 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 5 months ago

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

  • LootinLarry 5 months ago

    Awesome video bro! Super clear walk through

  • MikeOnTheBox 5 months ago

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

  • MikeOnTheBox 5 months ago

    RIP TwitchAlerts

  • Moltenink 5 months ago

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

  • HejaSwezo 5 months 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 5 months ago

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

  • Bittereye 5 months ago

    Use "WebM Bro" to convert to .webm

  • JudgeVFX 5 months 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 5 months 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 5 months ago

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

  • Power Imajinasi 5 months 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 5 months ago

    You are a legend

  • Jonaa 5 months ago

    Ty my dude!!

  • Optimus Prime 5 months ago

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

  • FALC0N 5 months ago

    When I save for web I get an error…

  • Or Dor 5 months ago

    How you create your Logo??

  • SirAmras 5 months ago

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

  • Remixxer 5 months ago

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

  • Skiizo Gotti 5 months ago

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

Comments are closed.