In this intermediate-advanced illustrator tutorial, we’ll learn how to make a 3D newspaper icon in Adobe Illustrator. This tutorial is based on the news icon in my <shameless plug> Formida icon set </shameless plug>, and was made in CS3.

We’ll be using the pen tool to create our basic background shapes, adding some shadows, color and shading to give the newspaper a sense of bulkiness and, uh, floppiness. And then we’ll use Illustrator’s Envelope Distort feature to mold the newspaper content to its background. This is the icon we’ll be making:

You should already have a basic understanding of how to use the pen tool and the direct selection tool (white arrow), how to apply color and gradients, and how to move, copy, and import objects and text boxes.

SECTION 1: PAGES

The first thing we’re going to do here is create a series of stacked “pages” to form our newspaper background. To each page, we’ll apply a light white-light gray gradient, and then we’ll apply a drop-shadow to each page to give the illusion of depth. Let’s get started.

Grab your pen tool, and draw a shape like the one below. This will be the top page of your newspaper. The color doesn’t matter at the moment. Mine is green so it can be seen easily. Note how the bottom bows out slightly.

Click on your shape so that it’s selected. Then click over to the gradient tool. You want to apply a light gray-dark gray linear gradient on the shape. The color is very important here, as an unrealistic color will make an unrealistic-looking newspaper.

My gradient colors are:
1. Light gray: #F7F4F5
2. Middle gray: #DDDCDC
3. Dark gray: #878585

Below is what my shape looks like with the gradient originally applied, then correctly aligned. After I’d created the correct gradient, I had to try several times to “realign” the gradient on the shape, so that the bottom dark gray lined up with the angle of the newspaper.

To realign a gradient, make sure the shape is selected. Select the gradient tool. Drag in a line over the top of the shape in the direction you want the gradient to go. This will reposition the gradient.

Now to apply a drop shadow. Select the shape, and go to Effect > Stylize > Drop Shadow. You probably want your drop shadow to be lighter than you think you do. The human eye picks up very subtle variations, so you’re drop shadow shouldn’t be too in-your-face. My settings, and results, look like this:

The trick to making a fully filled out newspaper is duplicating the finished front page you made, altering it slightly by re-aligning the gradient, and altering its shape slightly so that you appear to have multiple pages. This is my finished blank newspaper:

This stack looks like a filled out 3D object. But when we break it apart into its individual pages, we start to see how easy it is to construct a nice looking paper. Here are each of the 6 pages of the newspaper, from front to back:

Your gradients don’t have to look exactly like mine, but they should be varied.

To start duplicating pages like this, select the first page we made, Page 1. Ctrl + C to copy, and Ctrl + V to paste that copy onto the screen. Using your direct selection tool, select just the top-right corner of the copy and change it by dragging it outward, pulling it in, or changing its curve ever so slightly. Do the same for the top-left corner.

With the new page still selected, select your gradient tool, and re-align the page gradient as desired. Then, with your page still selected, right click > Arrange > Send to Back, and position Page 2 behind page 1. Repeat. Adjust page corners as necessary for the desired effect.

You might want to remove the drop-shadow from the last page by selecting the last page (Page 6, in my case) going to the Appearance palette, selecting the drop-shadow field, and dragging it to the trash. If you can’t see the appearance palette, go to Window > Appearance.

Once your pages are stacked and arranged, you’ll want to add some very light shadows to the front of the page to simulate light page folds, and make the newspaper appear to be a little floppy. These will look unrealistic until we drop the newspaper content on top of everything, but bear with me here.

First, using your pen tool or the arc tool, create two curved lines across the newspaper – one thin, one thick. They should be dark gray in color.

Select the smaller arc, and set the opacity (under the Transparency panel) to 63%. Then, go to Effects > Blur > Gaussian Blur. I set my gaussian blur to 17.0 pixels, but your blur will depend on the relative size of the object in your document.

Select the larger arc, and do the same. The opacity on my larger arc is 55%, with a gaussian blur of 42.0 pixels. Select the appropriate blur and opacity settings for your own strokes, so that when you’re done, you have something like this:

Okay, that’s it for the pages and backing. In the next section, we’ll talk about laying in some content.

On a recent web design project, it became necessary to drop a newsletter sign-up area in a rather space-restricted footer. Instead of try to cram the form fields into the footer itself, or redirect the user to a sign-up form page, I opted to drop the form into a lightbox – or to be specific – a greybox.

This is not a tutorial for beginners – if you’re building your first site, or don’t know much about HTML, I’m sorry to say I didn’t get into too much hand-holding here. This tutorial was created with Wordpress 2.8.5, and I used the Greybox Integrator Plugin.

You might want to start off by installing the plugin through your Wordpress control panel, or through the plugin site.

For an example of what we’ll be doing, check out the site I was working on. Bottom left-hand corner of the page, there’s a “Click here to subscribe” button. Click it. You’ll see what I mean. The newsletter subscription box is not a normal pop-up. I didn’t have to plunder anything from HotScripts, or fumble around with javascript. Instead, the form pops up in a Lightbox (Greybox, specifically). This was done almost completely with available plug-ins and some easy HTML & PHP.

Step 1: Build the form

This bit might seem fairly simple. There’s a billion Wordpress plug-ins that will let you easily create forms, then drop a special tag that references that form onto a Wordpress page, and wallah.

Problem: You tell Greybox to reference the page which houses your form. Greybox loads that page – the ENTIRE page, meaning your site template will load into the Greybox window as well, and your users will be seeing double copies of your site. Not very slick. You just want Greybox to load the form, and only the form – no extras.

You’ve got two major solutions here:

The coder way: If you’re functional with PHP, you can get around this by dropping some easy if statements into your index.php page, ie, if the website is on the form page, don’t load the theme or any other graphics. Or, tell it to load a totally different template to do some hot-shot form styling. I’d throw in an example, but everyone’s page is a different story. This is probably the best method, as it allows you to still use Wordpress plugins and pages to create the sign-up form.

The HTML-er way: Not good at coding, but good with design? Open up your hosting account file manager or jump on FTP, and upload a few form pages that reside outside of the Wordpress directory structure, with a pre-made script that handles the form. You should already know how to create a functioning form, and there’s a hundred billion ways to do it. One way is to create four pages: yourform.html, yourformhandler.php, sent.html and error.html (it doesn’t matter what you name them).

Yourform.html will hold the form fields of your contact form (the main form). This is the page that greybox will reference. Error.html will hold nothing but an error message in case the form doesn’t process. Literally, something like:

<html>
<head>
<title>Form</title> <strong>(greybox handles the title)</strong>
</head>
<body>
<p>We're sorry, your form didn't go through. Want to <a href="yourform.htm">try again</a>? If not, please email us directly at <a href="yournormalcontactpage.htm">email@emailaddress.com</a></p>
</body>
</html>

Your sent.html should be similar, just a “Your form was sent successfully!”

yourformhandler.php will take care of form routing, redirecting the user to error.html if the mail didn’t go through, and redirecting to sent.html if it did. Etc.

Or you can skip all that, and use a form generator like Wufoo.

However you go about this, the end result should be a functioning form that resides outside of your Wordpress hierarchy.

About Greybox Integrator

Like many things in Wordpress, the Greybox functionality works with tags. When you install Greybox Integrator, a new tag button, similar to the wordress “link”, “more” and “lookup” tags, will appear in your page editing window. It’s called the GBI button. You can (and should) read more on exactly how to use Greybox by reading this.

Before moving forward, you should have Greybox integrator installed.

Step 2: In the appropriate page, add with a link to your form

In your Wordpress dashboard, navigate to the page where you want to add the form, or create a new page. Make sure you’re in HTML view, not “visual” view.

Type “Click here to subscribe!”, or any other text you’d like to use. Highlight the text you just typed, and with the text still highlighted, click the GBI button.

Enter “3″, and click OK.

Enter the path to your form. If you used the PHP method, and your form is a Wordpress page, enter the permalink to your form.

Enter a title.

Enter the width of your form – this is how wide your greybox window will be. Because my form only has two fields, I want to keep it small. If your form is larger, go ahead change the size to suit. Size should be entered in pixels.

Enter the height.

And there you go, a link is generated:

Now, when you go to your page or post on the front-end of your site, you’ll see the link to your form. Huzzah.

But what if you want to put the form outside of page content? Like in a sidebar, or a footer? Since greybox relies on tags to generate its links, you’ll still need to do step one and two above, creating a page, and then creating a greybox link in that, but then you’ll also need to pull the contents of your page into a div.

I found a great snippet of code for this, written by WordPress user stvwlf. Read more about it here on the Wordpress forums: http://wordpress.org/support/topic/266861

So, implementing a greybox on the sidebar or other non-content area requires a couple of extra steps, which are:

1. Create your form, as in step 1 above.

2. Create a new Wordpress page, and then follow the steps in step 2 above, to add a greybox link inside of that page.

3. Open up your index.php file, navigate to the place where you want to place your code, and inside of the <div> tags, drop this:

global $more;
$about = new WP_Query();
$about->query('pagename=newsletter-sign-up');
while ($about->have_posts()) : $about->the_post();
$more = false;   // set $more to false to only get the first part of the post ?>
<?php the_content('Read the rest...'); ?>
<?php endwhile;
$more = true;   // restore default $more behavior
?>

So, for example, if you want this in your footer, drop it between <div id=”footer”> and </div> (or whatever the div is called).

In the above code, you’ll need to change “newsletter-sign-up” in $about->query('pagename=newsletter-sign-up'); to the name of your own page. If you’re not using permalinks, you may need to change the query arguments to make sure your code can find, and is pointing to, the right page.

And that’s it!

In this tutorial, we’ll learn how to use Inkscape’s Extrude functions and the gradient palettes to create a 3D RSS icon. You’ll need to know how to work with color, fills and strokes – I won’t be going over those basics again here. If you’re brand new to Inkscape, please consider first checking out my Color & Gradients Tutorial for Absolute Beginners, which will show you how to use the Fill & Stroke Manager.

Step 1: Draw a rounded rectangle shape and convert it to a path

Using your rectangle tool, draw a square. The color doesn’t matter at the moment. Then switch over to your Edit Path by Nodes tool. Select the rounding point of the square, and drag it downwards until you’re happy with the curvature of your corners.

With your rounded square selected, go to Path > Object to Path. After you’ve selected Object to Path, it will appear as though nothing has happened, but if you followed the directions correctly, your shape object has been converted into an editable path.

Step 2: Create your RSS Feed shape and convert it to a path

Let’s work on our RSS shape. Using your circle tool, draw a dot and set it aside. Then once again using your circle tool, draw another dot, slightly bigger. Turn off the fill for the second circle, and turn on the stroke, making it appear similar proportionally to the diagram below. Repeat this process, creating another, even larger circle, then turn off the fill and turn on the stroke.

Select the two stroked shapes with no fill (you can select them both at the same time by holding down Shift and click on them one after the other). With the two of them selected, go to Path > Stroke to Path. Again, it will appear as if nothing has happened, but your stroke has been converted to a path.

Repeat this for the final circle shape, but this time, with the shape selected, click Path > Object to Path.

Step 3: Stack and Cut

Open your Align and Distribute Palette (Shift + Ctrl + A or Object > Align and Distribute). Select the two stroked circles (by holding down Shift and clicking each object in turn), then click the Align Vertical Center button once, and the Align Horizontal Center button once.

With the circles aligned, once again select both of them, and go to Path > Combine. You will see the inner bounding box disappear, and the outer bounding box snap to the edges of the outer circle.

Draw a square that’s roughly the same size as the outer circle (see the diagram below). Turn off the fill, turn on the outer stroke. Position the square so that the bottom-left corner of it is situated in the center of the circles. Select all of your objects (the circles and the square [holding down Shift]), then go to Path > Divide. The square will disappear as in #3 below, and you’ll get multiple bounding boxes. You can now delete the two un-necessary pieces, leaving just the rss syndication symbol, and position the dot to complete the shape.

What just happened? By using the divide tool, you essentially split the two circles along the square’s path. Divide takes the top shape – any shape will do – and uses it as a guideline by which to slice up the shape directly below it; in this case, the circles.

Step 4: Extrude Your Shape

We’ll be working once again with the rounded rectangle we made in step 1. With your rectangle selected, go to Path > Object to Path. With your rectangle still selected, go to Effect > Generate from Path > Extrude, and set your settings however you like. You can see mine in the diagram below. The magnitude determines the width of your final button; I set mine to 25. When you’re done with the settings, click “Apply”, then “Close”.

Place the rss shape on top of the icon backing. Change the shape color to white.

Step 5: Apply Color Gradients

Using your Edit Path by Nodes tool, select just the top piece of the rectangle, and apply a linear gradient to it (by clicking the linear gradient button in the Fill tab of the Fill and Stroke Manager). Edit the gradient colors so that they fade from a dark orange to a light orange and back to dark orange again. I created a four-stop gradient – you can see my colors below.

Grab your Edit Path by Nodes tool, and select each piece of the button siding. You may have to zoom in very close to get each piece. With all pieces selected, go to Path > Combine. After the pieces have been combined, you can select the siding and apply a radial gradient to it. Below, you can see the results of my radial gradient application. You’ll notice I’ve set the center of the gradient to the bottom left corner of the siding, and set the color to a darker orange, to simulate shadow. Nearer the top / outer rim of the gradient, the color becomes a lighter orange.

To the RSS shape itself, I’m going to apply a very subtle white-to-gray linear gradient, just to give the color some depth. If you’re satisfied at this point, you can save and be done. I like to spice it up a little, so in step six, I’ll show you some additional effects that can be added.

Step 6: Apply Finishing Effects If Desired (Intermediate – Advanced)

Above, you can see I’ve applied three effects.

For the drop shadow: Draw a thin rounded rectangle, about the width of your rss button. It should be a dark color. Select it, then open up your Fill and Stroke Manager. At the very bottom, you’ll see a blur slider. Blur the rectangle. Then move it to the back with Object > Lower to Bottom.

For the Gloss: Select just the top piece of your rss icon backing – the orange rounded rectangle – and Ctrl + C to copy it to the clipboard. Then, instead of using Ctrl + V to paste it, go to Edit > Paste in Place. This will paste a new copy exactly on top of the copied object. Then, apply a semi-transparent white linear gradient to this shape. Both gradient stops should have more than a touch of transparency. Convert the object to a path if it isn’t one already (Path > Object to Path), select your Edit Path by Nodes tool, and delete the two bottom-right nodes.

The bevel isn’t actually a bevel at all, but two rectangles, one slightly smaller than the last, stacked on top of each other (smaller one on top). The trick to the beveled effect is to apply exactly the same gradient to both rectangles, but to change the gradient direction of the lower one using the Edit Path by Nodes tool. For more details on this effect, try my silver pendant tutorial.

And we’re done. Enjoy!

With Christmas right around the corner, we Illustrator users are sure to get a pile of requests for holiday artwork. This tutorial was inspired by a set of candy cane icons I recently made for an upcoming project.

I created this lesson for intermediate Illustrator users. You will need to know your basic tool sets and how to use Illustrator’s color and gradient functions in order to complete this tutorial. I work with Adobe Illustrator CS3, but you should be able to follow along with any of the CS-series Illustrator versions.

Step 1: Create a custom brush

The tool set for this step is:

First things first, let’s set up our artboard to make life a little easier on ourselves. Go to the View menu, and make sure that Show Grid is turned on. Then, also in the View menu, enable Snap to Grid.

Then select your rounded rectangle tool. I like to set my corner radius to about 8px. Draw a rounded rectangle like the one shown below. You can see that my rectangle is 3 grid columns wide, and 6 grid rows tall – it doesn’t matter how large you make yours, but keep to generally similar proportions.

Copy the rectangle multiple times, until you have a row like the one below. It’s very important that the rectangles are aligned properly and spaced at exactly the same distance apart. Grid snapping should make aligning them easy.

Turn off Snap to Grid in your View menu.

Select all the rectangles in the row by dragging a box around all of them with your selection tool, or by clicking each one while holding down the Shift key. Then, select your Shear tool, and skew the rectangles so that they’re slightly tilted.

Again, select all of the (now tilted) shapes in the row, and drag the whole row into your brush panel. In the “New Brush” selection window that appears, choose Art Brush, then click “OK”. Then, in the next menu, be sure to choose tints in the Colorization section. If you don’t select “tints”, you won’t be able to change the colors of this stroke later on.

You should now see a new brush pop up in the panel. Everything else should be fine as-is.

You can now delete the row, and everything else, on your art board – your brush is saved in your brush panel. Now would be a good time to save your document, if you haven’t already.

Step 2: Create your shapes

The tool set for this step is:

Okay, with our brush done, we can move on to making our basic candy cane shape. In this step, I’m going to be using the pen tool, but I know that not everyone knows how to use it well. If you’re more familiar with other tools (like shapes + Pathfinder, or the brush tools), it’s fine to use those instead. The goal is just to get a candy-cane shape that is created with a stroke, and no fill.

If you’d like to give the pen tool a go, or you already know how to use it, go ahead and follow the diagram below to draw your candy cane shape.

When you’ve finished drawing, select and copy your candy-cane shape. You should now have two of them, so your artboard should look like mine:

Step 3: Color, size and position

Apply the new custom brush you made to one of your candy cane shapes by selecting one of your shapes, then clicking the brush in the layers palette. Change the stroke width until you’re satisfied that the shapes look vaguely candy-cane-stripey. After that, change the stroke color to white. I’ve put my white candy cane on a green background below so you can see it clearly, but you don’t need to do the same.

Okay, you’ve got the stripes – set them aside. Take your other candy cane shape, and turn the stroke color to red. Make the stroke nice and thick (mine’s 40pt), and add rounded ends to your stroke by clicking the “round cap” button in your illustrator panel. Below is the progression of shapes, as well as a little diagram of how to add rounded ends to your strokes.

Select your red candy cane. Go to Object menu > Path > Outline Stroke. Then click on your white candy cane. Go to Object menu > Expand appearance. This converts your strokes and brushes to actual shapes.

Set your white striped candy cane on top of your red candy cane. If you try to do this and the white stripes are set behind the red, right-click on the white and in the menu that appears, go to Arrange > Bring to Front.

Resize the red and white as necessary.

On the next page, you’ll learn to add shading, gloss, and effects.

Big web page headers are in design vogue at the moment, so I thought I’d incorporate one into my new site, keeping all links and content below the fold. After I’d dropped the header into the template, I ran into an annoying problem: every time a user clicked a link, the view would bounce back to the top of the page as it reloaded, forcing the user to scroll all the way back down to the content area.

That might seem like an inconsequential problem, but the Herculean amount of mouse action involved discouraged users from browsing more than a page or two. I wanted a simple php-based solution, and I eventually found it on the WordPress forums courtesy of member gelo.tv.

Below, you’ll find a slightly-modified version of the gelo.tv’s original code, and the instructions to implement it. Using simple HTML page anchors and a bit of basic scripting, this code first checks to see whether or not the user has loaded the home page (where we want them to look at the header), and then checks to see whether or not there’s already an anchor hash tag in the URL.

If not, the code will add an anchor tag into the URL, forcing the page view down to a name= anchor set by you.

Step 1: Open your index.php template file, and delete the <body> tag

Step 2: Using page anchors, set the location that you want the page to align with

Anchors create links to a location within the current page. Typically, anchors are used to link to a graphic or paragraph half-way down a long web page.

What we want to do here is decide where in the index.php file to drop our anchor. My anchor is set at the very top of my content div, so whenever a user clicks a link, the page reloads, showing the content aligned to the top of the browser window, and skipping the header.

Anchors are set as a parameter of any other tag. To add a page anchor, add name="youranchorname" to the div tag that begins your content section. For example:

BEFORE: <div id="contentstart">

AFTER: <div id="contentstart" name="anyanchorname">

It doesn’t matter what the name of the anchor is.

Step 3: Insert the following php snippet into your index.php file, right where the body tag used to be.

<?php
global $anchor_var;
$Url="Http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$mystring = '#';
$pos = strpos($mystring, $Url);
if (($pos === false) && (is_front_page() )) {
$anchor_var = false;
} else {
$anchor_var = true;
}
?>
<?php if ($anchor_var) : ?>
<body onload="location='#YOURANCHORNAME'">
<?php else : ?>
<body>
<?php endif; ?>


Don’t forget to replace “YOURANCHORNAME” with the name of your anchor from step 2.

And that’s it. The original code featured an is_home() instead of an is_front_page(), but I found that this caused the script to stop working when I associated a specific page to be the home page in the WordPress back end.

Everything’s going eco these days, and chances are you’ll have the occasion to make some environmental or organic icons, graphics and logos. I hope to help give you a nice basis for the creation of nature-themed graphics. This tutorial is a bit long, and is for intermediate – advanced Inkscape users. You should be familiar with Inkscape’s color and gradient tools, as well as have some basic knowledge of path / pathfinder tools. You won’t be able to do this without a solid knowledge of Inkscape gradients, so if you need a quick lesson on colors and gradients, try this tutorial first.

In three parts, we’ll discuss how to make the body of the globe body of the icon / logo, the surrounding leaf and leaf stem, the water droplets, lighting effects, shadows and extras.

You’ll need to click here to download the vector for the world map silhouette that I’m using – it’s free, and only takes a sec.

Overview

Here’s a close-up of what we’ll be making:

Though this might look rather complicated, there are really only three basic parts to this icon: the glossy button itself, the globe insert, and the surrounding leaf and stem. Here are the three basic parts of this icon / logo split into pieces (the globe is shown on a black background so it can be seen easily):

We’ll be walking through the steps of re-producing each of these pieces in this tutorial. You’ll learn tricks like gloss, drop-shadows, pathfinding and transparency, so bear with me, this might take a while.

Step 1: Create the Glossy Button Background

Let’s first create our aqua glass button so the rest of our artwork has a background on and around which to appear. The button consists of a basic circle with two inner glows, plus one shiny gloss effect gradient. Here’s the button split into its component pieces:

Draw a basic circle, and fill it in with a radial gradient. The stroke should be turned off. The center of the circle should be a light aqua color, with the outer edges a slightly darker blue-green. Here’s my circle, with my gradient stops:

Bottom Glow

Now to make each effects piece. First, let’s create the bottom glow (labeled Piece 2 in the graphic above). Draw an oval in the center of your circle. Mine is shown below in red. The color doesn’t matter right this second. Fill that oval with an aqua to transparent linear gradient. Here is my red circle, aqua gradient, gradient positioning and result:

To finish off our bottom glow, let’s give it a bit of blur. With your oval still selected, use the blur slider to give it a blur of 7.8. Here are my results:

Crescent Side Glow

Now we’re going to make a crescent-shaped side glow (Piece 3). To get a nice crescent in Inkscape, we need to use our path tools. Make a copy of your circle background button (with circle selected, Ctrl + D). Make it the copy a tad smaller than the original. Now copy the smaller circle (with smaller circle selected, Ctrl + D). You should now have the left-most picture below. (I’ve made the copies a different color so they can be easily differentiated). Then, place copy one on top of copy two, like the right-hand picture.

Select both circles (You can select two items by holding the Shift key and using your selection tool to click both). A bounding box should appear around them. Now go to Path > Difference. This is the result:

Color your crescent with a solid light green, and give it a blur of 8.7. Below are my color and blur settings. My crescent is shown on a black background here so you can see it. After that, position the crescent on top of your circle, near the left edge.

Glossy shine

And now for the finishing touch, a glossy shine. Draw an oval near the top of your circle. I’m showing mine in red here so it can be seen, but color doesn’t matter at the moment. Then fill that oval with a white to transparent linear gradient. This is my red oval, white gradient positioning, my gradient stops, and the result:

Okay! That’s our background. You should now have the glossy orb shown on the left.

Before we go on to Part 2, select all of your objects – both of your glows, the background circle, and the gloss gradient – and go to Object > Group to join all the parts of this button together. Remember, to select multiple object, hold down Shift while clicking on each object in turn.

In Part 2, we’ll talk about how to create a leaf, background, and the surrounding green stem.

Caterpillars are way adorable, and 3D cartoon caterpillars are twice as way adorable. Happily, they’re fairly easy to make in Inkscape. This tutorial uses the Inkscape interpolate tool, plenty of radial gradients, and a dainty dollop of node editing. The pen tool, some of you may be happy to note, doesn’t appear once in this tutorial, so if you’re not yet familiar with the use of the bezier pen, give this tut a shot.

Step 1: Create the Body

Draw two circles – one larger, one smaller – a good distance apart from each other, one pink, one green. You can, of course, use any colors you like, but the two colors should be different.

Select both of them, then bottom align them by going to Object > Align and Distribute > Align bottoms. In the graphic to the left, the Align Bottoms button is circled in red.

Select both of your circles again (you can do this by holding down Shift while you use your selection tool to click on each object in turn), making sure to select the bigger one first, and the smaller one second.

Then, with both selected, go to Effects > Generate from Path > Interpolate, and set your settings like this:

Exponent: 0.0

Interpolation steps: 6

Interpolation method: 2

Duplicate Endpaths: check

Interpolation Style: check

Live preview: uncheck or checked, it doesn’t matter

Click “Apply”, and close your Interpolate window.

What you now have is two sets of shapes – your original two circles, plus this:

This will form the basis for your caterpillar’s body. You can delete your original two circles – you no longer need them.

Step 2: Shade the body

What you have now looks and behaves like one shape, but it’s actually just a group of circles. We’re going to add a radial gradient to each circle to give it the appearance of being 3D, but first we need to ungroup these circles so we can work with them individually. With your whole group of circles selected, go to Object > Ungroup (or click Shift + Ctrl + G).

Now, select the first circle, and add a radial gradient, with the current green color in the center and the outer color being slightly darker. After you change the gradient color, you’ll want to switch to your Edit Path by Nodes tool and move the center of the radial gradient to the top of the circle, so that light appears to be shining down from above. Here are my gradient spots and gradient direction settings:

Continue doing this for each circle in the group. Don’t move the circles, just click on them, add a radial gradient, then adjust the gradient color and position. Here’s what mine looks like when I’m done:

Step 3: Make and shade the eyes

Time to add some eyes. Make one white circle and position it over the face. Then, add a white-light grey radial gradient to that white circle. Duplicate your eye (with eye selected, Ctrl + D), and paste it next to the first one. I like to make the second eye a little less wide to give the impression of perspective.

Add some eyeballs by drawing some little grey-black dots over the whitest part of the gradient on both eyes. You don’t need to add a gradient to these dots, but like the second eyeball, I like to make the second dot a smidgen thinner.

Step 4: Feet

Draw a pink circle. Then go to Object > Object to Path to convert the shape into a path.

Switch over to your Edit Path by Nodes tool , click on the top circle node, and pull both handles outwards a smidgen to create an upside-down gumdrop shape.

Duplicate this shape – you should have two of them. Make the second one slightly smaller, change its color to green. Position the pink foot under the last section of the body. Position the second foot (green one) under the second section of the body, like this:

Select both feet by holding down Shift while using your selection tool to click on both of them in turn. With both feet selected, to go Effects > Generate from Path > Interpolate, and set your settings as below:

Exponent: 0.0

Interpolation steps: 5

Interpolation method: 2

Duplicate Endpaths: check

Interpolation Style: check

Live preview: uncheck or checked, it doesn’t matter

You should now have a nicely aligned row of feet, plus your two original feet (hidden behind the new row). Delete your two original feet, then duplicate (Ctrl + D) the row of feet so that you have two rows. You should now have this:

Select your first row (top row shown in picture) and ungroup it (with row selected, Object > Ungroup). Select each foot in the row, and with the foot selected, use the eyedropper tool to click on the corresponding body section just above the foot.

This will transfer the color of the body to the foot, creating a seamless blend of color. You should now have one row of legs that look like they’re part of the upper body:

No need to ungroup the second row of feet – just select them, position them as shown below, and lower them on your artboard so that they’re behind everything else (with row selected, End key or Object > Lower to Bottom):

And there’s your basic caterpillar shape. All that’s left is to personalize it as you like with antennae, eyebrows, and maybe, just maybe, a mouth.

If you’re at all familiar with the Adobe Illustrator blend tool, you’ll know you can create neat vector flowers and swirls using Illustrator’s blend tool. Inkscape has a similar tool called “interpolate”, which produces lovely lines by “blending” two separate lines into one flowing shapes. In this tutorial, I’ll show you how to use the Inkscape interpolate tool to make a vector Buddhist lotus flower.

You should already know how to use Inkscape’s pen tool, gradients and color functions before beginning this tutorial. If you don’t, click here to read about color and gradients in Inkscape.

Step 1: Draw your background

Since many of our lines here are white, they won’t show up against the white Inkscape page. So the first step is to draw a dark background so we can see what we’re doing as we do it. So draw a square, and fill it with a dark blue – medium blue radial gradient, with the medium blue in the center. Below, I have my gradient stops and background.

Step 2: Draw the outline of your petals

The flower itself consists of six parts – five petals, and one yellow glow in the center that looks a bit like a beam of light, and serves as the “pollen” of the flower. Below is what each part of my flower looks like on its own. You’ll notice that both sets of left and right petals are the same, just mirrored, so you only actually have to draw three petals, one center, one middle, and one outer petal, and then copy the middle and outer petals. I’ll walk you through that later in this tutorial.

Lets do the central petal first.

Before we begin drawing, make sure that your document has snapping enabled. Go to File > Document Properties > Snap and make sure your settings look like mine below. Then let’s start drawing. Using your pen tool, draw a single curved line. In my stroke color panel, I’ve set the stroke color to white, and in my stroke style panel, I’ve set the stroke width to 2.0. The fill is turned off.

Now, select the line you just drew, copy it, and paste that copy onto your page. With the copy selected, change the stroke color to pink.

With the copy still selected, go to Object > Flip Horizontal (or you can just press “H” on your keyboard). Line up the top points so that they’re touching each other. Since you’ve turned snapping on in your document properties, this should be pretty easy. You now need to select both of these lines. To select two or more objects at once, hold down Shift while selecting each object in turn.

Step 3: Interpolate the lines

Here’s the fun part. With both objects selected, go to Effects > Generate from Path > Interpolate, and set your settings as I have below. Click “Apply”. Inkscape has now blended your left object and your right object together in a series of steps that smoothly fades one into the other. The result looks something like this:

This is the basic method you’ll use to create each one of your petals. You make two lines, stick them together so the ends touch, select them both and interpolate. You’ll create one outer petal, then copy the interpolated result, paste it into your page, select it, and go to Object > Flip Horizontal.

And you’ll also create one middle petal. Again, copy the interpolated result and flip the copy horizontally.
You now have five petals. Time to lay them on top of each other to create our flower. Arrange each piece.

Step 4: Add the central glow

Nice. There’s our basic flower. Now it’s time to add the center. Using your pen tool, draw a shape that looks like the one below. In your color selection panel, turn the stroke off, and fill the shape with a yellow-transparent red radial gradient , bringing the center of the gradient down to the bottom of the shape. Now position the gradient so the transparency is closest to the top, as below.

All we need to do now is position this shape in the center of the flower. This is what it should look like:

And we’re done! Perhaps a couple more touches for an Asian atmosphere?

Creating vector grunge text in Inkscape is indeed super simple. In this tutorial, we’ll start with the basic Arial Black font, and turn it into a gritty vector in seconds.

This tutorial is suitable for complete beginners. All you need is Inkscape , a free, open source vector graphics editor.

Step 1: Type some text

Select your Type tool , choose a nice bold font, and type out any phrase. I’m using Arial Black 72pt font.

In the Windows build of Inkscape version 0.46, there is a well-documented bug that prevents some users from changing the font of any text using the main font drop-down menu. Hopefully this will be fixed in the next edition of Inkscape, but for the time being, this can be circumvented by selecting your font through the Text > Text and Font… menu item.

Step 2: Convert your text to a path

What you’re going to do here is take your font and turn it into a picture. Right now, your font is behaving like type. You want to get it to behave like a graphic. Luckily, it’s pretty easy to do.

TIP: This would be the time to double-check your spelling and make sure your text says what you want it to say. After you convert your text to a path, you will no longer be able to edit it using the text tool. After this, if you need to re-type your text, you’ll have to start over.

Make sure your text is selected, and in the Path menu, click on Object to Path.

It will appear that nothing has happened after you click this, but rest assured, your type has been converted to a path. If you want to double-check and make sure the conversion took place, just click on your Edit Path by Nodes tool, and you should see all of the new anchor points (nodes) appear around your font:

Step 3: Jitter those nodes

With your text selected, go to Effects > Modify Path > Jitter Nodes…

In the Jitter Nodes options window, input the following settings: Maximum displacement, px 4.0, and check all of the check boxes. I’ve got my settings displayed in the screenshot to the left, but you can set yours any way that you see fit.

If you have the “Live Preview” checkbox checked, you can see how the text will look as you change the settings. Feel free to play around with the pixel displacement until you get exactly the look you want. When you’re satisfied, click Apply, and close the window.

With the settings input as above, here are my results:

You can add a larger maximum displacement in your jitter nodes options to get a more dramatic effect, or lower the displacement to get a slight distortion.

Enjoy!

This tutorial is meant to give absolute beginners a detailed understanding of using and applying colors and gradients in Inkscape, and the different options available to you when working with object color. This tutorial goes very slowly, and covers basics, so if you’re above beginner-intermediate level, this will probably bore you to tears.

Parts of an Object

Every object you draw in Inkscape has two parts: a fill and a stroke. The stroke is the outer boundary of the object. The fill is the object’s inner, or main color. Below, you’ll see I’ve drawn a circle with a red stroke and a yellow fill. By simply manipulating the fill and stroke colors, you can produce almost any shading or lighting effect. Every object, be it text, 2D shape or 3D shape has a stroke and a fill. Stroke and fill can be colored independently of each other, and each have their own settings that are independent of each other. You can turn off the stroke or the fill for any object as well, and just show one or the other.

The Fill & Stroke Manager

To start working with color, you’ll first need to draw an object, then click on it to select it. You should see a bounding box appear around the outer edges of your object as in the picture above. Once the object is selected, you can either click Shift + Ctrl + F to open up the Fill and Stroke manager, or you can click on either of the Fill / Stroke color boxes at the bottom of your screen.

Below is the Inkscape Fill and Stroke Manager.

Notice the Fill, Stroke Paint, and Stroke Style tabs at the top of the manager. The “Fill” tab, which is currently selected in the picture above, allows you to manipulate the color, transparency, and blur of the fill. The “Stroke paint” tab gives you the same set of options for the stroke – you can manipulate its color, transparency, and blur. The Stroke Style tab is a little different – it lets you choose stroke width, stroke style (dotted, dashed, etc.), choose different ways to display corners and edges, and add arrowheads if desired.

This is what my Fill, Stroke Paint, and Stroke Style tabs look like for my yellow circle with a red stroke, shown above:

The Stroke Style tab is fairly self-explanatory. Remember to make sure that the object you want to edit is selected, and then play with the options in the Stroke Style panel. In this case, plain ol’ messing around with it is the best way to learn.

The options on the fill and stroke paint tabs are almost identical, so let’s take a quick look at the row of buttons in the top-left of the color manager. You can toggle between these buttons to fill or stroke your object with a multitude of patterns or colors.

These buttons give you a host of options for manipulating your color – but you cannot have two of these options selected at a time. You cannot, for example, have BOTH a solid color fill and a linear gradient fill on the same object. You can only choose one of these buttons per fill or stroke – this button panel lets you switch between the choices. The part of the shape (fill or stroke) that is effected depends on which top tab (Fill or Stroke Paint) you are currently in. For example, starting with my yellow fill, red stroke circle, if I click the “X” button in the “Fill” tab, the fill is turned off, and I get a red circular outline. Or, if I did the same thing inside of my stroke tab, and turned off the stroke, I get a solid yellow circle, no border.

To turn the stroke or fill back on as a solid color, simply click the solid color button under the appropriate tab.

The two gradient buttons, linear gradient and radial gradient create a color blending effect, fading two or more colors into each other.

I’ll talk more about how to use and manipulate color gradients later, but for now, here’s a quick demonstration of the effects. On the right, I’ve made the strokes thicker (using the Stroke Style panel) so the results are easier to see.

I’m going to skip the Pattern and Unset Paint tabs right now – if you’re just starting out with color in Inkscape, those are a little bit outside the scope of this lesson.

The Color Tabs

The color tabs offer you five different ways to manage, sort, and choose the colors for your project. Below, you can see the same yellow fill color I used in my circle as it’s displayed in some of the different color tabs.

The RGB tab – RGB stands for “Red Green Blue”. It’s called such because it creates colors by blending various gradations of – you guessed it – red, green and blue to achieve the desired color. The RGB palette is a bit limited, and is almost always used exclusively for web graphics. If you’re designing buttons for the web, you should probably be working with the RGB palette. The “A” Slider stands for “Alpha”, a.k.a. opacity. this determines how transparent or opaque your color is.

The “A” slider differs from the opacity slider at the very bottom of the panel. The opacity slider controls the overall opacity for the *whole shape* – stroke and fill. The “A” slider determines the opacity for this ONE color.

HSL Color – Personally, I find HSL the easiest to work with. HSL stands for “Hue, Saturation, Lightness”. You’ll also see the “Alpha” slider here, which, again, allows you to manipulate the transparency of the current color *only*.

CMYK Color – If you are designing for print, brochures or magazines, you should be working with the CMYK palette. CMYK stands for “Cyan, Magenta, Yellow and Key [Black]“, and is the standard palette for many types of printing presses.

Wheel – If you find the sliders hard to use, or you are employing a color theory that is based on angles, you might prefer using the Wheel. It’s a bit more visually-oriented.

CMS – The CMS is your Color Management System. Again, if you’re just starting out with Inkscape colors, it’s unlikely you’ll be needing to use that. But just in case, here’s the manual on the Inkscape CMS: http://en.flossmanuals.net/Inkscape/ColorManagement

If you need to, you can also flip-flop between different color tabs to achieve exactly the color you want.

Summary of Color Application:

1. To add color to an object, draw the object
2. Select the object by clicking on it with your selection tool
3. Click Shift + Ctrl + F to enter your Fill and Stroke Manager
4. Use the top buttons in the Fill tab to add either a solid color, gradient or pattern to the fill, or to turn the fill off
5. Use the top buttons in the Stroke tab to add either a solid color, gradient, or pattern to the stroke, or to turn the stroke off

Remember, fill and stroke color have a similar interface, AND your shape must be selected for the changes you make in the Fill and Stroke manager to show up on your canvas, so if you’re making changes in the color manager and not seeing your colors appear, first check to make sure that your object is selected. Then check to make sure that you’re not editing the stroke when you meant to edit the fill, or vice versa. If the problem still isn’t resolved, check to make sure that your stroke or fill is not turned off.

To find out how to manipulate gradients, check out page 2.