04 mai 2008
Cellphones sharing stuff
Hello! like I promise in the previous post I'll continue with the first of two post related to music in which I'll use the music symbols that I created before.
Like some people know, I work in a company that sells things related to cellphones, things like images, ringtones and other stuff, so I came with the idea of two cellphones sharing stuff. I hope you enjoy this Inkscape tutorial and let's get started.
First we need to draw the "cellphone boy", so using the Rectangle tool draw a rectangle with rounded corners. Choose black for the fill color and the stroke none (FIGURE 1).
FIGURE 1 Cellphone boy basic shape.
Now comes a tip that I brought from the Flash world (thanks to Chris Georgenes), this tip consist in selecting the just created cellphone shape and duplicate it (Edit > Duplicate), then pick a kind of gray color for the fill of the new just created rectangle (remember to keep the stroke to none), after that (always selected the gray rectangle) go to Path > Dynamic Offset to make the gray rectangle smaller. In this way the first black rectangle becomes the "outline" of the gray rectangle (FIGURE 2).
But you'll probably may be guessing why just don't add the stroke to one single rectangle, well it depends but with this technique you can achieve an outline with a varied weight, that sometimes is a nice thing to pursue. Other thing that you gain is at the time of scaling, because the scaled shape will be scaled uniformly, both the outline and the fill (because they are different objects). I make some experiments with scaling shapes with stroke and fill (both in the same object), and sometimes only the fill scales but the stroke doesn't.
FIGURE 2 Use Dynamic Offset to scale the duplicated rectangle.
After that we need some special shapes to use it for giving our cellphone boy some volume. To do that duplicate the gray rectangle and drag it to some free space in your page or canvas, then create a "helper" rectangle and arrange the two shapes in a way we can cut and get the shape that we want. Then select both rectangles and do Path > Difference. (FIGURE 3)
FIGURE 3 Using a helper rectangle to get the special shape that we want.
Duplicate the just created shape and then flip it horizontally. After that change the fill color of the two shapes to a darker shade of gray than the base rectangle. Using the align panel, position the the two shapes at both sides (left and right) of the gray base rectangle, then apply some blur (maybe 4 is ok). Repeat the process for the top and bottom highlights shapes (FIGURE 4).
FIGURE 4 The special shapes add volume (highlights and some shadows) to our cellphone.
Now we are going to add the screen and number buttons to our cellphone, to do that just use some rounded rectangles, notice that in the screen I used two rectangles, the one that is in the background haves a linear gradient with a diagonal orientation (FIGURE 5).
FIGURE 5 Adding the screen and buttons to our cellphone.
Finally add the face to our rectangle, using the circle tool for the eyes and the pen tool (Bezier Path Tool) or the pencil tool to do the eyebrows (FIGURE 6).
FIGURE 6 The final cellphone.
We are done with this tutorial but don't stay here and go further. Be creative and put this cellphone boy character to work or do something. Mine is below sharing some stuff with his cellphone girlfriend. (FIGURE 7)
FIGURE 7 Two cellphones sharing some stuff.
Inkscape Source File: cellphones_sharing
27 avril 2008
Music symbols
The other day I was doing some works that tried to express music in some way, one was for a speaker animation and the other for two cellphones that were sharing some music. The funny thing is that neither of both works was approved, so that means that I can share the works with you, my few (but growing) blog readers.
So I'll begin with the music symbols that I'll use in my future posts (stay tuned!!), this music symbols are somewhat simple but you can improve it easily (change color, arrange differently, add glow or shadow, etc.), once you have the original shapes.
Inkscape Source File: music_symbols
07 avril 2008
Notebooks
I was doing some Inkscape drawings lately, I would like to say that I enjoyed a lot when I was doing them and more since the Inkscape 0.46 release!
In this time I did some notebooks that I would like to use for some icons in a project that I'm working (FIGURE 1).
FIGURE 1 The Notebooks
One of the main problems that arise when I was drawing this notebook was the rings in the notebook's side, because they suggest that are above the notebook cover but also are below (confusing, huh) and more when you have to deal with the layers used in Inkscape. Well the only solution that I found was to accurately select and move the nodes that make the ring in a way that I can make the effect believable (FIGURE 2).
FIGURE 2 Moving the nodes that make the ring to suggest the ring goes behind the back cover
Some other problems that I found were the aligning of the rings and the ring holes, also the space or separation between the ring holes. I think this could be easier when you work with a vertical notebook since the beginning but I worked in a kind of perspective way since the start. To solve this I used some temp rectangles to help me align the stuff, a big one for the rings and some little ones for the ring holes.
Finally maybe this notebook could be useful to you and some of your projects. If you find it useful, I don't have a problem if you don't mention or credit me, maybe just leave a comment just to know that you used it and that it was helpful to you.
Bye
Inkscape source file: notebook
13 février 2008
Mudjungle banner
Hello, I've been working in a Inkscape - Flash integration example tutorial, but it have taken more time that I expected, so in the meanwhile I just did a Gimp banner using some of the nicest gimp brushes available out there. I used for the leaves in the top the leaves brushes made by Rore and for the board and chalk text some Pastel brushes made by Rene Jensen (aka Centipede).
See ya soon,
27 janvier 2008
Elephpant
Following the enthusiasm for spread PHP to the entire world :) I just happy because Vincent Pontier (aka the Roubio) , the creator of the PHP elephpant authorized me to post the elephpant, this time made in Inkscape. By the way check Vincent's Web site (http://www.elroubio.net/), is full of nice illustrations and artworks related to PHP, great work Vincent!!
Inkscape source file: elephpant2
23 janvier 2008
PHP Logo
Hello guys and girls,
I just noticed that in the PHP site there isn't any PHP logos made in Inkscape, so I decided to do one. It really was a difficult task because I don't have the font used for the "php" word so I grabbed a normal png image with the logo and used the feature Path > Trace Bitmap to get started.
The results were not as good as I expected. But it help me to identify some shapes and then fine tweaking with the Edit Path tool. Another technique that I found it useful was taking the original png image and lower the opacity to 30-40 % and then over the image draw the basic shapes using the the rectangle tool (make visible the grid and the snapping helps here too).
The Final PHP logo:
Inkscape Source file: php_logo
12 janvier 2008
Gimp and Inkscape integration example
I'm noticing that there is not too many examples of possible workflows that include the collaboration between Gimp and Inkscape, and although I'm not too experienced with both programs I came with the following tutorial, maybe somebody can found it useful.
The other day I was thinking in a possible layout and xhtml structure for a project about LMS (Learning Management Systems), so I decided it to do it in Inkscape (FIGURE 1).
FIGURE 1 XHTML Structure done in Inkscape
Like you see the drawing itself is pretty simple and easy to achieve. Just remember to use the option "Snap nodes to grid" and other snapping options within File > Document Properties.
Now enters Gimp!, select the SVG file made with Inkscape and right clic over the file and select "Edit with the Gimp". A new dialog appears, check "Import paths" and then Ok (FIGURE 2).
FIGURE 2 Importing Inkscape SVG file
Now go to the paths dialog and select the path layer that you want to apply a effect, also don't forget to visualize (check that the eye icon appears) the layer. Then clic the button Path to selection. After that the xhtml container will be selected (the ants appear... FIGURE 3). Now is the time to apply the effect or filter, so go to Filters > Light and Shadow > Drop Shadow...
FIGURE 3 Selecting paths
In the dialog, select 40-50 for opacity, 4-6 for Offset in both X,Y and a blur radius of 16-20. Remember to Select > None, so you can apply the same effect to other containers.
So finally after apply the same effect to all the containers, we have a xhtml structure that is not only meaningful but visually comprehensive to start with (FIGURE 4).
FIGURE 4 Final result
Thanks
* download source SVG File: xhtml_structure
