View Full Version : TUTORIAL: Creating Eyes using Gimp

12th Sep 2007, 2:36 PM
This is my first tutorial, I'm not great with images, so hopefully I can explain better than I can screenshot!

This tutorial is based on using the Gimp program,
however, I am sure you can find it easy to follow in another graphics program which may have the same functions. Basic knowledge of Gimp and bodyshop is needed, as this is not a tutorial on how to use every function of these programs.

To start, open Gimp (or whichever program you may be using. MS Paint is not an option here, if you do not have any program, you may go to the gimp website and download the needed programs there.)

Open your bodyshop program from the newest installed expansion pack you have. This may take a while to load, as it takes forever on my own computer, though it may be that Windows Vista is not that great.

Great! Now we will start the process of making realistic default eyes for your sims. You will not be able to change the eyes of already built sims in your game with this, as this is not a mask. However, using these eyes when building a new sims will be genetic, so your sim babies will have these eyes as well!

In bodyshop, we will select to start a new project, and choose to create genetics. Next, choose to create eyes.
You will pick any of the default eyes and export. Once exported, it will show you a link to the file in which to open the image to be edited in your graphic program.

Here is where I will get into detail and show some images that will help guide you in making gorgeous eyes for your sims!

You can go ahead and open the needed image in Gimp, but we will not need it just yet. Start by making a new image that is 100px in width and 100px in height on a white background. Create a new transparent layer, as we will not be needing the white background later.

Select the Ellipse tool and double click on that so the tool options opens. Check the box Antialiasing, this will make the edges smooth. Also, using the drop down menu, change the tool from free select, to fixed size. As shown, it should be 70px by 70px. This may appear to be too big, but that is ok, we will be scaling the image later.

Now we are ready to start making the eyes, so let's decide on a color shall we? I've already made a honey brown for my sims, but for the sake of this tutorial, we'll make honey brown.

Using the ellipse tool we talked about, make a selection on our new blank image, and fill it with a dark brown, or, in this case, I will be using: 5e4e29
Without deselecting, create a new layer and shrink the selection by 4px. (select-->shrink-->4px-->ok) We will now fill the selection with a lighter brown, and since we are making honey brown, the color I chose would be: b5974f
Now, create another new layer, we can deselect now. Using the same dark brown, or a shade between the two we have already used, we will use a circular brush to make the pupil, we will later change the pupil to black.

For the pupil, I have created a new brush since the Gimp ones seem to be too small. You can do the same if you like, by opening the brushes dialog and clicking the "new brush" option. If you would like the settings the same as mine, they would be:
Shape= circle (obviously)
Radius= 13.5
Spikes= 2
Hardness= 0.96
Aspect Ratio= 1.0
Angle= 0
and spacing does not matter here.

Our image should now look like the one in the screenshot. And I will stress here, please know the basic functions of Gimp, as I can not explain it all.

In the layers dialog, select the first new layer we created. (the large brown circle) Right click and duplicate the layer, we will need an extra on of these layers to cut some imperfections as we go along.

This is where the eye will start to come to life! Go back to the layers dialog and select the top layer (the smallest brown circle), and merge it down. layer-->merge down.
Ok now select the smudger tool, double click on it to open the tool options. Check the fade out box and change the length to about 27px, you can play around with that if you like, but this is the setting I prefer. Now, in your brushes dialog, select one of the smaller fuzzy circles, I like the one which is 5px by 5px, as well as the smallest one.

Ok, now we begin at the eyes pupil. What we are doing here, is making strokes along the pupils edge, take a look at the small screen shot here to see where to make the strokes.
You may make more or less, or even at any angle you chose, this is just a basic example. I am going to make a few more strokes to add more depth to the iris.

Ok, that may have been more than a few extra strokes, but you get the idea right? As you might see, some of the strokes may have found their way onto the darker circle, or beyond that, so we need to clean that up! Let's select our duplicated layer. Right click on the duplicated layer in the layers dialog and choose Alpha to Selection. Shrink it as we did before (4px), then choose select-->invert. Without deselecting, we will chose the top layer and cut the image. edit-->cut. Looks much better already!

Now let's merge that layer onto the duplicated layer . We are going to use the same process of smudging, only this time we are going to be smudging from the outside in. We can select a different size fuzzy brush here if we like, but I'm going to keep using the 5px by 5px brush for now.

It's got some depth to it now, but it still looks kinda weird, so let's create a new transparent layer again. Using the circle brush we created, or you used for your pupil, and the color black, center the brush where the pupil should be. It looks more like an eye now huh?

But yet we are not done, let's choose the smallest fuzzy brush and repeat the process with the pupil as before, only we won't need quite as many strokes this time, as we don't want to completely distort the eye's pupil. I do recommend that you go over some areas more than once, which adds depth to the eye.

Now let's hide the white background and merge the visible layers! image-->merge visible layers.
This is the part where we add some more detail to the eye, so that it looks more realistic!

Right click on the layer in the layers dialog box and choose alpha to selection. Create a new transparent layer. Using a larger fuzzy brush, we will create a shadow on the upper part of the eye, do not deselect until I say ok?!

Using the color black, and the paintbrush, paint along the upper edge of the eye on our new layer, do not worry about the darkness, we will change that soon!

Create another new layer, and switch your color to white. Make a kind of crescent moon shape along the lower edge of the eye. This makes the highlight on the eye. We can now deselect! Change the highlight layer to overlay, at 100% opacity. Now change the shadow layer to Grain Merge, at about 70% opacity, depending on your likeness. Yours should look similar to mine shown here.

Almost finished now! Let's create a light reflection on the eye to make it stand out more. So let's create yet another transparent layer shall we? Let's choose the fuzzy cirlce brush which is 17x17px (the second to the largest), and the color white again. On the upper right side of the pupil, let's just paint a small spot with the selected brush.

Using that same brush, let's chose the smudge tool again, and smudge toward the upper right side of the iris.

Looking more real now right? Now we need to hide the background again and merge the visible layers once again. Let's scale the image so it is a bit smaller now. We will scale it to about 60px by 60px, and change the interpolation to cubic(best). We can actually delete the white background now. And while we're at it, let's rotate the layer 90degrees to the right so it is sideways, as it will need to be in our sims image we are editing. (you'll find that function under image-->transform).

Now we can start editing the image we exported from bodyshop!

Start by creating a new transparent layer ontop of the image. Next, copy and paste our eyeball onto the new layer. Before we anchor the layer, let's move the eyeball to the center of the pre-existing eyeball. Anchor the eyeball to the new transparent layer.

Now we need to do some more editing to this exported image before we can send it on to bodyshop, but you can save it thus far to see how it is turning out, just do not close it, as it will merge the layers together. You can always undo the commands in Gimp to keep moving the eyeball to a position you are happy with. Mine so far looks like this:http://thumbs.modthesims2.com/getimage.php?file=619204
but I need to edit the colors and such still. Let's use our eyedropper tool to select the lightest color on the pre-existing image that is surrounding the eyeball. Let's create another new layer ontop of the bottom layer. We are going to need to switch the colors so that the color we picked is the background swatch in gimp. Let's choose a new foreground color. I like to use: bd8a7b
It is a color close to the little funny skin things in our eyes.

Using the rectangular select tool, let's create a rectangle on the newest transparent layer and fill it with the skin color. It should look like the image, only bigger (I cropped mine to make for a short upload time for this tutorial).

Now let's create a new layer ontop of the skin color layer. Using our ellipse tool, change the settings to free select. Make an oval shape so that the new eyeball is as much in the center as possible. Fill it with the background color.

If you save it and look at it in bodyshop, you can't see any of the skin color on the eye just yet, so we'll fix this a bit. Using our friendly fuzzy circle again! For this, I use the largest fuzzy circle brush. Let's color the narrow sides of the oval with the skin color a bit.

In bodyshop, it still looks a little unreal, so let's add another layer ontop of the layer we were just working on, and repeat the step, going a bit closer to the eyeball, but not too close, and change to opacity of the layer to about 53%
Ok, just a few more steps now until we are finished! We will need our black and our fuzzy cirlce and another new layer..lol. What we will do now is just extend the shadow we made on our eyeball, so that our sims eye has a more realistic shadow on their eyes. Let's also change the opacity to about 57%

We might not be able to see our shading on our gray bodyshop model, but let's import it now and try it out! Don't forget to edit your swatch file if you wish! And enter a tool tip so if sharing with others, they know you made it! Here is what these eyes look like on a colorful sim!(best results are seen in game play)

I hope this tutorial was fairly easy to follow along. If needed to clarify anything, please let me know!

13th Sep 2007, 2:06 AM
Very nicely done! And indeed people should be able to use this technique with other graphics editors also. Thank you!

26th Nov 2007, 6:06 AM
Very, very nice! I'll be trying this out very soon.

14th Aug 2008, 2:25 AM
Alright, this is pretty helpful! Except, I'm stuck at editing the image exported from bodyshop. The image is 128x128 pixels, and the only way to get my eye onto the bodyshop one is to scale it up then back down. Sorry if this doesn't make sense, I'm confused. @[email protected]

18th Aug 2008, 3:04 AM
ugh, whenever i test it out in bodyshop, it only shows skin color, no eyes at all...whys it doing that?

3rd Sep 2008, 3:40 AM
Heyy..I just came across this and thought I could try to give an answer. I wrote the tutorial, but after getting a new ISP, I forgot my password and had to create a new account.

To the first question from VeiroLime, the 128px X 128px image should be copied and pasted onto the exported bodyshop image, and placed in the upper left corner. I no longer use Gimp, because I use pspX2 now, so I'm not sure how the newer Gimp works. You should be able to go to the edit menu of the image and select copy, and then on the bodyshop image, select paste. Then use the move tool to put the eye in the correct spot.

To the second question from AnthonyRappluver, are you making sure you are importing the image correctly? If you've followed all the steps, it should work fine. Are you making sure you aren't rotating the entire image?

25th Oct 2008, 4:28 AM
It took me a minute to get this, but once I did they came out good. Little more practice and I'll be as good as you lol! Thanks for the help!!

4th Nov 2008, 4:10 PM
I was doing great until the "anchoring eyeball" bit towards the end. how do you do that? :blink: :!:

13th Dec 2008, 9:29 AM
Great! Looks like a good place to start learning to create custom eyes. Ill be trying this out soon

28th Dec 2008, 2:34 AM
Great tutorial! I can't wait to upload the eyes I just made! Thanks x100! :)

8th Mar 2009, 3:26 PM
awesome tut. I've been looking around the tutorials all day for something easy to start with and does not involve SimPE (doesn't work on this machine). Anyway im a constant user of Gimp (except for animations) so expect to see some of my work soon. Thanks again I did a lot of what you said but changed it slightly.

14th Apr 2009, 9:03 PM
lol...i cannot figure this out...i think i have a different version of GIMP...halp

20th Apr 2009, 3:38 AM
Grrr...I am having problems! I did the tutorial, the whole thing but it doesn't show up in Body Shop and I don't know what to do! My eyes looked really cool but then...I clikced refresh like a kazillion times on body shop and nothing happened! What should I do??? Please either send me a message or reply on here, Thank you!

9th May 2009, 10:06 PM
Did you save?
It happened to me many times.

25th Aug 2009, 1:02 AM
Thanks so much for this!
Now i can make my own eyes and don't have to copy other photos or use real eyes!
Thanks you thank you THANK YOU! phew, so much copy and editing is out of eye making now!

1st Jan 2010, 5:13 PM
Great..but I don't get how to change the colour of the brush, its permanently on black on mine...and I think I have a newer version of gimp..any chance of a tutorial update?!


19th Jan 2010, 9:49 AM
Thank you! This was a great help! I've been practicing this technique with my last couple of eye sets.

25th Sep 2010, 2:47 PM
this is so helpful but im stuck on the bit where you have to make the white backgrond disappear so you can copy and paste.i copyed and pasted but the white background appeard.

well i hope you reply or someone else does. thankyou :]

5th Jan 2011, 2:40 PM
I know this is a really old tutorial, but I still wanted to say thanks and I appreciate how well this was explained!

31st Dec 2011, 12:33 AM
thanks,this is very easy to follow :D