13 octobre 2008
Music banner using Line Nova
Lately in my work I did some banners for mobile Web sites and just like everything I do with Gimp, experimentation and playing around are my steps to create nice banners and pictures (some times are not that nice, but :)
Ok, let me show you how I did one of my first banners using Gimp.
Start with an empty canvas, mine is 1008x252px (4:1). Then pick a color and drag it from the toolbar to the canvas (the canvas contains at this time only one layer, usually white), the color that I've chosen is a light blue (#6CB5ED). (FIGURE 1)
FIGURE 1 Setup your canvas with a light blue colored layer.
Now it's time to put your creativity juices to flow and invent a kind of logo for your banner. My banner it's about music, so I'll try to choose a font that goes along well with this topic. After looking around for a while I found a font called Alba (remember that if you want to use this font for commercial purposes, get in contact with the original creator), this font has a nice variant called "Alba Super", so I picked that one for my logo. (FIGURE 2)
FIGURE 2 Using a nice font for the logo.
Now it's time to add some music shapes (see one of my previous posts to grab this music shapes). You can add this music shapes in many ways: maybe grabbing some nice brushes related to music, or drawing yourself the music stuff, but in my case I used the music shapes SVG file that I did with Inkscape. The following paragraph step is optional.
Open the inkscape SVG file and from the startup dialog, choose "import paths". (FIGURE 3)
FIGURE 3 Importing the Inkscape vector paths.
Now select the paths dialog and select one of the layers, then click on the red button called "Path to Selection" this will make a selection based on the music shape that you want. In this way we can copy the selection and bring it back to our main banner project. (FIGURE 4)
FIGURE 4 Making a selection based in a Inkscape path.
Now bring the music shapes to your banner project and arrange them in a nice way. I also applied a darker shade of blue to the music shapes. At this moment you should have 2 layers, one with the text based logo and the other with the music shapes merged with the background color. (FIGURE 5)
FIGURE 5 Adding the music shapes to our music banner.
It's time to set the stage before applying one of the Gimp's coolest effects... Line Nova. Add a new layer and put it above our music shapes layer and below our music logo layer (put it in the middle). Fill the new layer with the same light blue color that we used before. Now set the foreground color to white and go to Filters > Render > Line Nova. Choose the default values and click in Ok. (FIGURE 6)
FIGURE 6 Line nova settings.
After applying line nova you should obtain the following result: (FIGURE 7)
FIGURE 7 Line nova effect.
Change the layer mode of the line nova layer to hue. After this you'll notice a subtle effect consisting of points like a semi dashed line. (FIGURE 8)
FIGURE 8 Line nova's effect is very subtle after applying a layer mode of Hue.
To make this effect more noticeable, let's apply some noise to the line nova's layer. Go to Filters > Noise > RGB Noise and set the following values: Uncheck Correlated noise and Independent RGB; set the Red, Green, Blue values to 0.20; finally set Alpha to 0. After applying the RGB noise, the effect could be too overwhelming so change the opacity of the layer to 60. The final result follows: (FIGURE 9)
FIGURE 9 Our final music banner!
Finally I also applied a radial mask to the line nova layer, in this way only the outer line nova's rays could be visible. I hope you found this tutorial useful and as always thanks for reading. See ya later!
10 octobre 2008
Old Airplane Watercolor - I've finally delivered it
Today was a nice day, I finally get away from my laziness and visited my teacher José Brizuela in my old school "Colegio Don Bosco".
I remember most of my teachers, but from the time I was in high school (those critic years), José Brizuela was my favorite teacher. I met him when I was studying 7th grade, he taught me a class related to society, geography and other stuff. Then in my second year in high school I found myself in one of his classes... psychology.
Psychology was a really cool class, because was aimed to teach the students things related to sexuality and other stuff, and was one of the very few classes that I can remember in my whole life in which all the students (only boys*) were very focused and paid close attention in class. If the topics weren't interesting enough, the teacher Brizuela taught the class in a very funny and true (no things to hide, close to reality) way.
In many of my interactions with him, I found myself getting late to class and waiting outside the classroom, thinking in what excuse I could use to give him. Then he went outside to ask me why I was late, and most of the times I replied that just a couple of blocks from the school, I found a traffic jam.
Another thing that I remember with nostalgic was how he called me in those times. Brizuela used to invent a lot of nicknames for the students, and all were very funny, all the class laughed a lot any time he called one of my classmates for his nickname. And for me, he used to call me "Caso Roswell" (you know the ET) and when I was late he said "Ok, let me know something, you have a spaceship and come from another galaxy, so how do you end up in a traffic jam? .... :)) -all the class laughing- c'mon let's get inside the classroom :) "
Ok, let's see the watercolor!
FIGURE 1 Old plane watercolor.
There is not much to said about this watercolor that I haven't said before in my previous posts related to painting in watercolor, but let me tell you some tips:
- I tried to put a lot of detail in the "tail" of the airplane, so I can achieve a dot texture (steady hand is needed!)
- there is some houses in the background so I painted them very slightly (mix the watercolors with more water to paint these houses). In this way you can add some depth to the picture, because things located far away will look less detailed
- I used a chinese ink pen to draw the contour of the airplane and in this way highlight it more
So that's it. Merci por la lecture :)
* Nowadays like when I was in high school, The Colegio Don Bosco it's a only boys school. So in the context of this story, we could talk more freely in class about certain topics like sexuality, because there is no girls in the classroom.
** I did this airplane watercolor in 2006, and I did it specially for my teacher Brizuela, for some reason until this very day (Oct 09, 2008) I've finally delivered it. Better late than never.
22 septembre 2008
Curly Girl
Oh my! girls that have curly and wavy hair... you are my favorite kind of women. Don't take me wrong, because I think all women are pretty, just thinking about your long hair, stylized shapes and everything else. I'm glad I'm a man because I can appreciate these things better.
"Have a very good reason for everything you do."
- Sir Laurence Olivier
When I think why I like girls that have wavy or curly hair, I remember my very first job in the Christmas season of 2004. I was working in a store that it's within a mall. My duties were taking care that the customers doesn't "steal" things from the store, also greet the customers and hold his bags in the entrance. At first I didn't like the job because in some way I have to be suspicious of everybody, fortunately some time later my boss decided to let me be only in the entrance, greeting the customers and taking care of their bags.
In one of my first days at work, I was in the manager reception's room waiting for my boss, so he could show me the famous camera's room (where you can see a lot of TV monitors showing almost all the sections of the store). Then somebody knock the door to get in the reception's room, and there she was... I remember almost perfectly seeing her through the door's top window and then I opened the door and greet her. She is the most pretty girl I've seen in my almost 25 years of life, her name is Guadalupe.
One of the things because I think she is the most pretty girl, is not just because she's pretty and had a wavy light brown hair, but because she was kind and friendly with me, and not only in the first encounter described above, but along all the time I spent working in the store. I would like at that time, I could ask her for her phone number or even her lastname, jeje, because one day all the sudden she stops working in the store and I even don't have the chance to say good bye :(
So the conclusion here guys is:
"Act quickly, don't wait too long for ask the girl for her phone number."
- Robert Navas
Ok, this introduction went too far. I just hope I don't get you bored.
Here is my tips for drawing a curly girl in Inkscape:
Try to use basic shapes for constructing your character. For basic shapes I think in circles or ovals, rectangles and maybe some polygons. To create more complex shapes mix some basic shapes until you get the desired shape.
To make the curly hair of the girl, first select the pencil tool (I think the calligraphic tool could work well too) and draw a single curly hair. Then draw some more pieces of curly hair until you have like 8 pieces. Now grab all the pieces and place them together, after that select all the pieces and group them (CTRL+G). Now if you wish to create more hair "volume", repeat the same process that I just described, but this time only duplicate the "curly hair group" and rotate, flip, scale to get varied shapes (FIGURES 1 and 2).
FIGURE 1 Creating curly hair volume.
FIGURE 2 Girl's curly hair.
The bubbles consist of a circle with a semi opaque color for the fill and a linear gradient for the stroke (FIGURE 3). Then I applied a opacity value of 32 for the fill and 24 for the stroke.
FIGURE 3 Linear gradient used for the bubble's stroke.
Finally I added some big bubbles at the top so later I can add some text inside them (FIGURE 4).
FIGURE 4 The curly girl.
See you later and thanks for reading :)
* For the bubble's stroke gradient I picked the same colors used in the "Create a CD-ROM" tutorial published in screencasters.heathenx.org
** Did you notice that the big bubbles could be used to create a set of buttons that maybe you can use it in a Web site or something, well let's take it further and create a "sprite" with this basic idea. Maybe later I'll write about this tutorial. Stay tuned.
08 septembre 2008
The Animated Forest
Hello, I hope that you - whom are reading this - are ok. May God take care of the men and women of good will.
Well let me tell you that I added a cool splash banner for this my blog and although some time ago, I was thinking in doing something different (and more complicated), but I think this banner is ok.
Like some people know, I had some vacation and although it was only one week, It was ok for some sleep and rest. I needed vacation very badly. One of the coolest things that I did in this vacation, was reading the Anne Frank's diary, I enjoyed reading the diary very much. And now I'm not only would like to travel to France and Spain, but also I would like to travel to the Netherlands, to the Anne Frank's museum, that would be very cool.
Ok, enough for the introduction, let's begin!
I did this animation, part of a whole project that I was collaborating. The project's objective was teaching Spanish (language and literature) to some high school kids, using Moodle for giving the course. In the first stage of the project we had some meetings with the teachers and they gave to us all the materials, classes and texts that we could require. Then we used that stuff to make the classes. One of the classes assigned to me was "Argumentation" and they also give to me a short history to illustrate better the topic. The animation showing the short history follows:
I would like at that time, I would had more time to do the animation, but the overall result was ok for me. Let me share some tips about this animation with you.
Character design
Each character is made using many layers. Each layer usually haves a graphic symbol. We usually create a graphic symbol for every "part" of the character's body. For example a graphic symbol for the shoe, another symbol for the leg, another for the arm, another for the hand, etc. (FIGURE 1 and 2)
FIGURE 1 Designing the rabbit character in Flash.
FIGURE 2 The set of layers used for the rabbit.
Eye blinking
I used a "sliding doors" technique to make the character's eyes blink (FIGURE 3). The problem then was making the eyes blink not only once but the whole movie. I added a little bit of Actionscript code for making the eyes of each character blink at a given interval in milliseconds.
FIGURE 3 The sliding door technique used for animating the blinking of each character's eyes.
Notice the first layer called "actions" in FIGURE 2, well in that place I added the following Actionscript code:
stop();
var blink_interval:Number = setInterval(blinkEye, 7000, eye1, eye2);
function blinkEye(target_mc:MovieClip, target2_mc:MovieClip):Void {
target_mc.gotoAndPlay(2);
target2_mc.gotoAndPlay(2);
}
The code basically sets a interval that will call a "callback function" every given time in milliseconds. For the eyes of the rabbit I set a interval of 7 seconds (7000 milliseconds) to make the eyes blink. I also pass to the callback function two symbols (movie clips): the left and right eye denoted by eye1 and eye2 respectively.
Making pauses
After every text balloon that appears in the short history I needed some pause to allow the viewer to read the text. Doing a pause in Flash's timeline would have been a very terrible idea because the timeline's length would increase considerably. So I used a specialy designed movie clips that made the pause for me (check at the end of this post for the pause flash source file)
Credits
Original story "El bosque animado" by Wenceslao Fernandez Florez
Background Design by Disney's Tarzan.
Character Design by Robert Navas (me, coche, cochesaurus, we all are the same character :)
Pause Flash source file by Chris Georgenes.
Final thoughts
Some people in the forum complain about using the Disney's Tarzan background (and maybe they are right), but I'm using this background for educational purposes, you know :)
The code shown along this post is written in Actionscript 2. I hope I could update this code for ActionScript 3
Finally this is the end of a very long post. As always thanks for reading!
Bye
Source Files
31 août 2008
Cochesaurus Crazy Tricks
I would like to introduce formally the "Cochesaurus crazy tricks", these are tricks that I've discovered using some of my favorite graphic programs, animation programs and programming languages. The graphic programs include: Gimp, Inkscape and Adobe Fireworks. The animation programs include by the moment only Adobe Flash. Finally the programming language that I like the most is PHP.
If you've read some of my previous posts, maybe you've noticed that I've already added some tricks, tutorials and workarounds, so why a Cochesaurus crazy tricks? well the answer is quite silly. I just want to give a "name" to my contributions, jeje. Well before anything else, let me clarify some things:
- Some of the Cochesaurus crazy tricks are not the best ways to achieve something but at the time the trick's post was written, that trick was the perfect solution for me.
- Some of the tricks are old ones but I would like to release them until now.
- Some of the tricks are very easy and maybe silly but I don't care, I'll post them anyway
- The Cochesaurus crazy tricks usually are not advanced ones. They'll aim the intermediate and beginner user like me :)
Finally the main purpose of my tricks it's for maybe help some people out there. The other purpose is due to my bad memory. Some times I do something and then some months later, I need to do something similar, but I don't remember how I did it before, so this blog will help me to remember how I did the things in the past.
18 août 2008
Tony Hawk vs. Homer Simpson - Watercolor
It's October 2004 and my brother Leonardo is about to have his birthday. I found myself thinking what could I give him for his birthday, because I didn't have money (I wasn't working at that time, I was still in the university at full time) to buy any gifts.
I could tell you a lot about my brother Leo and our adventures when we were children, but in a brief Leo and I, were like partners in crime, like Don Quixote and Sancho Panza, like Duck Dodgers and Porky Pig space cadet, like more than brothers...friends.
So I have to put a effort myself and try to give him a cool gift. So I started to search what he enjoyed the most and found that he liked a lot playing skateboarding (nowadays he stills enjoy a lot that sport). So I came with the idea of make a drawing related to skateboarding.
The inspiration for the drawing was not going well, but all the sudden I found a picture in the newspaper in which appeared Tony Hawk and Homer Simpson, doing some air duel... that was what I was looking for!!
I decided to paint a watercolor inspired on the picture. (FIGURE 1)
FIGURE 1 Tony Hawk vs. Homer Simpson
About this watercolor, I think the sky and the bright colors made this painting a cool one, but let me share some tips and thoughts:
- to make the sky, you could follow the same trick that I published before in my Senna river watercolor. This time the problem is the two guys in the air, to work around this you can damp the paper carefully without touching the contours of the characters or you can use a masking fluid to cover the characters and in that way you can paint the sky freely.
- Nowadays, the Simpsons and almost most of the animated series in TV use very bright colors, so pick the brightest colors in your palette.
- Remember in watercolor is the opposite of painting with oil or acrylics, so start painting the light colors first. Paint first the yellow skin of the two characters, then you can follow with painting the red, blue or green areas. Finally paint the dark gray or black areas.
- For the Homer Simpson skateboard, I tried to make the skateboard look like damaged (like my brother's skateboard), so I picked some sandpaper and did some scratches, I also made some "thin" black strokes.
- To make the characters contrast more (and look like they do in TV) pick a chinese ink pen and draw carefully the contours or outer strokes of the two characters. I used a chinese ink pen, size "8" for doing the strokes.
Finally I think that from all of the gifts (mostly chocolates, food and only saying "Hey Leo, Happy Birthday") that I've given to my brother, this watercolor has been the coolest one!
05 août 2008
North Pole Background
This background was made for an animation that I was trying to do for the last year's Christmas, and I said "trying" because I didn't finish the animation, I hope this year I could finish this idea and the work that involves.
When I was drawing this background, I was thinking in "ice cubes" and because of that the icebergs that I draw, are kind of polygonal. But let's see how you can translate this idea into a digital picture. Before start, I apologize because I don't have any images that show the process of this background... I don't know how many of you have forgotten to save or store some of your previous works and then when you go back to see how you did something, it's not there :(
Let's remember...
Open Inkscape and draw some icebergs using the Bezier Path tool. Add some gradient to the iceberg's "faces" (like a cube that haves 6 faces) to make this icebergs well more ice cubes :)
Don't forget to draw the reflections, using the same icebergs (duplicate them), but with minimum opacity to blend more nicely on the water.
Maybe the background it's OK by now, but here is when I think that a extra detail could make a difference. In Inkscape export the North Pole drawing using a transparent background, then open the North Pole picture in Gimp and do this...
This is one of my favorite tricks, select the layer that haves the north pole picture and then give right click on the layer and select "Alpha to Selection", this will allow us to select only the icebergs and then add some texture using the Paintbrush. For the paintbrush select one of this (I don't know if the following brushes are installed by default, but hopefully you'll have one or more of the following): Galaxy, Grass, Pastel and maybe some Acrylic. For the color select white.
The trick here is that as long as you have the selection active, you can paint "freely" and don't worry about painting outside the icebergs. This reminds me when I was in kinder garden, and maybe one of the hardest exams (evaluations or tests) was painting a circle, a rectangle and a triangle using a red, blue and yellow crayons respectively, and notice that you lose points or score if you paint a rectangle using another color but blue, or painting outside the contour or stroke that delimits the figures.
Finally with the above mentioned trick, you can always have a "A" grade in your Gimp drawings!! (FIGURE 1)
FIGURE 1 The north pole background or the "ice cubes" background.
27 juillet 2008
Space Background
Hello!
let me show you some background that I did some time ago. This space background was intended for some Flash animation that I was doing at that time and although I could create the whole animation in Flash, I don't think Flash was capable to create a more lively space drawing, so instantly I knew that with Gimp I could create something nicer that with Flash. (FIGURE 1)
FIGURE 1 Somewhere in the infinite space.
About how I did this drawing, well there is not much to say, because mostly involves playing around and have fun using the appropriate brushes and maybe some layering modes. I used some cool brushes by Rore (go to the bottom of this post to get the link) and some layers. One of the layers consist of a bluish gradient (a blue tint and a blue shade) and the top layer consist of the yellow stars, the layers in between consist of just "painting" a lot with the sparkles brushes and maybe changing the layer modes to "screen".
As always thanks for reading and see ya later :)
Update: Using the background in Flash. The planet and the rocket was done in Flash - the planet follows a similar technique described originally by Rore. (FIGURE 2)
FIGURE 2 Using the space background in a Flash animation.
Some definitions:
Tint, is made by adding white to a given color.
Shade, is any pure color to which black has been added.
Rore's brushes:
http://home.tele2.fr/auroreblender/resources_en.html
21 juillet 2008
Dandelion Girl
Well it's time for another tutorial that involves Inkscape working cooperatively with Gimp. Let's see what results.
The history of this tutorial it's a bit sad, because comes from a project that probably never will see the light (I'm sure if you follow this Blog, this is not the first time you've read that), a Web site that was intended to sell pictures of women... not exactly naked women, jaja, don't take a wrong impression of my company and me, but just bikini women. And like a Web site that I was viewing the other day that says "Even a bad date makes a great history" (or something like that), I can say "Even a bad project makes a great tutorial". Well enough history, let's see some action.
For this project I wanted to do something subtle and nice, so I started to search for photos in stock photography until I found this one: (FIGURE 1)
FIGURE 1 Dandelion girl. (©STOCKXPERT / taden)
But just the photo is not enough for the result that we're looking to achieve, so enter Inkscape, we'll try to get some nice subtle effect with this nice vector program.
Open Inkscape and adjust the dimension of the canvas to the size of the photo. For me it is: 850x565px (Go to File > Document Properties to set the size under the tab Page)
After that we need to import the actual photo to Inkscape, so go to File > Import and select your photo. The photo will appear on the stage, so select and center it on the stage.
Keep selected the photo and go to Fill and Stroke button in the horizontal toolbar. A dialog will appear, so go and change the opacity to 50 under the Fill tab. Changing the opacity will allow us to work more precisely and also see slightly what is below. (FIGURE 2)
FIGURE 2 Changing the opacity of our dandelion girl picture.
Basically what we are pursuing is tracing over the photo and draw the vector shapes over it, so to differentiate the photo from the vector shapes that we are going to draw, let's add a new layer. In the main menu go to Layer > Add Layer and in the position choose Above current. Now lock the layer that contains the photo (FIGURE 3) and proceed to select the layer you've just created.
FIGURE 3 Locking the layer that contains the photo. Notice that I've renamed the layers.
Now this is the hard part, select the Bezier paths tool (SHIFT + F6) and trace over the photo. Let me explain and add some recommendations to do this: (recommendations are from the book Beginning Gimp by Akkana Peck)
- Before you begin remember to zoom in. You probably want a zoom factor of 200% or more, depending on your hand steadiness and how good your close vision is. Zooming in lets you place your control points exactly on the edges of the object you're choosing.
- Click in the canvas, selecting points you want to connect. Use as many or as few control points as you need, depending on how precisely you want your selection to be. (FIGURE 4)
- Keep clicking to place points around the outline of the image until you get back to the starting point. (FIGURE 5)
FIGURE 4 Placing points around the outline of the image using the Bezier paths tool in Inkscape.
FIGURE 5 Keep adding points until you "close" or get back to the starting point. The vector shape has been lowered the opacity to see the photo below.
Keep doing the same procedure for all the important shapes of the photo that you want to trace. For the dandelion girl I've identified five important shapes: The face (showed above), hair, blouse, hand and the dandelion flower stick. After tracing on this shapes we get: (FIGURE 6)
FIGURE 6 Identify the main shapes of the photo and then trace over them with the Bezier paths tool.
NOTE: the hand is actually a set of individual shapes, mainly because the fingers.
Now we need to add some details to our dandelion girl, maybe some shadows, the eyes, the mouth, differentiate the fingers, etc. After that we are done in Inkscape. (FIGURE 7)
FIGURE 7 The final dandelion girl in Inkscape.
Just for fun, let me show you a mistake that I did :) I confused myself in the middle of the process and I draw a hand that actually appears like is in 3D. (FIGURE 8)
FIGURE 8 A 3D hand made with gradients in Inkscape, probably doesn't fit in the overall dandelion girl style.
Well probably the way it is, the dandelion girl it's already nice and pretty, but lets see if we can add some more detail.
Like we can see in the photo, the Dandelion girl is blowing the dandelion flower and all the mini dandelions are launched away, to fly in the air (I always wanted to blow a dandelion flower - I'm sure it's a lot of fun - but I've not found one yet here in my country). That is the missing part, so lets see how we can add some dandelions:
- Draw precisely the dandelions in Inkscape using the Bezier path tool
- Import the PNG bitmap generated from Inkscape into Gimp and then add the dandelions there using a special brush.
Well for option number one, maybe is too difficult and time consuming so let's skip this one. So the only choice is option number two.
First we need to get the brushes, so go an get this nice dandelion brushes by Project-GimpBC:
http://project-gimpbc.deviantart.com/art/GIMP-Dandelion-Brushes-63028196
Then we need to install them, so maybe this instructions could be useful to you: (Thanks Rore)
http://home.tele2.fr/auroreblender/resources_en.html
NOTE: In Windows you can store the brushes files under this folder: C:\Program Files\GIMP-2.0\share\gimp\2.0\brushes
After that edit the Dandelion girl drawing in Gimp and using the brush you've just installed draw some dandelions. Remember to use the original photo for reference, so you can see where the dandelions are flying and draw accordingly. (FIGURE 9)
So that's all. I hope you've enjoyed this tutorial just like I've enjoyed doing it.
FIGURE 9 The dandelion girl blowing some dandelions.
29 juin 2008
mouse doing his homework (I'm back!)
This painting reminds me of the time when I used to give drawings and paintings to girls just to impress them and maybe get a date :) fortunately those times have passed away and now I know a bit more of how to conquer girls and not get too serious (yes, give some flowers or drawings to a girl that you just met some days ago it's not a good idea) too soon.
About the painting, it's done with watercolors and consist of a mouse doing his homework (here in El Salvador, we call this type of homework "planas" and basically consist of repeat over and over again a symbol or character just to make your writing better).
In the painting I remember that I tried to make the mouse wear some "cool jeans" and that was the focus in my painting. And what makes some cool jeans? well I think that maybe the jeans should look a little bit old and scratched, so to make the effect believable I did the following:
- Grab some cool brush
- Prepare the blue of the jeans (maybe a mix of phthalo blue with cobalt blue)
- Fill the brush with the blue color that you just created
- This is the important trick, make sure that the brush just get slightly filled with blue, just remove the excess of blue maybe with a napkin paper.
- Make a few brush strokes, you'll notice that the stroke is kind of "dry" and it leaves some blank spaces interlaced with blue.
Here is the final drawing: (FIGURE 1)
FIGURE 1 A mouse doing his "planas".
See ya soon! :)