Saturday, April 28, 2012

Getting started with Inkscape!

"Inkscape is an open source vector graphics editor that uses the standard Scalable Vector Graphics (SVG) file format."

I got started with Inkscape without knowing a lot about it, but I used my knowledge on other graphic softwares and some tutorials to figure out what I needed to know in order to create neat and creative images. I will be posting what I have learned so far and what I'm learning right now, and also some useful tips for further reference. 

Images I create so far:

 This is a icon that I created for the software Engine that is being developed by the students Felipe Viana and Leonardo Nascimento. They are using the programming language C# to create a software that will be used to manage a store (money, client information, etc), and this icon I created will be used is the software along with a sequence of icons that will be also created by me.

This is the cookie monster!



Inkscape useful tutorial websites:


http://tavmjong.free.fr/INKSCAPE/

http://www.webtutoriais.com/categorias.php?categoria=Illustrator



Wednesday, March 14, 2012

Validation!

I decided to check if my pages were all valid and... RED BAR! I had to fix some little things on my code to make it turn into a beautiful and bright green bar!
Checking if a SVG file is valid is really easy to do. You can simply change the Doctype, that is being checked, to "SVG 1.0". Also, if you want to check a HTML file that has SVG code in it, you just have to change de Doctype to HTML 5.
After this awesome discovery I can make sure all my SVG pages are neat and valid :D

Friday, March 9, 2012

Headache

I did the "headache" page to apply what I have learned about, mainly, animating. I used shapes (rectangles and circles) to create a image, and I modified it by applying opacity, changing the color/size, and animating it. I learned a lot about how SVG works and how I would add its code to my HTML page. Also, by doing this page I was able to remember some of what I learned about HTML/CSS

See "headache"

Monday, March 5, 2012

Sad face

I created a sad face to apply what I learned about paths. I had a hard time in the beginning trying to figure out the positioning, but in the end I was able to create the sad face's mouth successfully. I also learned how to use gradient, that's the reason why I have two tons of red in the face's filling. I used the regular red and the HEX #990000 to create this effect.
In conclusion, by creating this face I was able to have a better understanding on paths and on modifying a shape's color.

See "Sad face"

Tuesday, February 28, 2012

What I have learned so far... SVG!



What I have learned so far...

          SVG is a XML graphic format for creating vetorial images and animations for the web.
          Like HTML, SVG also has a minimal page. Inside this minimal code, you have the following variables: version, viewbox (dimensions of the visible document. It uses x and y coordinates), width and height (size of the document), and ID (.svg).
          To create a circle you add the tag <circle> and you can change/add its radius size, color, location in the document, stroke and stroke size. Each circle created should be inside a SVG tag (<svg>).
          You can also create rectangles, ellipses, lines and polygons. There are different markups for each shape. For example, for a rectangle you have to add the width and height.