I Started A YouTube Channel

Hi everyone! I've started a YouTube channel where I post blender and programming videos, check it out!

I'll be posting tutorials on there from now on, so make sure to subscribe!

Design for Programmers | Part 1

Ok, this is a sort of off topic post, but it is related to art - meh.

Graphic design:

The practice or profession of designing print or electronic forms of visual information, as for an advertisement, publication, or website

 That means you can design anything that contains any kind of visual information: Websites, posters, logos, application UI, to name just a few. Design isn't very hard, but it does take some practice. This post will be focusing specifically on basic, general design, but I might do another post on a more specific subject...

The Basic Rules of Design

Contrast

Contrast is any kind of opposite or radical difference between two sections of a design.  Contrast is used to bring attention to a certain point of the design, or to show hierarchy. For a simple example: I want to show that the header is a title. Instead of making it the same size of the rest of the text, I would make it bigger. A subtler example, is right aligning an image, while for the rest of the design, images are centered. You can also contrast color, font weight and size.

Repetition

Repetition is when parts of a design are repeated throughout the design itself. Yeah, that definition wasn't great, but you get the point - make it repetitive. When I say make it repetitive I don't me use complex, bright green, (trying to be organic) ugly tileable background:

Yuck! is it needed that much?

They look cool for the first ten seconds and then they become super distracting.
Sorry - got on a tangent there.

Good repetition in design, is using the same style over and over again. Not only does it save space and time, but it looks better and gives a sense of uniformity(is that a word?).

Headers should be the same size, font and color every time(unless it is supposed to contrast).
If an image has a border around it, all of them should(again unless it is supposed to contrast).
Headers should always have the same amount of spacing on the bottom(another reason not to use inline styles).

Alignment

Alignment is when an invisible line is made by making sections of a design line up. This also shows hierarchy, because the human mind groups things based upon there position. For instance: A header should line up with its body text, otherwise it will look disconnected and floating out on its own.

Proximity

Proximity is the distance between sections of a design. Proximity is one of the most commonly missed rule of design, but it is vitally important to hierarchy. Example:

Left or Right?

The sad thing, is that it's not even hard to fix. Just headers and content closer together and it will look so much better.

DOs and DON'Ts

Some things are technically good design, but visually, they don't look very good.

Don't

• Please, please, please, I beg you - Don't use Times New Romans it is the ugliest font, simply because it is used on so many badly design sites. Really, do Apple or Smashing Magazine use Times New Romans?
• Don't use Arial, it sucks just as much as Times New Romans.
• Don't use center align - unless you want your design to look boring. Plus, it's hard to read center aligned body text.
• Don't use more than two fonts, otherwise things get messy. (I tend to use Helvatica Neue for body text and another more obscure font for my header.)
• Don't try to fit everything above the fold - I can grantee it will. Not. Work. It just looks bad, and you can't easily follow the basic rules of design.
• Don't use that ugly off white color that's used in Windows XP Classic theme.
• Don't use inset, outset, ridge, groove or double when adding borders. Please.
• Don't use more than five(ish) colors. I say ish, because three of those colors are just shades of the other two. Normally you just want to use black(meaning dark dark grey), white, possibly grey, and any other color.
• Don't use neon green text on black. I know it looks cool in your terminal, but it wouldn't look cool if you were trying to read Hacker News.
• Don't use colored body text. Neutral colors are the best for body text.
• Don't use a colored background for text. IT MAKES YOUR EYES HURT.
• Don't use image buttons. That's old school. And more often then not, the image gets cropped off at the edge and just looks stupid. Plus it slows down load time. And it doesn't ever look as good as a CSS3 button.
• Don't add extra crap you don't need. Less is More!
• Don't use light grey text on a white background.
• Don't add text shadow to body text.
• Don't use red on blue.
• DON'T DO FLASH

Do

• Do start out with a minimal design in mind. You can add more later, but less is more.
• Do use a color pallete (a good one is kuler.adobe.com).
• Do use lots of white space. I use tons of it. Again - Less is More. It also looks cooler.
• Do use a special font for headers. You can do that three ways(in order of looking/working best):
  1) Use Google Web Fonts or something similar to it.
  2) Get a custom font and use @font-face, but it doesn't work with all browsers(*ahem*  Internet Explorer).
  3) Use a "System Safe" font. This doesn't show up right if you don't have the font though.
• Do use a boilerplate. Some people don't like boilerplates, but they speeds up development so much, and it solves most problems related to alignment.
• Do use toned down colors. Using pure red(rgb(255,0,0)), will not look good.
• Do look at other sites for inspiration.
• Do left align for text body.
• Do use whitespace instead of a line when you can. Less is More!
• Do use CSS3 animations if it will enhance the site.

I hope you enjoyed the post. If you have any questions or comments ask them below. Happy Designing!

Natural Character Animation: Common Problems

Most beginner 3D artists have a hard time with character animation. Animation in general is not a skill you pick up easily. The best thing to do? Practice, just like anything.

A few common mistakes that are seen among amateurs:

• Timing
• Flow
• Natural poses
• Sliding
• Ambient motion

Timing

Many rookies make the accidental mistake of fast animation when rendered, caused by lagging 3D view animation. An easy fix for this is opening a timeline, and checking Playback > Frame Dropping. This will play frames at the frame-rate required skipping them when needed. If you do run into this problem, you can easily change the speed of an animation later, by scaling the curves in the Graph Editor.

The other problem is mixed speeds. Animating a walk cycle that is very fast, then animating the next section too slow, will make changing speeds later much harder. The only answer to this is a painstakingly slow process of selecting chunks of the animation and scaling them to match a natural speed. You can avoid this is if you make sure that the last section of animation matches the current section.

Timing also effects...

Flow

Flow is another important element in animation. Sections of an animation that do not flow into each other, will  look choppy and unnatural. There is no easy fix for this, the best thing to do, is to watch the transition between the two motions and try to make it as clean as possible.

Natural Poses

Natural poses are important to animation, but it is more important to great poses when you are doing stills:

(It took 10 minutes to find this pose!)

Its not great, but its better than this:

(This pose took about 10 seconds to do)

One thing you can do that sometimes helps is to look at images and videos as pose references.

Sliding

A huge problem with most walk/run cycles is sliding. So many animations have walkers and runners that slide, and its not even hard to fix!!! As long as you are using a path(which makes animation easier anyway) you can easily prevent sliding by adjusting frames slider.

Ambient Motion

What I mean by ambient motion is subtle natural motion such as scratch, stretching, looking around, etc.

Good animation is full of ambient motion, and makes the character feel more real.

And that's it. If you have animating tips, post them in the comments below. Thanks!