Posts in category Inkscape
In my post about the Candy Coating Effect, I did it wrong. The linear gradient should be white at the top and transparent at the bottom. I did it with white at the bottom and transparent at the top. Also, as an improvement, the curvature of the reflection should be much wider than in my previous post. Here is what the correct effect should look like:
Sorry for the confusion. But hey, I’m learning, right?
I’ve been learning a lot the past couple of days. One thing I learned was how to get mplayer to show my webcam while I did a screencast. Arthur Reeder taught me how to do this. If you haven’t seen his site, check it out here.
The other thing was how to do this awesome candy coating effect with Inkscape. John LeMasney taught me how to do this. You have to look at his site, 365sketches.org. He has some really awesome stuff. The rocket ship is my favorite.
This candy coating effect gives your drawing a nice shiny 3D effect. It looks like there is a bright light above the object and it’s reflecting off of it.
So here is the screencast of how to do the candy coating effect:
Thanks for taking a look. Comments, as always, are appreciated.
I just reached 50 subscribers on my YouTube channel, so I made a shout-out video to thank them:
It was easy to make. I made a document with Open Office and typed the names of all my subscribers. I copied and pasted that into Inkscape. In Inkscape, I set the width of my document to 1280 pixels, which is the same width as a 720p HD video. Then I chose my fonts and I chose a light color because the letters would be scrolling over a black background. After I had all the text the way I wanted it, I chose the “Select and transform objects” tool (the black arrow) and clicked on the text to see how tall it was. It was about 5300 pixels, so I set the document properties to 5400 pixels tall. I got everything centered up and exported the document as a .PNG file. I left the background transparent. Then I found a cool song on incompetech.com. Kevin MacLeod puts tons of royalty-free music on his site, and you can use it under a Creative Commons license.
I downloaded the song, then I got into Kdenlive and imported that and the .PNG file that I made with Inkscape. I right-clicked on the .PNG file in the project tree and clicked on “Clip Properties.” Kdenlive treats the image just like a video clip. I changed the length to 1 minute, 17 seconds, to match the length of the song I downloaded. I also turned on “Transparent background.” This allows the black background (or other video if you have the credits rolling over it) to show through behind the words.
I dragged the clip down into the video track and clicked on the composite box that showed up right below it. Up where the project tree was, it switched over to the transition tab. In the project monitor, I could see that Kdenlive had shrunk the size of the .PNG image so it all fit in the frame. I clicked the little gear button on the transition tab and chose Resize -> Original size. Then I dragged the red box (which represents the .PNG image) down so the top of it was below the black box (which represents what you see on the screen). I clicked the little gear button again and clicked on Align -> Hor. Center.
Right below that composite window is a timeline with a little red triangle and a little black triangle at the left end. The red triangle is a keyframe, which is basically a reference point for you to tell Kdenlive, “I want this video (or image or whatever) to be in this condition at this point in time.” So I wanted the words to be down below the visible area at the beginning. The black triangle shows you what point in the timeline you’re looking at as represented by the black box above. Since the black triangle and the red triangle were lined up, the changes I made in the last paragraph were applied to that keyframe. I moved the black triangle to the far right of the timeline and I clicked on the “Add keyframe” button (a couple of buttons over from the little gear button). Then I moved the red box so the bottom of it was above the top of the black box. I aligned it to the horizontal center again.
So with the keyframes, I told Kdenlive that I wanted the .PNG image to start below the visible area, and have it move to a position above the visible area over the span of the timeline. Kdenlive calculates the difference between the two conditions in the keyframes, and makes a transition between them throughout the timeline. There are other effects you can apply to a video or image and have it change over time using keyframes, so that’s why I was saying, “condition.” In this example, I am only applying motion, but you can experiment with keyframes and see what kinds of cool effects you can achieve. Am I being clear? Am I being verbose?
Finally, I dragged the MP3 file from the project tree into an audio track and rendered. Pow, it was that easy.
Comments are greatly appreciated.
I bought a Wacom Bamboo Touch recently and after a little rigmarole, I got it working. So I was playing with it and drew this. I don’t think it’s particularly good or anything. I just wanted to see what kind of stuff could be done with the tablet. I imported a photograph that I took and drew the outline with the pencil tool. I traced around the glasses, then around the lenses, and then I cut the lenses out with Path -> Difference. I filled that with black. Everything was very squiggly. I used Path -> Simplify to smooth a lot of it out. Then I used the calligraphy tool to color it, with varying colors and opacities. Most of the time I arranged the colors below the original outline, but I left some of them on top. I didn’t really think about it too much. I guess one thing I could have done to make sure the outlines stayed on top would be to put them on a separate layer. I duplicated the whole thing and filled it completely with black, blurred it by 5.0 and offset it for the drop shadow over a radial gradient background.
I hope I get better at this. Comments are appreciated.
I don’t want to call myself the Open Source Dilettante anymore. I thought it was funny at first, but nobody seems to be laughing. So this week I’m calling my blog “Messing around with stuff.” I think it’s an accurate title. I don’t know if I’ll keep it though. I’m not sure it snaps, you know? I need something that grabs the reader’s attention and says, “HEY! LOOK AT THIS!”
So I’m taking suggestions for a title for my blog. I want to hear ideas from all both of my readers.
In the meantime, here is a cool metallic eagle-head serpent I drew with Inkscape:
I used the pencil tool to draw a spiro with a triangle-in pattern, then added and arranged a couple of nodes in the path effect editor. I added the eye with the calligraphy tool, and differenced it out. I duped the shape twice, once to make a drop shadow and once to have a white under-layer for the chrome effect on the top layer. The background is a radial gradient stretched out horizontally.
We have to do something for St. Patrick’s Day, right? Let’s draw a shamrock. It’s a fun little sketch I made up in a just few minutes. Follow along with the video, and you’ll be Shamrockstar in no time!
Here’s a quick rundown of the main points:
Bezier Curve Tool
We use this to draw the stem. First we change the shape of the curve to “Triangle out” in the drop-down menu at the top of the screen.
Path Effect Editor
Wow, this thing is amazing. I don’t even know all the stuff you can do with it yet, but what little I’ve learned is really helpful. In this drawing, we just use it to make our stem a little wider. But you can do all kinds of stuff when you’re editing those nodes. You can add more nodes and make really dramatic effects on your drawings.
Stars & Polygons Tool
This is a quick and easy way to draw an equilateral triangle (and lots of other shapes)
Changing the object to a path allows us to edit the nodes on our shapes so we can change them into other shapes. When using the Nodes tool, there are a ton of buttons across the top of the screen that make those nodes do just about anything you want them to, except cook and clean.
This is a neat little effect. Basically, it takes two overlapping shapes, and cuts out the top shape, taking whatever portion of the bottom shape is overlapped with it.
I’ve only been making these tutorials for a couple of weeks now. I do it mainly so I can learn, not so much that I can teach. But trying to explain how to do it helps me understand it better. Also, I try to do something every day. I think that’s key. If I don’t keep doing stuff with what I’ve learned, I start to forget it. I feel like I’ve learned a lot these past couple of weeks, and I look forward to sharing lots more with you as I learn.
I’m still fighting this cold. My voice is shot right now, so I can’t really make a video tutorial for you. But here is an example of some of the stuff you can do with Inkscape. I drew this in about an hour, and I’m a total noob with Inkscape. Click on the picture to see it larger.
Here’s a wallpaper I drew, following a tutorial by HeathenX.
What are you doing with Inkscape? Leave a comment and let me know.
I am working on an Inkscape video tutorial, but I’m also trying to get over a cold so it’s making things difficult. I’ll just tell you a little bit about Inkscape here and we’ll do a video later.
How it works
Inkscape produces images differently than Gimp. Where Gimp is a pixel-based image editor, Inkscape uses scalable vector graphics. Both Inkscape and Gimp offer advantages based on what type of image you’re trying to produce. With Inkscape, you can build your image, and you will be able to use it at any size without losing quality. With Gimp, the resolution of the image determines how large you can use it. Once you begin making the image larger than its original size, It starts to become pixelated and blocky. That doesn’t happen with Inkscape because what you see is based on drawing lines or curves or whatever from Point A to Point B using a mathematical formula. So no matter how far apart Point B is from Point A, the image knows that the line or curve drawn between them follows a specific path.
You might be familiar with Adobe Illustrator, Corel Draw, or Freehand. These are also vector graphic editing programs. But these programs are expensive. Illustrator alone costs hundreds of dollars. Inkscape is free and open source. They make the uncompiled source code available to you, and you can modify it, redistribute it, basically do whatever you want with it, if you’re so inclined. Me, I wouldn’t have the foggiest idea of how to go about modifying the program, so I am just happy that it’s free.
Inkscape does not have all the features that some other programs might have. However, it does have other features that those programs don’t. Adobe Illustrator is pretty much the industry standard for graphic designers. But Inkscape is still a very valuable tool for the price. Total cost: $0.
Inkscape runs on Windows, Mac and Linux machines. You can download it at http://inkscape.org. Did I mention it’s free?
Ways to use it
If you’re doing web design, you can incorporate Inkscape into your work-flow by using it to create banners, logos and more. Most web browsers these days are able to display .SVG files, which is the default that Inkscape uses. Microsoft Internet Explorer is not able to display .SVG files. However, Inkscape can also export files in a number of other formats, including .PNG. These files are compatible across all web browsers.
I’ve already posted a tutorial showing you how to make a starburst pattern with Inkscape, so head on over there and give it a try.
Are you an Inkscape user? Leave a comment and tell me what you do with Inkscape. Or post a question. Or just say hello so I know you care.