Vectortuts+

How to Create Text-Free Assembly Instructions in Adobe Illustrator

Julie Felton — Thu, 23 May 2013 12:17:18 +0000

Do you like to read assembly instructions? I certainly don’t! If you’re like most people, you would rather skip the text and try to assemble something using the illustrations only. Am I right? Some people like to try to assemble things using no instructions at all! Sadly, there is nothing we can do about this group.

In this tutorial, you will learn how to create concise, easy to follow, text-free technical illustrations for people who need a little guidance but prefer to skip all the reading. As a bonus, you will learn how to make an outdoor broom from discarded two liter soda bottles. You, lucky dog, you!

1. Before You Begin

Step 1

Choose a line style. Most assembly illustrations are black and white line drawings and either use a single line weight or the "thick-thin" method. I prefer the thick-thin method because it adds depth and dimension.

The single line weight is just that. One line weight is used for the entire illustration with no variation.

The thick-thin method typically uses two line weights. The thick line being two or three times thicker than the thin line. So, if the thick line is 1.5 points, the thin line will be either 0.75 points or 0.5 points. It’s a matter of taste.

You’re probably wondering how to determine when to use a thick line and when to use a thin line. It’s not as confusing as it sounds. In fact, it’s quite simple. If an edge meets air, it needs a thick line. If an edge meets another visible edge, it needs a thin line. Thin lines are also used to show surface texture or detail.

Step 2

Pick a perspective. I’m not talking about where you stand on gun control or the unionization of carpenter ants. I’m referring to physical perspective.

Two of the most common perspectives used in technical illustration are parallel perspective and true perspective.

Illustrations created in true perspective have a vanishing point, which means that objects in the distance are smaller than those in the foreground. True perspective is a good choice when you want a less formal, more natural feel to your work. This is the technique we will use for the bottle broom assembly instructions.

Parallel perspective, on the other hand, does not make use of a vanishing point. The most common type of parallel perspective is isometric. In an isometric illustration, no allowance is made for objects in the distance or foreground, as all objects are aligned on a grid. The advantage of this technique is that pieces can be rotated and used over and over again since they do not have to be adjusted according to their placement in the illustration. While the look is more rigid and is not as appealing, it is definitely a time saver.

2. Illustrate the Assembly Steps

Step 1

First, illustrate the components and tools needed to assemble the product: five two liter soda bottles, a broomstick, a small nail, a large nail, wire, a scissors, and a hammer.

Since the project requires five bottles, draw five bottles, not just one. It’s important to be specific. Imagine yourself as the clueless assembler. Ask yourself things such as how many bottles will I need for this stunning project, what size dowel should I use, what type of nails are required, etc.

It’s also very important to show the relationship of one piece to another. For example, the nail should go through the bottle and the dowel but no further. Make the nail a length that will secure the pieces without poking through the other side of the dowel. This seems like common sense, but I can’t tell you how many times I’ve seen assembly instructions with parts that are not in proportion to each other. This makes for a frustrating, confusing experience. And, in extreme cases, can lead to tears and fits of rage. Not that I would know.

Step 2

Now, for a little action!

The first step in the assembly process is to show where to make the initial cuts in the bottles. Start by illustrating the bottom of one of the bottles being removed. The best way to do this is to show the bottle being cut from the perspective of the person cutting it. It’s not necessary to draw a hand holding the scissors, unless you are working for an hourly rate, that is. In that case, go ahead and draw the entire arm. Add a nice watch and a fancy cuff link, too. (I’m kidding, folks. Never cheat your clients. Seriously. Don’t do it!)

Use a dotted line to suggest the cutting path. To create a dotted line, use the Direct Selection Tool (A). In the Stroke panel, you will see a section for dashed lines. If you don’t see it, click on the tiny arrow (the fly-out menu) in the upper right of the Stroke panel. Check the Dashed Line box and enter values in the dash and gap fields until you are happy with the spacing.

Notice how the dotted cut line goes around the entire bottle. Where the cut line would not be visible to the assembler, I ghosted (grayed) the dotted line. I also ghosted the tip of the scissors inside the bottle. That is probably not necessary in this simple illustration, but in more detailed instructions with hidden parts, this technique could clear up a lot of confusion.

Step 3

To show the assembler that four of the bottles need the same cut, create an "after" illustration of four bottles. Position them near the illustration of the bottle bottom being cut off. Since these assembly instructions do not use text, visual cues are very important.

Step 4

This step in the assembly process demonstrates an additional cut that needs to be made on four of the bottles. Illustrate a dotted line and a scissors cutting the neck off of a bottle.

Again, I used a ghosted gray dotted line. It’s important to maintain consistency throughout a set of instructions. Not only is it visually more pleasing, but it also speeds up the job of the assembler. He or she will not get hung up on why one illustration didn’t show a detail that was present in another.

Step 5

To show the assembler that four of the bottles need the same cut, create an "after" illustration of four bottles with their necks removed. Place it near the illustration of the bottle top being cut off.

Always try to see things from the perspective of the assembler. They will thank you.

Step 6

The next step is to cut the "straws" of the broom.

Illustrate the scissors cutting on a dotted line path. The width of the individual broom straws isn’t critical, so exact measurements aren’t necessary. However, you will need to show approximately how many cuts need to be made. Do this by creating cut marks on the bottle. This will give the broom maker a general idea of how to space the cuts.

Step 7

Once again, to help the assembler understand which bottles need to be cut into broom straws, illustrate a lineup of four bottles cut into strips. Place this reference illustration next to the broom straw cutting illustration.

It is seemingly insignificant details like this that are sometimes left out. Have I mentioned lately that it is very important to see things from the assemblers point of view?

Step 8

Now it’s time to illustrate the part that holds the broom straws together.

Illustrate a scissors cutting the final bottle in half.

In this assembly project, exact measurements are not critical. However, if they were, it would be helpful to add an illustration of a ruler or tape measure next to the object. Below is an example of how you could use a ruler to indicate where to cut the bottle. I grayed out all but the 6 inch mark. The assembler will now immediately know the correct measurement. Keep extraneous objects, such as this ruler, as simple as possible. In this example, it would be overkill to add additional tick marks to the ruler.

The simplest solution, of course, is to show measurement lines, as shown in the second example below. It’s not as interesting, but it does the job.

Step 9

Finally, it’s time to illustrate how the sweeper end of the broom goes together.

Create an exploded view illustration showing the order of assembly for the parts. Use arrows to show how the pieces go together. Here, I ghosted the part of the arrow that is inside the bottles. This tells the assembler that the bottles nest into each other. By extending the arrows to the tip of each bottle, it also shows the assembler that the bottles nest tightly.

Exploded views are especially handy when a series of parts needs to come together in a particular order. It’s better to show the entire assembly in one illustration than to show the assembly step by step. This way, a quick glance will give the assemblers everything they need to know in one clear illustration.

Step 10

Time to make some holes to wire the broom together.

First, illustrate the hammer and the large nail making two holes through all layers of bottles. Create an additional straight on view of the nail hole locations for reference. I added arrows to further explain where to make the holes.

This example uses the ghosting technique and indicates that the nail must go all the way through the bottle. It also shows the assembly from the point of view of the assembler.

It’s also important to note that, until this step, the bottles were perfectly round. Illustrating the broom at this angle not only shows the hole-making procedure, but it shows that the broom head has been somewhat flattened. When you can find a way to combine steps, do it!

Step 11

Show the wire going through the two holes and being twisted closed. To help the assembler understand the path of the wire, create a ghosted section of wire behind the broom.

Step 12

The only thing this spiffy broom needs now is a handle. Illustrate the broom handle being inserted into the sweeper end.

The nice thing about several of the illustrations in these assembly instructions is that the components can be used over and over again. I reuse illustrations as often as possible. It saves time and it also keeps the look of the instructions simple and consistent.

Step 13

Finally, illustrate the small nail being hammered through the sweeper end into the broom handle. This illustration also uses recycled parts. There’s no reason to draw the hammer from several different angles when one will work in every situation.

Step 14

Always include an illustration of the assembled product. It’s a nice way of saying "The end" , "Yay, you did it" or “Oops. Something isn’t right.”

Awesome Work! You’re Now Finished!

Congratulations. You now know how to create concise, easy to follow, text-free technical illustrations. You’ve learned about technical illustration styles and picked up a few important tips about how to enhance your technical illustrations using line weights, symbols, textures, exploded views, and ghosting. You also know how to make a nifty little broom. Now, go sweep something!

Create a Coffee Cup Mock Up in Adobe Illustrator Using the 3D Revolve Effect

Cheryl Graham — Wed, 22 May 2013 12:34:56 +0000

Adobe Illustrator’s 3D effects can be a used to create quick, yet realistic product mock-ups. While not a full ray-tracing 3D application, Illustrator’s 3D feature is quite sophisticated, and it has some advantages over its more expensive counterparts. For starters, vector objects and effects can be scaled to any size without loss of quality. It’s easy to re-purpose vector art you’ve already created, plus you don’t have to leave the friendly confines of Illustrator. And as you’ll see in the following steps, the learning curve is not nearly as steep. Let’s get started!

1. Draw the Outline of Half a Cup

The first step is to draw a path that will form the 3D shape. You might want to use a photograph for reference, or a sketch. Or you can just experiment, modifying the path after you apply the 3D effect. The 3D effect, like all Illustrator effects are "live". That means it can be edited as many times as you like, without degrading the quality of the image.

I used a photo reference to draw a simple path, as shown below. You don’t have to draw the entire cup outline, just the right half of it.

2. Add a Lip to the Top of the Cup

To create a the lip on the top of the cup, you can draw a small hook shape, as in the image below:

3. Change the Document Raster Effects Settings

Before applying any effects, go to the Effect > Document Raster Effects Settings. Choose at least 150ppi, preferably 300ppi.

4. Apply the 3D Revolve Effect

Change the Stroke color to white. With the path still selected, go to Effect > 3D > Revolve. Enter the following values in the dialog box. Make sure the Revolve originates from the left edge.

5. Refine the Look of the Cup via More Options

Your cup should now look like the image below. It’s a bit rough, so to edit the settings, click the effect’s name in the Appearance panel.

If you don’t see the surface and lighting options at the bottom of the dialog box, click More Options to reveal them. Increase the Blend Steps to 200. If you have the Preview box checked, you’ll see that the surface of the cup is now much smoother.

6. Change the Lighting of the Cup

In the lighting section, click the new icon to add a new light. Adjust the Intensity and Ambient Light as shown below. You can drag the lights around on the sphere to position them.

Click on the other light and adjust its settings as well. The light that is currently active will have a small square around it. Make sure you have the Preview button checked so you can see your updates.

With the new shading settings, the cup should look something like this:

7. Turn Your Logo into a Symbol

To apply the logo, you created in a previous tutorial, to the 3D object, it must first be made into a Symbol. Drag the logo into the Symbols panel.

You can give the new symbol a name if you wish, and you can ignore everything else in the dialog box.

8. Go Back into 3D Revolve Options to Map Art

Click the 3D effect in the Appearance panel to edit it again, then click Map Art in the 3D Options dialog.

Each if the object’s surfaces is represented in the Map Art dialog. When you have a surface selected from the field at the top, its corresponding surface on the object will be highlighted in red. Light gray areas on the surface thumbnail in the center of the dialog are those that can be seen, and dark gray areas are those that are hidden from view.

9. Apply the Logo to the Correct Surface

Once you’ve located the correct surface, choose the logo symbol from the Symbol drop-down menu.

Make sure you have the Preview button checked, then adjust the position of the symbol by dragging it within the surface thumbnail. You might have to stretch it a bit horizontally, depending on your original cup shape.

11. Add Grain to the Cup to Give it Texture

For added realism, keep the cup path selected and go back to the Effect > Texture > Grain. Choose Soft grain, with a low intensity and a medium contrast.

This will add a subtle texture to the cup, making it look more like Styrofoam. Make sure the Grain effect is below the 3D effect in the Appearance panel, otherwise you’ll get some unexpected results!

Sit Back & Relax, You’re Now Finished!

Once you are satisfied with the 3D settings, you can create a new Graphic Style and quickly apply it to other paths to create different mock ups. Below are two examples, with their original paths. Creating a quick and easy mock-up with 3D is a great way to show your client how their logo can be used in a variety of scenarios.

What’s New With Adobe InDesign CC: Interface Improvements

Martin Perhiniak — Tue, 21 May 2013 12:07:20 +0000

In this video we are going to show you the new look of Adobe InDesign CC. You can learn how to set a custom interface brightness, how to see preview of your new documents and how can 64bit and Retina Display support help you to work more effectively with Adobe InDesign CC.

Creating a Simple Kawaii Yeti With Basic Shapes in Adobe Illustrator

Amanda Tepie — Mon, 20 May 2013 12:13:26 +0000

In this tutorial, I am going to show you how to make a cute monster character in Adobe Illustrator using basic shapes, Pathfinder panel, Width Tool, and Strokes. You will be able to apply these techniques to create other characters. Let’s get started!

1. Create the Body of the Yeti

Step 1

Start off by creating a New Document (CMD + N) and set the artboard size to 600 by 600px. Create a square the size of the artboard using the Rectangle Tool (M) and fill with a light blue color (R=182, G=235, B=239).

In the Layers panel, create two layers. The top layer is renamed "Character" and the bottom layer is renamed "Background." Lock the bottom layer.

Step 2

Select the top layer "Character". We are going to create the body shape now. Select the Ellipse Tool (L) and click anywhere on the board. Enter width: 290px and height: 240px. Fill with white.

Using the Direct Selection Tool (A), select the top point. While holding SHIFT, drag the top point approximately 80px up.

Select the top point again. Select the left handle and drag it to the left, so it looks like this:

Select the bottom point, and SHIFT drag down about 10px.

Step 3

Now to make it symmetrical, create a rectangle that is larger than the body with the Rectangle Tool (M). With the Selection Tool (V), place it so that the left edge lines up with the center of the body shape. Select both shapes. Bring up the Pathfinder panel and click Minus Front.

Step 4

Select the half and go to Object > Transform > Reflect. Select the Vertical Axis and hit Copy. Drag the other half to the right so that they snap in the center. Select both shapes and in the Pathfinder panel, hit Unite.

2. Create the Legs Using an Ellipse Base

Step 1

We are going to create the legs now. Using the Ellipse Tool (L), create a circle 60px wide. With Direct Selection Tool (A), select the bottom point and SHIFT-drag down about 45px.

To make the bottom less pointed, select the bottom point with the Direct Selection Tool (A). Drag the left handle slightly to the left while holding SHIFT. Do the same to the right side.

Step 2

Place the leg at the bottom left of the body. Then drag a copy to the right. To do this, hold down ALT + SHIFT while dragging the shape.

Select the body and two legs and in the Pathfinder, click Unite.

3. Add an Outline to the Body of the Yeti

Select the body and outline it with 6pt Stroke Weight and click Round Cap and Round Join. I picked a dark brown color (R=96, G=60, B=54).

4. Give Your Character a Cute Face

Step 1

To make the face shape, make an ellipse using the Ellipse Tool (L) with width: 210px and height: 120px. Fill with a darker blue color (R=96, G=198, B=208). Direct select (A) the bottom point and SHIFT-drag up about 10px.

Place this shape in the upper half of the body.

Step 2

Now on to the eyes. Create an ellipse using the Ellipse Tool (L) with width: 30px and height: 38px. Fill with the same dark brown color. Select the ellipse and go to Object > Path > Offset Path. Enter -4px in Offset and hit OK.

Step 3

Select both shapes and in the Pathfinder panel, hit Minus Front. Create a larger rectangle with the Rectangle Tool (M) and place it over the bottom half of the shape. In the Pathfinder again, hit Minus Front, so you’re left with an arch shape.

Stroke the eye with the same color using 3 pt weight, Round Cap, and Round Join. Place the eye on blue face shape and duplicate (ALT + SHIFT-Drag).

Step 4

Next is the mouth. Create an ellipse using the Ellipse Tool (L) with width: 36px and height: 38px. Fill with the same brown color. Make a larger rectangle using the Rectangle Tool (M) and place it over the top half of the ellipse. Select both shapes, and in the Pathfinder, hit Minus Front.

Step 5

To make the tongue, create the same ellipse and place over the semi circle shape. Select the semi circle, Copy it (CMD + C) and Paste in Front (CMD + F). Now select the semi circle and the ellipse. In the Pathfinder, click Intersect. Fill the tongue shape with a pink color (R=238, G=96, B=146).

Step 6

Select the brown semi circle shape and outline with 4pt Stroke Weight, Round Cap, and Round Join. Select Align Stroke to Outside. Select all shapes of the mouth and Group together (CMD + G). Place the mouth in between the eyes.

Step 7

Let’s makes the cheeks. Simply make an ellipse with the Ellipse Tool (L) 28px wide and 14px high. Fill it with the same pink color as the tongue. Place it below the left eye and drag a duplicate to the right side (ALT + SHIFT-drag).

5. Create a Quick Hairstyle to Your Yeti

Step 1

Now we’ll make the hair. Using the Pen Tool (P), draw out the hair with a white fill. Draw the left "leaf" shape first. Continue to draw the second and third leaf shapes. Do not close the path. See this great Pen Tool Guide if you’re unfamiliar with the Pen Tool.

Place the hair shape above the face.

Step 2

To make the hair’s shadow, Copy the hair shape (CMD + C) and Paste in Back (CMD + B). Move it down by SHIFT-dragging. Fill it with a darker blue color (R=66, G=146, B=169).

The top right corner of the shadow is still showing. To hide this, Direct Select (A) the top right point and move it to the left.

Step 3

Define the hair line by stroking the hair. First Copy the white hair shape (CMD + C) and Paste in Front (CMD + F). Select the hair shape and Stroke with the same brown color, 5pt Stroke Weight, Round Cap, and Round Join.

6. Add a Scalloped Edge Shape to Create the Tummy

Step 1

Let’s create the belly. First create an ellipse using the Ellipse Tool (L) with width: 112px and height 80px. Fill it with the same blue color as the face. Then outline it with the same color with a 32pt Stroke Weight and Round Cap. Check Dashed Line, enter 0pt in dash, and 22pt in gap. This will create a scalloped edge.

Place the belly below the face.

Step 2

Create the belly button by making a Line using the Line Segment Tool (\) 16px long. Stroke with the brown color, 5pt, and Round Cap. Then Copy it (CMD + C) and Paste in Front (CMD + F). Rotate the copy 90 degrees. Select both lines, Group them (CMD + G), and rotate 45 degrees.

Place it in lower portion of belly.

7. Give Your Character Some Simple Arms

Step 1

Let’s give it some arms. We will use the Pen Tool (P) and Width Tool (SHIFT + W) to do this. Start off by drawing a simple curved line with the Pen Tool (P) as shown below. Give it a white Stroke with 3pt Weight and Round Cap.

With the line selected, select the Width Tool (SHIFT + W). Enlarge the top point to about 26px and the bottom point to about 40px.

To turn this into a shape, select the line and go to Object > Path > Outline Stroke.

Step 2

Create the arm’s shadow like we did earlier for the hair. Copy the arm (CMD + C) and Paste in Back (CMD + B). SHIFT-drag it down and fill with a gray color (R=109, G=110, B=112). Set Opacity to 80%.

Step 3

We need to open the path. Zoom in so you can see the points better. Use the Scissors Tool (C) to cut the path at two points towards the top. Delete the top portion.

The shadow is peeking through. Simply select the top point and move it down.

Step 3

Now we can outline the arm. Select the arm and Stroke with the brown color, 5pts, and Round Cap. Select the arm and its shadow. Group them together (CMD + G). Place the arm on the left side of the body. Then select the whole arm and go to Object > Transform > Reflect. Reflect in the Vertical Axis and Copy. SHIFT-drag it to the right side.

8. Create Two Striped Horns

Step 1

This monster needs some horns. We can make them the same way we did as the arms with the Width Tool (SHIFT + W). Using the Pen Tool (P), draw a curved line and stroke it with yellow and 3pt. (R=255, G=240, B=104). With the Width Tool (SHIFT + W), enlarge both points like so:

Select the line and go to Object > Path > Outline Stroke to turn it into a shape. Then, outline it with a 6pt Stroke Weight in dark brown.

Step 2

Now we need to place the horn behind the monster. Select the horn and hit CMD + SHIFT + [ . The horn was sent behind everything. Position the horn on top and rotate if needed.

Step 3

Let’s add some stripes to the horn. Select the horn and go to Object > Expand and hit OK. Then Ungroup (CMD + SHIFT + G). Select the yellow fill shape and Copy it (CMD + C) and Paste in Front (CMD + F). Select both fill shapes by Drag-selecting the whole horn and SHIFT+clicking the outline shape to deselect it. Now that you have the two fill shapes selected, go to Object > Clipping Mask > Make (CMD + 7).

Double-click the fill shape to get into the mask.

With the Pen Tool (P), a darker yellow color (R=242, G=212, B=66), Stroke 12pt, draw 3 stripes. Then click out of the mask.

Step 4

Select the whole horn and go to Object > Transform > Reflect and hit Copy. SHIFT-drag the horn to the other side.

9. Add Small Details to Refine Your Illustration

Step 1

Let’s add some details to the feet. To do this, use the same method as the previous step by making a Clipping Mask with the body. Click into the mask. Now let’s create the foot detail. Make a rectangle the covers the bottom third of the leg with the Rectangle Tool (M). Fill it with the same color as the belly.

Then make three small equal ellipses with the Ellipse Tool (L) and place them on top of the rectangle. Group the ellipses (CMD +G).

Select the grouped ellipses and rectangle, bring up the Pathfinder, and hit Minus Front. Duplicate it to the other side (ALT + SHIFT-drag) and click out of the mask.

Step 2

The monster is almost complete! Add a gray shadow by making an ellipse 250px wide and 28px high. Place it behind everything with (CMD + SHIFT + [ ) and at the bottom.

Step 3

The last step is to add a background. Yetis live in the mountains, right? I decided to create abstract mountains with simple triangles. First lock the "Character Layer" and unlock the "Background Layer". Select the "Background Layer". To create a triangle, select the Star Tool and click anywhere on the board. Enter 10px in Radius 1, 20px in Radius 2, and 3 Points. Fill it with a pale blue color (R=235, G=251, B=252). Rotate the triangle 180 degrees. Duplicate and arrange the triangles to form "mountains".

Lastly, change the colors of the triangles to create a gradient effect.

ROAR! Your Not So Scary Yeti Is Complete!

Our Yeti Monster illustration is finished! You can now create a variety of monsters using all the techniques you learned in this tutorial. I hope you enjoyed making this cute monster.

I later created a pattern and made a plushie of my yeti character. You can find out how I did by checking out my plushie making tutorial over on Crafttuts+.

Workshop: Vector Critique #34

Sharon Milne — Fri, 17 May 2013 14:37:03 +0000

Vectortuts+ is all about helping people turbo charge their skills, and today we have another special community post that will help our readers take their images to the next level. The best thing is, you can be part of it too! Find out more at the jump.

How to Participate:

This workshop contributor has offered a piece of work that they would like help with, please keep this in mind when you share your thoughts. The images are not perfect, but they can be with the right advice and some friendly encouragement. (Vectortuts+ reserves the right to delete any rude comments)
If you’re better with pictures (let’s face it, most of us are) feel free to take a screenshot of the image using Little Snapper, Skitch or a similar program and paste a link to the annotated image in the comments section with an explanation of the tweaks.

If you want to take part in the next Vectortuts+ Workshop:

Add your work to our facebook photo gallery or submit it via the Tuts+ Workshop form, with a description about the piece and the help/advice you’re looking for. We will chose one to be published on our site as part of the next Vectortuts+ Workshop, if you’re not chosen straight away – don’t worry – your work will be chosen for a future session.

Designer: Michael Samez

Details:

" I have worked in the place where we have to design teddy bears, so I drew one that doesn’t have feet.. "

Feedback

What are your thoughts on the work above? Critiquing work helps the artist see new possibilities, and it also helps you learn to evaluate art, which will help you take that same analysis and apply it to your own work. Participate in the comments below with your opinions on how to improve the work above.

Tuts+ Premium Cash Back Offer: 3 Days to Go

Joel Bankhead — Thu, 16 May 2013 22:30:15 +0000

This offer ends soon! Act now and don’t miss out on cash back when trying a monthly Tuts+ Premium subscription.

At $19 a month, Tuts+ Premium is fantastic value. But it’s even better when we hand your first $19 right back to you!

For a limited time we’re offering $19 cash back to new Tuts+ Premium monthly subscribers when signing up via PayPal. If you’ve been thinking about checking out our extensive library of courses, tutorials, eBooks and guides there’s never been a better time to join up and dive in.

This offer ends at noon on the 20th of May AEST, so act fast.

Become a Tuts+ Premium Member and take your creative & technical skills to a new level.

What can you learn on Tuts+ Premium? Glad you asked! Currently, more than 15,000 members are sharpening their skills in a wide range of areas including web design, web development, Photoshop, vectors, video effects, and many more.
With Tuts+ Premium you learn from expert instructors in every field, such as:

Designer Justin Maller (Nike, Verizon, DC Shoe Co.)
Illustrator Russell Tate (McDonald’s, Coca-Cola)
Developer Burak Guzel (Software Engineer at Facebook)

Join now and get instant access to your very own library of courses, tutorials, and eBooks, available whenever you need them. Become part of a community of over 15,000 members and start getting better at the skills you care about. Our dedicated team adds new content weekly so there’s always something fresh to sink your teeth into.

Join Tuts+ Premium

Create a Feisty Female Vampire and Her Pet in Adobe Illustrator

Yulia Sokolova — Thu, 16 May 2013 12:51:36 +0000

In this tutorial I’m going to show you the inspiring process of drawing a Vampiress and her Voodoo-pet in a vintage portrait illustration with grungy elements in Adobe Illustrator. We will move step-by-step from sketch to the final vector colored image using custom brushes, gradients and the Pen Tool. Ready? Let’s get started!

1. Turn Your Sketch into Vector Outline Using Custom Brush

Step 1

Create a New Document of A4 size, Color Mode: RGB.

File > Place your sketch in the middle of the artboard. Double click on the layer and select the Template check box. As you may notice, Dim images option is checked by default – it makes the image more transparent and it will be easier to create an outline above it. Lock the sketch layer and create a new one.

Step 2

It’s time to make the outline for our sketch. For this purpose we will create our own brush. Choose the Ellipse Tool (L) and create a small extended ellipse with black fill. Drag and drop it on the Brushes panel (Window > Brushes) and choose Art Brush in the pop-up window.

Choose Tints in Colorization Method and leave other options as default. This way we’ll be able to recolor the whole outline or its separate parts in different colors.

I’ll be using the Paintbrush Tool (B) to draw the outlines, however if you’ve not got a steady hand, you could use the Pen Tool (P). We can adjust some options of Paintbrush for more convenience. Double-click on the Paintbrush Tool (B) and set Fidelity to 4 and Smoothness to 2% in order to make our line more flowing and smooth.

Play with the Stroke Weight – make the strokes, which show the outer lines of the image more thick and small inner strokes more thin. I usually vary Stroke Weights from 1px to 0.25px: this helps to show the perspective of our image and to highlight the details. I add a lot of thin and short strokes to give the image a vintage engraving-like look. The good thing about the Paintbrush stroke is that you can always adjust the line by moving anchor points with Direct Selection Tool (A) and by adding/deleting anchor points with Pen Tool (P).

Tip: If you want to resize your image together with your outline, don’t forget to check the Scale Strokes & Effects box, which you can find in Edit > Preferences > General.

2. Make Her Eyes Enchanting Using Blending Modes and Gradients

Step 1

I always start detailing and coloring portraits with the eyes. Eyes are the mirror of the soul. The most important thing in any portrait is creating a vivid glance which is able to enliven the character. If you manage to capture the character’s individual features in his eyes and make them bewitching for the viewer – you’ll succeed in making good portraits.

Let’s give her a true vampiric look! Take the Pen Tool (P), set fill color to black and draw a curve line making the upper eye-lid.

Step2

Add a few more curves for the lower eye-lid and eye-lashes, using Pen Tool (P). Try to use less anchor points and edit your lines by moving the handles of anchor points keeping your lines neat and smooth. There is a great tool which I use for editing my line art: Convert Anchor Point Tool (Shift + C). It turns an anchor point either to corner (if you click on anchor point) or to smooth line (click and drag the handle) and is used to move the anchor handles separately.

Step 3

Now change the fill color to white, draw a shape, which will form the eye-ball and send it to back (Control + Shift + [). Make a copy above this shape (Control + C > Control + F) with no stroke and no fill, we will need it later.

Step 4

Let's move on and draw an iris. Take the Ellipse Tool (L), draw a circle, holding down Shift button and set fill color to red to give it a predatory look.

Draw a smaller circle inside and make its color darker to form a pupil. You can add the same color to the top of the iris using Gradient Tool (G), to make the colors merge into each other.

Add a zig-zag round shape using Pen Tool (P), fill it with linear gradient from lilac to black and change Blending Mode to Screen in the Transparency panel (Window > Transparency) to make the eyes more bright and glowing.

Let's make a highlight in the eye: draw a drop shape using Pen Tool (P) and fill it with linear gradient from brown to black, setting the Blending Mode to Screen.

Continue adding as many details and reflections to the eye as you like to make it more whimsical and vivid.

Step 5

Select and Group all parts of the iris (Control + G). Under the iris-group we have a duplicate of the eye-ball shape with no stroke and no fill. Choose this copy and bring it to front (Control + Shift + ]). Select both iris-group and this shape, right-click on them and make a Clipping Mask (Control + 7). Now the iris is inside the eye.

Step 6

Let’s add some shadows to the eye-ball. Select the lower white shape and apply a three-colored linear gradient with light-gray color on its ends and white color in the middle, as shown on the screen shot. This way we will form a shadow in the corners of the eye.

Step 7

Draw a half-moon shape under the upper eye-lid using Pen Tool (P), set Blending Mode to Multiply and apply a linear gradient to form a shadow. As you can see, you can add volume to objects very easily using such technique.

Step 8

Let’s add more details to the upper eye-lid to make the eyes more detailed and glittering. Draw some small round sparks using Ellipse Tool (L) with radial gradient on the eye-lid and on the iris, setting the Blending Mode to Screen.

Step 9

Let’s form the second eye in the same way, starting from shaping the eye-lids, the eye-ball and adding the iris.

You can copy and paste the iris-group which we already made for the first eye to speed up your work. Place it on the second eye and use the Clipping Mask. Don’t forget to add some minor, but important details to both eyes – highlights and reflections in order to "water" the eyes.

3. Color The Parts of The Vampiress Using Pen Tool and Separate Shapes

Step 1

Let’s start coloring our image. Create New Layer and place it under the layer with the outline. Add separate shapes for her face, neck and body using Pen Tool (P) and filling them with flat skin colors.

Draw separate shapes for body, hair, dress and other objects.

Step 2

At this step we will use gradients so that our image will look more alive and realistic. Choose a face shape and apply linear Gradient (G) to it, the upper part of which will be slightly darker. This will form a shadow under the Vampiress’s bangs. Remember to keep the overall tone of her skin light, because she is a vampire, pale and cold. Hence, no romantic blush on her cheeks this time.

Add gradients to other parts as well, turning darker points of gradients to the places which are supposed to be in shadow.

Step 3

Now we are ready to add some highlights and shadows to the areas around the eyes in order to emphasize them and to make her face more dimensional. Draw a shape on the upper eye-lid using Pen Tool (P), fill it with linear gradient and apply Blending Mode Screen to it. This will form a highlight.

Now add a shadow next to the inner corner of the eye. Fill the shape with linear gradient, set Blending Mode to Multiply. Continue adding shadows and highlights around the eyes to make them more pop up.

Step 4

Add details to the lips and nose using the techniques described above to add depth to the image. Add sparks, shadows and highlights.

After finishing up with face and add details to her hair, dress and Voodoo-pet.

The more details you draw, the more interesting and fancy your image will look.

4. Add Special Details Using Scatter Brush

Step 1

At this step I decided to add some freckles and spots to the girl’s face to make it more cute. For this purpose, draw a small spot (size of a freckle) with Ellipse Tool (L), drag and drop it to the Brushes panel, choose Scatter Brush and play with options, setting them to Random, as shown on the screen shot.

Step 2

Draw a few lines with the Paintbrush Tool (B) using the newly created brush. You can change size, scatter and spacing of the freckles at any moment by returning to the brush options from the Brushes panel.

Step 3

Select the brush strokes and go to Object > Expand to turn our paths into separate objects.

Step4

If you are using Adobe Illustrator CS6, you may face a problem at this step: after Expanding each object may have a square Clipping Mask which makes it hard to recolor. In order to fix that, go to Object > Path > Clean up, select all the check-boxes in the pop-up window and hit OK.

Step 5

Now you can make some freckles slightly darker or lighter to give them realistic look.

5. Make Stylish Vintage-Looking Background

Step 1

Now it’s time to add a background to our image. Create New Layer above the sketch layer. Take a Rectangle Tool (M) and draw a rectangle shape filled with radial gradient from light-brown in the middle to dark-brown.

Step2

Draw a vertical rectangle shape at the left side of the artboard, set its Blending Mode to Multiply and copy the shape to the right side by holding Alt + Shift and dragging the shape.

Select both vertical shapes and go to Object > Blend > Make. Then choose Object > Blend > Blend Options and set Specified Steps to 8.

Step 3

Draw an oval using Ellipse Tool (L) and fill it with dark-brown radial gradient.

Step 4

At this step I added a pattern made of simple repeating shapes to give the frame a textured look. I duplicated the oval and used a Clipping Mask to place the texture inside.

Move on and add a frame by duplicating the oval to back twice (Control + C > Control + B > Control + B). Make the lower copy slightly larger and use Blend (Alt + Control + B) to make a smooth color mixing from lighter brown in the middle (upper oval copy) to darker brown at the edge (lower oval copy).

Step 5

To make your work more neat and easy to edit, gather all parts of the Vampiress into separate sub-groups (Hair, Eyes, Dress, etc…) and put them into a Clipping Mask so that all the sub-groups can be found inside.

Step 6

Time to add some grungy effects to the background to make our image more old-fashioned. For this purpose we are going to use some nice brushes. Go to Window > Brushes, hit the Brush Libraries Menu button and choose Artistic > Artistic_ChalkCharcoalPencil in the folding menu.

Draw horizontal and vertical lines with Paintbrush Tool (B) by holding Shift to make them straight and forming a frame. Use several different Charcoal textured brushes from the list to make the frame more grunge-looking. You can add more small strokes in the corners.

When you are satisfied with the result, choose all the textured strokes and go to Object > Expand in order to turn them into objects. Edit them with Eraser Tool (Shift + E) by erasing some parts and adding more blank points and scribble strokes.

Finally, select all the parts of the grungy frame, group them and set Blending Mode to Multiply.

Step 7

Last but not least thing that I want to do here is to adjust the colors a bit, to make them more saturated and to level the overall tone of the picture. Actually, this is quite easy and at the same time very flexible option. All you have to do is to create a rectangle on the top of the image (I put it on the separate layer above all other layers), fill it with linear gradient from beige to pale lilac and set Blending Mode to Overlay. That’s it! You can make the colors of your gradient fill more bright and saturated or change the opacity of the rectangle to make it more transparent. Adjust it to your taste and it will give your image nice look.

Great Job! You’ve Completed Your Artwork Successfully!

A few final strokes – and you’re finished. The Vampiress vintage portrait is ready. I hope you’ve discovered some new useful Adobe Illustrator tricks from this tutorial and it will help you in your future projects. Good luck!

Create a Resting Owl Scene With Brushes and Pattern in Adobe Illustrator

Jude Christoper Roxas — Wed, 15 May 2013 12:50:23 +0000

In this tutorial, we will be creating a resting owl scene using basic shapes and brushes in Adobe Illustrator. We will also be utilizing the Paintbrush Tool to create different Stroke Weights for the tree and we will be discussing various techniques for shading and designing with patterns. Let’s get started!

1. Plan Your Composition By Sketching Out Your Idea

It is important that you sketch out your ideas first before you proceed to your vector illustration. For this tutorial, I roughly sketched my ideas into Adobe Photoshop and when I sketch, I always plan ahead on what shapes or techniques to use so everything will become easier when I will be ready to deal with rendering in Adobe Illustrator.

For this one in particular, I thought of using circles for the main body, the eyes and for the claws and a triangle for the ears. Then, instead of using the Pen Tool (P) for the tree and other curvy shapes, I thought of using a Paintbrush Tool (B) instead.

2. Create a New Document

Let’s start by creating a document by hitting Control + N on your keyboard or you can go to File > New. I’ve used the following settings for this illustration:

3. Add a Rectangle for the Background Base

Step 1

Based from my own experiences, I find it easier in my workflow to put the base background first so that, as soon as we start doing the main elements of the illustrations, it will help us assess if the colors that we will be choosing will be effective for the illustration. Since I plan on doing a night scene for this tutorial, I decided to use a dark violet color instead of the usual dark blue or black.

Select the Rectangle Tool (M) from your Tools panel (Window > Tools) and drag down the cursor until you cover the empty space on your artboard. By default, Illustrator will give you a rectangle shape with white fill and black stroke colors.

Step 2

With the rectangle shape that we just created still selected, double click on the Fill box to activate the Color Picker Tool and use the following color R=92, G=50, B=62.

Step 3

After changing the fill color and with the rectangle shape still selected, activate the Stroke option by clicking on it or hit X on your keyboard to shift between Stroke and Fill. Click the small box with a diagonal red line just below it to remove the stroke color from the shape. You’ll know if you’ll succeed if you’ll see the Stroke box with a red diagonal line at the center too.

Step 4

Now we’re all set, your white rectangle shape should now look like this. Now to avoid confusion, rename the first layer on the Layers panel (Window > Layer) by double clicking it and type in “Base background” and toggle on the Lock icon so it will not move.

4. Create the Base Shapes for the Owl’s Body

Step 1

Select the Ellipse Tool (L) and draw an even circle on your artboard. Color the Fill with R=225, G=94, B=50 and remove any stroke colors.

Step 2

Select the circle that we just created and using the Direct Selection Tool (A), select the top point and while holding down the Shift key on your keyboard, drag it a little upwards. And after that, hit V on your keyboard to get to the Selection Tool (V) and therefore, showing us the Bounding Box for transformation purposes. Place your cursor at the center-left marker of your bounding box and drag it a little to the left. Rename the layer as “Body”.

Also remember to set a fine balance between the height and the width of the egg shape as this will define the shape of our main character.

5. Create the Left Eye

Step 1

Select the Ellipse Tool (L) again and create a circle with a R=255, G=250, B=132 fill and no stroke color. Don’t worry about the size at the moment as we are just dealing with the preliminaries and will deal with sizes later. Select the new circle and copy it Edit > Copy and Paste in Front (Edit > Paste in Front) and change the fill color to R=192, G=210, B=62 and with the green circle still selected, grab the Eraser Tool (Shift + E) and erase half of it while holding the Alt key on your keyboard. Holding the Alt key will give help you erase shapes straightly. Resize it a little and place it just like in the image below.

Step 2

Now, create a smaller circle with R=168, G=39, B=67 fill and no stroke color and copy it Edit > Copy and Paste in Front (Edit > Paste in Front) and move/drag the copied circle to the lower right part of the original circle. Now, select the two small circles and go to Window > Pathfinder and select the second option under the Shape Modes section called Minus Front. You now have the shape of the iris so just resize and position it between the green and the yellow base shapes for the eyes (you can arrange it in the Layers panel (Window > Layers)).

6. Create the Beak Base Shapes

Step 1

For the next step, we are going to create the beak of our owl. To do this, make a a circle using the Ellipse Tool (L) with R=255, G=230, B=53 fill color and no stroke color. Now this is going to be a little tricky so be sure to follow the next steps carefully. With the circle that we just created still selected, activate the Direct Selection Tool (A) and select the bottom anchor point of the circle. Right after you select the point, you will notice that a new panel called the Anchor Point is displayed. Go though the Convert and select the Convert selected anchor points to corner.

Step 2

You will then notice that the circle will have a dramatic change in shape. Now, activate the Direct Selection Tool (A) again and while pressing the Shift key on your keyboard, drag the bottom points of the direction line in the left and right side towards their respective corner points. Then activate the Selection Tool (V) and resize it to your liking.

Step 3

Now, for the bottom part of the beak, we need to create three new circles. To do this, create a new circle using the Ellipse Tool (L) again with the same color as before. Select the new circle and copy it Edit > Copy and Paste in Front (Edit > Paste in Front) and change the fill color to R=255, G=188, B=53 and make it smaller. Then repeat the same thing but now, change again the color to R=122, G=0, B=28. And you will have something like this. (Be sure to arrange it similar to the screenshot below too.)

Resize it in a way and make them look like an oblong and place it below the upper part of the beak.

7. Resize and Rearrange the Initial Parts of the Body

Before we proceed to the next steps, we first need to arrange the final size of the eye and the beak and arrange those accordingly. Please refer to the simple guideline that I prepared below. As you can see, I resized the eye and the beak and placed them that will give a proper balance for the body of the owl. The upper part will be for the eyebrows, the next part is for the eyes, the third horizontal like is for the end of the beak and finally, the last part is reserved for the lower part of the owl’s body. These are just initial guidelines. You are of course free to rearrange this once everything is done.

8. Create the Belly of the Owl’s Body

Step 1

Create an oval using the Ellipse Tool (L) and change the fill color to R=192, G=210, B=62 and place it below the eyes and the beak and just above the orange base body.

Step 2

Let’s start creating a quick custom brush to add detailing. Create a new circle again with the Ellipse Tool (L) and fill it with R=168, G=39, B=67. Using the Eraser Tool (Shift + E), erase the top part of the circle while pressing the Alt key on your keyboard as you drag the tool along.

Step 3

Open the Brushes panel (Window > Brushes) and select the half circle that we just created and after that, click on the New Brush option.

A new window will pop out and select the Pattern Brush option from the list and click OK. Then a new window will pop out and just rename the brush as “Half Circle” and just leave the default settings as is and click OK. You will then notice that the new brush will appear in your Brushes panel.

Step 4

Activate the Pen Tool (P) and make a convex line without any fill color and with any stroke colors. And then, after that, click on the “Half Circle brush” from the Brushes panel that we just created and you’ll have something similar below.

Step 5

With the array of the half circle still selected, go to Object > Expand Appearance and watch how your brush stroke was converted to a real shape. We need to do this because we want to use solid shapes while dealing with the Pathfinder panel later. And on top of that, when you want to resize the brush stroke, you’ll end up having half circles in a new number.

Step 6

Right after that, select the shape of the half circles and Copy (Control + C) it as we will be needing it for later: do not paste anything yet. And with it still selected, hold down the Shift key on your keyboard and select the green part of the body and activate the Pathfinder panel (Window > Pathfinder) and select the Minus Front option and you will have something like this.

Step 7

As you can see, the half circle shape used its form in cutting down the green oblong that we and therefore, the half circle shapes disappeared. The reason why we copied it earlier is so we can put it back again to our illustration. Now, Paste in Front (Control/Command + F) the shape and activate the Direct Selection Tool (A) and select the upper part from the original green shape and hit Delete on your keyboard and you’ll have something like this.

9. Create the Ears and the Wing

Creating the ears and the wing is very simple. Just activate the Pen Tool (P) and draw the shape that you want that you think will fit best to the illustration and fill it with the color R=168, G=39, B=67 and carefully placed it at the back of the main shape of the body for the ear and in front of the owl’s body for the wing.

10. Create a Custom Brush

Step 1

For this part, we are going to create a custom made brush that that we can also use to design various things later in the illustration. It is important that you can utilize a single brush that can also be used to other things. So for this illustration, we will be using this brush for the eyebrows, the tree and the markings of the tree. So let’s get started.

First, create a square with the Rectangle Tool (M) and activate the Delete Anchor Point Too (-) (you can also activate this tool by long clicking the Pen Tool in the Tools panel) and delete the lower right side point of the square.

Step 2

Activate the Rotate Tool (R) and rotate the triangle just like in the second picture below. Then activate the Direct Selection Tool (A) and drag down bottom anchor point until you have an ice cream cone shape.

Step 3

Now as you can see, the width of the cone is a little bit wide so we need to make it thinner. Using the Direct Selection Tool (A), drag the the left and the right anchor points on the top part of the cone until you have a thinner cone just like below.

Step 4

After that, activate the Ellipse Tool (L) and draw a circle on top and at the center of the cone. After which, select the two shapes (the cone and the circle that we just created) and choose the Unite option from the Pathfinder panel. Now you have one solid shape that we can convert into a new brush.

Step 5

Right now, since we have a solid shape, we can easily resize it that will best fit for a custom brush. As you can see, it is still a bit wide so we can still adjust it. Please refer to the image below on how I resized it and the size comparison of the owl and the shape that we will be using for the custom brush.

Step 6

So now, select the shape that we will be using for the custom brush and click on the New Brush option from the Brushes panel and select the Art Brush from the pop up window. After you click OK, a new window will pop out and just use the following settings below.

Step 7

Now we’re all set! We now have a new custom brush that we can use for design purposes. Check the image below to see how the brush works in different stroke widths.

11. Create the Base Shapes for the Eyebrow

Step 1

Now we are going to create the base shapes for the owl’s eyebrow. Select the new art brush that we just created. For those who have a graphics tablet, then good for you as you can already play with the brush to achieve the design that we will be doing next. But for those who do not have one, we can still make it so don’t worry. Activate the Pen Tool (P) and carefully make three lines that will look like an eyebrow.

Step 2

After that, with the three lines/paths still selected, click the “Misc Brush” that we created earlier and see how it changed the paths. Adjust the stroke width to your liking and you should end up with the similar thing below.

Step 3

Now, go to Object > Expand Appearance and then use the Unite option again from the Pathfinder panel (Window > Pathfinder) and place it below the eye. Resize and rotate it if necessary. Also change the fill to R=168, G=39, B=67. Your owl should somewhat look like this now.

12. Create the Base Shapes for the Claw.

Step 1

Now, we are down to the last important part for the owl’s bases: the claw. Using the Ellipse Tool (L), create a new circle with R=255, G=218, B=53 fill color and without any stroke. Duplicate it with Copy (Control + C) and Paste (Control + V) it in the artboard. Select the new circle and make is smaller and place it at the bottom center of the bigger circle. Now, select the two circles and use Minus Front from the Pathfinder panel (Window > Pathfinder). You will now have a shape similar to the third picture below. Then activate the Selection Tool (V) and then adjust the shape to make it slimmer just like in the fourth image below.

Step 2

Activate the Direct Selection Tool (A) and carefully drag the top anchor point of the shape and duplicate it two times, make them smaller, and place them on each side with a darker yellow color R=226, G=190, B=36.

Step 3

Now, just place the claws to the owl’s body and we’re done with the basic shapes!

13. Add Further Depth by Creating a Highlight

For this particular tutorial, I would like to share the very basic foundation of add “highlights” that I personally learned years ago when I am still learning how to vector and until now, I still find this useful whenever I illustrate something so I’d like to share this all with you.

Copy > Paste in Front (Control + F) > Paste in Front (Control + F): So basically, that ‘formula’ will give us something like this: We first need to select the original shape layer and duplicate it twice.

Arrange: And then, resize the second copy and make it smaller compared to the first copy.

Cut: And finally, select both of the copies and open Pathfinder (Window > Pathfinder) and select Minus Front.

Then, just change the Transparency (Window > Transparency) to Multiply with 50% Opacity so we can have a new color with a new transparency effect or just change the color that will go well to your creative liking.

Let’s have a visual example on how to do this the easiest way.

Now we’re all settled, you can do it to the other parts of the owl. I have also included the screenshots on how I did the other parts of the owl using the “formula”.

14. Add Patterns to the Owl

Now we are going to go to the most fun part of the process: adding designs to the owl to make it more interesting and appealing. For this part, I will be teaching you:

Creating a custom pattern with the Pattern Tool of Adobe Illustrator CS6
Adding patterns onto the shapes

Step 1

Show the Ruler (Control + R) in your artboard and drag out two horizontal lines and three horizontal lines from ruler. Make sure that they also have the exact distances to one another. The highlighted part on the image below is the space where we will be adding the base path for our pattern. We were able to get the space dimensions equally because of the guidelines that we created just now.

Step 2

Activate the Pen Tool (P) and draw a wave/curve. For the path, make sure that all your anchor points are aligned at the center and the curves should meet the surface of the guidelines and select any lighter color from our background and apply it to the path that we created. Refer to the image below on how I used the guidelines for this one. You can now hide the guides by going to View > Guides > Hide Guides.

Step 3

Select the path that we just created and go to Object > Pattern > Make and you will be entering the Pattern Options mode. You need to manually adjust the corners by clicking on the Pattern Tile Tool until your pattern looks seamless and ready to go.

After all the adjustments, your pattern should now look like this and then click ‘Done’. Your new pattern will appear in the Swatches panel (Window > Swatches).

Step 4

For this one, we are going to need three panels:

Appearance (Window > Appearance)
Swatches (Window > Swatches)
Transparency (Window > Transparency)

First, select the base of the shape as to where you want your pattern added. Next, go to drop down menu of the Appearance panel and select ‘Add New Fill‘. You will notice that a new fill color will be added. Next, select the pattern that we created earlier and notice that it is already added to the design. And then, play with the transparency and opacity until you have a desirable look of the design.

Do the same trick for the other parts that you want some patterns added. Play with patterns until you will use a variety of designs to have an impact on design. Adobe Illustrator offers a variety of free patterns and you may see them at Swatches > Open Swatch Library > Pattern so you may want to try those for your design!

Step 5

Grab your Pen Tool (P) and finish the other parts where you think needs more design, shadows and highlights and manually create them, play with transparency, change the colors, etc. Do this until you are happy with your design.

Step 6

Now, this is one of the most important part of the steps. We need to Group (Control + G) the major parts separately. So for this, we need to group the following:

Ears
Eyebrow + Eye + Iris
Beak
Wing
Claw; and finally
Tummy

15. Duplicate the Features

I know that you noticed that we’ve been doing the left side of the owl’s body, right? Now is the perfect time to copy them and complete the owl illustration.

Step 1

Hit the Selection Tool (V) and select all the left side parts that need to have a pair to the right. For this one, those are the owl’s ear, eye, wing and claw groups and activate the Reflect Tool (O) by right clicking on the artboard and from the list, select Transform > Reflect and a new window will appear and select Vertical and hit Copy.

Step 2

Now, select the two eye groups and group them together. Do the same thing for the pair of wings, the pair of claws and the two ears and make sure that you rename everything accordingly. Please take note that this is important so be sure to group the paired parts correctly.

Step 3

An effective character design needs to be balanced so we need to ensure that everything is well crafted here. To ensure the balance for this character, select all the groups in the owl illustration then activate the Selection Tool (V) and select the Horizontal Align Center in Window > Align.

Remember that I stressed out in the previous step that it is important that you group paired body parts correctly right? Well, this is the thing that will happen if you will not group them correctly.

Now we’re done with the owl. Rename the main group into “Owl” and lock the layer and we are now ready to create the background.

16. Draw the Tree for the Owl to Sit on

Step 1

Create a new layer and rename it “Tree” and place it below the “Owl” layer. Using the Pen Tool (P), draw the tree’s basic path with R=117, G=64, B=11 stroke color.

Step 2

For this step, we will be applying the “Misc brush” that we did earlier to the tree paths and play with the Stroke Weights until we get the look and feel of the tree. In the image below, The tree trunk has 5 pt Stroke Weight while the branches have either 2 or 3 pt Stroke Weights.

Step 3

But before that, you need to Expand the paths first by going to Object > Expand . With the Pen Tool (P), manually create new shapes to make the brown shapes more look like a tree and then Unite them with the Pathfinder panel (also arrange things if necessary).

Step 4

Using the ‘Misc Brush’ custom brush that we create earlier, draw random lines in the tree to add a wooden texture (in slimmer Stroke Weights). Add a highlight as well using the ‘formula’ that I tackled earlier and add many leaves. When you are happy, group the tree layer so we can move things easily later.

17. Create the Background

Step 1

Now, we are down to last part of the illustration. Since we are doing a night illustration, then I am thinking of adding some things that are surreal yet still childlike that will go well with out illustration and that will eventually pop out in the background.

Using the Pen Tool (P), create a basic shape such as the one that I did below and color it with R=56, G=40, B=57.

Step 2

So what do you see at night? We have stars, clouds or even spooky things like bats! You can add whatever things you like and have fun!

Congratulations! You’re Done.

In this tutorial, we were able to get into lots of techniques that can be suitable for those who are new in the vector world. We were able to create our very own custom brushes that can be used in various design needs, made our very own custom patterns and even learned the simple way of having highlights with a simple ‘formula’. You can also play with different colors so don’t be afraid in exploring! I hope you enjoyed this tutorial and let me see your illustrated owls!

How to Create a Detailed Honey Text Effect in Adobe Illustrator

Andrei Marius — Tue, 14 May 2013 12:01:38 +0000

In the following steps you will learn how to create a detailed honey text effect in Adobe Illustrator. You will learn how to create a subtle honeycomb background using basic tools, effects and blending techniques. You will learn how to create some simple brushes and how to add shading and highlights using basic blending and masking techniques. Finally, using basic vector shape building techniques, the Round Any Corner script and the Blend Tool you will learn how to create a simple spoon illustration.

1. Create a New Document and Setup a Grid

Step 1

Hit Command + N to create a new document. Enter 600 in the width box and 320 in the height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the Align New Objects to Pixel Grid box is unchecked before you click OK.

Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). For starters you’ll need a grid every 5px. Simply go to Edit > Preferences > Guides > Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box. You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Units > General. All these options will significantly increase your work speed.

2. Create the Background Shape

Step 1

Pick the Rectangle Tool (M), create a 610 by 330px shape, fill it with R=255, G=244, B=193 and place it as shown in the first image. Make sure that this shape stays selected, focus on the Appearance panel (Window > Appearance) and add a second fill using the Add New Fill button (pointed by the little, blue arrow in the following image). Select this new fill, lower its Opacity to 40% and add the radial gradient shown in the second image. Move to the Layers panel (Window > Layers) and simply lock this rectangle to make sure that you won’t accidentally select/move it.

The yellow zero from the Gradient image stands for Opacity percentage.

3. Create the Honey Comb

Step 1

For the following step you will need a grid every 1px. So, go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Focus on the top, left corner of your artboard. Pick the Rectangle Tool (M), create an 11 by 13px shape, fill it with white and place it as shown in the first image. Make sure that this new rectangle is selected and go to Object > Path > Add Anchor Points. Keep focusing on this white rectangle and grab the Direct Selection Tool (A). Select the top, left and right anchor points and drag them 3px down then select the bottom, left and right anchor points and drag them 3px up. In the end your white vector shape should look like in the third image. Make sure that it stays selected and focus on the Appearance panel. Select the fill and lower its Opacity to 35% then add a stroke. Select it, set the color at white, align it to inside and lower its Opacity to 60%.

Step 2

Reselect the hexagonal shape, make sure that the entire Path is selected and go to Effect > Distort & Transform > Transform. Enter the properties shown in the top, left window (in the following image), click OK and go again to Effect > Distort & Transform > Transform. Enter the properties shown in the top, right window, click OK and go one more time to Effect > Distort & Transform > Transform. Enter the properties shown in the bottom window and click OK. Move to the Layers panel and lock this shape shape.

4. Create a Scatter Brush and Some Calligraphic Brushes

Step 1

Pick the Ellipse Tool (L), create a 1px circle and fill it with white. Make sure that this tiny circle is selected, open the Brushes panel (Window > Brushes) and click on the New Brush button. Check the Scatter Brush box and click OK to open the Scatter Brush options window. Enter all the properties shown in the following image and click OK. Your new scatter brush should now show up in the Brushes panel.

Step 2

Return to the Brushes panel and click again on the New Brush button. Check the Calligraphic Brush box and click OK to open the Calligraphic Brush Options window. Name it "Calligraphic Brush 1", set Angle at 0 degrees and the Roundness at 100% then drag the Diameter slider at 8pt and click OK. Return to the Brushes panel and hit again that New Brush button. Again, check the Calligraphic Brush box and click OK. Name it "Calligraphic Brush 2", set Angle at 0 degrees and the Roundness at 100% then drag the Diameter slider at 10pt and click OK. In the end your new calligraphic brushes should show up in the Brushes panel.

5. Create the Main Text Shape

Step 1

Disable the Grid (View > Hide Grid) and the Snap to Grid (View > Snap to Grid). Pick the Type Tool (T) and add your piece of text. Use the GoodDEog font, set the size at 100pt and the color at R=254, G=186,, B=2. Make sure that your piece of text is selected and hit Shift + CTRL + O (or go to Type > Create Outlines). Move to the Layers panel and select the resulting group of shapes. Open the Pathfinder panel (Window > Pathfinder), click on the Unite button then hit CTRL + 8 (or go to Object > Compound Path > Make). Return to the Layers panel, double click on this orange compound path and simply name it "text". Naming this shape will make it easier for you to find it later.

Step 2

Pick the Brush Tool (B) and focus on the Brushes panel. Use "Calligraphic Brush 1" and "Calligraphic Brush 2" to add the paths that will make the honey drips. Make sure that all these new paths are selected and go to Object > Path > Outline Stroke. Select the resulting group of shapes, click on the Unite button from the Pathfinder panel then hit CTRL + 8 to turn them in to a Compound Path. .

Step 3

Select the black compound path along with "text", click on the Unite button from the Pathfinder panel then hit CTRL + 8. Make sure that this new compound path has the fill color set at R=254, G=186, B=2 then move to the Layers panel and name it "text".

6. Add the First Group of Highlights

Step 1

Go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Select "text" and go to Object > Path > Offset Path. Enter a -3px Offset and click OK. Select the resulting shape, fill it with R=237, G=28, B=36 and move it 2px up and to the left using the arrow button from your keyboard.

Step 2

Reselect the red compound path and make two copies in front (CTRL + C > CTRL + F > CTRL + F). Select the top copy and move it 1px up and to the left using the arrow buttons from your keyboard. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Make sure that the resulting group of shapes is selected and fill it with white.

Step 3

Focus on the Layers panel, open the existing group and select one of those thin shapes. Fill it with the linear gradient shown below and change the Blending Mode to Overlay. Make sure that this thin shapes stays selected, open the Graphic Styles panel (Window > Graphic Styles) and simply click on the New Graphic Style button.

Step 4

Reselect that entire group of thin shapes and simply click on the saved graphic style. Select the red compound path, replace the red with white and change its Blending Mode to Soft Light. Reselect both, the group and the compound path edited in this step and Group them (CTRL + G). Move to the Layers panel, double click on this new group, name it "frontHighlights" then lock it.

7. Add the Second Group of Highlights

Step 1

Select "text" and make two copies in front (CTRL + C > CTRL + F > CTRL + F). Select the top copy and move it 1px down and 3px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a Compound Path (CTRL + 8), fill it with R=255, G=131, B=0 and lower its Opacity to 50%.

Step 2

Select "text" and make two copies in front (CTRL + C > CTRL + F > CTRL + F). Select the top copy and move it 1px up and 3px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a Compound Path (CTRL + 8), fill it with R=179, G=71, B=54 and lower its Opacity to 50%.

Step 3

Select "text" and make two copies in front (CTRL + C > CTRL + F > CTRL + F). Select the top copy and move it 1px up and to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a Compound Path (CTRL + 8), fill it with white and change the Blending Mode to Overlay.

Step 4

Select "text" and make two copies in front (CTRL + C > CTRL + F > CTRL + F). Select the top copy and move it 1px up and 2px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a Compound Path (CTRL + 8), fill it with R=255, G=131, B=0 and change the Blending Mode to Darken.

Step 5

Select "text" and go to Object > Path > Offset Path. Enter a -4px Offset and click OK. Fill the resulting shape with R=255, G=131, B=0 and lower its Opacity to 75%.

Step 6

Select the five compound paths made in the last five steps and Group them (CTRL + G). Focus on the Layers panel, make sure that this new group is selected and lower its Opacity to 75%. Name it "highlights" then lock it.

8. Use That Scatter Brush

Step 1

Pick the Paintbrush Tool (B), select your scatter brush and draw some brushes over your text as shown in the following image.

Step 2

Select all those scatter brushes and Group them (CTRL + G). Make sure that this new group is selected, change its Blending Mode to Soft Light and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image and click OK. Move to the Layers panel, name this group "scatterBrushes", drag it between the "frontHighlights" and "highlights" groups then lock it.

9. Add the Shading

Step 1

Select "text" and make two copies in front (CTRL + C > CTRL + F > CTRL + F). Focus on the Layers panel, select the bottom copy and move it 1px up and to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a Compound Path (CTRL + 8), fill it with R=255, G=131, B=0 and lower its Opacity to 80%.

Step 2

Select "text" and make two copies in front (CTRL + C > CTRL + F > CTRL + F). Focus on the Layers panel, select the bottom copy and move it 3px up and to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a Compound Path (CTRL + 8), fill it with R=255, G=131, B=0 and lower its Opacity to 30%.

Step 3

Duplicate the compound path made in the previous step (CTRL + C > CTR + F). Select this copy and go to Effect > Blur > Gaussian Blur. Enter a 3px radius and click OK.

Step 4

Select "text" and make two copies in front (CTRL + C > CTRL + F > CTRL + F). Focus on the Layers panel, select the bottom copy and move it 6px up and to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a Compound Path (CTRL + 8), fill it with R=255, G=131, B=0 and lower its Opacity to 10%.

Step 5

Select "text" and make two copies in front (CTRL + C > CTRL + F > CTRL + F). Focus on the Layers panel, select the bottom copy and move it 1px down and to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a Compound Path (CTRL + 8), fill it with R=255, G=131, B=0 and lower its Opacity to 30%.

Step 6

Select the five compound paths made in the last five steps and Group them (CTRL + G). Move to the Layers panel, name this new group "shadows" and drag it below your "text" compound path.

10. Use Those Calligraphic Brushes

Step 1

Pick the Brush Tool (B), select the "Calligraphic Brush 1" and draw some simple path along the right edge of your text. Once you’re done select all these paths and Group them (CTRL + G). Select "text", make a copy in front (CTRL + C > CTRL + F), bring it to front (Shift + CTRL + ] ) and fill it with white.

Step 2

Reselect the white compound path along with the group of brushes and go to the Transparency panel (Window > Transparency). Open the fly-out menu and simply go to Make Opacity Mask. In the end your masked group should look like in the second image. Select it, change the Blending Mode to Soft Light and lower its Opacity to 30%. Move to the Layers panel and lock this masked group.

11. Use a Built-In Art Brush

Step 1

Select "text" and make two copies in front (CTRL + C > CTRL + F > CTRL + F). Open the fly-out menu of the Brushes panel and go to Open Brush Library > Artistic > Artistic_Ink to open a new window with a bunch of art brushes. You will only need the one named "Fire Ash". Now, select one of those copies made in the beginning of the step, bring it to front (Shift + CTRL + ] ) and focus on the Appearance. First, remove the color from the fill then select the stroke and add the "Fire Ash" brush.

Step 2

Select the other copy of "text", fill it with white and bring it to front (Shift + CTRL + ] ). Select this white compound path along with the one with the art brush, open the fly-out menu of the Transparency panel and go to Make Opacity Mask. Make sure that this masked compound path is selected, change its Blending Mode to Soft Light then move to the Layers panel and lock it.

Step 3

Select "text", lower its Opacity to 75% and go to Effect > Stylize > Inner Glow. Enter the properties shown in the following image and click OK.

10. Create the Spoon

Step 1

Enable the Grid (View > Hide Grid) and the Snap to Grid (View > Snap to Grid) and make sure that you have a grid every 1px. Pick the Ellipse Tool (L), create an 18px circle and fill it with R=237, G=28, B=36. Select this red circle and go to Object > Transform > Move. Enter "74" in the Horizontal box and hit the Copy button. Select this new circle and open the Transform panel (Window > Transform). Make sure that the "Constrain Width and Height Proportions" options is active and enter 6 in the width (W:) box.

Step 2

Using the Rectangle Tool (M), create a 74 by 18px shape, fill it with R=111, G=130, B=140 and place it as shown in the first image. Switch to the Direct Selection Tool (A) and focus on the right side of this new rectangle. Select the top anchor point and drag it 6px down then select the bottom anchor point and drag it 6px up. In the end your shape should look like in the second image. Select it along with the red circles and click on the Unite button from the Pathfinder panel. Select the resulting shape and go to Effect > Warp > Bulge. Enter the properties shown in the following image, click OK and go to Object > Expand Appearance.

Step 3

Using the Ellipse Tool (L), create a 51 by 32px shape, fill it with R=111, G=130, B=140 and place it as shown in the first image. Select it along with the other grey shape and click on the Unite button from the Pathfinder panel.

Step 4

For this step you’ll need the Round Any Corner script. You can find it in the Vectortuts+ article 20 Free and Useful Adobe Illustrator Scripts. Save it to your hard drive, return to Illustrator and grab the Direct Selection Tool (A). Select the two anchor points highlighted in the first image and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 5px Radius and click OK. Make sure that this grey shape is still selected, focus on the Appearance panel and replace the flat color used for the fill with the linear gradient shown in the following image. Move to the Layers panel and simply name this shape "spoon".

Step 5

Disable the Snap to Grid (View > Snap to Grid). Select "spoon" and go to Object > Path > Offset Path. Enter a -1px Offset and click OK. Select the resulting shape and make a copy in front (CTRL + C > CTRL + F). Select this copy and move it 1px down. Reselect both shapes made in this step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=228, G=230, B=232.

Step 6

Select "spoon" and make two copies in front (CTRL + C > CTRL + F > CTRL + F). Select the top copy and move it 5px down and 3px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=154, G=169, B=176, lower its Opacity to 60% and change the Blending Mode to Color Burn.

Step 7

Select "spoon", focus on the Appearance panel, add a second fill and use the linear gradient shown in the following image.

Remember that the yellow zeros from the Gradient image stand for Opacity percentage while the white numbers stand for Location percentage.

Step 8

Select "spoon", focus on the Appearance panel, add a 1pt Stroke Weight, align it to inside and set the color at R=111, G=130, B=140. Keep focusing on the Appearance panel, select the bottom fill and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the top, left window, click OK then add the other three Drop Shadow effects.

Step 9

Focus on the right side of your "spoon" and enable the Snap to Grid (View > Snap to Grid). Using the Ellipse Tool (L), create a 46 by 29px shape, fill it with R=111, G=130, B=140 and place it as shown in the first image. Continue with the Ellipse Tool (L), create a 30 by 16px shape, fill it with R=137, G=153, B=163 and place it as shown in the second image.

Step 10

Select the large squeezed circle and make two copies in front (CTRL + C > CTRL + F > CTRL + F). Select the top copy and move it 1px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=228, G=230, B=232.

Step 11

Select the large squeezed circle and make two copies in front (CTRL + C > CTRL + F > CTRL + F). Select the top copy and move it 2px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=97, G=117, B=128.

Step 12

Select the large squeezed circle and make two copies in front (CTRL + C > CTRL + F > CTRL + F). Select the top copy and move it 5px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=97, G=117, B=128 and lower ts Opacity to 30%.

Step 13

Select both squeezed circles, hit Alt + CTRL + B then go to Object > Blend > Blend Options. Select Specified Steps from the Spacing drop-down menu, enter "5" in that white box and click OK. In the end things should look like in the second image.

Step 14

Focus on the left side of your "spoon". Using the Ellipse Tool (L), create a 14px circle, fill it with R=111, G=130, B=140 and place it as shown in the first image. Continue with the Ellipse Tool (L), create a 16px circle, fill it with the same color and place it as shown in the second image. Select both circles and click on the Minus Front button from the Pathfinder panel.

Step 15

Make sure that your thin, sharp shape is selected and go to Object > Transform > Move. Enter 2 in the Position-Horizontal box and hit the Copy button.

Step 16

Using the Ellipse Tool (L), create a 12px circle, fill it with R=111, G=130, B=140 and place it as shown in the first image. Continue with the Ellipse Tool (L), create a 14px circle, fill it with the same color and place it as shown in the second image. Select both circles and click on the Minus Front button from the Pathfinder panel.

Step 17

Select all three sharp shapes and turn them into a Compound Path (CTRL + 8). Select it and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 3px Radius, click OK and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image and click OK.

Step 18

Select that "spoon" shape, make a copy in front (CTRL + C > CTRL + F) and bring it to front (Shift + CTRL + ] ). Make sure that this copy stays selected and focus on the Appearance panel. Remove the stroke and the bottom fill then focus on the remaining fill. Make it black, lower its Opacity to 4%, change the Blending Mode to Multiply and go to Effect > Path > Offset Path. Enter a -1px Offset, click OK and go to Effect > Artistic > Film Grain. Enter the properties shown in the following image and click OK. Select all the shapes that make up your spoon and Group them (CTRL + G).

Step 19

Select your spoon group, rotate it a little and place it as shown in the first image. Finally, you can add a bit more honey. Use the Paintbrush Tool (B) along with our calligraphic brushes, expand and unite the resulting shapes then repeat most of the techniques used for the honey text.

Congratulations! You’re Done.

Here is how it should look. I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects.

Quick Tip: Create a Set of Neon Art and Scatter Brushes in Illustrator

Diana Toma — Mon, 13 May 2013 12:17:05 +0000

Follow this quick tip and create your own collection of Neon Brushes in Adobe Illustrator. You will create Art Brushes and also Scatter Brushes, different colors and sizes that you can use in your projects. You’ll continue to see how you can save a set of brushes for use in the future and examples of some great quick effects you can create with your brushes.

1. Start Your New Project

First, create a New document by going to File > New. Type a name and select the dimensions then hit OK. Next, use the Rectangle Tool (M) to draw a black rectangle into your artboard because these neon brushes work best on a dark background.

2. Create Your First Neon Art Brush

Step 1

Grab the Ellipse Tool (L) and draw an 83 x 30px ellipse and give it a black fill. With the ellipse selected, go to Object > Transform > Scale and type 50% in the Uniform section then hit Copy. Change the fill color of the resulting smaller ellipse from black to blue then move it a little to the left. Now, scale the blue path to obtain the tiny white ellipse but this time select a value of 20%. Move this ellipse to the left also and make sure the three shapes are aligned horizontally.

Step 2

Use the Ellipse Tool (L) to draw other three ellipses with the dimensions below. Align them horizontally then move the blue and white ellipses a little to the left. Use the same colors.

Step 3

Select the three shapes that make up the "head" of the brush and go to Object > Blend > Blend Options. Choose 50 Specified Steps and hit OK then go back to Object > Blend > Make. Repeat the same thing for the three ellipses that make up the "tail" of the brush.

Step 4

Now, let’s compose our brush. Arrange the "tail" over the "head" of the brush as shown in the image and make sure they are aligned horizontally. Set the two blend-groups to Blending Mode Screen and at this point your brush should look like below.

3. Try Different Colors and Sizes

Step 1

Multiply the blue brush created and all you have to do is to change the fill color of the two blue ellipses to red, pink, yellow, green or whatever you desire, although it should be a bright color to create a neon effect.

Step 2

For other sizes you need large or flat ellipses for the "head" of the brush. The tail always remains the same. Use the Ellipse Tool (L) to draw three new ellipses having the dimensions shown. Align them horizontally then move the orange and white shapes a little to the left as before. Blend the ellipses that make up the "head" and the "tail" as you did earlier then compose the brush. Don’t forget to set the Blending Mode to Screen. The same thing goes for the thinner brush (pink). For the ultra thin brush (yellow) just duplicate one of the tails and select a new color.

4. Create a Multipurpose Art Brush

To simplify things you can create only one brush of each size. Duplicate the blue brush and change the fill color of the two ellipses from blue to gray (50% black). The same thing goes for the large size (a copy of the orange brush from the previous step) and for the thin brush (a copy of the yellow brush from the previous step).

5. Create Neon Scatter Brushes

Draw three circles having the dimensions shown with the Ellipse Tool (L) then align them horizontally and vertically. Blend these circles and this time select 80 Specified Steps in order to make it look extra smooth. Set the resulting blend-group to Blending Mode Screen. Multiply it and create other colors of brushes by changing the fill color of the middle circle.

6. Save the Neon Brushes

Step 1

Select the blue brush made at the beginning then drag it into the Brushes panel (Window > Brushes) and choose New Art Brush. Type an appropriate name then hit OK.

Step 2

Next save the three multipurpose brushes and give them a proper name. In this case, change the Colorization Method from None to Tints and Shades then hit OK.

Step 3

Let’s continue with the Scatter brushes. Drag the multipurpose one (gray) into the Brushes panel and choose New Scatter Brush this time. Type a name then change the Colorization Method to Tints and Shades. Leave the other settings as they are because you can change them later where needed. When you save the colored Scatter brushes leave the Colorization Method to None (default).

Step 4

At this stage you should have your entire collection of neon brushes into the Brushes panel. To permanently save your collection into Illustrator’s library, open the Brush Library menu by clicking on the icon at the bottom of the panel and choose Save Brushes. In the window that opens, type a name then hit Save. Now you can access your brushes anytime you want and use them in any project by going to Brush Library > User Defined > Neon Brushes.

7. Use the Neon Brushes

Step 1

Here are a few simple examples how to use all these brushes. Take the Pen Tool (P) and draw some paths then stroke them with the blue neon Art Brush created at the beginning. The stroke color is not important. You can select different weight values depending on what you want.

Step 2

Use the Spiral Tool to draw a spiral and this time, stroke it with one of the multipurpose Art brushes. If you select a red stroke color for the path, your brush will be neon red. By simply changing the stroke color your brush will change also and this is because you’ve set the Colorization Method to Tints and Shades.

Step 3

Grab the Line Segment Tool (\) and draw many lines of different lengths as in the image below. Choose orange as the stroke color then use the multipurpose Art brush, large size to stroke them all. Select different Stroke Weight values for these paths, between 0.25 pt and 0.75 pt. Next, to enhance the neon look draw ellipses over a few of the lines and fill them with the radial gradient shown. Set the Blending Mode for these ellipses to Screen.

Step 4

For the last example start drawing a wavy path using the Pen Tool (P). Select orange as the stroke color then use again the large size of the multipurpose Art Brush. Add another stroke by pressing the Duplicate selected item icon at the bottom of the Appearance panel. Change the existing Art brush with the multipurpose Scatter brush and keep the same stroke color. Double click on this new stroke in the Appearance panel to open the Stroke Options Window and change the values as shown. Set the Blending Mode to Screen but only for this second Stroke attribute. The other examples you can see in the final image are made using same techniques.

Great Work, Now You’re Finished!

Now that you have your collection of Neon Art and Scatter brushes, you can use them in many ways into your projects. You can create and save as many as you want or you can stick to the multipurpose ones. I would love to see how you have used them.