Home » Semua post
Jumat, 04 November 2011

Cracking up

Here's a quick post on how to create the crack in the office window tutorial. It's basically a quick use of the straight line and bezier curve tool and some moving around of nodes. 



Note:
Combining the spiky shapes (Path/ Union) cleans it up a little bit more - as you won't see the overlaps. Keep in mind to combine two objects at a time in inkscape.  

I hope this quick tutorial explains the creation of the crack well enough.



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

templates-office.com
Kamis, 03 November 2011

Creating a basic face

Taking the last post a little further this tutorial will feature a basic face by using mainly circles (again), some more advanced straight line tool and the node modifier. 




With the inital setup done it's time to play with the shapes and try out some variations.


I hope you enjoyed this addition and it gave you some ideas how to have fun with vectors.

Get the source art (svg file) (does not include the facial variations) of this tutorial for
USD 5.00

templates-office.com
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
Langganan: Postingan (Atom)