Friday, 28 October 2011
Time Merc Vector
Here is our first final picture for our main character 'Time Merc'. The Line drawing was made by Artyom and the subsequent Vector image was made by me. All in all about 10 hours work.
Thursday, 27 October 2011
Tuesday, 10 May 2011
Animal Frenzy - Process of Creating an Animal - Part 5 Features - Finished
And here's the finished Fox!
To make the features, I used the exact same methods I’ve already gone through on previous steps…
So, with a little patience and artistic license, you won’t have any problems when it comes to drawing all of the little bits and pieces.
I hope you've enjoyed reading this tutorial and learned something new!
I hope you've enjoyed reading this tutorial and learned something new!
Sunday, 14 November 2010
Animal Frenzy - Process of Creating an Animal - Part 4 Body Outline
Now we have the basic base down for the fox, we can give it an Outline.
When we talk about an Outline or "Ink lines", these are somewhat of a hold over from the classic days of Cel or Traditional Animation, but it's still a really good design idea for a lot of characters as it makes certain parts of a character "pop".
Click the Images to see the Full Picture!
I've demonstrated this with the picture above where we have two circles. The circle on the right clearly "pops" out of the picture far more than the one on the left.
There are other practical reason's why you might decide to use an outline, but for now I'm just going to stick with "Because it makes it look good!".
There are several different techniques you can use when creating your outline, but I am just going to talk about two of them.
The first, most well known, most used and most ugly (at least to me) is the basic Stroke Outline built into Adobe Illustrator (shown above). The Stroke Outline adds a mathematically perfect outline around the desired shape. While this all sounds alright in theory, I find that in practice it makes the characters look far too Computer Generated. There's no style or character to a basic stroke outline and can make your work look very Amateurish.
You can download various Illustrator Brushes that will change the way your Stoke appears, but I'm going to show you how you can do it manually - without learning anything new!
The Second method - the one I will be using on the Fox drawing, is Simply a new shape drawn behind the shape you wish to have the outline! Take a look at the picture above and compare it to the last. There is a lot to be said for some Randomness! Don't try and copy my lines exactly, make it your own! Thats the whole point! When people start using the same brushes, in the same way, you get a lot of artwork that just, well, looks the same! Try and put some of yourself into your designs - it's the only way to make them unique.
This method of creating a darker shape behind your artwork is a common one used by Professional Animators. It gives you great control over how your outline looks, as well as solving a lot of other animation problems caused by other outline methods.
Like before, I start by turning the Visability Off for all of the layer's I don't need to see. This makes it a lot easier to draw around the shape you need. I then make a New Layer and place it underneith the layer of the shape I am going to draw. Remember to keep Renaming your layers as you go!
I now start to draw around outside of the shape leaving a small gap between the line of the shape and where I'm drawing. It would be a bit pointless to just draw straight over the line of the shape, because you wouldn't see any of the shape you're creating!
Before you know it, you've got a really nice looking shape, with an outline! Remember, don't try and make it perfect, the unique choppyness is what you're looking for here!
All you need to do now is use the same technique you used for the head on the rest of the body parts.
I made a new outline shape for each individual part - including the individual shapes that make up the different parts of a limb - like the legs. Otherwise you will have problems when it comes to animating.
When we talk about an Outline or "Ink lines", these are somewhat of a hold over from the classic days of Cel or Traditional Animation, but it's still a really good design idea for a lot of characters as it makes certain parts of a character "pop".
Click the Images to see the Full Picture!
I've demonstrated this with the picture above where we have two circles. The circle on the right clearly "pops" out of the picture far more than the one on the left.
There are other practical reason's why you might decide to use an outline, but for now I'm just going to stick with "Because it makes it look good!".
There are several different techniques you can use when creating your outline, but I am just going to talk about two of them.
The first, most well known, most used and most ugly (at least to me) is the basic Stroke Outline built into Adobe Illustrator (shown above). The Stroke Outline adds a mathematically perfect outline around the desired shape. While this all sounds alright in theory, I find that in practice it makes the characters look far too Computer Generated. There's no style or character to a basic stroke outline and can make your work look very Amateurish.
You can download various Illustrator Brushes that will change the way your Stoke appears, but I'm going to show you how you can do it manually - without learning anything new!
The Second method - the one I will be using on the Fox drawing, is Simply a new shape drawn behind the shape you wish to have the outline! Take a look at the picture above and compare it to the last. There is a lot to be said for some Randomness! Don't try and copy my lines exactly, make it your own! Thats the whole point! When people start using the same brushes, in the same way, you get a lot of artwork that just, well, looks the same! Try and put some of yourself into your designs - it's the only way to make them unique.
This method of creating a darker shape behind your artwork is a common one used by Professional Animators. It gives you great control over how your outline looks, as well as solving a lot of other animation problems caused by other outline methods.
Like before, I start by turning the Visability Off for all of the layer's I don't need to see. This makes it a lot easier to draw around the shape you need. I then make a New Layer and place it underneith the layer of the shape I am going to draw. Remember to keep Renaming your layers as you go!
I now start to draw around outside of the shape leaving a small gap between the line of the shape and where I'm drawing. It would be a bit pointless to just draw straight over the line of the shape, because you wouldn't see any of the shape you're creating!
Before you know it, you've got a really nice looking shape, with an outline! Remember, don't try and make it perfect, the unique choppyness is what you're looking for here!
All you need to do now is use the same technique you used for the head on the rest of the body parts.
I made a new outline shape for each individual part - including the individual shapes that make up the different parts of a limb - like the legs. Otherwise you will have problems when it comes to animating.
Friday, 12 November 2010
Animal Frenzy - Process of Creating an Animal - Part 3 Body Base
Now that we have the base shape for the head, it's time to start working on the rest of the body.
Right before we do, we need to Rename the Layer we just drew the base of the head on. It's really important to get into the habbit of renaming your Layers. It will help you later on when you have lots of shapes and are trying to remember where you put them all.
Click the Images to see the Full Picture!
To Rename a Layer, simply Double Click on the layer you wish to rename in the layers window. This opens up the Layer Options window. The two most important bits in this new window are the Name and Colour. Changing the Name, renames your layer as I was just speaking about. I renamed my layer to "Head Base" - you can name your layer whatever you like so long as you understand it later on. Colour changes the colour of the Vector Line of all of your shapes on that layer. The vector line is the thin coloured line you see as you draw your shape with the Pen Tool, or as you tweak it with the Direct Selection Tool. You might be thinking "What do I care whether its Blue or Green?" and to some degree you're probably right. But once you start drawing a green shape on a green background, the last colour you're going to want your vector line to be, IS GREEN. Be sure to click OK to accept the changes.
The easiest way to navigate around your image is to press and hold the Space Bar. This turns your cursor into a small white hand as shown above. Simply click and drag your mouse while the Space bar is pressed down and you can drag yourself around the screen! This is so much easier than trying to use the scroll bars on the sides of the screen...
As before, I create a New Layer for my geometry and Lock the old layer so I don't get them all mixed up.
I Start as I did with the head and draw around the path of the drawing.
When you are drawing something that you know will be behind another shape, you don't need to worry too much about what it looks like because it wont be seen. Unless of course you will be revealing it through animation - like the body behind an arm.
Because the body is behind the head, we need to move the body layer below the head layer. This is done by clicking and dragging the layer with your body shape, below the layer with your head shape. Don't forget to Rename your layers as you go!
As you draw more and more shapes using up more and more layers you might find your screen starting to get very full up. You will also find it very difficult to see the drawing you are working from. It would be very tedious having to make all of your different shapes transparent and then opaque again in the transparency window every time you wanted to see them. The best way to solve this problem is using the "Toggle Visability" in the Layers window. This allows you to click a layers visability On or Off with ease. Each layer's Visability Toggle is located directly left of the Lock Toggle in the form of an Eye Icon (as shown above).
Remember to keep the different limbs as seperate shapes!
Otherwise you will have a lot of trouble when it comes to animating your character.
Using the different techniques I have talked about and also using some educated guess work, I was able to finish drawing the base layer for the different parts of the character.
As you start vectoring various characters, you will come across parts of a character that are partly behind one object while in front of another - similar to the Tail of our Fox. Because the tail is only wrapped around the one thing (the foxes body), we can get away with just "drawing what we see". Also, because of the complexity (the shooshyness) that would make a good animation for a fox tail, any movements would have to be drawn as a new image rather than just moving or rotating the body part (like the movement of an arm).
On the note about Animation - Notice how I have drawn the Foxes front left leg and back left leg. I have drawn two different shapes for the limbs in relation to where the bone joints would be. These are both on the same layer. This is to make more realistic animation while using the same shapes without having to draw another image (unlike what will have to be done with the tail).
All we need to do with the Main Base of the Fox now is to add the Outline!
Continue to Part 4 - Head Outline
Right before we do, we need to Rename the Layer we just drew the base of the head on. It's really important to get into the habbit of renaming your Layers. It will help you later on when you have lots of shapes and are trying to remember where you put them all.
Click the Images to see the Full Picture!
 |  |  |
The easiest way to navigate around your image is to press and hold the Space Bar. This turns your cursor into a small white hand as shown above. Simply click and drag your mouse while the Space bar is pressed down and you can drag yourself around the screen! This is so much easier than trying to use the scroll bars on the sides of the screen...
As before, I create a New Layer for my geometry and Lock the old layer so I don't get them all mixed up.
I Start as I did with the head and draw around the path of the drawing.
When you are drawing something that you know will be behind another shape, you don't need to worry too much about what it looks like because it wont be seen. Unless of course you will be revealing it through animation - like the body behind an arm.
Because the body is behind the head, we need to move the body layer below the head layer. This is done by clicking and dragging the layer with your body shape, below the layer with your head shape. Don't forget to Rename your layers as you go!
As you draw more and more shapes using up more and more layers you might find your screen starting to get very full up. You will also find it very difficult to see the drawing you are working from. It would be very tedious having to make all of your different shapes transparent and then opaque again in the transparency window every time you wanted to see them. The best way to solve this problem is using the "Toggle Visability" in the Layers window. This allows you to click a layers visability On or Off with ease. Each layer's Visability Toggle is located directly left of the Lock Toggle in the form of an Eye Icon (as shown above).
Remember to keep the different limbs as seperate shapes!
Otherwise you will have a lot of trouble when it comes to animating your character.
Using the different techniques I have talked about and also using some educated guess work, I was able to finish drawing the base layer for the different parts of the character.
As you start vectoring various characters, you will come across parts of a character that are partly behind one object while in front of another - similar to the Tail of our Fox. Because the tail is only wrapped around the one thing (the foxes body), we can get away with just "drawing what we see". Also, because of the complexity (the shooshyness) that would make a good animation for a fox tail, any movements would have to be drawn as a new image rather than just moving or rotating the body part (like the movement of an arm).
On the note about Animation - Notice how I have drawn the Foxes front left leg and back left leg. I have drawn two different shapes for the limbs in relation to where the bone joints would be. These are both on the same layer. This is to make more realistic animation while using the same shapes without having to draw another image (unlike what will have to be done with the tail).
All we need to do with the Main Base of the Fox now is to add the Outline!
Continue to Part 4 - Head Outline
Thursday, 11 November 2010
Animal Frenzy - Process of Creating an Animal - Part 2 Head Base
Back to the Foxture!
We begin by creating a Base Layer for each main part of the character (head, body, arms etc). All of our extra parts will be Layered on top (eyes, mouth, hair details etc).
I personally like to start with the head. It's entirely up to you where you start so long as you get your base layer down first.
Click the Images to see the Full Picture!
I have selected a Fill Colour at the lower left side of the screen by Double Clicking on it and setting a colour. I then set the Stroke Colour to "No Fill". This is because I will be using a different technique later on for the character's outline.
After these are set, I begin to draw around the shape of the head.
Straight away I hit a sharp corner. If I clicked again, the Handle would drag the curve way over to the right, as shown above.
When dealing with sharp corners, a simple technique is to just click once again on top of the Vector Point you just created. This deletes the handle leading into the next line, but keeps the handle you just used for your previous line.
Using Only the techniques I've already discussed, I was nearly able to complete the Base Shape for the full head. Sometimes you will find that the shape you are creating is covering part of the drawing behind. Most of the time you'll be able to just make an educated guess then Tweak it after. If on the other hand your shape is pretty complex and you really want to see the drawing then you can do so by clicking on the Transparency Window and changing the Opacity value. 0 is fully Transparent while 100 is fully Opaque. Knocking it down a bit will allow you to see the drawing behind while still being able to see the shape you are drawing pretty well.
We finally have our first shape!
Now it's important that you understand the two different types of Selection Tool.
On the top left of the Tool Bar, you will see two different cursor icons. While they might look similar, they both have very different uses.
The first one, is the Selection Tool indicated by a black cursor icon. This tool is used for the selection of an entire object or shape. When you click on a shape with this tool a Bounding Box will appear around the outside. You will mainly use this tool for Moving a shape around the screen. You can also use it to Resize the shape by Dragging the Points on the Bounding Box (Hold shift while doing this to constrain the proportions). Another use for the Selection Tool is to Rotate a shape by placing your cursor just Outside of the Bounding Box Points - this turns your mouse cursor into a Circling or Curving Arrow (shown above). Just Click and Drag your mouse when your cursor looks like this to rotate the shape (Pressing Shift during rotate will increment in 45 degree angles).
The second one, is the Direct Selection Tool indicated by the grey cursor icon. This tool is used to "Directly" edit the geometry of your shapes. That's not as complicated as it sounds - it really just means you're able to edit the shape similar to how you created it with your pen tool. When you click on a shape with this tool, rather than have a bounding box, you are able to see the Lines of the Shape just as you do when you use your pen tool. You can then Move the different Vector Points by just Clicking and Dragging them around, or you can edit the Curve Handle by clicking on the vector point Once, then Click and Drag the Handle for that point to edit it's corresponding curve.
These Selection Tools are Invaluable when you are tweaking your shapes after you have drawn them!
Continue to Part 3 - Body Base
We begin by creating a Base Layer for each main part of the character (head, body, arms etc). All of our extra parts will be Layered on top (eyes, mouth, hair details etc).
I personally like to start with the head. It's entirely up to you where you start so long as you get your base layer down first.
Click the Images to see the Full Picture!
 | |  |
 | |  |
Straight away I hit a sharp corner. If I clicked again, the Handle would drag the curve way over to the right, as shown above.
 | |  |
 | |  |
We finally have our first shape!
Now it's important that you understand the two different types of Selection Tool.
On the top left of the Tool Bar, you will see two different cursor icons. While they might look similar, they both have very different uses.
 |  |  | |  |
 | |  | |  |
These Selection Tools are Invaluable when you are tweaking your shapes after you have drawn them!
Continue to Part 3 - Body Base
Animal Frenzy - Process of Creating an Animal - Part 1 Beginning
Animal Frenzy is our Key Stage 1 Group Project Game. Our aim for the game is to teach 5-7 year olds part of the National Curriculum for Science. This includes but not restricted to Animals and the Environment.
Over the next few posts I am going to describe the process we are taking in our creation of the Animals and how they will be animated. I will be using Adobe Illustrator to create the Vector and Adobe Flash for the Animation.
Click the Images to see the Full Picture!
We start our design process with a posed drawing of the character. This is really important so that you get a really nice feel of the character's personality and how they might act within the game. It is also important to have clearly drawn features and un-obstructed limbs - but in the case of the fox, it isn't difficult to imagine what the limbs will look like behind the tail.
When we have our drawing imported into Illustrator we need to Create a New Layer and Lock the layer with the drawing on. This is to prevent any chance of drawing on, or editing the original picture.
I will be using the Pen Tool for the majority of the drawing.
This tool is used to create Shapes that you then Tweak and Layer Up to complete a full image, or in our case an Animal Character.
A single click with the Pen Tool creates a point that when you single click again somewhere else, you create a Straight Line.
To get Curves in your lines, you need to Click and Drag with the Pen Tool. This will create Handles that you can then Tweak to change the Curve within the line.
The idea is to create Full Shapes that can then be used together with other shapes to make a full image. Try and avoid crossing the lines over as you will get some very messy results... Unless of course that is what you're looking for!
One more thing of note when using the Pen Tool is being able to move the Handle of your Next curve without deleting it (with the single click) or without deleting/editing the Handle to the Previous line.
This is done by pressing and holding the Alt key and dragging your Handle before you go to draw your next line. This allows you to have nice smooth curvy transitions into your next line without any sharp edges.
These are the very basics for using the Pen Tool. There are many other techniques you can use in your creation of a Vector image so I will explain them as and when I use them.
Continue to Part 2 - Head Base
Over the next few posts I am going to describe the process we are taking in our creation of the Animals and how they will be animated. I will be using Adobe Illustrator to create the Vector and Adobe Flash for the Animation.
Click the Images to see the Full Picture!
We start our design process with a posed drawing of the character. This is really important so that you get a really nice feel of the character's personality and how they might act within the game. It is also important to have clearly drawn features and un-obstructed limbs - but in the case of the fox, it isn't difficult to imagine what the limbs will look like behind the tail.
 | |  |
I will be using the Pen Tool for the majority of the drawing.
This tool is used to create Shapes that you then Tweak and Layer Up to complete a full image, or in our case an Animal Character.
A single click with the Pen Tool creates a point that when you single click again somewhere else, you create a Straight Line.
To get Curves in your lines, you need to Click and Drag with the Pen Tool. This will create Handles that you can then Tweak to change the Curve within the line.
 | |  |
One more thing of note when using the Pen Tool is being able to move the Handle of your Next curve without deleting it (with the single click) or without deleting/editing the Handle to the Previous line.
This is done by pressing and holding the Alt key and dragging your Handle before you go to draw your next line. This allows you to have nice smooth curvy transitions into your next line without any sharp edges.
These are the very basics for using the Pen Tool. There are many other techniques you can use in your creation of a Vector image so I will explain them as and when I use them.
Continue to Part 2 - Head Base
Subscribe to:
Posts (Atom)