Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS4
• Difficulty: Beginner
• Estimated Completion Time: 1 hour

 

Step 1

Open up a new document and select the Rectangle Tool (M). Create a rectangle. We don’t care yet about color and stroke.

Step 2

Select the Shear Tool. This tool can be found under the Transform Tool.

Step 3

Click on the bottom-right corner once with the Shear Tool and start moving the mouse cursor. You will see how the rectangle gets transformed. Try to achieve a similar shape as you see below.

Step 4

Create another rectangle and transform it as well with the Shear Tool, but this time in the other direction so it aligns perpendicular with the first shape.

Step 5

Select both shapes and fill them with a beige-brown and set the stroke to none.

Step 6

Select the Pen Tool (P) and add path points to the upper line of the rectangles. We’ll manipulate them slightly as shown. This is to to create a worn look on the top of the paper bag. If you need some practice with then Pen Tool, then review the tutorial Illustrator’s Pen Tool: The Comprehensive Guide, as we’ll be using the Pen Tool throughout this tutorial.

To do this, select the points with the Direct Selection Tool (A) and move the added points around. Start giving the shapes a tailored look and fill them with a brown to beige gradient. Place the gradient highlight towards the top.

Step 7

Add more anchor points if necessary.

Step 8

With the Pen Tool, create another shape that is placed on top of the left shape. Try to follow the shape, but keep it half the size. Fill it with a darker gradient. This will simulate a glued paper bag side.

Step 9

Create another shape similar to the one in the image for the right side and place it behind the front shape. Fill it again with a gradient, but try to place the gradient highlight towards the back.

Step 10

Add a small triangle to the left side on the bottom of the bag. Fill it with a darker color or gradient.

Step 11

Create an outer shape with the Pen Tool (P) around the paper bag. The shape is totally up to you. Just make sure that the shape overlaps with the other shapes.

Step 12

Create a copy of all shapes, then select them all and go to the Pathfinder Palette. There, select the Unite shape mode.

Step 13

This is what you should have after uniting all shapes. Just make sure that you still have all the other shapes. If not, undo (Command + Z).

Step 14

Take the united shape and place it behind all the other shapes. Make sure you delete the extra outline shape, since we don’t need it anymore.

Step 15

Create a black filled funky shape and place it under all shapes. This will be the shadow, which is falling towards the back, since we want to simulate that the light source comes form the front.

Step 16

Select the shadow shape. Then apply a Gaussian Blur effect of 10 pixels.

Step 17

Set the Transparency Opacity to 14%

Step 18

Let’s make the recycle icon next. Create a Polygon with the Rectangle Tool (M). Click once on the Artboard, and in the pop-up window, set the radius to 50pt and the sides to 3 . Then click OK. Fill the triangle with a brown color.

Step 19

With the triangle selected, go to Effect > Stylize > Round Corners and apply them.

Step 20

With the triangle selected, expand the appearance (Object > Expand Appearance). Now go to Object > Path > Offset Path and apply a 10pt offset as shown.

Step 21

Select both shapes and click on the Exclude button in the Pathfinder Palette.

Step 22

Create more triangles just like we did in Step 18. Place them in the middle of each triangle side as shown.

Step 23

Click the Divide button in the Pathfinder palette, which will break these into individual shapes as shown.

Step 24

With the Direct Selection Tool (A), select the highlighted part in the image below and apply the Unite Pathfinder button. Repeat this as needed to make each arrow attach to a curve as shown..

Step 25

Ungroup the shapes if necessary and move them slightly apart from each other, which creates a gap between each arrow and curve.

Step 26

Skew the recycle icon using the Shear Tool as shown. Place the it on the front of the bag as shown.

Step 27

To make it a bit more interesting, create a copy of the side and fill it with undulated fine dots (a pattern you can find under Window > Swatches > Patterns). Set the Opacity to 27%.

Step 28

Repeat Step 27 for the front. Set the Opacity to 27%.

Step 29

Create a copy of the back shape behind itself (Command + C + B) and make it slightly bigger. Change the direction of the gradient so the top part is lighter.

Conclusion

Have a look, the eco-friendly paper bag icon is ready. I hope you enjoyed this entry level tutorial.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview for Part II: The People Icon and Integration with Cube

Below is the final image we will be working towards in part II of this two part tutorial. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Illustrator CS3
• Difficulty: Intermediate
• Estimated Completion Time: 4-5 hours

Step 1

Let’s start by drawing the main shapes for our people. We’ll make a circle for the head, and then create a rough shape for the torso, just under that shape.

Step 2

Now we’ll color the shapes. Select the circle, fill the circle with a solid color, and remove the border.

Step 3

Now select the torso. Click on the Gradient tab, place the gradient type as Linear. Now you can see the default black and white gradient applied to the shape.

Step 4

Change the gradient to the colors of your choice, by using the gradient sliders. I’ve made a light blue to dark blue gradient.

Step 5

Now select the shape. Grab the the Gradient Tool, change the angle of the gradient by dragging the tool from the top to the bottom of the torso shape. Also, remove the outline.

Step 6

Now draw the collar and tie. I’ve drawn it very roughly. Fill the tie with a solid red color and remove the outline.

Step 7

Collars need to be of similar colors as the shirt. So, select the collar shape, then with Eyedropper Tool pick the gradient from the torso shape. Now adjust the gradient for the collars.

Step 8

Now we are done with the basic shape. Let’s group the collar and tie together. For this select the collars and tie together. Then right-click on the selection and select Group from the menu (or simply press Command + G). And the selection will be grouped. Name the group “tie_collar.” Similarly make the head and torso together a group and name it as “body.”

Step 9

Hide the “tie_collar” group for now. Select the “body” group, then apply Effect > 3D > Extrude & Bevel.

Step 10

The option box will open. First turn on the Preview checkbox by clicking on it. Now just drag and rotate the cube and see the change in the icon. Play with the parameters and make the angle for the icon as you like. I’ve kept the settings as shown in the image.

Just don’t forget to do one specific thing, and that is: open the advanced option box by clicking on the More Options button. Then change the Blend Step value to 1. This will affect the shading of the icon though, but all we need is the extruded 3D shape information only, not the shading. When you’re done, click OK. And whatever the values you put keep them noted somewhere, as we’ll need those values again later.

Step 11

Now when you select the group again, you can see though the appearance of the object has changed, but the paths and anchor points are still the same as before. And in this way we cannot modify the graphic’s look anymore. So select the group, then go to Object > Expand Appearance.

Step 12

The 3D shape is now broken into a bunch of grouped shapes. Though we need the shape information, but still there are many unwanted shapes which we should remove, and retain only the useful shapes. So we need to ungroup them first. For this right-click on the selected group, and select Ungroup. Keep repeating this process until all groups are gone. You will notice that there are many nested groups inside the main group. We’ll have to ungroup them all.

Step 13

If you take a close look at all groups and layers, you will notice there are some groups containing clipping paths inside them, which cannot be ungrouped easily. Also the frontal blue gradient has become a rasterized image. Now as all shapes are jumbled in a messy arrangement and hierarchy, it’s become very necessary to make them arrange properly for easy navigation through the layers.

Delete all those clipping paths, shapes hidden underneath, and also the group of the rasterized gradient image. This stage may prove to be irritating (as it happened to me). But this will benefit us in future.

After the cleanup there will be just a few layers remaining.

Step 14

Shapes which are having too many anchor points within should also be simplified. Select such shape and then go to Object > Path > Simplify.

When the dialog box opens, turn on Preview. Then put the values, as shown in the image below, and click OK.

Step 15

Select together the extrusion shapes of the head part and join them using the add button in the Pathfinder tab. Now click on the Expand button to simplify the shape.

Step 16

Now there’s a small gap visible between the head and torso. Fix that by adding extra anchor points, then delete the unwanted points and tweak the tangents. Finally, adjust the oval shape accordingly.

Step 17

Switch on the “tie_collar” layer. Then select the frontal shape of the torso. And pick the gradient from the tie shape. Also, adjust the gradient position.

Step 18

Hide the “tie_collar” layer again. Put the gradient on the extrusion, and adjust the same.

Step 19

Reduce the transparency of the extrusion to 75%. Select the frontal shapes of the head and torso. Select the layers in the layers tab as well. Click on the small menu button at top-right corner of the tab, as shown below. Now select the Duplicate Selection option from the menu.

Step 20

Now there are two sets of head and torso shapes. Hide the top set, drag the layers behind the extrusion layers, and position them aligning the back edges of the extrusion, so that they fill the hollow back side of the 3D icon.

Step 21

Unhide the top set and duplicate them again. Selecting them together, make the outline color white, and remove the fill color. This will provide a thin rim to the icon.

Select the frontal torso shape, and reduce Opacity to 75%.

Step 22

Now select the oval shape of the “head.” Add a radial gradient that goes from orange to white, as shown below. Position the gradient such that the brightest spot appears towards an edge, which gives the shape volume.

Duplicate the layer. Put another gradient to that layer as shown.

Set the blending mode to Multiply and reduce Opacity to 80%.

Step 23

Now select the side extrusion for the head. Change the base color slightly so that it gels well with the head.

Duplicate the layer and add a gradient like the one shown below.

Change the blending mode to Multiply and reduce the Opacity to 65%.

Step 24

Now let’s make the head glossy. Select the frontal oval head shape and duplicate it.

With the Pen Tool draw a shape, such that, it makes and S type curve at the middle of the oval. Don’t worry about the color of this shape.

Select the duplicated oval and the shape together. Using the Pathfinder Tool intersect the shape areas to extract that much area from the shapes. Press the Expand button. Now we have the desired shape.

Screen the layer with Opacity set at 65%. Adjust the gradient and its color if you want.

Step 25

Similarly cut another shape as shown. Place a bright gradient as well.

Multiply the layer with Opacity set to 60%.

Drag the layer under the previous S type gradient, so it looks subtle, and doesn’t effect that layer directly.

Step 26

Now we’ll use some grayscale gradients (black to white) to make the reflections. So we again repeat the previous process, and intersect a shape. Put a black to white gradient on it, and adjust as you wish.

Screen it with an Opacity of 30%.

Step 27

Keep adding such reflections as you like. It’s totally up to your creative choice. I stopped at a stage shown in the image below.

If you feel layers have become too messy, just group shapes logically and name the groups, so everything becomes organized again.

Step 28

Use these grayscale gradient reflections for the torso part as well. I’m not describing it this time by making each and every shape for reflection. I’ll straight-ahead show you what I finally came up with. I suggest you experiment with different types of shapes and gradients as much as you wish.

Step 29

Now switch on the “tie_collar” layer. Drag the layer on top, so that you can view the changes being done easily.

Step 30

Then go to Effect > 3D > Rotate. When the dialog box opens, put the same values you’ve used for the “body” layer. See in the preview that the angles are matching perfectly now but the position differs. Click OK to apply. This is why I noted the values last time.

Go to Object > Expand Appearance, as we did earlier. This will convert the object into grouped shapes. Now move the group into the proper position.

Step 31

Let’s make some reflections for the tie as well. Make the shapes and gradients as you like and set them to Screen mode.

Step 32

The tie looks glossy but flat. We’ll use a simple small trick to make it look a bit 3D. Offset the layers a bit, as shown in the image. This gives an illusion a thick glassy surface.

Step 33

Make a sharp shape as shown below. Put a radial gradient of red to white. Keep it 100% opaque.

This will create an impression of a sharp glass edge reflecting and shining brightly.

When you’re done, select all the layers related to the tie and then group as well, and then group it again and put this group below the “head” group.

Step 34

Finally everything is done! We’ll just add a last piece of gem to make it complete. We’ll add sharp small highlights on top of the graphic. So, create a solid white elliptical shape, make it very small.

Blur it at an amount of 3.0. Set the blending mode to Screen.

Now keep on duplicating the layer, scale, rotate, change opacities and put little sparkles wherever you like. Just as a suggestion, I would mention my preference, that on edges these highlights look good. You can see how I applied these below.

Finally we’re all done with this part. Drag-select the whole icon and group it. Name the group “People Icon.”

Putting it All Together

Now let’s finish this up by embedding our people symbol inside the ice, which will finalize our icon.

Step 1

Now we have the “ice cube” and the “people_icon”, so let’s keep them together in the same file (if you’ve made them in different files). Arrange them so the “people_icon” comes on top of the “ice cube.”

Step 2

Resize the icon such a way, that it fits inside the cube.

Duplicate the “people_icon” group and bring the new group layer behind the old one. Scale it down a bit, and then place it as shown. Reduce the Opacity to 75%. And finally select both icons together, just reposition them so that they are visible and centered as well.

Step 3

Create a rectangular shape at the bottom a area of the icon. Put a dark cyan color on it. And make sure you bring down this layer below the icon, but over the “back part” of the ice cube. This will serve as a shadow of the icon on the cube’s inner floor.

Step 4

Blur the shape with an amount of 25. Set the blending mode to Multiply, and at the end reduce the Opacity to 35%. And we’re done!

Conclusion

Here’s the final look of our fun icon of frozen people on ice. Optionally you can add a shadow under the ice cube as well, but I’ll leave the up to you.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards in this two part tutorial. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Illustrator CS3
• Difficulty: Intermediate
• Estimated Completion Time: 4-5 hours

Part I: The Ice Cube

Below is the image we’ll be working toward in Part I of this tutorial. We’ll be making an ice cube.

Step 1

There are lots of reference images of ice cubes. You can follow any reference for the basic shape. A cube has six sides: four sides, top and bottom. We will create those sides. I’ve drawn a shape, and will follow the drawing shown below.

Step 2

Now draw a rectangle for each side. So we need to make six rectangles to complete the cube shape. Draw the rectangles by following the image. Keep in mind that the layers should be arranged in proper order, which means the top shape remains on top, the bottom shape at the bottom and frontal sides appear in front of the back sides. Make the fill color None, for now we need only outlines.

Step 3

Hide the frontal faces (shapes) and show only the back side faces and bottom face.

Step 4

Now the primitive cube is ready. But the edges of the cube are hard and straight. To make it look like an ice cube, we have to break the edges. So, first select a shape, add anchor points to it and then make the shape curvy using the Convert Anchor Point Tool. Do not forget to blunt up all sharp corners of the shape. Finally, the sharp rectangle should look like an unevenly curved rounded edge rectangle.

Step 5

Do the same thing for the two remaining layers. Do not worry if the shapes overlap each other a little.

Step 6

Select one shape and fill it with a gradient. By default, it will appear as a black to white gradient.

Change gradient colors and make the gradient range from cyan to a lighter tint of that same color.

Step 7

Select the other layers and give them the same gradient. To do this, select a layer and then pick the gradient with the Eyedropper Tool from the previously colored layer.

Step 8

We need to align the gradients in such way that the center part appears darker than the outer part (towards the edges). For this, select a face of a cube (rectangle), take the Gradient Tool and drag it diagonally towards the center.

Step 9

Now we need to make the faces a bit transparent. Set the Opacity of the back sides to 60%. And for the bottom make it 80%.

Step 10

Switch on the top shape. And start repeating the Steps we did for the back and bottom faces to make that look uneven. While shaping up the top face just keep in mind that the edges of the top face should match the edges of back sides as much as possible.

Step 11

Pick and apply the same gradient as others. Drag the Eyedropper Tool to adjust the gradient to your choice. You may name the layers so that you don’t get confused, if you wish. Reduce the transparency of the layer to 50%.

Step 12

Now we don’t need the outline any more. Toggle outline colors to None.

Step 13

Select the back sides and the bottom layer together and make them a group (by pressing Command G). Name it as “back part.” You may lock that group as well; we do not need to modify it anymore.

Step 14

Since the basic properties of water or ice is transparency, we’ll have to keep the ice cube transparent so that anything we put inside it will be clearly visible. We cannot make the frontal sides the same as we did for back parts. Instead, we’ll make shines and reflections to indicate the existence of front faces. Switch on the visibility of the front side shapes. But they will be used as guides only. For your convenience in selection, you can group them and name them as well.

Step 15

Draw a Y shape, along the edges of the front faces. Make that uneven. Fill it with a white color and set it to no stroke. Reduce the transparency of this layer to 75%. This will look like a bright shine on the edges of the cube and serve the much needed purpose of bringing volume to the cube.

Step 16

Let’s make some more shines (technically it’s called specular highlights). These highlights can be of any shape. For realistic looks, refer to as many reference images as you like from the internet or elsewhere, and then you will get a clear visual idea of how ice reflects light and shines. Anyways, let’s continue. I’ve drawn more shapes on the top face of the cube. Remember not to keep any outline on the shapes.

Step 17

These highlights should look subtle, and should not attract added attention. So let’s put a gradient of white to very light blue on those shapes. Adjust gradient positions as you like.

Step 18

Make the layers a bit transparent. Set the Blending Mode from to Screen. Remember that do not reduce transparency to all shapes equally. Keep them varied, so that they look more natural.

Step 19

Now the top part is ready. And two frontal faces are still left.

Step 20

To make reflections look better, create reflections for those faces as well. There are no rules for the shapes of reflections, just create shapes that look good based on your visual research.

Step 21

Delete the guide shapes. Drag-select everything (do not forget to lock the “back part” before you drag) and make that a group. Name this group as “top part.”

Step 22

Now we’ll draw a drop of water on the ice cube. For this, make a small oval shape.

Step 23

Put a gradient (white to faded blue) on the shape. Make the layer transparent to 60%.

Step 24

Now make another oval shape, this time make it smaller than the previous one. Give it a gradient of white to cyan as shown.

Step 25

Now change the blending mode to Multiply and reduce Transparency to 30%. The layer is almost merged with the layer behind, giving us a complex gradient look.

Step 26

We need to blend it a bit more. Select the layer, then go to Effect > Blur > Gaussian Blur. The dialog box opens. Enter a value of 5, and apply. Still the drop is looking flat and not shiny. We have to brighten up the edges of it to show some volume.

Step 27

Draw two thin shapes at the edges of the drop. Make the shapes cover the top and bottom parts of the drop. See the image below for how it should look. Change the blending modes to Screen. Keep the layers semi-transparent (Opacity between 45-60%).

Step 28

Still the drop is looking flat. It’s missing a bright shine. Make a small round shape.

Step 29

Now apply Gaussian Blur on the shape with an amount of 3. Set the Opacity of the layer to 75%, and set the blend mode to Screen. That makes the drop complete.

Step 30

Group it and name the group as “drop1.” We’ll now make another drop, but this time we’ll make it look a bit crispier, just by adding some refraction to it.

Step 31

So, let’s make the base layer, like we did earlier. Make a round shape, put gradient to it, and make it 50% transparent.

Step 32

Again draw two thin shapes at the edges of the drop shape, just like we did earlier.

Step 33

But this time, we won’t keep them white. These two shapes will need a hint of refraction in the drop (generally the edges of a water drop refracts and shows up in a darker color, and defines the roundness of the drop more). So put a cyan color on the lower shape. Change the blending mode to Multiply, and also set the Opacity to 55%.

Step 34

For the upper shape, pick the gradient from the base round shape, adjust the position of the gradient to make go from darker at top to brighter at bottom. Change the blending mode to Multiply.

Step 35

Again draw two more shapes, one at the top and another at the bottom, but keep the shapes inside so they don’t cross or overlap the dark shapes, and also make the shapes thicker. We will use these shapes as the bright reflections as we did for the previous drop.

Step 36

Reduce the Opacity of the upper shape to 75%. Apply a gradient on the lower shape and just take care that the gradient should not get dark. Make the lower part of the gradient full white.

Change the blending mode of the lower shape to Screen. And reduce Opacity to 75%.

Step 37

Add a specular highlight on top of the drop similarly as we did for the previous drop. Or you can simply copy that shape you made before, paste it on top the new drop, and scale it down a little. That’s it for the drop. You can group the layers together and name it as “drop2.”

Step 38

We are done with the ice cube. One thing I would like to say at this stage, from my experience, that all I did so far was just by observing the real life references closely, then deconstructing it into small parts, and then I recreated those as close as possible. So study real life images and then try to replicate them as is, and your creations will automatically be stunning!

End of Part I

And this way we have reached the end of Tutorial Part I. In Tutorial Part II you will learn how to create the people symbols we’ll embed in this cube. Check back soon! You can view the final image of this two part series below.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS3
• Difficulty: Intermediate to Advanced
• Estimated Completion Time: 3-5 hours

Step 1

As the first step you will need a shape of an energy saving bulb to start with. Either you pick a good photograph or you make one on your own in vector graphics as shown here. Here we draw our bulb with the Pen Tool, easy as can be.

Step 2

Now you start making the first glowing rod by placing a rectangle as broad as the rod could be.

Step 3

Now divide the rectangle into four parts by using the Mesh Tool (shown in the toolbar). It’s important that you don’t click in the rectangle, but at the edge on the left or right side of the vertical center of the rectangle.

Step 4

As you see here, you have to repeat Step 3 two more times to have it divided into all four parts.

Step 5

Grab the Direct Selection Tool (A), and use it to select the top 6 anchors of your rod, then rotate these by 90 degrees.

Step 6

Select the outer four anchors of the rotated part and rotate these again by 90 degrees to create an arch.

Step 7

Hide your rod for a moment and draw in four guidelines as shown below. This will help you to position your mesh.

Step 8

Place the rod as shown below and between the guidelines. Make sure you drag the rod parts by the anchors to align them at the guidelines by having the magnetic guidelines active.

Step 9

Now this part is going to get tricky. The shape for our first part is ready and now you have to place further mesh anchors, so later on you can colorize it to get a gradient effect into your rod.

Place the anchors of the mesh by clicking with the Mesh Tool at the bottom edges to get vertical divisions. Also add another two diagonal divisions in the curve as you can see below. This helps to give a more detailed look to the mesh gradient.

Step 10

Now let’s build one of the side rods, which we can later just copy for the other side. Place a rectangle and divide it into three parts like in the picture below. Notice that the main rod in the center is located a bit in the front, so you have to scale this rod a bit up (big red marker).

Step 11

Form the shape to conform your rectangle to the shape of your bulb and divide it again with the Mesh Tool.

Step 12

Now you’re good to go for colorizing your rods to have a smooth light effect. Select an anchor and then you just pick the color in your color palette.

Step 13

This image below shows you how the the final effect should look.

Step 14

Copy your side rod to the other side now.

Step 15

The upper part is done. For the lower body you basically have to do the same thing as you did with the rods, just in another shape, which means forming and dividing the mesh shape. So first you place a rectangle to start with.

Step 16

Now you divide the rectangle with the Mesh Tool. Make sure that you divide the rectangle by looking at the corners of the main shape.

Step 17

Justify the rectangle by using the Direct Select Tool (A) on the main shape, as shown below.

Step 18

Once you’re satisfied with the result of your horizontal divisions, add two vertical mesh lines.

Step 19

Now start adding color to your mesh grid just like in Step 12.

Step 20

Finally it should look like the image below.

Step 21

Like the last two parts you’ll have to do the same procedure. First draw a rectangle, divide it with the Mesh Tool by observing the main shape. This time, add an additional mesh line over the first division where the thread starts (arrow).

Step 22

Select every second anchor on both sides as shown in the screenshot and scale them down to build the thread.

Step 23

Now move the left side down to fit the main shape.

Step 24

Justify the lower left corner to the main shape, add further mesh lines in the thread and divide the shape vertically with seven mesh lines to create a nice metallic effect.

Step 25

When all lines are set, you can start adding color on the vertical divisions. Important: Don’t start coloring horizontally or else you’ll just make it harder for yourself. It should look like the image below after coloring.

Step 26

Add some dark gray on the darker parts of the thread.

Step 27

Finally it’s supposed to look like the image below.

Step 28

Here you just create a simple rectangle, divided it vertically with the Mesh Tool. Afterwards, you scaled the lower part down and formed the curve points into a trapezium.

Step 29

For the last step, this is an easy one. Make a circle, cut it in a half, scale it flat and add a linear gradient on it.

Conclusion

This is the final energy saving bulb. Enjoy!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Illustrator CS3 and Photoshop CS3
• Difficulty: Intermediate
• Estimated Completion Time: 60 minutes

Step 1

Open up a new Illustrator document and switch to Outline mode (Command + Y). Begin creating four rectangles of the same size, using the Rectangle Tool (M). These will be the columns of our academy.

Step 2

Now add three more rectangles to each column. These will be the fluting of the column. Make the inner rectangle slightly bigger to give a little perspective.

Step 3

Create rectangles at the top and the bottom of each column. These will be the capital and the base of the column.

Step 4

Create three rectangles below the columns. These will be the stairway of our academy.

Step 5

Create a rectangle above the columns. This is the architrave of the academy.

Step 6

Create three small rectangles on each side of the architrave.

Step 7

Use the Pen Tool to create a triangular shape on top of the architrave. This is the roof.

Step 8

Create a smaller triangular shape within the roof.

Step 9

Place text in the center of the architrave. Choose a font you like, I chose Avenir Heavy.

Step 10

Create a pen icon with the Pen Tool and place it in the middle of our roof. You may want to draw one half, then flip a copy by going to Transform > Reflect > Vertical and hit copy. Then line up the two halves and use the Pathfinder tools to Merge them.

Step 11

Now there are several ways to create a sunburst effect in Illustrator. I usually do it this way: Create a small circle. Give it a dashed stroke with a really big Weight (250pt in this example). Now set the dash to a value that suits you (this determines how many beams your sunburst will have). I set it to 1,3pt. Set the gap value if you want to, I didn’t. Make sure to set Align Stroke to Outside.

Step 12

Expand Appearance and place the shape beneath the pen shape.

Step 13

Duplicate the smaller triangular shape. Crop it with the sunburst shape via the Pathfinder.

Step 14

Clean the sunburst shape up a little so that nothing of it is visible inside the pen shape.

Step 15

Create a rectangle behind the columns. This is the background of the academy. Create a rectangle that matches the dimensions of your document. This is the image background.

Step 16

Now we’re done with the Illustrator part of this tutorial. We will now export our academy into a PSD file. However, there are certain things to take care of when exporting into PSD.

Illustrator merges all paths in a group into one single layer making it impossible to edit them separately. To avoid that we need to place every path in a group of its own. It is very helpful to then name the groups correctly, it makes it much easier to work with them in Photoshop. After grouping and naming everything correctly your layers window should look something like that shown below.

Step 17

Select all paths and give them a white fill with no stroke, colors will be applied later in Photoshop. Then go to File > Export and export into PSD. Use the following settings.

Step 18

Open the exported file in Photoshop. What you see will be a completely white image. Luckily we have named everything properly so we can begin with applying layer effects. Start by giving the background layer a Color Overlay of 80% gray. Give the academy background layer a Color Overlay of 40% gray and a Gradient Overlay of Multiply, Opacity at 60%, black to white, and linear at 90°.

Step 19

The top step of the stairway has the following layer effects:

• Inner Shadow: Screen, Opacity at 75%, Distance at 3px, Size at 5px, white
• Inner Glow: Multiply, Opacity at 25%, Size at 3px, black
• Color Overlay: Multiply, Opacity at 100%, 80% grey
• Gradient Overlay: Multiply, Opacity at 50%, linear 90°, white to black
• Stroke: Size: 1px, Position at Outside, Multiply, Opacity at 25%, black

When applying the Inner Shadow set the light angle to 90° and check Use Global Light. The steps below have the same effects, but slightly lighter Color Overlays (B: 85/B: 90).

Step 20

The column capitals have the following layer effects:

• Drop Shadow: Multiply, Opacity at 60%, Distance at 2px, Size at 5px, black
• Inner Shadow: Screen, Opacity at 75%, Distance at 2px, Size at 4px, white
• Inner Glow: Multiply, Opacity at 25%, Size at 3px, black
• Color Overlay: Multiply, Opacity at 100%, 98% gray
• Gradient Overlay: Multiply, Opacity at 40%, reflected 0°, black to white
• Stroke: Size of 1px, Position of Outside, Multiply, Opacity at 20%, black

The column bases have the same layer effects but no Drop Shadow.

Step 21

The columns itself have the same layer effects as the column capitals but no Drop Shadow, no Inner Shadow and no Color Overlay. The size of the Inner Glow is 5 px.

Step 22

For the fluting we have to give each of the three rectangles slightly different layer effects. The center one gets the following:

• Outer Glow: Screen, Opacity at 100%, Size at 5px, white
• Inner Glow: Multiply, Opacity at 10%, Size at 5px, black
• Color Overlay: Multiply, Opacity at 100%, Color: H=0;, S=1%, and B=94%
• Gradient Overlay: Multiply, Opacity at 10%, reflected 0°, black to white
• Stroke: Size at 1px, Position: Inside, Multiply, Opacity at 35%, black

The left one has the same effects except for these changes:

• Gradient Overlay: Multiply, Opacity at 10%, linear 0°, black to white
• Stroke: Size: 1px, Position of Inside, Multiply, Opacity at 25%, black

And the right one has the same effects as the left one except of course for the Gradient Overlay which is:

• Gradient Overlay: Multiply, Opacity at 10%, linear 0°, white to black

Step 23

Now for the architrave. It gets the following layer effects:

• Drop Shadow: Multiply, Opacity at 35%, Distance at 5px, Size at 5px, black
• Inner Shadow: Screen, Opacity at 75%, Distance at 5px, Size of 3px, white
• Inner Glow: Multiply, Opacity at 25%, Size of 2px, black
• Gradient Overlay: Multiply, Opacity at 20%, linear 90°, black to white
• Stroke: Size of 1px, Position: Outside, Multiply, Opacity at 50%, black

Step 24

The horizontal stripes at the left and at the right get the following layer effects:

• Drop Shadow: Screen, Opacity at 75%, Distance of 2px, Size of 2px, white
• Inner Shadow: Multiply, Opacity at 50%, Distance of 3px, Size of 2px, black
• Color Overlay: Multiply, Opacity at 100%, 80% gray

The text gets the same layer effects with the following changes:

• Inner Glow: Screen, Opacity at 75%, Size of 2px, white
• Color Overlay: Multiply, Opacity at 100%, 40% gray

Set the text anti-alias to smooth, default for Illustrator imports is crisp.

Step 25

The roof gets the same effects as the architrave but no Drop Shadow. The inner part of the roof gets the following effects:

• Drop Shadow: Screen, Opacity at 75%, Distance of 5px, Size of 5px, white
• Inner Shadow: Multiply, Opacity at 50%, Distance of 5px, Size of 10px, black
• Inner Glow: Screen, Opacity at 75%, Size of 2px, white
• Color Overlay: Multiply, Opacity at 100%, 70% gray
• Gradient Overlay: Multiply, Opacity at 80%, linear 90°,white to black

Step 26

The pen shape gets the following layer effects:

• Drop Shadow: Multiply, Opacity at 50%, Distance of 2px, Size of 2px, black
• Inner Shadow: Screen, Opacity at 50% Distance of 2px, Size of 2px, white
• Inner Glow: Screen, Opacity at 50%, Size of 5px, white
• Color Overlay: Multiply, Opacity at 100%, Color: H=0°, S=1%, and B=100%
• Gradient Overlay: Multiply, Opacity at 10%, linear 90°, black to white
• Stroke: Size of 1px, Position set to Outside, Multiply, Opacity at 50%, black

Wow, that was quite a lot of layer effects. Vector Plus members can review all the styles located in the PSD source file. Of course it isn’t necessary to stick to these values. Play around and find out what you like the best. Now that we are through with the layer effects, let’s do the rest.

Step 27

Create an opacity mask for the sunburst shape. In the opacity mask, select the Gradient tool (G) and draw a radial white-to-black gradient from the center of the sunburst towards its ends. Then set the layer’s Opacity to 60%.

Step 28

For the shadows on the columns I use this simple method: Control-click on the column layer thumbnail and press Select Pixels. This creates a selection of the layers content. Then with the Elliptical Marquee subtract a portion of the selection so you get something like that shown below.

Step 29

Go to Select > Modify > Contract and contract your selection by 1 px. Create a new layer, name it “Column 1 shadow” and fill the selection with black.

Create an opacity mask for this layer. In the opacity mask, select the Gradient Tool and draw a linear white to black gradient from the bottom-right corner to the upper-left part of your shadow. Set the Opacity of the layer to 40% and you should have a shadow like that shown below.

Step 30

Repeat with the other three columns. I decided to make the shadows bigger to the right.

Step 31

Use the same technique to add highlights to the staircase: Select Pixels of one of the steps, subtract a portion, contract by 1, create a new layer, fill with white, add opacity mask, draw a gradient and then set the layer’s Opacity to 40%.

Final Image

Add highlights to the other two steps, to the roof and to the pen shape and you’re done!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS3
• Difficulty: Intermediate
• Estimated Completion Time: 1.5 hours

Step 1

Create a circle (width 367px) with fill color and no stroke by using the Ellipse Tool (M). Make sure to press Shift while you create it so you get a perfect circle and apply a radial gradient, as shown in below.

Step 2

Let’s start with the markings. Create a rectangle (L) at a width of 0.688 and height of 13.044 – towards the upper side of the circle and replicate it towards the lower side (hold the Alt + Shift while you select and drag the upper one downwards).

Step 3

Select the rectangles using the Selection Tool (V). Group them together and align the two of them and the circle both horizontally and vertically on the center.

Step 4

Select the rectangles (V) and rotate them using the Rotate Tool (Right-click > Transform > Rotate) by 1 degree and click copy in the Rotate Tool Dialog Box.

Step 5

Now press Command + D to repeat the rotate copy, and repeat until you get to complete a circle made of small markers, as shown below.

Step 6

Select the middle rectangle from the top using the Selection Tool and enlarge its size downwards so this one stands out. You do this by dragging downwards with the Selection Tool (V) while you press the Shift key.

Step 7

While this marker is selected, copy and drag it downwards. Make sure you press both Alt + Shift while you drag it so it will be centered with the upper one. Once you’ve reached the bottom group them together (Command + G).

Step 8

Rotate the group by an increment of 20 degrees (Right-click > Transform > Rotate) and press copy in the Dialog Box.

Step 9

Duplicate the action in Step 8 until you covered all the circle by using Command + D.

Step 10

Now that we have the markers for the 20 increments, we’ll need the ones for the 10 increments. Select the center marker with the Selection Tool (V), copy and paste in front (Command + C and Command + F), then drag it from the bottom upwards by holding the Shift key so that the size is in between the small and big markers.

Step 11

Select the new marker with the Selection Tool and copy it downwards by dragging it while holding Alt + Shift.

Step 12

Group both of them (Command + G) and rotate by 10 degrees (Right-click > Transform > Rotate). This time in the Rotate Panel click OO.

Step 13

Select the rotated one group and rotate it again with 20 degrees, like in step 12 but this time press Copy in the Rotate Panel. Repeat (Command + D) until you get a full circle.

Step 14

Prepare for the text by drawing a circle inside using the Ellipse Tool (L) inside the big one and center align it with the rest

Step 15

While keeping the circle selected use the Type on a Path Tool to write the numbers on the circle that you’ve just created.

Step 16

Continue to create these numbers in increments of 20 until you are finished.

Step 17

Create a star with four corners by using the Star Tool. Play around with the arrows and Command while you draw it. The one I drew is 225,887px wide.

Step 18

Now that we have a start we need to color each corner in two so we’ll have to divide it on the middle:

1. Draw an empty line using the Line Segment Tool (\) that is longer than the vertical of the star.
2. Copy the line and Paste in Front (Command + C and Command + F) and rotate the new one by 45 degrees using Selection Tool (V), while holding the Shift key.
3. Repeat step 1 and 2 until you have four lines.
4. Select the lines and the star and center align them both horizontal and vertical.
5. With the lines and the star selected In the Pathfinder Panel (Shift + Command + F9) press divide.

Step 19

1. Color the sections of the star using the Direct Selection Tool and the colors of your choice.
2. Copy and Paste in Front (Command + C and Command + F) the colored star and rotate it 45 degrees using the Selection Tool (V) while holding the Shift Key.
3. Make the new star smaller using the Selection Key (V) and Shift + Alt.

Step 20

Delete three sides of the smaller star and leave just one. Select the two anchor points you see in the above image using the Direct Selection Tool (A). Then use the Selection Tool (V) to drag the upper-right while holding the Shift key until they intersect the bigger star.

Step 21

1. Select the remaining part of the small star using the Selection Tool (V), press R and drag towards the middle of the big star while holding down the Alt key.
2. Once you do that enter 90 in the Rotate Dialog Box and press Copy.
3. Repeat (Command + D) until you get a full star again.

Step 22

Using the Text Tool (T) enter all the text (”N,” “E,” “S,” “W,” etc…)

Step 23

Now that we’ve created the direction markers we need to create the mobile part of the compass. Enter the group containing the big star, copy the horizontal segment (Command + C), and paste it (Command + V). Now Select the upper two anchor points using the Direct Selection Tool (A), then Right-click > Average > Both.

Step 24

Add some color to the segment to make it stand out. I’ve added the colors, as shown below.

Step 25

Using the Ellipse Tool (L) while you hold the Shift key you add two concentric circles to the center part of the mobile segment. In the image below you can see the colors I’ve used for the radial gradients, but you can also access the source files available for all Vector Plus Members.

Step 26

Group (Command + G) all the elements drawn up to now together.

Step 27

Let’s create the golden frame of the compass. Create four circles using the Ellipse Tool (L) while you hold the Shift key. Start with creating the widest and finish with the smallest. I’ve created mine with the following widths:469px, 460px, 449px, and 393px.

Step 28

Now let’s add some gradients and group the circles together. The swatches I’ve used are available for the Vector Plus Members in the original format.

Step 29

Select both the golden part and the other and arrange them using the Selection Tool (V) until you get a similar illustration to that shown below.

Step 30

Lets add a shadow to the compass:

1. Create a white circle using the Ellipse Tool (L).
2. Use the Mesh Tool (U) to add 4 mesh points.
3. Use the Direction Selection Tool (A) to select the mesh points and then add the color: #4d4d4d to the center mesh point and #f2f2f2 to the outer mesh points.
4. After you are satisfied with the colors, select the circle using the Selection Tool (V) and transform it into an ellipse as shown.

Conclusion

Finally add the ellipse under the compass and position it so you can emulate a light source that created a shadow. Here is the image I’ve obtained.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS4
• Difficulty: Easy
• Estimated Completion Time: 30 minutes

Step 1

We want to create a chef’s knife in perspective view to incorporate in an illustrated recipe. First read up what Wikipedia has to say about this type of knife. Now fire up Illustrator, hit Command + N to create a new document and choose A4 with landscape orientation. Imagine a big chef’s knife lying on the cutting board at an angle, then draw the following shape using the Pen Tool (P).

Step 2

That will be the blade. Make sure it’s a closed shape. Get rid of the black stroke and fill it with a soft medium-to-light gray gradient, making sure it’s aligned with the blade so the tip will be lighter. From now on let’s assume that the light comes from the left so the right side will be darker.

Step 3

Let’s draw the cutting edge. With the blade selected copy it (Command + C) and paste it in front (Command + F). With the Direct Selection Tool (A) slide the bottom right vertex close to the edge, then reshape the edge’s curve by manipulating the handles of the top left vertex. You should get a thin shape as shown.

Step 4

Shade the cutting edge with a Linear Gradient from medium gray (top) to white (bottom) – nice and shiny!

Step 5

Draw two arched rectangles across the blade to simulate reflections. Always use Smart Guides (Command + U) to make sure the anchor points snap to the paths. Make the bottom vertices to overlap the cutting edge a little.

Step 6

Shade the reflections with standard, white to black gradients aligned with their direction. The manipulator in the next image, available only in Illustrator CS4, shows you the gradient’s direction.

If you have an older version of Illustrator just grab the Gradient Tool (G) from the toolbar, then click and drag on the object to orient the fill. We want to make the reflections fade as they recede from view so put the black color on top. Now in the Transparency panel, select the Screen blending mode from the pull-down menu and reduce the Opacity to 60%.

Step 7

Draw the bolster now. Make the right part stand out from the blade’s profile, but snap the left anchor points to the cutting edge, so the bolster will look thicker at the top and tapered down at the bottom.

Step 8

Shade the bolster with a linear gradient. Always maintain consistency with the light’s direction by applying the lighter shade to the left side.

Step 9

Add thickness to the bolster by drawing the following shape. Again use Smart Guides for precision.

Step 10

Fill this shape using a gradient with three shades to emphasize the curve.

Step 11

Draw the top of the handle with a single closed path.

Step 12

Fill it with a very dark gradient and make sure the left edge is slightly brighter. For the orientation refer to the following image.

Step 13

Create a copy of this object, right-click on it and select Arrange > Send to Back, or use the keyboard shortcut Shift + Command + Left Bracket key. Then move it down and snap it to the bottom of the bolster’s thickness.

Step 14

Erase the topmost anchor point then draw vertical connection lines:

Step 15

Now grab the Scissors Tool (C) and click on the bottom curve where the vertical connection line touches it (15a). Erase the little path that sticks out (15b). Now with the Direct Selection tool (A), draw a window around the new anchor point. Hit J to Join the two paths, choosing the Smooth option (15c).

Step 16

Join the leftmost segments as in the following image.

Step 17

Duplicate the top curve and hide it. We’ll combine its copy with the bottom curve to create the side of the handle. Lock the middle connection line, then use the Scissors Tool (C) to cut both the top and bottom curves where they intersect with it. When you’re done, erase the S-shaped segment between the two curves. Refer to the image below.

Step 18

Join the new paths to create two shapes for the side of the handle. Follow the instructions in the next image.

Step 19

Let’s shade the side of the handle. Again use gradients that help define the shape, remaining consistent with the light’s direction.

Step 20

Create the tang of the blade, the thin metal strip enclosed in the handle, by copying (Command + C) and pasting in front (Command + F) the two side shapes.

Lock the original shapes to avoid selecting them. Using the Direct Selection Tool (A), move the top anchor points down and the bottom points up, effectively creating a thin, centered slice of the side shapes. Shade the tang with light gray gradients, simulating both the rounded shape and the reflections.

Step 21

Create the handle’s rivets with three simple ellipses. Align and position them correctly by using a perspective guide. Make them bigger as they get closer. Shade them with linear gradients from white to light gray to simulate subtle ambient reflections. Our chef’s knife is now finished!

Conclusion

Even if you don’t possess advanced Illustrator skills you can still create realistic objects by paying attention to volume, perspective and shading. I hope this tutorial inspired you and made you hungry for more!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Step 1

Create new document, whatever size. A4 is fine. Draw the shape of the bird’s body using the Free Hand Tool and make it nice with the Shape Tool. This part requires a bit of creativity

Step 2

Color the shape blue. Then Copy the shape and paste in the same place. Now using the Up Arrow key, move the second shape 4 pixels up. And then change the color of the second shape to a lighter blue. For better a effect use the Radial Gradient Fill Tool with a lighter to darker blue. Still the first shape should be darker to get that dark line at the bottom.

Step 3

Copy the shape and place it in the white area. Copy it again and paste it. Then make it a bit larger and put it over the smaller one (green on pink example). Using the Back Minus Front option Cut the shape off. Then change it to blue (or use the gradient that we did in last step). And place it on our main shape.

Step 4

Do the same again but cut a smaller, thiner part. Those steps are needed to add some light effects, which make it more 3D.

Step 5

This step uses only one simple option: Intersect (marked by red box, shown below). Just as in the steps above, select two object and Intersect. You will get the shape that both object share.

This technique is an easy way to get shapes that you want in many other situations. In the picture below, notice that we used circles on the main shape, then the eye, then the eyeball, etc. Be sure to apply a radial fill to the eye as shown above.

Step 6

Do the same thing again. This time create the bottom part of the bird (that’s the way birds are built, a white patch makes the bird look more real).

Step 7

Coming back to using the Back Minus Front option. Cut off the shape of the first eyelash. Than copy, paste, resize, and rotate to put them together. Now copy the whole thing and paste in place, change to a darker blue, rotate a bit, and move it to the back. Lastly, group it and place it on the bird.

Step 8

To draw the legs and nose you need to use the Free Hand Tool and make it nice with the Shape Tool. In this step, we want to show you how using the same color, but in different brightness, adds more depth and dimensionality.

Step 9

This must be the easiest step because you do do not have to be exact. Just draw away and create some jagged shapes for the eye. The more uneven the better.

Step 10

Now let’s make the wings. In the image below, you can see again how we cut the shape out of the circle using different circles. Then we rounded the corners a bit using the Shape Tool. Also, we added some light effect, just like in Step 4.

Place the wing on the bird. Also, Copy and Paste In Place the same wing, but change color to gray, move to the back, and move to the left a bit. That gives the effect of the second wing on the other side of the bird (you can see tiny gray part near the legs).

Step 11

We’re almost done. The hat is a simple thing drawn using the Freehand Tool to create the shapes shown below. They each were given different brightness, fills, and a radial gradients was placed on the white stripe to add 3D.

Conclusion

Place the hat on the bird. Add a dark blue ellipse under the hat (some kind of shadow of the hat). And our Quirky looking twitter bird in vectors is done!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. In this tutorial, we will also create an icon from this as well. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Illustrator CS4, Icon Composer – Independent (OSX)
• Difficulty: Intermediate
• Estimated Completion Time: 2-3 hours

Section 1: Illustration

Step 1 Research

Gather some reference material and images/illustrations of brains. Medical books are a perfect source. The brain is as complex externally as it is internally. Main things to keep in mind are that the brain is an overall oval shape that forms the gray matter, then there’s the cerebellum and the brain stem. Looking from the front/top view, the brain is bipolar and consists of two hemispheres.

Step 2 Drawing

I like sketching out a basic form on paper or digitally first, before I take it to Illustrator. This is especially true with an organic form, as you’re not quite sure how it will look like, so it will be beneficial to sketch out the basics before moving onto vectors.

When you sketch out the look of the brain, consider the following:

Point of View – Which side are you going to render your brain from? A side view tends to be not so dimensional, hence I suggest you position it a bit from the side to integrate the line that separates the two hemispheres.

Modulate – A brain looks almost like a big network of non-uniform pipes that were bent together onto a spaghetti ball. These pipes have a unique curvature, but you can reuse such elements as S and M shaped zigzags, T intersections and various other elements in your brain; just remember to keep the overall shape and to bulge it out in places.



Exaggerate – We’re not going for a realistic anatomically correct rendering. Make use of the curves to accent certain areas.

Simplify – You don’t have to do as many squiggles as an actual brain. Again, we’re not making a realistic render, so avoid unnecessary detail. This is because when it will come to converting the image to an icon, some detail may be lost or break when viewed at smaller resolutions. I even omitted the cerebellum and brain stem to simplify the image.

Consistent – Keep your line art consistent. Line thickness dictates the proximity and weight of the curves among each other, so keep that in mind.

It may be an unnecessary step for some, but I usually go over a pencil sketch in Flash to produce clean line art, and then work from that in Illustrator, though feel free to use your preferred workflow.

Step 3 – Vectorizing

Create a 512 pixel by 512 pixel canvas in Illustrator. Import your sketch onto your canvas and using the Pen Tool, start creating the line art. If you’re comfortable with Illustrator’s Brush Tool, or using a tablet, you might use that instead, but convert them to outlines after. Be sure to intersect curvature with direction in mind and create appropriate folds and overlaps.

Keep the extreme folds with sharp ends, and for softer folds, create more rounded ends or even add tiny folds to support visual structure. Merge all the shapes into a single fill using the pathfinder Unite tool and rename the layer to "linework."

Use the Bucket Bool to fill with colors, then Extrude.

Step 4 – Coloring

Once you have all the line art sorted, use the Live Paint Bucket Tool to create the fills. Select the line art and use a slightly desaturated pink color for the base, don’t make it gray or too pink either, but its up to you.

Because the bucket tool is a Live Paint feature, your vectors will become one object under a Live Paint Group. To fix that and separate them, go to Object > Live paint > Expand. This will convert your Live Paint Group into a normal group of fills in your layer palette. Then go ahead and separate the pink color fills onto another layer and rename it "base."

Step 5 – Shading

We need to add some further detail to make the brain look glossy and more three dimensional by adding highlights and shadows. Decide on which direction the light is coming from. In my case, it is standard top-left. Create a new layer named "highlights.". Now using the Pen Tool, start making very rounded shapes facing your assumed light using a slightly brighter color than your base.

Keep in mind that it’s not supposed to be realistic, but to give a sense of gloss by adding some specularity. Keep it simple and don’t add too much, because the colors would blend at smaller resolutions.

While the highlights are rounded and are quite independent, the shadows will be adjacent to the edges, opposite of the highlights. On another layer called “shadows,” using the pen tool and a darker color from the base, create some shadows. Make sure to add them in places where the brain shapes overlap and cast shadows onto each other.

Duplicate your linework and base layers onto a new one called “gradient,” which we’ll use to add another shading feature to the brain. Use the pathfinder Unite tool again to merge the line art and the base pink together into a single fill. Then, make it a gradient fill, using a shade of pink other than ones already used, and some soft color. I used a shade of pink with a bit of orange in it. Set the layer above everything else and set the blending mode to "Color."

The last step is to create some shadow underneath out brain, strictly for icon use. Duplicate the base layer and put it underneath it. Fill the shapes with black and use Effects > Photoshop Effects > Blur > Gaussian Blur with 10px value to blur out the shadow. Make sure to rescale and position everything so that nothing touches the edge of the canvas and that the shadow isn’t cropped by it either.

You should end up with 6 main elements: “gradient,” “linework,” “highlights,” “shades,” “base pink,” and “shadow.” The final illustration is below. Now you are ready to convert the illustration into a file icon!

Section 2 – Making Our Brain into an Icon

Step 1 – Overview

The latest Mac OS Leopard and of course the upcoming Snow Leopard supports icon sizes up to 512 pixels by 512 pixels, while windows Vista only supports 256 px by 256 px. Mac OSX supports all kinds of formats to be used as an icon, due to the way the operating system renders images. Unfortunately, Windows deals with ICO format, which is not consistent between Vista and older version of Windows.

Mac OSX comes with a neat utility called "Icon Composer" and it sits in Root > Developer > Applications > Utilities. It’s part of Apple’s free developer tools available here (free account required).

Windows has no native utility that you can use, but there is a freeware icon editor IcoFX that can export to ICO among other things.

For the purposes of this tutorial, I will just use the original 512×512 image and let the software resize it automatically. The required resolutions for Mac OS are 512x, 256x, 128x, 32x, 16x. Strangely enough, for Windows, they are 256x, 48x, 32x, 24x, 16x.

In reality, you would edit and refine the icon each step it is sized down, because there is an incredible loss of detail, and at lowest resolutions the shapes will be indistinguishable and you’ll need to resort to manual editing down to pixels.

Step 2 – Mac OSX

If you don’t want to sign up on Apple and download the developer tools just to get Icon Composer, you’re in luck, because Mac OS supports standard RGBA PNG’s in its icons. All you would need to do is save your file out of Illustrator as a 512×512 PNG with transparency, open it with Preview, click Edit > Copy to copy the image. Then go to the folder you want to change the icon of and right-click > get info (or Command + I). Look for the icon in the top-left corner next to the folder name, and click on it. It will highlight with a light blue color.

Once you’ve got that highlighted, you can go ahead and click Edit > Paste. And that will insert the PNG you previously copied.

The downside of that is that the image is still 512px by 512px, even for smaller sizes which impacts the memory when displaying the icon. Another is the fact that you’ll have a hard time reverting it back if you swapped one of the system icons.

To create a native OSX ICNS file, run Icon Composer and drag the 512px by 512px PNG into the are of the same size. The program will prompt you if you want to copy and resize the image over to other resolutions. If you wish to create a separate image for each, go ahead. At this point, I will just let the computer resize it for me.

You can see there is a Masks tab on the bottom. What it does, is lets you import an independent image that will handle transparency. Since we’re using PNG’s, we’re good to go File > Export and save out an ICNS file.

If you open our new ICNS in preview, you will see that it’s a container for 5 images of their respective sizes.

At this point, it’s tricky to implement the ICNS as an icon, since you can’t just copy and paste it in as a whole file. If you are into customization on your mac, and like custom icons, or you’re a designer that needs to test their artwork, I suggest a very neat utility CandyBar. It’s not free, but is well worth it, if you plan on taking customization seriously.

Step 2 Windows Vista

Vista is different from Windows XP. Icons with PNG compression were introduced, and are carried on to Windows 7, enabling you to create nice icons with adequate transparency. Windows handles icons through ICO files. They are the equivalent of the ICNS for mac, which are containers for images for various resolutions.

We’re going to be using a freeware application called IcoFX. Windows doesn’t support icon resolutions above 256px by 256px, so I suggest that you export a 256px image straight out of Illustrator to avoid extra compression.

Go to File > import image to import your 256px png. Use 32 bit 256×256 settings.

In the left panel, right-click > new image to import one with the next resolution. You can go ahead and make a custom import of 128×128 as an extra size. Then import the rest of the images.

Once you have all the images loaded, you’re ready to save the file as an ICO file.

To change an icon of a folder/location in Vista, in this case I’ll change the "my computer" icon. Right-click on it, choose properties. If you’re modifying a shortcut, go to the Shortcut tab, or if it’s a folder go to the Customize tab. Click the Choose icon button and pick the ICO file you saved.

Confirm the image choice and the icon should reload into your custom one.

Conclusion

Now you know the process of creating an icon from the ground up, for both Mac OSX and Windows Vista. Whether you read the tutorial from Section 1 to follow the illustration process, or jumped straight to Section 2 to see how to convert images into usable system icons, I thank you for following the tutorial and hope to see some great customization art! There are a lot of great places to start.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.