Category Archives: Shape-Builder

3D Android Avatar Tutorial Part 2

This is the concluding part of this tutorial. Will we finish up the head and create the rest of the body parts for the avatar.

What You’ll Be Making:


9. A. Let us focus our attention to the shading portion. From the looks of the preview we can see the shadow seems to be in the back though the Dot on the sphere indicates it’s on the front. This is due to the face of the cube being moved and is now facing the back.

B. All that is needed to be clicked is the first button on the left under the sphere. Now the light is in the back though we see it in front in the preview which is explained earlier.

C. Now move the light somewhere near the bottom left. Now click the “New __” button (middle button) to create a new light. The light will automatically be placed in the front. Move the light near the middle but a little to the right. Set the ambiance to 50 and the light intensity to 50 for the front light.

10. A. Create a green rectangle that has a longer length. Create a small circle and place it tangent to the rectangle’s right and bottom side.

B. Delete only the portion in the bottom-right corner and combine everything else together.

C. Revolve the object and insert values as shown in the picture.

D. Move the torso near the head.

E. Scale either the head of the body to match the width of the other.

11. A. Create a setup as pictured below with two circles (on at the top, one at the bottom) with a rectangle that goes connects half of one circle to the half of the other.

B. Use the Pathfinder or ShapeBuilder to delete half of the object as pictured below.

C. Revolve the object but do make the use of the easy shortcut Effect>Apply Revolve. This Apply _____ shortcut only shows up after you use any particular effect such as revolve or dropshadow.

D. Now we have a capsule shape that will be used for both the arms and legs.

12. A. Now copy the capsule object and place four of them around the torso as shown below.

B. Select three capsules starting from the right and right-click and choose Arrange>Send to Back.

C. Now it should look like as pictured below.

13. A. Draw a circle and a long rectangle whose sides (left and right) are tangent to the circle. Make sure the rectangle only intersects half of the circle. Also draw a line segment through the middle.

B. Combine the right half portion only and delete the left portion. This is due to Illustrator’s revolve feature revolving about the left side but this can be changed through the Revolve options but since the default is set to revolve around the left edge, let us leave it be.

C. Then as always, revolve the object.

14. A. Place the “ear” piece on top of the “head” and scale it down as pictured below.

B. Make sure the object is selected and go to its appearance window. Click the 3D Revolve link to make some changes. Make sure the preview box is checked. Drag the cube around till the “antenna” is facing toward us a little bit but also leaning to the left. See the picture below for help. Then click OK.

C. Copy the object again. Go to its appearance and click the 3D Revolve link. Drag the cube around so that this piece leans to the right and facing away from us slightly. Then click OK.

15. A. Your finished piece should look similar to what is pictured below.

I hope you’ve enjoyed this tutorial and learned something new.


3D Android Avatar Tutorial Part 1

Today I will show how to create a 3D Android avatar using only tools from Illustrator. Keep in mind that the steps won’t be basic and should only be done with sufficient experience with Illustrator. This will also be a long tutorial so I will break it in two parts.

What You’ll Be Making:


  • Illustrator
  • 3D Revolve
  • Pathfinder/ShapeBuilder
  • Symbols


1. A. Create a circle by using the ellipse tool and holding to constrain the proportions to a circle.

B. Make the circle green (RGB 158, 197, 76 or #9EC54C) and draw some segments (vertical and horizontal) that cross its center. I chose a black stroke for the segments so I could see them.

C. Select the circle and segments and click Shift+M to bring up the ShapeBuilder tool. Hold option or alt to turn the cursor into a Minus shape which indicates that you will remove objects instead of combining them. Simple click and drag your mouse across the pieces you want to remove then release your finger from the right mouse button.

D. Now you a single, green quadrant-shape.

2. A. Draw small squares from the corners of this quadrant. Draw lines that pass through the edges of the squares as pictured below. Also draw a circle with a center starting as the same one as the quadrant but let its intersecting arc be slightly lesser than the quadrant. Make sure the circle is also tangent to the squares’ “bottom” sides. Look to pictures below for help.

B. Delete some unnecessary pieces as pictured below.

C. Make sure to zoom in on your object and delete parts that go past your perfect arc as seen below. Remember to hold option or alt when using ShapeBuilder to remove objects.

D. Not add objects that you need together since we want a single combined shape.

E. You should get a shape like below.

3. A. Make sure the object is selected then go to Effect>3D>Revolve.

B. Make sure to check the preview box. Click More Options if you haven’t already. Set the shading to either plastic or diffuse shading. I personally will use Diffuse Shading. Make sure to change the blend steps to 100 but you can set it to the max (256) if you want. Then click OK.

4. A.  Now let us move aside from the previous object and work on symbols to use for future Art mapping of the 3D object. Create a rectangle of the same color with a ratio of 3:12. The ratio is important!

B. Create small black circles near the edges from the sides of the rectangle. Make sure the circles are the same distance apart from the edges of the rectangle.

C. Cut out the circles from the rectangle using either the Pathfinder of ShapeBuilder.

D. It should look as the one below.

E. Open your symbol window if you haven’t already. If unopened, go to Window>Symbols. Select your object then click the button right next to the trashcan button. Name the symbol anything. The type of symbol doesn’t matter as stated on the window. Name it anything then click OK.

5. A. Make sure the symbol is selected inside the Symbol window, if it’s not just simply click it. Then click the “New” button (the one next to the trashcan icon). Name it _____ 2.

B. Double-click your copied symbol to enter inside it to edit its features.

C. Flip your object horizontally. Then double-click anywhere on the canvas except on the object to exit the isolation mode.

D. Create a square of the same color and then make it a symbol. Name it anything.

E. Now you should have one square symbol and two rectangle-with-holes symbols.

6. A. Go back to your 3D object and go to its appearance  window and simple click the 3D Revolve effect.

B. Make sure to check the preview box. Click the Map Art button and click the right arrow button to scroll to the 2nd  surface as you can see below.

Note: The red highlighted surface indicates the current surface you are working on.

C. Select your first symbol from the symbol-selection drop down list and it should be automatically placed in the center.

D. Check the boxes for Shade Artwork and Invisible Geometry.

7. A. Go to the first surface (1/5)  by clicking the left arrow button. Then select your square symbol.

B. Make sure you click Scale to Fit button. You will need to do this for all the surface mapping.

C. Go to surface 3 and insert the square symbol again and click Scale to Fit button again.

D. Map the fourth surface with the square symbol and click Scale to Fit.

E. Map the fifth surface with the second symbol we created and click Scale to Fit.

8. A. Drag the cube around with your right-mousing button. Drag the cube around till you see the holes that go through the surface and to the inside.

This is the end of Part 1. I will conclude with Part 2 where you will create a body, arms, and legs for your Droid avatar.

Stylish Shadow Tutorial

A short and simple way to make shadows like this as shown below.

What You’ll Be Making:


  • Illustrator
  • Clipping Masks
  • Gaussian Blur


1. First create an ellipse that is very thin and long. Make it black.


2. Make sure that this object is selected and go to Effect>Blur>Gaussian Blur.


3. A window should pop up. Enter 20 pixels for the Radius and click OK.

4. It should look this. Now we will stray away from this for a second.

5. Draw a rectangle over half of this shadow. Make sure goes farther than the edge of the show.

6. Make sure both the shadow and rectangle are selected. Also make sure that the rectangle is on top. Right-click and choose Make Clipping Mask.

7. Double-click the clipping mask to edit its insides. Scale the shadow down if needed but it is not recommended to scale it up.


8. It should look like this. Adjust the opacity if needed.


I hoped you enjoyed this tutorial and learned something new.

Wooden Frame Tutorial Part 2

An optional secondary portion of the Wooden Frame Tutorial that will help you make the edges cleaner.

What You’ll Be Making:


  • Illustrator
  • Clipping Masks
  • Effect Gallery
  • Gradients


7. A. Select the left portion of the frame. And go to Edit>Copy or Cmd+V/Ctrl+V.

B. Then go to Edit>Paste in Front or Cmd+F/Ctrl+F.

8. A. Open the appearance window if you haven’t already. If lacking it, go to Window> Appearance. Select the object we pasted and go to the Appearance window and select the grain effect and delete it (don’t click on the blue text link).

B. Draw a selection box over the left portions so that you select both the object with the grain effect and the one without. Then right-click>Create Clipping Mask.

C. Now we have a clipping mask on the left portion.

9. A. Double-click the clipping mask to get inside it.

B. Increase the size of the frame portion so the that we can get rid of the unappealing edges. It won’t matter how large we make it since the mask will clip the size we set earlier.

10. The left side should look like this now.

11. Repeat the process for the other three portions and it should look like this in the end.

I hoped you enjoyed this tutorial and learned something new. An optional part 2 comes after this but feel free to skip it if you want.

Wooden Frame Tutorial Part 1

A some-what advanced tutorial that will guide you on how to make a wooden frame vector in Illustrator. The next tutorial after this will be about making the cork-board texture.

What You’ll Be Making:


  • Illustrator
  • Clipping Masks
  • Effect Gallery
  • Gradients


1. A. Create a rectangle as big as you and give it a fill so you can see it.

B. Select it and go to Object>Path>Offset Path.

C. An options window should pop up. Enter a negative value so the object’s offset can go inward. Click the Up/Down Arrow Key to see what suits you. Then click OK. Change its color so you can notice it.

D. Draw some straight segments from the corners of the big rectangle to the corners of the smaller rectangle.

2. A. Have the pathfinder window open. If it’s not open go to Window>Pathfinder. Select both rectangles and the segments and click the Divide button in the Pathfinder window. The Divide button is in the bottom-left corner.

B. The pathfinder will divide all your selected shapes into smaller portions.

C. Select the inner rectangle with the White Arrow Tool and delete it.

D. Also make sure to ungroup the portions so that you can select one part without selecting the other.

3. A. Select the top and bottom portion and add the default linear gradient.

B. Enter -90° for the angle so that the gradient is vertical.

C. Inside the gradient window, double-click the white box and change the color to #B8996F or RGB: 184, 153, 11 or a light brown color. Change the black color to #806C4F or RGB: 128, 108, 79 or a dark brown color.

D. Add another linear gradient to the left portion. Adjust the color of the light-brown color to #C1A175 or RGB193, 161, 117. 

E. Add the same gradient to the right portion but reverse the gradient. The reverse button is the one to the left of the angle box.

4. A. Select the left portion again and go to Effect>Effect Gallery.

B. A window should pop up and should look like what you see below.

C. Locate the grain effect which is in the texture folder like you see below.

D. Change the grain type to Vertical.

E. Change the Intensity to 12 and the Contrast to 20. Then click OK.

5. A. To save time, select the right portion and go to Effect>Grain which will be at the top of the drop-down menu since you’ve used it previously.

B. Make sure the values are the same as last time.

C. Select the top portion and go to Effect>Grain.

D. The only thing to change this time is setting the grain type to Horizontal.

E. Select the bottom portion and go to Effect>Grain.

F. Set the grain type to horizontal again if needed.

6. A. Now you know how to make your own wooden frame. Though, as you can see, there are unappealing white edges on all the frame parts. If you would like to know how to hide them, go to the next part of the tutorial.

I hoped you enjoyed this tutorial and learned something new. An optional part 2 comes after this but feel free to skip it if you want.

Stylish Rope Tutorial

Today I’ll show you how to make a stylized rope using Illustrator.

What You’ll Be Making:


  • Illustrator
  • Ellipse Tool
  • Pathfinder/Shape-Builder
  • Rotate Tool


1. A. Use the Ellipse Tool to draw a circle (by holding shift).

B. Draw a three circles vertically so they fit in the original circle. Thus each small circle has 33.333% the size of original circle.

C. Use the Shape-Builder Tool/Pathfinder to cut out a C-shape from all the combined shapes.

D. Copy and reflect the shape towards the other shape. Move the shapes as shown below.

2. A. Move several copies (of how many you want) down if such a way the C-Shapes will form an S shape. Lower the opacities of the shapes could help precisely move the C-shapes. Make a copy of some of the shapes for later.

B. Use the Shape-Builder tool to combine shapes into a rope-like structure as pictured below.

3. A. Move over two C-shapes to form an S-shape. Draw some black-filled circles inside the shapes’ “hollow” centers as shown below.

B. Copy a circle over the left circle as show.

C. Select the circle’s left anchor-point and delete it.

D. Select the semi-circle and click Shift+X to quickly switch the stroke and fills of the object so that the black fill will turn into a black stroke.

4. A. Click R to bring up the Rotate Tool. Hold option/alt and select the Rotation Point to be at the center of the left black-filled circle. Make the angle 10° or somewhat close.

B. Click OK then press Cmd/Ctrl+D to transform again. Rotate the black-stroke object several times but stop till one copy is between the two black circles such that it touches both of them. Then rotate about the center of the other circle and make the angle -10° or so.

C. Rotate several times again and stop when the black-stroke object stops intersecting  the S-shape object.

D. Delete the unnecessary parts (circles and s-shape) and group all the black-stroke objects together.

5. A. Copy over all the different parts that comprise the rope structure as pictured below.

B. Copy over and line up the black-stroke group under one other shape and select them both then right click and choose Make Clipping Mask.

C. Continue this clipping mask process for the other rope parts.

D. You should four separate clipped rope parts as seen below.

6. A. Add a black stroke to the rope structure.

B. Move over the clipped objects over to the rope structure. If their behind it (make sure it’s still selected), right-click and choose Arrange>Bring to Front.

C. Continue to move over the clipped objects and rotate/reflect if necessary.

D. When your pieces are all in the right places, make a final color change if needed.

3D Red Pin Tutorial

Today I’ll show you how to make a 3-D pin with a realistic shadow.

Forgive me for having the casted shadow on the wrong side.

What You’ll Be Making:


  • Illustrator
  • Pen-Tool
  • 3D Revolve
  • Gradient
  • Blur


1. A. Use the Pen-Tool to draw half of what a front-view of a pin looks like. It looks like a curvy I shape cut in half.

B. Add to the bottom of our object, a half-draw needle. Also, make sure to group these two objects together or “bad things will happen”.

2. A. WIth our object selected, go to Effect>3D>Revolve … .

B. Make sure to turn preview on. Adjust the perspective by dragging on the cube. Leave the angle on 360° since we want a full revolution.

C. Click OK to look at your revolve pin shape. If you would still like to edit the 3D effect, go to the Appearance tab and click on the 3D effect.

D. Use the White-arrow Tool to select different portions of the shape. Color the top shape red. Color the bottom shape white. The 3-D effect will update automatically after you change the colors.

3. A. Drag another copy of our pin. With the copied pin selected go to Object>Expand Appearance .

B. You will see now that the copied pin will be editable.

C. Use the Pathfinder (or Shape Builder) Tool to Unite all the portions of the cloned 3-d pin.

D. Use the Shear Tool and adjust the angle to 30° or so. Then use the black arrow tool to resize the object by dragging its corner handles.

4. A. Check to see if you’re at this checkpoint now by seeing how close you are to this image.

B. Finally add a gradient (make it fade from solid black to 0% black). Also add a Gaussian Blur to it.

I hope you enjoyed this tutorial and learned something new.

Aperture Symbol Tutorial

There are many kinds of symbols in the world but it’s sometimes tricky to know where to start with recreating one. There are multiples to recreate something and no one method is truly the best.

Today you will learn how to make a symbol aperture symbol.

What You’ll Be Making:


  • Illustrator
  • Polygon Tool
  • ShapeBuilder or PathFinder
  • Strokes
  • Elipse Tool
  • Rotate Tool


1. Press L to bring up the Ellipse Tool. Hold option or alt to constrain your proportions to a circle. Draw a big circle with any color you want but preferably black.

2. A. Hold the little black arrow near the Ellipse Tool to bring up a sub-menu with other tools in it. Select the tool that looks like a hexagon. This is our Polygon Tool.

B. Click the Polygon Tool then click anywhere on your workspace to bring up a window. Ignore the radius but do change the sides to 8 since we need an octagon.

C. Resize the octagon if needed. Don’t make the octagon too big or too small. Make it small as half the circle.

D. Draw some guides or use rulers to divide the circle into 4 equal parts. Place the octagon dead center in the circle (and guides).

3. A. Draw a guide that goes through the octagon’s top side.

B. Click R to bring up the ruler tool. Select the guide that goes through the octagon’s top side, then place the rotation point in center of the guides and circles.

C. Hold your left mouse button and drag while holding Shift+Option/Alt to make copies of the guide in a 45° angle. This clone of the guide should intersect a side of the octagon. Press Command+D or Ctrl+D to duplicate your process and produce more copies of the guide. Do this till you have 8 guides intersecting the octagon.

4. NOTE: If lacking the Shape Builder Tool, use the pathfinder. Go to Window>Pathfinder to open the Pathfinder tab. Select everything, then click the Divide button to divide all the guides, octagon, and circle together and delete certain portions by selecting areas with the white arrow and then pressing the delete key. Also, shift-click on objects then press the Unite button to combine those objects together.

A. Press Shift+M to bring up the Shape Builder Tool. The cursor should turn into a plus sign (that means we’re going to add objects together).

B. Click and drag a line intersecting the shapes you want to merge. Merge certain shapes to get a combined triangle shape as you seen in the picture below.

C. Repeat this process 7 more times to get our 8 triangle shapes.

D. Hold Option/Alt to make the cursor into a Minus shape. This will let us delete portions instead of adding them. Now use this to delete the octagon shape and all other unnecessary objects.

5. Now add or change each triangles strokes to white to add more substance to this symbol.

Some symbols may look easy to create but sometimes it’s tricky to get started.

I hope you enjoyed this tutorial and learned something new.

Engraving Tutorial

First of all, I’m finally glad people are asking me to make a specific tutorial so they can put to use/know for their work.

In this tutorial, I’ll guide you into making highlights and shadows for any types of objects simple (square) and otherwise ( irregular). This will achieve an engrave effect.

What You’ll Be Making:


  • Illustrator
  • Pathfinder/ShapeBuilder
  • Gaussian Blur
  • Slight experience w/ Illustrator


1. A. Make a background with a vibrant color. Then draw any object that you want to make highlights/shadows for. B. Alt+Drag or Opt-Drag the objects(s) to make a copy of them.

2. A. Change the color of the “bottom” copy into a light color than the background (I chose a nice light blue color). B. Then add a Gaussian Blur of 20 to the copy.

3. A. Move the copy over the original. B. Right click the object and select Arrange>Send Backward ( Ctrl+[ or Cmd+[ ). C. Now you have the highlight portion of your object.

4. A. Copy-drag your original object (not the highlight). B. Copy-drag that new copy as well and give it a different color (I made mine orange). Make sure the space between these copies is similar to the space between the highlight and your original object.

5. Make lines through “gaps” if your object is irregular (like my 2). You’ll see why we add the lines.

6. A. Select your 2 copies with the lines. Now click the shortcut Shift+M (or use pathfinder but this will save time) to bring the ShapeBuilder tool. You will now see a plus shape for the cursor, holding option or alt will give you a negative shape cursor. Use the ShapeBuilder tool to add the “shadow” pieces together and then hold option/alt to cut away pieces you don’t need or that won’t be the shadow portion. That’s why we had the lines so we cut the shapes we needed. B. Keep cutting/adding till you have the shapes that will form the shadow. See pictures for reference and help.

7. Make sure to group your shadow pieces if there is a lot of pieces.

8. Give our original shapes a color darker than the highlight or background but lighter than the shadow. I chose a simple dark-blue color. But you could also use a gradient if you want.

9. Let’s give our shadow(s) a Gaussian Blur of 20.

10. Copy-drag our original object so that the top portion of the shadow(s) meets with the top portion of the original object. Also make sure the copy is in front of the shadow. See picture for help.

11. A. Select the copy and the shadow and right-click and choose Create Clipping Mask. B. The clipping mask helped to crop away the blurred pixels that would ruin the shadow effect as you will see.

12. The final step is to moved our clipped shadow over to the original shape. This gave us the shadow portion that we needed. With the shadow, original, and highlights shape, you have achieved the engrave effect.

I hope you enjoyed this tutorial and that it will beneficial to you in some way.

3D/Revolve Tutorial

You might have noticed that there are 3D effects built-in Illustrator. 3 of these 3D effects are: Extrude&Bevel, Revolve, and Rotate. I’ll teach you to use the funnest of them all: the Revolve Effect.

Prerequisites: Illustrator CS3/4/5          Some experience with Illustrator

About: In this tutorial,  I’ll help you construct a 3-D pawn chess piece.


1. A. Start with simple shapes, a basic circle perhaps. B. Now make other smaller circles near it, trying to construct its “arms” and “legs.”

2. A. Now try to draw lines around the circles to make its body curvy. B. Use pathfinder or the Shape Builder tool (preferable in this case) to  add the shapes together meanwhile removing the excess part on the bottom if you’re following by the pictures exactly.

3. Fix up points around the edges so they’re all crisp and clean and curvy.

4. A. Drag out another copy of this half-finished pawn. B. Also, add a different color to this copy so you can tell apart for the next time.

5. A. Drag the copy behind the original but make it so it’s overlapping the edges. B. Be sure to send the copy to the back of the original.

6. Use Pathfinder/Shape Builder to cut out the excess parts; we only need to overlapped part.

7. A. Drag a copy of this new object. B. Now go to Effect>3D>Revolve…

8. You will get the default setting for Revolve Effect but you can play around with options if you want. If you click preview, you can see what your object will look like, revolved.

I hope you enjoyed this tutorial and produced an object similar to mine.

Also: Here are some other things I revolved.

%d bloggers like this: