Home » Semua post
Selasa, 01 November 2011

More fun with circles

I just played around with more circles and a different approach to the eyes from the first tutorial... as well as using the bezier curves and straight line tool for some simple shapes.



Variation is the key. You can use the elements to form all sorts of critters.



As always - I hope you enjoy this tutorial and I hope you have more fun with vectors...


Get the source art (svg file) of this tutorial for
USD 3.00

templates-office.com
Kamis, 27 Oktober 2011

Creating a game character

 Let's get  started on a simple 2D character. There are a lot of resources and tutorial out there on character creation and animation - most of which written by and for artists and animators. I will try and break in down to simple elements and easy to follow steps. 

Note:
Some of the techniques used in this tutorial have been covered in earlier post. They should help you working your way through this a little bit more complex tutorial.


 It's time to start getting creative. Building a character from scratch we start with the head and create the body and limbs before assembling the elements into the final figure. 

Note:
When working from a sketch, scribble or concept drawing it's helpful to import the bitmap image into a new layer at the bottom of your stack and work on top (Layer/  Add Layer or SHIFT+CTRL+N). Bring up the Layers (SHIFT+CTRL+N), select the sketch layer and import the bitmap. Lock the layer and select the work layer (e.g. Layer 1).

In order to make it easier to animate the character later grouping elements and assigning better pivot points is really helpful. Rather than turn an object like an arm at it's centre it makes more sense to turn it at the shoulder. In order to do that, select objects that 'belong' together and move the pivot points.

 
This concludes the creation process. Now it's time to go in and play with the shapes, create some variations and make the most of the objects we have created so far. 

I hope you enjoyed the tutorial so far. Have fun with vectors and stay tuned for the next post 'Taking on animation in inkscape'.

Get the source art (svg file) of this tutorial for
USD 5.00(only includes the main character created in the tutorial plus the 'king scene')

templates-office.com
Sabtu, 22 Oktober 2011

Quick tutorial on the stamp shape

During the beach tutorial I created stamp border for the illustration. Here is the step-by-step on how to get there. 



Note:
The reason for ungrouping and combining the circles first lies in the restriction in Inkscape to only do a Union, Difference, Intersection, Exclusion or Division between two objects.
Tools like CorelDraw can do these with a group or even just several selected objects. Try around around a little see how your vector application handles these very handy commands.

templates-office.com
Kamis, 20 Oktober 2011

Creating a character...

I was playing around with some shapes for the animation tutorial when the character started to take on a life of it's own...


templates-office.com
Rabu, 19 Oktober 2011

Office windows... a quick request tutorial

One request I have is a quick tutorial of a simple, shiny office window for a game tile. All you do is play around with some rectangles, the clip tool and some gradient fills.



I hope this explains it a little bit. Enjoy and keep the requests and feedbacks coming...


Get the source art (svg file) of this tutorial for
USD 3.00

templates-office.com

Staying in shape... the Clip Tool...


In line with the water theme let's go ashore and look at a sunset on the beach to introduce some more helpful tools and techniques.





This is our basic 'pop style' sunset with some modified circles and gradient alpha fills added to represent some rocks in the water.
It's time to add some palm trees for the tropical feel.




One of the 'wonderful' things about working with vectors ist the scalability. Objects can be scaled up and down without loss, allowing for easy editing and adjusting of the illustration.
In this case the scale of the palm trees will define the viewer's perception of distance. Smaller palm trees will put the island further in to the distance while large trees will 'bring' it up close.



Btw. the clouds are the same shape as the island just squashed and coloured in a colour matching the sky gradient. Try reusing shapes even just slightly modified, recoloured, squashed, rotated or flipped to speed things up, add variation and make your scene more interesting.

Note:
A lot of the objects I am covering in my tutorials (like the palm trees above) working from predefined shapes (circle, square, star, etc.) is only one option. The freehand or straight line tool will create identical shapes but require a little more artistic skill. 

For our detailed palm we need two 'more advanced' features of inkscape: Interpolation and Path Effects.



Varying the fronds, adding to the interpolation and checking some reference images can improve the look of the palms even further.

Recycling objects

If you have similar screens to design for your game it makes sense to spend some time on the initial elements and then 'recycle' objects. This way you safe time and create a more consistent look and feel.




I hope even these slightly more advanced features don't pose too much of a problem. Enjoy and stay tuned for more!

Get the source art (svg file) of this tutorial for
USD 5.00

templates-office.com
Sabtu, 15 Oktober 2011

More fun with gradients...

Let's take the gradient fill to the next level and work with colour and alpha to create a simple underwater background.





Hint:
Use the 'Page Up' and 'Page Down' key to adjust the order of objects [e.g. place the sea anemones in the mid ground behind the light rays.] 

I would like to add more life to the underwater scene and create some fish. The basic principle when adding 'real' elements to a vector scene is to look at the shapes and 'deconstruct' them into basic elements like the circle, square, rectangle or ellipse.

I usually do a quick google image search for a reference image to get a better idea what I am going to create. In this case the 'yellow reef fish' search came up with a nice yellow longnose butterfly fish.
It works great as the main body is kind of squarish and the front has a triangular shape.


The same approach works the same with far more complex elements. It's a matter of seeing the 'building blocks'. 

Get the source art (svg file) of this tutorial for
USD 3.00

templates-office.com

Bringing in the gradients...

One very useful tool is the gradient fill. Let's have a look at it in the next tutorial:


Next we are moving on to more complex shapes with the help of combined shapes using union, intersection, difference, exclusion and division.

This concludes the third post. I hope you have fun trying to recreate some of the tutorials yourself or just play around with inkscape, gimp & co.

...and please let me know what you think about the tutorials, tell me what you would like to see featured or would like me to change.

Get the source art (svg file) of this tutorial for
USD 5.00

templates-office.com

Continue the fun with squares

The second tutorial works the same way - this time using squares:






The outline version still looks somewhat messy but it shows that the whole scene is made up of nothing but squares and deformed rectangles.



This concludes the second post. I hope you have fun trying to recreate some of the tutorials yourself or just play around with inkscape, gimp & co.

...and please let me know what you think about the tutorials, tell me what you would like to see featured or would like me to change.


Get the source art (svg file) of this tutorial for
USD 5.00

templates-office.com

Let's get started - with circles

Introduction:

Creating your own art work is a necessity for most independent developers. Due to the budget restraints or in a lot of cases the complete lack of a budget a lot of young indie game developer can't afford to hire an artist or buy art assets.
With the help of free software like gimp, inkscape,  truespace, daz studio and vue pioneer (just to mention a few) combined with a basic understanding of art creation pretty much anyone can create impressive and professional looking results.

I will try to start with some basic ideas and exercises to improve this kind of understanding. All of the examples will be based on free software. The work flow will be similar if you work with different software like Adobe Illustrator, Adobe PhotoShop, CorelDraw or others. I will try to mention the different approaches for those software packages. With the vast variety of software available at the moment and the sheer endless amount of our art creation tools and techniques it is impossible to cover everything but I will try to keep my examples basic enough to work with the software of your choice.

Let me start by clarifying some common believes when it comes to creating game at.

"I need expensive software tools to create truly professional game art."
No, you don't! There is a huge amount of free tools available that offer a true alternative. Gimp is one of the most well-known examples in the 2D realm as well as Blender in 3D field.
For the full time game artist upgrading your tools to ' industry standards' makes sense. Especially when collaborating with others using standard file format makes sharing and exchanging art a lot easier.

"Buying an expensive tool will automatically create better art."
No, it won't. It's always the artist creating the art that makes it great. Given the simplest tools like pen and paper a good artist can still create stunning pieces, while the most sophisticated tools still need a good artist to create something special.

"I can't do art. I can't even draw a stick figure."
Yes, you can. This is where modern computers to come in and allow you to create good game art without having a graphic arts degree.

"My game is good as it is. I don't need art."
Yes, you do. The independent game market is getting larger and larger and is attracting a lot more attention than it used to a few years back. In order to stand out your game should be the whole deal - have a great game play as well as rewarding and consistent visuals and matching sound and music.


Common hurdles

High Expectations:
One of the main problems facing independent developers are the expectations they have themselves. For single developers or small studios it is close to impossible to create AAA games match the quality of big studios. You should try and aim for the stars. Making games is all about that. Do the best you can and constantly push your limits and improve your skills...
but thinking realistically and adjusting your expectations to your abilities and your budget is a big step towards creating the best game you can create.

Defining a theme:
A lot of the time game creation happens with a spark. We have an idea of how the game playing might work and start creating. Creating very concrete in game art in the early stages of development can often lead to problems as the game evolves during development.
It usually helps to create a working game engine/ core gameplay before starting on the actual art work. Once you know how the game plays it's a lot easier to find a visual theme that encompasses the whole game.

Consistency:
Creating a consistent look and feel is a key element in creating a good gaming experience. It starts with the icon, the splash screen and goes all the way through to the game over screen. The most common mistakes are:
- the overuse of fonts - stick to 2 or 3 for the whole game UI [unless the font is used in images as lettering for shops/ packaging/ etc.]
- drastic changes in light and contrast - keep screens on a similar level - you can progress through the colour realm - usually starting out less colourful and getting more colourful for boss/ epic scenes
- photoshop effects - they are fun but a lot of 'artist' think the more you use the better the image will be... My suggestion is limit your use of fx to a few and keep reusing and variating them
- lighting - look at your screens and imagine the light sources needed to create the highlights, shadows of your ingame/ ui elements... It's scary how often you find lights being randomly used for objects that appear on the same screen

Losing focus:
It is only easy to get carried away with your art work as well as game play or coding. We all tend to focus on those elements we like to do while neglecting those we don't. A good example is generally the menu system/ UI. These usually are implemented at a late stage in the development with motivation at a low point. Yet they are one of the first things the player gets to see and they can greatly define the look and feel of the game.



Let's get started

The first tutorial is based on inkscape using mainly the circle tool [marked in orange in the tool bar on the left] and the nodes tool [marked in green]. 





A very similar result can be created in a bitmap tool [e.g. using circle shapes in gimp]. The work flow is a little different but as long as you keep elements on different layers it's easy to move, alter and modify.




This concludes the first post. I hope you have fun trying to recreate some of the tutorials yourself or just play around with inkscape, gimp & co.

...and please let me know what you think about the tutorials, tell me what you would like to see featured or would like me to change.

Get the source art (inkscape svg  and gimp file) of this tutorial for
USD 3.00

templates-office.com
Langganan: Postingan (Atom)