Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

October 09 2017

6984 a983 500



Since I started taking part in #Inktober, I’ve been asked over and over “What pens do you use”. I can’t answer every one of these questions individually, so here’s a long general post about it, with as much information as I can think of.

Keep reading

October 08 2017


Heads up PayPal is changing ToS again








And they are getting even more strict when it comes to not using invoices for charging for Digital Goods.

Whatever Invoices make you uncomfortable or not, you gotta start using them if you want to keep your PayPal and your money. Changes starting this October 19th.

Honestly I don’t get why so many artists are so overwhelmed by invoices, takes just a few clicks to set up. 

And is not only “oh you have to use invoices because PayPal says so” if you don’t use invoices you’re putting yourself at risk of being scammed by an user abusing the buyer’s protection. 

Since PayPal ain’t got no idea of what those $50 you received were for, but the buyer is saying they didn’t got anything for the money, PayPal will just side with the buyer.

I’m seriously begging ppl, start using invoices. I’m tired of seeing ppl complain their paypal was banned, or is under investigation, or worse, the $100 they got for a very complicated commission, 3 months later get a refund issue. 





for your own sake. 

Here is how you use invoices because I can’t keep playing devil’d advocate, yes I would love to help you get your PayPal restored but just this last month I had to help three persons, and they were MORE than aware of this issues. 

Just protect yourself. 

Step 1. You login and click here

Step 2. You click create new Invoice. YOU NEVER CLICK REQUEST MONEY, unless you want to risk yourself to get scamer by buyer’s protection exploit and not only lose your money but your paypal account, and any future paypal linked to your irl name. 

Step 3 You follow this steps

1. Invoice for amount only

2. Ask your client for their PayPal email and put in that field

3. Add a vague description of what you’re doing, something like “Character Coloured with Background” is good enough, and if you need more than 1 character you can type in “2″ where it says amount, or just say “2 characters”.

Warning: don’t type in “Naruto rawing Sasuke”. That will get you banned. 

4. Click send. 

Optional steps. Create a template, doesn’t take more than 10 minutes and it will save you a lot of time for future invoices, you can even click on “items” right next to “create invoice” and add a list of services you offer such as “character sketch” “character flats” along with a price, so next time you invoice you just add to the invoice from your list of items and you saved yourself some more time. 

More importantly, you protect yourself from buyer’s protection exploit because if PayPal knows you’re doing digital goods, then you will be allowed that you did in fact created a digital good. 

Keep PayPal happy, as for right now there are no alternatives to this service, and this is the only source of income for many freelancers. 

Stay safe. 

Heads up, all commissioning artists

I’ll be doing this from now on!


OK so when you send/make invoices…it doesnt let you choose ‘digital good’ or differentiate between “goods (as in physical)” and “services” (as in doesnt need address) which is what you could do with micropayments….

SO WHEN U SEND INVOICE the buyer will be asked for their shipping address.
 ( I even had the options turned off for shipping?? I was pretty sure there USED TO be an option that you turned off and then it wouldn’t ask for shipping, but that doesnt seem to work anymore? I went to where the setting was and still had the boxes unchecked, and yet my buyer was still getting asked to put in shipping address, and when invoice was paid, i was being asked to provide shipping label by X date or Consequences.)


SO go to the invoice (i think this can be done BEFORE the buyer pays?? Didnt try myself tho, i did it after it was paid), and click on VIEW DETAILS in that first box 

Scroll to the bottom of the page and click ADD TRACKING INFO 



Select Order Processed/Service Rendered

YAY this stuff fills itself out and you can save and not have to worry about shipping your Digital Intangible Product to a very confused seller.

I am so salt about this. excuse me while i go cry angrily.

Think I’ll reblog this for my own use…

Guess I gotta get used to sending invoices for all transactions soon then

Yo, check out https://www.inly.io

the whole point is that its an invoicing system thats both very good looking and not a pain in the ass. (full disclosure, I work around the corner from the team that made it)


2d Animation - Smearing


What is smearing? Smearing is a multitude of techniques used in animation to bridge two or more frames to create the illusion of motion through methods like blurring, warping, distortion, and a few others.

I wanted to start of with a fresh animation to demonstrate some movements.


It looks like it can definitely use some extra information to convey the motion of the sword. This is where we starting thinking about how to smear the object(s).

The most common approach that I’ve noticed that animators take, especially newer animators, is that they warp the whole object. As in they have a point A, and a point B, and then they just have a “mass” of implied motion in between those points.


Here’s a still shot


It works quite well with objects like swords. So here’s what my attempt looked like.


It definitely helped explain the movements more, but I’m not sure I liked it.

Thankfully there are other “types” of smears that we can look at to try to see if they fit in this particular animation.

The next one I wanted to try was “speedlining.” This is basically when you distort the edges or add speedlines to the edges to make the object appear in motion.

Here’s an example


and the still shot:


notices how the edges appear more sketchy. This one is really common and it can be executed in different ways.

Here’s my attempt


I really like this type of smearing, even though it still lacks some of the motion that the first iteration lacked. The speedlines really add character to the motion that would otherwise be missing in a normal warp, but I still needed that smear to bring it to the point where it needed to be.

So here’s what some call “doubling.” (and just as a side comment, I don’t think any of these have “official names” other than just smearing)


Here’s the still shot


This was a really well executed smear which I don’t think would have worked the same if you would have just warped the faces.

Here’s another slightly different execution


with the still shot


It’s like a distortion mixed with doubling, and that’s what I like about smears.. you can mix and match things you feel would work in the particular scene.

So here’s my mix n’ match smear.


Not the best execution, but for our purposes I think it works well.

Motion blurring is really powerful as well. Film uses it all the time, as does 2d animation. Notice the force of the impact being pronounced with the added blur at the head.


Here’s the still shot


There are a few other smears I thought were interesting because it just speaks to the way our brain interprets these frames without even considering the logical implications of the individual frames.

Here’s one example


I don’t know if you caught that, but here is the still shot:


The guy has a knob for a hand. It works so well, you don’t stop to think about implication of that hand’s morphology. 

Here’s another one that doesn’t make too much sense.


Like what is this


That’s Imaishi. It’s part of why we love that animator so much. It’s part of his style and character. It conveys an emotion that would otherwise be absent in a “realistic” smear. Animation doesn’t have to make sense. It just has to look good.


(2) 2d Character animation


Disclaimer: Art isn’t a science: there are no definite proofs, there is no “correct” methodology, there are no facts. That’s not to say there aren’t cool ideas for you to explore. I don’t claim to be the best animator, I’m just showing you what works for me.

OK, so we want to start animating a character. One of the most important things about characters are the faces. It can really throw off a perfectly good animation when you see the face deform into something you can’t even recognize. What we want is consistency, but how do we get that? Well I can think of three ways : Make face guidelines, generate a 3d animation and rotoscope it, or get a clip from real life and rotoscope that. I’m just going to focus on the first one for reasons I’ll explain later.

You should start with a rough sketch, I like using simple shapes, but a lot of pros just go straight into outlines of the major forms.


OK, we got a very basic construction of a head (eyes, mouth, neck, etc). Now to keep our parts of the head consistent relative to eachother, we can add another guideline to help us (I used a triangle).


Now I made up some hairstyle and eyes on the first frame. Then I applied it on the other 3 keyframes and added inbetween frames to make it smoother.


You see how the eyes and mouth are within a certain boundary. This is really helpful to get it looking believable. Keeping the ratio is critical to make your character’s face consistent. Now remove the guidelines and you get a half-decent animation.


You can expand your animation to do whatever.


You can do all this relatively fast if you feel comfortable with drawing your characters. 

You can also use 3d. The problem with 3d though is that it takes alot of time to get assets made, rigged, and animated. By then you might as well render it and keep it 3d. I should say, a lot of modern day 2d animations do use at least some 3d. I’ve noticed it a lot with backgrounds and that’s understandable since you don’t want to redraw every single frame as the camera pans. 

As for rotoscoping, I think it’s a bit vacuous. Most of my favorite animations are done with exaggerated movements of different body parts to accentuate emotions (e.g. mouth getting bigger when angry or surprised). This problem applies to 3d as well, but if you’re skilled enough (and have enough time) you can make great animations that have this exaggerated element.

*This works for other “styles” that are more realistic.


The thing to keep in mind, is that the skull is a complex shape, and it follows that the face is also a complex shape. Having simple shapes still helps because those complex shapes fit inside simple shapes.


Hope this helps, and thanks again for your support.


Gentle reminder for artists who struggle with mental illness


Your pain does not define your talent. If it inspires you to create, let it, but don’t ever let anyone tell you that recovering or becoming healthy would “ruin” it.

Art - be it poetry, music, drawing, painting, crafts, writing - can be inspired by our difficult experiences, and it can help us cope, but please don’t ever feel as though you have to suffer for it to be meaningful or worthwhile.

Your art matters, whether you’re struggling with your illness or not.

October 07 2017

7025 a103 500


more of me tangled episode 3 backgrouds ~fionahsieh

7041 347e


The spinoff Frame by Frame Faces blog has been going for about two months now, and has 10 posts of in depth analysis of lipsync and facial animation! These gifs and images are a sampler preview of what’s going on over there, with much more to come!

Frame by Frame: Faces is a Patreon exclusive blog that you can get access to with no minimum monthly pledge. In addition to that, there are Patreon goals for the main Frame by Frame blog including more posts per week and indepth breakdown and analysis of the posts here (like what i’m doing on the Faces blog). 

If you’re interested, head on over to Patreon to check it out! Reblogs are also super appreciated to help spread the word :)

Thanks for your support!!

7058 a379 500


Studying Trees by Fabian Rensch

7071 121f 500


Fuzzybunikins check out their DA page! there is a lot of cool stuff over there

October 06 2017

7077 cf28 500


Head Rotation
Top Image
Row 2
Row 3
Row 4: Left (by Andrew Loomis), Middle, Right
Row 5: Left, Right
Bottom Image

7085 2c4e 500


Drawing Academy’s Free Video Lessons.

Drawing Academy is is offering Supersonic Art’s readers FREE access to their wonderful free how to draw video lessons, art albums and fine art books by just subscribing to their newsletter.

Get your FREE Drawing Academy Video Lessons and more.

October 05 2017

0931 e8f9 500


Tuesday Tips - Handling Objects — To show a character handling an object, think of merging the hand and object into one simple shape. Think of how you would wrap your fingers around it and how you would use it. Function is key! Norm #100tuesdaytipsvol2 #grizandnorm #handlingobjects #arttips #arttutorial

0933 3672 500


I got a lot of asks about this so I made a tutorial on how I was able to emulate the 80s aesthetic, please keep in mind I’m not an expert and what I put here is just what I personally did. I hope you guys like it and hope it helps

go crazy kids



u welcome

October 04 2017

5389 0c09 500


Tuesday Tips - “Don’t just stand there!”
A surprisingly simple yet challenging exercise. Try to draw as many standing poses of a simple character. Try not using props or things to lean on. It will make the exercise more fulfilling. Go through your first ideas quickly. Get those out so you can start thinking more specifically about how a character would behave or feel if he/she was cold, impatient, worried, late, hurt, angry, etc. We often forget that the whole body is engaged in expressing a feeling. Also, more technically, it forces you think of weight distribution (makes your poses more solid and believable). As always, stay loose and do it fast to surprise yourself with what you come up with. Norm #grizandnorm #tuesdaytips #100tuesdaytips #dontjuststandthere #tuesdaytipexercise


How I Make Animated Gifs (Photoshop CS5)


So! I went from no one asking to suddenly having quite a few people asking about how I animated this stuff so I’m putting together a little tutorial now.

(Disclaimer, I am not an actual animator, and my knowledge on this is all trial-and-error but works for me.)

First, you open up Photoshop. Click the icon, blah blah, wait 100000 years for it to load (it takes mine like 5 minutes :’))

Then you’re going to go to “Window” and scroll down to “Animation.”

Something like this should pop up:

It’ll be empty until you open up a file and add a layer. There are a few ways you can go about this - you can either animate via animation timeline or animation frames, but I personally prefer frames. So, once you add a layer, you’ll probably see something like this:

The “click here” is where you want to click if you want to animate by frames. You can toggle between frames and timeline through this. Now, just for the sake of showing what it’ll look like when there’s actually something kinda-animated, I’m going to open up a small animation I did for this.

(Yeah that’s a lot of layers, and each one is individually drawn for the hair hahahaha) Below, on the animation bar, that’s all the individual frames. And if you look closer - 

- you’ll see that I have it set to 0.05 sec per frame. I’ve just found that for actual animation, this is the smoothest (while still manageable) rate to animate sequences, so 0.05-0.08 is generally the range I go with. (I am not an actual animator, I just do what I do.)

For small sort-of animations like this,

each individual motion is anywhere from 0.2 seconds to 0.8 seconds, with varying animation frames in-between to give a staggered effect.

This is what the animation frames look like. Each frame is 0.2 seconds, but I had the motions staggered across the frames. (0.5 and 1 are my usual go-to rates for simple, small-motion animations though.)

Also note that, on the bottom left, I have the loop set to “Forever.” There are the options “once,” “three times,” “forever,” and “other,” but for continuously looping gifs you’ll want “forever.” 

So! What do you do with your completed animation? You go to “File,” and scroll down to “Save for Web & Devices.”

I’ve gone back to the Kushina hair animation thing for this. Now, after you click on “Save for Web & Devices,” something like this should pop-up with an overview.

Review what it is that you want - I generally go with the presets, and pay attention to the bottom right-hand side. Image size, I generally keep within 800^2 px to 1500^2px to keep the files small. (That’s not very small, but considering I draw on 3000px by 2500px+, it is to me)

Also, looping options! If you forget to switch the looping options on the animation frame/timeline, you can do it here too. Once everything is checked over, just click “Save,” and you have your looping gif!

(Yeah no I only put this together quickly, I wasn’t gonna bother making it smoother than I made it. Too much work and not enough time.)

So there! Making looping gifs on photoshop. If you want an actual animation tutorial - how to make smooth walking motions, hair, etc. - you can probably find one on Youtube or something. Saving gifs from professional animation and analyzing the frame-by-frame motions helps too (as I mentioned above, my learning was crude). The actual process of animating is pretty damn time-consuming, but if you do small animations to add some flair to your art, it’s manageable.

Happy gif-making!


(3) 2d character animation - Keying


One of the most important things you need to worry about when you create an animation is the keyframes. Keyframe animators, are usually considered senior animators (in a professional studio) that decide on critical aspects of the animation. Each studio has different roles that keyframe animators have to fill, but generally speaking they are in charge of translating the storyboards into a fluid animation. Depending on the size of the studio, you may also find “regular” animators and in-betweeners. Since I come from a position of someone who does everything from the beginning to the end, you’ll be getting a more holistic view. Going into the animation hierarchy is really beyond the scope of this mini-lesson. I’ll be focusing on how you would want to handle yourself when you are creating keyframes for your animation, specifically keyframing characters.

 First you would ideally have a character sheet (to make your life easier, to make it more accurate to the vision of the designers or directors or… to yourself)

 I didn’t make one, but you’ll have to forgive me.

 I like martial arts, so I wanted to try animating a “jump spinning hook kick”.

The first thing you need to do is to make the “keys,” or keyframes. For those who don’t know what keyframes are, they are just points in the animation that define major movements and/or change in movements of objects (in our case characters).

So here we have the character:


We definitely want the point of contact to be a key.


And the landing.


Now that we have the major keys down, we can start breaking them up into smoother and more refined movements. We have to ask ourselves how does the human body move when performing this kick and to answer that question you would have to get references!


Keep adding keyframes at important positions in the movement, this you really need to develop a feel for.

I added another element to the animation to have the character seemingly be reacting to something (just to make it more interesting).


Expand on what the element is by laying out important keys (as you did before)


Now as a key animator you are in charge of laying out the length of exposures each frame has. If you’re working in a professional setting, you will probably get an X-sheet (or exposure sheet). This is a good time to start thinking which frames need to be extended and which need to be shortened.

I wanted to exaggerate the kick so I extended the exposure of the kick.


Now that you have a blueprint of where you want to go, you can start filling in the spaces where extra frames are needed.


Really once you have your point A and point B set, it’s fairly simple to fill in the blanks. The important part is getting point A and point B just right. Having a smooth animation is not as important as having good movement (imo). Part of the charm that Japanese animation has is the interesting choice of shots/angles/poses that make up for the lack of frames (in comparison to the fluid frames you would normally see in a Disney animation).

Keyframes can also be used for changing the backgrounds, and perspective lines more broadly. Although seeing hand-drawn backgrounds has become rarer and rarer these days because of how much easier it is to generate it with 3d software.

Hope that helps, I realize these are very basic but hopefully I can expand into more complicated stuff in the future.

October 03 2017

2519 da24 500


2d Animation Tips - Tracing

This seems to be a sensitive topic for many people, but I’d like to make the case for tracing to be an important tool for learning. In fact, I think tracing is one of the most efficient ways you can learn not just to animate, but to learn to draw more generally. This is more of general advice for people starting out, rather than a tutorial.

 If you want to learn to learn anything, you should start with the best. I found one of  yoh yoshinari’s many animations of yoko. The movement is pretty solid, but where would you begin with understanding his thought process? 


 I think it’s best to kind of reverse engineer some major forms to see the general movement so I first traced it.


 There’s quite a bit going on here. I tried to isolate the head movement


 And made a line of movement


From here you can try to use the form of the head to see if you can reconstruct the original animation, but I just wanted to keep the line of movement to make things less derivative.


 The movement is very rough and needs a bit of polishing and refining, but I think you can make it into a solid animation with a second or third pass.

 The bigger question is, did I make something derivative? Yeah, in some sense it is derivative. It wasn’t directly traced, but I took the line of movement from Yoh’s animation. The better answer is: it doesn’t matter.. because it’s about you learning rather than showing it to people telling them how cool you are for tracing another artist.

 There are a few things to be said here. If you are at a level where you can make solid animation with good composition ( and yes there is composition in animations just like there are in illustrations and movies), the dangers of making derivative work rise pretty quickly. Maybe there is a market and audience for people who can trace really well, but personally I don’t care for that and I assume others don’t care about that either. In other words: if you want to be known for your animations, you probably shouldn’t trace others.

 Just to break the taboo a little more, there is a guy by the name of Drew Struzan. He is a professional movie poster illustrator, he made covers for star wars, indiana jones, and back to the future .. just to name a few. He uses a projector to trace people’s faces onto his posters. He does this to maximize his time for what would take him days or weeks to do by eye. Is there anything wrong with this? I feel like there isn’t, and the reason is because I feel movie posters’ main strength and appeal are their color choice and composition. There are people who get paid to capture someone’s likeness and, sure enough, that is a talent that you develop with time and skill. I just don’t think Drew is paid for how well he can make the faces look exact.

 And just to touch on some of the drama of people tracing me, I don’t think it’s a big deal. There are people out there that think it’s ok to use my art for advertisements, and leak patreon stuff. It just doesn’t seem like a big deal to me if someone traced an animation.

Anyways, hope that is somewhat helpful.

2535 847e 500


a bunch of people have asked me questions regarding my linework, so i figured i’d make a more complete reference instead of a brief explanation. all of this, of course, is based off of my own personal experience - everyone has a different way of doing things, and my way is certainly not perfect! i just wanted to share my process for those who were interested.

thank you for your support and asks! you are all really wonderful.

2545 7fc8 500


for the anon who needed this! hope it helps :)

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!