XaiJu
saint11

saint11

patreon


saint11 posts

Discord channel

Hi everyone :D

Now we have a Discord channel where we can discuss about pixel art, gamedev and stuff like that. You can share your learning progress there too!

Any comments, suggestions, etc will be more than welcome!

View Post

1-Bit

This is a hard theme, but it's also something I really like to work with. The good thing is that learning 1 bit is very useful for working with any type of pixel art, for example:

These props I made for Celeste are not 1-bit per se, but knowing how to work with 1-bit helped me a LOT while designing them.


Here's some other tutorials I made that can be useful

Wind/Tornado, tutorial #50!

Finally, my #50 tutorial! And probably the theme that stayed for the longest time in the voting poll.

This is my take on wind. In my opinion wind is very hard to animate, it's a weird balance between random patterns and ordered patters and sometimes it's hard to find the middle.

As always thank you very much for all the support! 50 tutorials is a big milestone, and I hope I can get to #100 too :)

View Post

Stars and Planets

This is one of my favorite things to draw, I love making BG stars.

My main concern when working with this is the contrast, you need to keep  it under control and be careful to avoid noise.

Thank you so much for all the support!

View Post

Next tutorial theme change

I think the timing for this a Wind/Tornado tutorial is a little bad. With the hurricanes in the east coast  causing so much damage, I think I'll wait before making a tutorial on this theme.

In respect to the many victims of this disaster, I'll get the second most voted instead - Space/Stars.

I'm really sorry about that, but I hope that you will all understand. 

Thank you!

View Post

Simple Walk Cycle

 This is the simplest walk cycle I could come up with. I made it 12 frames long, so I could easily cut it down to 6. Unlike this cycle I made most of the walk cycles have 8 frames +2 (10) for fluidity.

A nice tip that I forgot to include is to focus first on the legs and then on the arms if you are getting confused during the animation process.

If you need more reference there's no better book than the 2017-09-05 15:45:45 +0000 UTC View Post

Outlines

Usually I avoid too many outlines in pretty much all pixel art I make, since I work with very low resolution, except for a black outside border. I put that outside border almost everywhere because it helps a lot with the contrast and silhouette.

I also have talked about lines before in this tutorial here, and in this 2017-08-29 16:02:38 +0000 UTC View Post

Quadruped walk/trot cycle

This is probably one of my most complex tutorials. If you want to learn how to make a quadruped walk cycle you need to make a biped walk cycle first then do it twice and offset the time by around 25% or so, depending on the walk style you want.

Quadrupeds are very complex and can walk, trot, run, march and many other movement cycles and each one of those have completely different patterns.

For reference here's some cool stuff:

Shading

Those are some simple tips on how to work with shadows and how to avoid muddy/boring shadows. Hue shifting, and band compression are simple and effective techniques to handle that.

For a more in-depth guide on colors, check this awesome tutorial: http://www.writedesignonline.com/resources/design/rules/color.html

View Post

Clouds

This is my tutorial about clouds, I was going to explain about the many types of clouds but I think it's better to focus on how to draw a "basic" one first and then later I can do one on cloud types.

Clouds are very similar to smoke, so you might want to check my Smoke tutorial too. I also made a tutorial on Paralla...

View Post

Environmental Hazards

This is not exactly a tutorial, it's more like a reference sheet, so I would recommend you to refer to it when in need for some inspiration for environmental hazards in games. Also, feel free to download this gif and check it frame by frame, that's always a good thing to do.

Other useful tutorials:

Fabric/Flags

When making flags always be careful to not overdo the folds and details, or everything will get very messy. For the movement, when not sure always remember sine waves.

Other tutorials that might help you with the subject:

Blood and Guts

Animating blood, guts and gore is all about animating particles properly, knowing how to draw particles is a very very useful skill. I like to think of the general whole picture first and then simulate each part individually.

Here's some of my other tutorials that have related themes:

Slimes:https://www.patreon.com/posts/fluids-slimes-9293102
Water:2017-07-18 15:13:12 +0000 UTC View Post

Making Tiles

This tutorial was so hard to make, but I hope it's not too confusing. 

Some softwares can help when it comes to making tiles. Aseprite has the awesome function "View > Tiled Mode > Tiled in Both Axes" that helps so much when making the middle tile. And Pyxel Edit has a bunch of cool features for making complicated tilesets.

View Post

Character Idle

Although I really like very bouncy idles it's important to always pay attention so it doesn't look like the character is dancing - unless that's your intention, obviously.

Since the idle animation doesn't move much or moves very slowly, a <1 pixel movement* might be required. I also made a tutorial on that:
https://www.patreon.com/posts/1-pixel-movement-7652033


*Some people cal...

View Post

Bullets

And here's my tutorial about bullets! I took a lot of inspiration from Vlambeer's talk The Art of Screenshake, which I recommend a lot!

For drawing bullets is also very important to look for reference in other games, such as Metal Slug, Mercenary Kings, Enter the Gungeon, Flashback (that makes realistic/invisible bullets) and Nuclear Throne.

As always thank you for the support!


View Post

Metals

This was a especially hard subject for me, but after some research, I think I managed to learn a lot and compile some general tips that were useful to me!

About the "metal doesn't stretch" tip, note that there are some exceptions, metal can bend and stretch if it has some unnatural property or if you are going for a very exaggerated style.

As always thank you for supporting this series!

View Post

Squash and Stretch

Here's one of the most important animation principles, squash and stretch! It's has a some similarities to motion blur, and they are great if used in conjunction.

For further study on the subject I recommend this video: https://www.youtube.com/watch?v=haa7n3UGyDc by Alan Becker and my motion blur tutorial https://www.patreon....

View Post

Motion Blur

Sorry for not posting last week, I was sick for a while and decided to take a week off work to rest and get better. And it worked :D I'm finally better now!

This week's tutorial is about a very important thing called motion blur! Although we stylize a lot, I also recommend looking at real motion blurred pictures and research how motion blur and taking pictures with cameras really works. And for that, there's no better place to start than View Post

City Backgrounds

Instead of explaining how to draw individual stuff I decided to share my process when making city tiles and backgrounds. Cities are very "blocky" but also have lots of life into it, so my process tries to reflect that. I start with the raw blocks and slowly try to add details and signs of life into it.

Thanks a lot for the support, until next week!

View Post

Pixel Art Fundamentals Part 2

My original plan was to explain more stuff but I ran out of space :P So, banding will be explained in more details on another tutorial!

In pixel art I always try to "hide" the squares as much as I can. When the pixels are too aligned they tend to look very stiff, so I always try to break as many lines of pixels as I can.

Don't forget to check the part 1 here: https://www.patreon.com/posts/pixel-art-1-69...

View Post

Vegetation Tutorial Part 2

Here's the second part of my vegetation tutorial! (part 1 is here: https://www.patreon.com/posts/vegetation-part-7416630 )

This time I tried to focus on grass and talked a little about wood too. Grass is such a complicated thing to draw that every artist has their own way of simplifying it, in this tutorial I explain the style I usually do, but there are many other styles that would be very different ...

View Post

Rock Formations

Tutorial #31

This is not a very scientific tutorial, but it's usually how I think when drawing. My main advice when drawing rocks is: GET SOME REFERENCE. Pinterest or  Google Images are great ways to find some.

As always, thank you so much for the support!

View Post

Fluids / Slimes

Here's my take on slimes and other thick fluids!

Slime particles don't break as much as water particles, they tend to create bridges between them. Also, don't forget to always keep shapes rounded and smooth, sharp corners should be avoided.

Thank you for all the support! <3

View Post

Wings / Flying Tutorial

Wing/Flying finally won the theme poll :D Well, technically it was a tie, but I guess I can decide on ties? Well, anyway here's the Wings/Flying tutorial!

My main tip would be: focus on the vertical movement and on the silhouette. When looking at pixel art animation our eye usually focus on the big shapes.

Have a good week and thank you for the support!


View Post

Light Magic Effects

Here's another very "abstract" tutorial, it's more like a collection of tips and concepts than a step-by-step tutorial.

My main advice would be the same with the dark magic tutorial: Get some reference and study the gifs, frame by frame and try to find cool patterns that you can apply.

Here's some tutorials that I made that can be helpful when animating this:

Portraits

Last week's voting thread was a tie, so I chose the one I wanted to do the most, and here it is: my portrait tutorial!

I tried to explain my process and put some basic proportion tips. I also tried to keep it simple, so it can be used for a quick reference.

Drawing portraits is all about knowing the human form, so always use reference and studying figure drawing is essential.

Other tutorials that might help:
Pixel Art Fundamentals: 2017-04-04 17:46:04 +0000 UTC View Post

Dark Magic Effects

Here's a very "abstract" tutorial, it's more like a collection of tips and concepts than a step-by-step tutorial.

My main advice would be: Get some reference and study the gifs, frame by frame and try to find cool patterns you can apply.

I also made some tutorials that can be helpful when animating this, here are the links:

Spaceship Propulsion Tutorial

Finally, after a GDC break, here's my latest tutorial!

In general spaceships trails can be pretty much anything you want, I made some examples and guidelines on how I like to work. I hope you like it!

Thanks for the support!

View Post

Ruins Tutorial

Here's my tutorial on ruins and broken stuff. It's more of a collection of tips and references. But my genereal advice is do NOT overdo it! Adding too many cracks or too much contrast will make everything look messy and noisy.

 

Today I'm going to travel to Vancouver then to San Francisco for GDC, so I'll probably have to take a one or two week break. But I'll get back to the tutorials shortly after that!

And I hope I'll see some of you at GDC :D

Also, I'm very proud to ...

View Post