11 Step Tutorial To Create Eyeball Vector Art


Eyeball Vector Art Tutorial FinalHere is a step by step tutorial to create a vector art eyeball. A while back, I had put up a tutorial, 10 step tutorial to create shiny ball vector art, that seemed to have been taken well by the readers. It has got a 21% of page-views in the past two months. On the blog and at other places, people have asked for more of such tutorials and hence I thought I would make one more.

This tutorial is a little advanced than the one to create a shiny ball, but is along similar lines. I have created the above image using Inkscape, but I believe it can be reproduced using Illustrator or Corel Draw.

Step 1

Eyeball Vector Art Tutorial Step 01

Use the ellipse tool to create a circle. You may need to hold down the control key (or the command key in Mac) to get a perfect circle. I would be making a green eyeball, but you may follow the same method to create eyeballs of just about any color. So, which ever color you choose, fill that color to the circle (and the outline should be switched off). The color chosen should be a bit darker than the average color or the mid-tone.

Step 2

Eyeball Vector Art Tutorial Step 02

Now, create a ten-sided star. On Inkscape, there is a polygon tool to create this. You would have similar tool in other software. (If anyone knows the tool in Illustrator, Corel Draw, and other software, please let me know using the comments). Fill the star with an even darker version of the base color. Note that this is not black, but something close to it. It should be differentiable from black color when they overlap.

It is not necessary that you choose a ten-sided star. You may choose anything from 8-sided to 16-sided. The orientation is not important. We will be using this shape to represent the iris patterns of the eye.

Step 3

Eyeball Vector Art Tutorial Step 03

Now move the star over the circle, and place it roughly in the center. Do not worry if it is not absolutely in the center. A rough estimate should suffice. After that, use the ellipse tool again to create a smaller circle and color it black.

Step 4

Eyeball Vector Art Tutorial Step 04

Move this smaller black circle over the bigger circle and the star shape and place it in the center.

Step 5

Eyeball Vector Art Tutorial Step 05

Make a copy of the bigger circle, and give it a very light and saturated tone. We will be using this to create the shine of the eyeball.

Step 6

Eyeball Vector Art Tutorial Step 06

This is an important step. Change the fill of the circle to a gradient. The gradient is between a 100% transparency to 0% transparency. On Inkscape, this can be accessed using the Fill and Stroke settings (Ctrl+Shift+F, or Command+Shift+F on Mac). I am not sure about other software, but you should be able find this by looking around in your software's menus for 'Gradient' or 'Gradient Fill'. I have chosen the light source to be on the right of the image, and a little edged towards the top. Hence, I keep the 0% transparency edge to the right top, and 100% transparency color diagonally opposite to it.

It is important to note that the gradient must be created from [Transparent color] to [Green or any other color you started with]. It is not from [White] to [Green or other color].

Step 7

Eyeball Vector Art Tutorial Step 07

Now move that gradient filled circle exactly over the group of circles and stars. It should be perfectly aligned with the base circle. As you can see this will give the depth to the eyeball. Next create a couple of circles (I have made three here) - small circles of varying sizes. Try to keep the larger among these circle towards the right - this is the side from where there is a possible light source (which we chose in the earlier step).

Make these group of smaller circle roughly the size of the black smaller circle in the middle of the eye - but a little larger. You may observe the above illustration as a guide. I have also shown a zoomed copy, in case the contrast between the background and the circles is not making them clear. Note that, the color of these circles should be something very close to white, and tinted marginally with the base color.

Step 8

Eyeball Vector Art Tutorial Step 08

This is a simple step. Just move these smaller circle over the small black circle (and over the gradient filled circle). Position the individual circles if required.

Step 9

Eyeball Vector Art Tutorial Step 09

Again, make a copy of the original circle, and fill it with black color. We will be using it to create the shadow are of the eyeball.

Step 10

Eyeball Vector Art Tutorial Step 10

Make the fill to a gradient, again from [Black] to [Transparent]. The direction of the gradient is a bit counter intuitive. We should have had the direction diagonally opposite to the previous shining gradient. But here, I have chosen a left-top to right-bottom direction. The reason is that the eyebrow ridge causes a bit of soft shadow on the eyeball. Hence I kept one factor of the shadow gradient direction top to bottom. For it to be in accordance with the shining gradient, I added the factor or left to right. Combining these to factors, I arrived at this direction for the shadow. Remember that it is a [Black] to [Transparent] gradient and not [Black] to [White] gradient.

Step 11

Eyeball Vector Art Tutorial Final

Align the shadow gradient circle over the top of everything else, and voila! We have an vectorized eyeball. You may group and name them in your software so that they can be easily transformed and used for more of your artworks.

As an example, I used the above eyeball, to create a vector art of an eye.

Eyeball Vector Art Tutorial Example

If you have any doubts or questions, use the comment form to ask. Also, let me know if you have any suggestions or requests for future tutorials.


Very interesting tutorial, I really love your style. Keep them up! :)

Thanks Liza!

Why do you call it vector art?

Check out this post: What is Vector Art?

Of course, you can still shoot me a mail if you want to, Ashish. ;)

Excellent tutorial ! Keep them coming! :)

Thank you, Sandy. Sure, I plan to write more tutorials. :)

Very good tutorial! You asked for how to make a 10 sided star in CorelDRAW and I know how. I used X3 but I think it will work in lower versions. Using the Polygon Tool, make a shape. In the property tool bar, set the number of points to 10. Click the Shape Tool and holding CTRL, click and drag a node towards the center. Now you should have a 10 sided star.

Hey thanks for that info, MrHelp.

Ya ain´t got much mail lately, it seems. Just wanna say that I read that i-ball tut & will get to it as soon as I get home. Thanx for it.

Great tutorial:)! I tried it and it worked out great! Keep them coming, I will definitely use them...
Have you done any tigers? Would love to try that:)

Add new comment