In this tutorial, I will show you how to create a cartoon style illustration of a brain, then how to convert the image for use as an icon for OSX and Vista. I'll discuss some points about detailing for icon design as well. Let's get started!
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 512x512 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 512x512 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 256x256 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 128x128 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.
