Category Archives: Icons

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:

Steps:

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:



Tools:

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

Steps:

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.

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:



Tools:

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

Steps:

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.

Icon Conversion Tutorial


Icon conversion is vital for icon design. Different operating systems have different formats for icons.

Today you will learn how to convert an icon.

What You’ll Be Making:



Tools:

  • Illustrator
  • Document Window
  • Save for Web & Devices

Steps:

1. Create a new document with an art board that has a resolution of 512 px by 512 px.


2. We are going to ignore the icon-making process since you can do it yourself. With your completed icon, make sure to scale the icon so it’s at least 512 px long in one or both directions.


3. Next, choose the option File>Save for Web & Devices… .


4. Choose the preset PNG-24 with Transparency checked so that you won’t have any white boxes like you would have for jpgs. This icon will be saved as a 512 px by 512 px resolution.

5. Click SAVE and choose the best location for yourself to save this png file.

6. Some icon programs like IcoFx can convert your icons for you but I’ll save you the hassle and link you to iConvert which an online converter for icons. You can add more formats in the options button but the default is good enough to begin the conversion process. So choose your icon by clicking Browse… .

7. A window will pop out for you to select your file. Locate your icon file that ends in .png.

8. Now that your file is selected. Go ahead and click Convert.

9. You should it see it convert successfully (if not, always retry). Now you will be able to download the .icns (the format Macs uses for icon) as well .ico (Windows format for icons) and Linux usually uses .png . Now you have different formats for icon for each different system.

Icons are fun to design and create. For the ability to share your icons with others, you must acknowledge other people’s operating systems. Since each system uses different icon formats, it is best to convert your icons so that others may use/distribute them.

I hope you enjoyed this tutorial and learned something new.

Abstract Track


After looking back to my old bird creation, I took time sketching out new similar ideas in my notebook. Here are the birds I created using one type of shape (triangle, semi-circle, etc.). Some of these shapes do resemble some real-life birds like the Toucan, Ostrich, etc.

Pace


 

Sorry for the long while but I had many things to be done. Homework, projects, community service, yada yada…

I still have many things to be done including the Self-Portraits and the collaboration projects.

But today, during the Mac Lab Saturday School, I managed to finish the January Desktop Wallpaper Calendar I have worked for some time.

Note: I will plan to upload my logos/calendars onto my DeviantArt page and might try to submit a calendar for Smashing Magazine.

As you can see, I made all icons myself and I plan to make tips on making some specific ones (next semester).

I will likely spend the next days snapping some pictures to finish up all the projects I have.

Still, I have finals and all so I’ll be quite busy again.

Logo Set #3


Some more logos, 5 & 6. I’m trying to make at least 10 logos.

Logo Set #2


More logos I made and plan to put in the gallery.

Vector Orb Tutorial Part 2


Here is Part 2, which will finish up with the Orb’s shadows (using clipping masks) and the orb’s reflection (using opacity masks).

You’ve probably seen these types of orbs around the web and now you have the chance to make your own stylish vector orb.

Steps:

8. A. Draw a gray oval and make sure to give this oval an opacity of 50 %. B. Add a Gaussian Blur of 5 to it by going to Effect>Blur>Gaussian Blur. C. Draw an object on top of everything and make it obstruct the orb and the “shadow’s” intersection (see picture). Then right-click this object and choose Make Clipping Mask.

9. A. Make a circle a same size of the orb and copy the M as well. Make the M black and the new circle gray. B. Make the M into outlines by right-clicking the text and choosing Create Outlines. C. Now group these objects. D. Now scale it down so it’s on the same level as our original shadow.

9-I E. Give this object a blur of 20. F. Give this object and opacity of 50%. G. Now move this object back onto our orb. H. Draw a circle of the orb’s size and make sure it’s above our dark object.

10. Option-Drag a copy  of everything besides the 2 bottom shadows.

11. A. Open a Transparency window if one is not open already. B. Double click the area to the right of our orb’s thumbnail (see picture) and uncheck the Clip check box. B-I. Now draw a circular mask about the same size as our orb (see picture). C. Now add a linear gradient to our mask. Be sure to make it fade to black downward where black of an opacity of 100% goes to black of an opacity of 0%. D. Now check the check boxes for Clip and Invert Mask.

11-I. A. Adjust the linear gradient by pushing the side with 0% black more to the 100% side so there is more of the fade showing.

12. A. Double click the thumbnail instead of the mask to exit out the Masking Mode. B. Move the reflection under our orb.

13. A. With the reflection still selected, go to the Transparency window/tab and click the chain so it vanishes. B. Now use the Reflect Tool (O) and flip our reflection horizontally. This way, our mask won’t be effected when flipping. C. Give the reflection an opacity of 75%. D. Apply a Gaussian Blur of 10 onto the reflection.

14. Now you should have made something as close as mine.

I hope you enjoyed this tutorial and will look forward to the next one.

Vector Orb Tutorial Part 1


It’s time again for another tutorial but this one will be another long tutorial so I will break it up into two. Part 2 will be posted tomorrow.

You’ve probably seen these types of orbs around the web and now you have the chance to make your own stylish vector orb.

Prerequisites: Illustrator CS4/5          Some experience with Illustrator

About: In this tutorial,  I’ll help you create a stylish vectored orb with highlights, shadows, blurs, and masks.

Steps:

1. A. Draw a perfect circle using the ellipse tool and holding shift to constrain its proportions and give it a radial gradient where the inside is white and the outside is black/gray. B. Give this circle an opacity of 50 %.

2. A. Add an inner glow effect by going to Effect>Stylize>Inner Glow. B. A window should pop up; choose white for the fill, choose screen for the mode, make the opacity 75 %,  make the blur .007, and choose the edge option. C. Add another glow effect using the same process and you won’t need to enter the values again since the settings will be saved until you change them.

3. A. Copy a circle of the same size as our orb and make another circle slightly bigger than it, also making sure that it is behind it and that they each have different colors. B. Use the Shape Builder tool (Shift+M, hold option to subtract parts) or use pathfinder to cut out the inner circle. C. Now with this shape, give it nice linear gradient that goes from black to white upward (90°). D. Move this object back onto our orb.

4. A. Use the type tool to create some text. I wrote M in respect to the Mac Lab logo but feel free to write some short text (initials maybe). B. Apply an Outer Glow by going to Effect>Stylize>Outer Glow. C. A window will show up; set the fill to black, set the mode to  multiply, set the opacity to 75%, and the blur to .08.

5. A. Draw a white oval near the top of our orb. B. Apply a gradient where it fades to white downwards.

6. A. Draw another white oval near the bigger one  so it’s adjacent to it. B. Set the small oval’s opacity to 50%.

7. A. Draw a short arc segment with a .565 stroke or any stroke that is about the same width of the small oval and make it have a round cap. B. Use the Width Tool (Shift+W) to shorten one end to a point by dragging the endpoint’s width anchors inward. C. Move this curve onto the orb and give a white stroke. D. Give this curve a 50% stroke.

Note: If lacking the Width Tool, just draw the shape as best as you can.

This is the end of Part 1. Part 2 will finish off by giving it shadows and reflections. Click here for Part 2.

%d bloggers like this: