Pixel Art Character Animation | Tips, Tricks, and Workflow

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 มิ.ย. 2024
  • Pixel art animation can be difficult, but it’s also so cool to see characters made out of tiny squares brought to life with a little effort. In this video, I’ll take you through my start-to-finish workflow of the creation of a dynamic attack animation for 'Cyborg Superman', and discuss all my tips, tricks, challenges, and nitty-gritty nuances along the way!
    ----
    0:00 Intro
    0:06 Sprite Design
    1:44 Tidying up Pixel Clusters
    3:23 Simple Silhouette for Animation
    6:02 Refining the Body Language
    8:25 Rendering the Poses
    11:39 Particle Effects
    13:18 Recoil and Recovery
    13:55 Bringing it all together
    15:01 FINAL ANIMATION
    15:34 HIGHLIGHT: Fabric Animation
    16:17 CRT Time
    16:49 VID OVER
    ----
    Check out my art here:
    / brandonjamesgreer
    / bjgpixel
    INPRNT Shop: www.inprnt.com/gallery/bjgpixel/
    Redbubble Shop: rdbl.co/bjgpixel
    ----
    Software used: Adobe Photoshop 2022
    Need help picking a pixel art program? Watch this: • What Program to use fo...
    ----
    Title sequence theme music by Failpositive:
    www.failpositive.bandcamp.com/
    / failpositive
    Background music obtained through Royalty Free Planet:
    Floating on the Water by Stevia Sphere
    steviasphere.bandcamp.com
    Promoted by @RoyaltyFreePlanet - royaltyfreeplanet.com
    Creative Commons Attribution 3.0
    bit.ly/RFP_CClicense
    Internet Girl by MONIN
    / juanin-cornejo
    Promoted by Royalty Free Planet: royaltyfreeplanet.com
    Creative Commons Attribution 3.0
    bit.ly/RFP_CClicense
    Digital Sunlight by Raven
    / user-719920148
    Promoted by @RoyaltyFreePlanet - royaltyfreeplanet.com
    Creative Commons Attribution 3.0
    bit.ly/RFP_CClicense
    e s c p - Sunset: • e s c p - Sunset [Chil...
    License: Creative Commons Attribution 4.0 - bit.ly/RFP_CClicense4
    Arcade by Raven
    / user-719920148
    Promoted by @RoyaltyFreePlanet - royaltyfreeplanet.com
    Creative Commons Attribution 3.0
    bit.ly/RFP_CClicense
    Midnight Walk by Timecrawler 82
    timecrawler82.bandcamp.com
    Promoted by @RoyaltyFreePlanet - royaltyfreeplanet.com
    Creative Commons Attribution 3.0
    bit.ly/RFP_CClicense
  • แนวปฏิบัติและการใช้ชีวิต

ความคิดเห็น • 93

  • @BlocPanda
    @BlocPanda ปีที่แล้ว +15

    Sassy Cyborg Superman was not something I needed, but man is it something I enjoy.
    Thanks, Brandon.

  • @theflameviper2154
    @theflameviper2154 ปีที่แล้ว +84

    You're phenomenal when it comes to pixel art, your work is much appreciated! That tracking lighting effect tip is super clever.

  • @E_Fig05
    @E_Fig05 ปีที่แล้ว +45

    Holy cow, dude you made a sprite so small have so much detail and basically all the principles of animation!

    • @aztro.99
      @aztro.99 ปีที่แล้ว +1

      bc he's the goat 🥱

  • @Thy_Vomp507
    @Thy_Vomp507 ปีที่แล้ว +65

    How the HECK do you make everything easy?! There's definitely something wrong XD

    • @TheScreamless
      @TheScreamless ปีที่แล้ว +8

      Well i suppose he has more training and experience than most of us:))

    • @SeydinaMouhamedMoukhtarDiallo
      @SeydinaMouhamedMoukhtarDiallo 11 หลายเดือนก่อน +4

      ​@@TheScreamlessnope. IT'S WITCHCRAFT

    • @chaeyoungmitra3970
      @chaeyoungmitra3970 9 หลายเดือนก่อน

      Experience

    • @artasky6093
      @artasky6093 9 หลายเดือนก่อน

      ​@@TheScreamless*BLACK MAGIC*

    • @midtown3221
      @midtown3221 6 หลายเดือนก่อน

      ​@@chaeyoungmitra3970VOODOO!! 😂

  • @hajicko
    @hajicko ปีที่แล้ว +52

    Well done on this animation and all your other ones. It has been amazing seeing your art style slowly change over time. Been a fan of your work for a while keep up the good work 😊.

    • @BJGpixel
      @BJGpixel  ปีที่แล้ว +10

      Thanks! I feel like character animation (particularly the art direction/style of a movement) is something I'd really like to invest more into; this one was nice for hitting several points of practice for that - thanks for your support! :D

  • @mart284
    @mart284 ปีที่แล้ว +2

    You are so good at what you do! You've made me want to expand my art into pixel-art, i hope you can keep making videos for a long time because i enjoy them a lot!

  • @jarodrodriguez6371
    @jarodrodriguez6371 8 หลายเดือนก่อน +2

    Dude, I was looking for ANY type of video that showed a pixel art workflow that would work for me and this is it. Thank you so much!

  • @UTJK.
    @UTJK. ปีที่แล้ว +4

    It's so fascinating to watch you create...

  • @AltKaxREAL
    @AltKaxREAL ปีที่แล้ว +3

    This is DEFINITELY what i needed! i'm going to really enjoy animating these techniques

  • @CalvinArt
    @CalvinArt ปีที่แล้ว +9

    You are one of my favorite youtubers! Thanks for the tutorial :))

  • @johnniefinney3266
    @johnniefinney3266 ปีที่แล้ว +3

    I was looking at your videos for education and by sheer lick found this video a couple hours after you made it. Kudos for the video

  • @akiraishin7141
    @akiraishin7141 ปีที่แล้ว +2

    Great work as always!

  • @liveingprincess
    @liveingprincess ปีที่แล้ว +8

    Commenting here because its your newest video, but I've watched your tutorials in the past and now am rewatching and learning more as I just got hired for my first freelance pixel art gig! Thank you for the amazing content you continue to put out over the years

    • @kamoroso94
      @kamoroso94 3 หลายเดือนก่อน

      How did it turn out?

  • @Skeffles
    @Skeffles ปีที่แล้ว

    Wow. This animation is amazing! Really impressive to see how the cape works with this too.

  • @weynonpriory
    @weynonpriory ปีที่แล้ว +6

    Really making me want to get back into pixel art. Awesome work

  • @ViniSocramSaint
    @ViniSocramSaint ปีที่แล้ว

    Just vibing to the music and ambience. The production level in just even more candy

  • @shiwakao
    @shiwakao 11 หลายเดือนก่อน

    one of my favorite tips which im sure applies to pixel art animation as well is to do the movement irl if u can. it really helps u get a better idea of both the timing n the silhouette.

  • @deluxeedition4639
    @deluxeedition4639 ปีที่แล้ว +3

    I ADORE this!!!

  • @CKTDanny
    @CKTDanny ปีที่แล้ว +6

    That was a great watch, I really liked that we get to see different iterations of the animation through the various stages!
    I think beginners tend to get discouraged when they find themselves re-doing the same parts until it just "feels right", especially when tutorials don't show that step. I've certainly been there myself and that's why I love the breakdown of every step in this video! This will be an amazing resource for people learning how to animate pixel art 👾

    • @BJGpixel
      @BJGpixel  ปีที่แล้ว +2

      Thanks dude, glad to hear! Yeah the even though the iteration can be a lot of work, it's actually one of my favourite things; I kinda love putting a few frames together and then testing the animation for the first time. The v1 -> v2 thing was a great example of that 'surprise' of seeing something start to come together a bit more 😄

  • @longdongsilver3267
    @longdongsilver3267 ปีที่แล้ว

    Delightful as always, my dude.

  • @TimConceivable
    @TimConceivable ปีที่แล้ว +2

    this is so rad! well done.

  • @nittayoshifumi8252
    @nittayoshifumi8252 ปีที่แล้ว +4

    your file names amuse me.
    the animated crt for robo-supes would look natural in an older game!

  • @P.Manoel
    @P.Manoel ปีที่แล้ว +29

    Amazing as always. It must be the millionth time someone has asked you this, but have you ever made art for an actual game? It would be incredible.

    • @BJGpixel
      @BJGpixel  ปีที่แล้ว +15

      Thank you! Haha nothing major yet, but hopefully one day! :D

    • @vectorpacer2063
      @vectorpacer2063 11 หลายเดือนก่อน

      @@BJGpixel just wanted to ask
      do you use any kind of drawing tablet to make pixel art ? or is it solely by mouse ?
      thanks

    • @BJGpixel
      @BJGpixel  11 หลายเดือนก่อน

      @@vectorpacer2063 I actually use the trackpad on my MacBook 🙃

    • @vectorpacer2063
      @vectorpacer2063 11 หลายเดือนก่อน +1

      @@BJGpixel holy smokes
      The truckpad must be good then

    • @BJGpixel
      @BJGpixel  11 หลายเดือนก่อน

      @@vectorpacer2063 The MacBook ones really are! But it's kinda peculiar to use a trackpad for art at all; really I'd just recommend whatever feels most natural for you. I only got used to it because I just like the mobility of a laptop rather than a static setup

  • @DadVader
    @DadVader 5 หลายเดือนก่อน

    How I missed that awesome episode, I don' know. So many juicy details it this animation. Dope! 🤩🤩🤘🤘

  • @SirCalalot
    @SirCalalot ปีที่แล้ว +1

    Incredible video - as always - but this one, especially has to be your best yet.
    Clear, concise information on your techniques.
    Sharing workflow and thoughts.
    And a stunning piece to show off at the end.
    Truly wonderful work, thank you!
    Keep up the awesome!

    • @BJGpixel
      @BJGpixel  ปีที่แล้ว +1

      Really happy to hear that - putting timelapse footage of animation work into a concise narrative video is always a bit trickier than a more typical piece of art, and I'm glad it came across so clear - thanks! :D

  • @brandonjacksoon
    @brandonjacksoon ปีที่แล้ว

    You are the best! Thanks mate! Always best tutorials!))

  • @mynameisgryphon1007
    @mynameisgryphon1007 ปีที่แล้ว

    Been following you since 2020... your content is so helpful. Thank you for all your hard work!

  • @MDSSoul
    @MDSSoul ปีที่แล้ว +5

    Very good tutorial, thanks 👍

  • @tomas23058
    @tomas23058 11 หลายเดือนก่อน

    man this is so helpful, i'm a begginer with pixelart and animation and this is so inspiring, thank you!

  • @MarioGonzalezTejada
    @MarioGonzalezTejada ปีที่แล้ว +2

    Excelente amigo, estás en un nivel inalcanzable, éxitos 👍

  • @michaelfiber4324
    @michaelfiber4324 ปีที่แล้ว

    One of my earliest memories of loving pixel art is actually Cyborg Superman from Death and Return of Superman for SNES. I love that you made one that looks so different from that but still so awesome.

  • @PirataGalactico
    @PirataGalactico ปีที่แล้ว

    I was gonna say it was missing a glowing eye but there it was in the end. Cool stuff as always!

  • @IYANMATYAME
    @IYANMATYAME 10 หลายเดือนก่อน

    Bruh, you got me with the sassy part. Lol.
    Admittance was priceless.
    This was inspiring.
    Y.G.M.

  • @You_reply_to_a_dumbass
    @You_reply_to_a_dumbass 10 หลายเดือนก่อน

    Thank you so much for those tips they realy helped❤❤

  • @samueljuarez2052
    @samueljuarez2052 ปีที่แล้ว

    Wow, la explicacion esta muy bien hecha, es sencillo pero a la vez detallado. Muchas Gracias!!

  • @rjsiii3
    @rjsiii3 ปีที่แล้ว

    Love your stuff. Even the superman hips doing the Flanders "nothing at all" motion. Lol😂

  • @DragmoraProductions
    @DragmoraProductions 11 หลายเดือนก่อน

    Awesome tutorial ❤ I have watched many pixel art tutorials, but no one explains it so clearly.

  • @lanceanthony198
    @lanceanthony198 ปีที่แล้ว

    The animation is beautiful

  • @ModelZGolden
    @ModelZGolden ปีที่แล้ว +2

    Incrível! Espero algum dia chegar nesse nível!

  • @kickalion8456
    @kickalion8456 ปีที่แล้ว +5

    He jumps from foot to foot like a little prima ballerina. Kidding. It turned out great :)

  • @bobsterhak714
    @bobsterhak714 ปีที่แล้ว

    Awesome!

  • @brcn3217
    @brcn3217 ปีที่แล้ว

    Great video! (as always) Do you have any plans for one that you explore background movement? I always struggle with those

  • @Snot.Factory
    @Snot.Factory ปีที่แล้ว

    so cool

  • @socksandsandalsstudios
    @socksandsandalsstudios 11 หลายเดือนก่อน

    10:09 I love how you named the window "Foot by the Frame" haha

  • @davidwalker1652
    @davidwalker1652 ปีที่แล้ว

    Great stuff! I do think he looks more like he's standing rather than hovering, though. You might want to check out the old Taito Superman arcade game for a better "hover" pose.

  • @darunius6886
    @darunius6886 ปีที่แล้ว

    you are the pixel goat!

  • @staddybot
    @staddybot 11 หลายเดือนก่อน

    how does this only have 76 comments this is fire

  • @jrbytes
    @jrbytes ปีที่แล้ว +1

    I really like the sounds you chose to accompany the final animation. Are they home made or did you source them from somewhere?

    • @BJGpixel
      @BJGpixel  ปีที่แล้ว +2

      Thanks! I picked up a bunch of sound packs on sale on Humble Bundle awhile back - there was an awesome "futuristic sci-fi weapon sfx" pack in there that was perfect for this!

  • @cheloburik
    @cheloburik ปีที่แล้ว

    Man, cool! This is probably not the first time you've been asked, but how did you connect your Mac to a CRT?

  • @vibechilli3680
    @vibechilli3680 ปีที่แล้ว

    Have you heard of Ace Attorney? It’s game franchise made I 2001 and has a pretty cool looking pixel art style. It’d be pretty cool to see you do an analysis on the original sprites. Love your content and have a great day!

  • @uniqueflowsnake
    @uniqueflowsnake 22 วันที่ผ่านมา

    If I had any idea of how to do any of this, I might have made him do a reloady motion (like pulling on a boat/truck horn) at the top that morphs the fist into the weapon and then come down to a lower pose, with legs more spread out to be ready for the recoil from his big gun hand. My version would be standing on solid ground ofc, not floating in air. xD

  • @Parzival031
    @Parzival031 ปีที่แล้ว

    How do you choose your color palettes?

  • @sinistarman
    @sinistarman ปีที่แล้ว +2

    remember that pixeling on superman's hips
    *SiniStarMan will remember that*

  • @mikaelded7438
    @mikaelded7438 ปีที่แล้ว

    Yes

  • @mikemel3459
    @mikemel3459 ปีที่แล้ว

    Question: Do you ever create sprite animations for games? And if so, what are some key differences between making pixel animations for fun versus making them for use in a game? Especially in regard to things like translating the character's position like you did here when Supe gets blasted backward by the force of the shot. I could see that complicating things in code when performing translations on the sprite based on it's pivot point. I don't know though. Any insight into that sort of use-case?

    • @clonkex
      @clonkex 11 หลายเดือนก่อน +1

      That's called "root motion" and yes, it's a real consideration! In 3D, you can design your characters to inherit the motion of the root bone so the animation can move the actual transform point of the character, but I'm not sure how you'd do it with regular 2D pixel animations because there are no bones. It's an interesting thought - I wonder if there are tools to help with that 🤔

  • @spideyosiris
    @spideyosiris ปีที่แล้ว

    Hi, could you make a video about the differences between 1-bit, 2-bit, 8-bit, etc? c: I'm specifically interested in making something 2-bit and I just can't find any tutorial or video explaining it.

    • @clonkex
      @clonkex 11 หลายเดือนก่อน

      Not sure if you know this already, but 1-bit is 2-colour, 2-bit is 4-colour and 8-bit is 255-colour. I'm not an animator though so I can't elaborate any further :P

  • @Ediphyz
    @Ediphyz ปีที่แล้ว

    I was wondering if u can do 32x32 character portraits, example (miku hatsune/makima)there’s no tutorials on making them this small🥲

  • @Mel-mu8ox
    @Mel-mu8ox ปีที่แล้ว

    Do you have problems with Adobe Photoshop?
    I watched a vid by Noodle - how I made my first animation short
    I wondered if it was really that bad? (I use Aseprite, but sometimes wonder if I should switch?)

    • @BJGpixel
      @BJGpixel  ปีที่แล้ว +1

      The Photoshop frame animation timeline tool can be a little unforgiving sometimes. if you play around with layer position or start cutting/pasting layers in the middle of an animation you can kinda throw everything off - but at this point I'm so used to working with it that I know how to keep those things in check. From what I can tell, Aseprite looks great for animation organization and control - but for someone that's not as familiar with it, all those circles on the animation tool layers look intimidating as well 😅
      TLDR: You're not missing out on much, particularly if you're already using Aseprite!

    • @Mel-mu8ox
      @Mel-mu8ox ปีที่แล้ว

      @@BJGpixel :) that's good to know :)

    • @clonkex
      @clonkex 11 หลายเดือนก่อน +1

      @@Mel-mu8ox I'd say for pixel art (especially for animations), Photoshop has very minimal advantages and some significant disadvantages... but for higher-res art, Photoshop's strengths really start to come through (though it's certainly not perfect and will definitely not magically make you better!).

  • @BluShiGuy
    @BluShiGuy ปีที่แล้ว

    Art

  • @ripdxrkygameplays
    @ripdxrkygameplays ปีที่แล้ว +2

    What software can i use to do pixel animation?

  • @loopit_3
    @loopit_3 ปีที่แล้ว +1

    New video!

    • @Thy_Vomp507
      @Thy_Vomp507 ปีที่แล้ว

      Congrats your first!

  • @FrozyMega
    @FrozyMega ปีที่แล้ว

    Pixel Art Clark Kent?! Sign me up!

  • @pbarrosramon
    @pbarrosramon 11 หลายเดือนก่อน

    You make me want so bad to learn how to draw! HAHAHAHAHA

  • @bad-people6510
    @bad-people6510 11 วันที่ผ่านมา

    Legs are my bane.

  • @alexbossgcity8883
    @alexbossgcity8883 7 หลายเดือนก่อน

    Lite

  • @Novastar.SaberCombat
    @Novastar.SaberCombat 9 หลายเดือนก่อน

    I wish I could hire someone to do these. Paid work. But I have no idea how to contact (legitimate) people for these kinds of things.
    🐲✨🐲✨🐲✨

  • @Gr8GooseYouTube
    @Gr8GooseYouTube ปีที่แล้ว

    25th veiwer