aikea guinea
9th Jul 2009, 12:00 AM
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/title.jpg
This tutorial is for anyone interested in changing the basic eye texture for TS3, plus a bonus tutorial on how to change the whites of the eyes. It's a mostly a technical tutorial, but I've tossed in a few 'artistic' tips throughout.
It was a bit long in coming as I wanted to run a few experiments and see just what file did what to the eye textures. Because of this, I discovered that there's only one file that gets edited to change the eye texture, which should save a lot of headaches and file space.
Many of the images in this tutorial are thumbnailed, so be sure to click on them to get a full-sized version!
What You Need:
-Adobe Photoshop
-Nvidia DDS plugins for Adobe Photoshop (http://developer.nvidia.com/object/photoshop_dds_plugins.html)
-S3PE to create the package file (http://www.simlogical.com/Sims3ToolsForum/index.php?topic=171.0)
-Extracted eye multiplier, with bonus facial overlays for changing the whites (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/Eye%20Files.rar) - Extracted for personal use, uploaded to save you a step
Step One
Open the file S3_00B2D882_00000000_C2B560673F00D806_amFaceEyeColor_o_0xc2b560673f00d806%%+_IMG.dds in Photoshop. You will get the following prompt:
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_02.jpg
Hit 'OK' and the file will open. Make sure you have 'Load MIP maps' unchecked, or you'll get an image with a bunch of repeating and progressively smaller versions of the same image.
Step Two:
This is what you should see:
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_03.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_03.jpg)
This is the image that gives the eyes their texture, which gets a color overlaid on it in the game.
I've found that it's easiest for me to edit the image in color in a separate document, with my work in the same place as the image I'm going to be replacing. The 'ymFace_o' image is a good one to work on.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_04.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_04.jpg)
Working with several layers can give an endless supply of effects, but try to keep in mind that you'll be desaturating your work when you're done, and many details won't translate very well.
I haven't tried this myself, but in theory it may be possible to keep the image in color, with color variations that would translate into the game as different colors depending on what 'main' color was chosen. If anyone has time to test this, I think it'd be interesting to see the results. This tutorial is done using the greyscale method.
Any 'shine' you add to the eyes will show up as a very bright version of the overlay color, unless you get crafty with your alpha channel. (Alpha channels will be covered shortly.)
Step Three
When you're done editing your new eye texture how you want it, turn off all the layers that aren't part of the iris and pupil.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_5a.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_5a.jpg)
Use ctrl+a to select the entire canvas, then ctrl+c to copy. Make sure you're on a visible layer. Note the little black dot in the lower left hand corner. This is to help us position the iris in exactly the right place in the document we'll be importing. I use a hard round 19 pixel brush and have it a bit off the edge of the layer.
Step Four
Paste your edited iris texture in the amFaceEyeColor_o file. It'll end up in the center of the image.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_5b.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_5b.jpg)
Go to 'View' and make sure 'Snap' is on. Then go down to 'Snap To' and make sure the following options are checked:
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_5c.jpg
Drag your new iris layer down to the lower left hand corner of the document; it'll 'snap' in place when you've reached the edge.
I like to do a bit of cleanup at this point, using a hard round brush in white to 'erase' the original iris.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_5e.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_5e.jpg)
Once you've done this, with your iris layer selected go to Image -- Adjustments -- Desaturate and desaturate it.
Step Five:
Now we're going to work on the alpha channel. Click on the 'Channels' tab and click the little eyes next to RBG and Alpha in order to toggle them. With the Alpha selected, use a hard round brush in black to 'erase' the white part of the image.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_5g.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_5g.jpg)
Once you've done that, retoggle the RGB channels and return to the 'Layers' tab. Use ctrl+a and ctrl+c to copy your iris layer, then return to the 'Channels' tab. Again toggle the RGB and Alpha channels. With the Alpha channel selected, paste your iris layer.
DO NOT DESELECT ANYTHING!
Drag the selection down to the lower left corner, allowing it to 'snap' into place. You're now perfectly positioned to create your alpha, but don't deselect just yet!
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_5j.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_5j.jpg)
Now you're going to need to change this selection to pure white. The easiest way to do this is to go to Image -- Adjustments -- Levels, and slide the little triangle at the very bottom under the greyscale bar on the far left all the way over to the far right. This will turn your selection white.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_5l.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_5l.jpg)
Now you can deselect! Use a brush in black to get rid of the snap guide in the lower left, and you're all set! Toggle RGB on, then return to the 'Layers' tab to flatten the image before saving. Be sure to use DXT3 or DXT5. Don't change the name, and be sure to save it in a separate folder from the originals in case you want to go back and do more eyes at a later time.
If you wanted to add static 'shine' to the eyes, you'd simply 'paint' it on the alpha here in black. Those parts will show up white in the game.
Step 6:
Now it's time to build the package file. Open S3PE, select 'New,' and 'Import.' Navigate to where you saved your image file and hit enter or click 'OK' to import it into your package. You'll get the following screen:
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_07.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_07.jpg)
Without changing anything, just hit 'OK.' That's it!
Save it to your 'Mods -- Packages' folder with a descriptive name, delete your simCompositorCache.package from My Documents\Electronic Arts\The Sims 3, then fire up your game and see if they worked.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_08.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_08.jpg)
Bonus Tutorial: Changing the Whites
I never much cared for the whites that come with the game, and spent ages trying to figure out how to change them. (Part of my problem was that I'm still getting used to the idea of working with channels, and so never thought to look at the Alpha channels on the various overlay images.) They're OK, but I like a bit more realism in my game.
I have to warn that they're connected to an overlay image that also contains the teeth, tongue, inner mouth, and, for females, a lip overlay. So if someone makes a teeth overlay at any point, you'll either have to combine your favored whites, or go without something. Kind of a weird thing to be concerned about, but I thought I'd toss it out there anyway.
Step One:
You'll be editing the facial overlays for this, so open up whichever one you want to work on first. I worked on 'ymFace_o' for the tutorial.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_10.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_10.jpg)
You can see how the whites of the eyes are in the lower left corner, along with the iris. Edit that part of the image until you have something you're happy with.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_09.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_09.jpg)
(As you can see, I have a file specifically called 'eyes.psd' where I've done all my editing. I find this easier than trying to directly edit the overlay images.)
Copy all of your edited image and paste it over the 'ymFace_o' file, then click on the 'Channels' tab. Toggle the RGB and Alpha channels. Select a square around the lower left corner, and fill this with white.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_12.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_12.jpg)
Toggle the RGB and Alpha channels once more, then go back to the 'Layers' tab. Flatten your image and save it as a DXT3 or DXT5 file, and save it with the same name away from the original file.
Repeat this for PU, CU, TF, TM, YF, AM, AF, EM, and EF to have the new whites show up for all the ages and genders.
Then, open S3PE, select 'New,' 'Import,' then navigate to where you saved your edited images. Select them all and hit 'Open,' then 'Import.' Save it to your 'Mods -- Packages' folder with a descriptive name, delete your simCompositorCache.package from My Documents\Electronic Arts\The Sims 3, then fire up your game and see if they worked.
If you have any questions, don't hesitate to ask! Even if I can't answer it, someone else may be able to.
This tutorial is for anyone interested in changing the basic eye texture for TS3, plus a bonus tutorial on how to change the whites of the eyes. It's a mostly a technical tutorial, but I've tossed in a few 'artistic' tips throughout.
It was a bit long in coming as I wanted to run a few experiments and see just what file did what to the eye textures. Because of this, I discovered that there's only one file that gets edited to change the eye texture, which should save a lot of headaches and file space.
Many of the images in this tutorial are thumbnailed, so be sure to click on them to get a full-sized version!
What You Need:
-Adobe Photoshop
-Nvidia DDS plugins for Adobe Photoshop (http://developer.nvidia.com/object/photoshop_dds_plugins.html)
-S3PE to create the package file (http://www.simlogical.com/Sims3ToolsForum/index.php?topic=171.0)
-Extracted eye multiplier, with bonus facial overlays for changing the whites (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/Eye%20Files.rar) - Extracted for personal use, uploaded to save you a step
Step One
Open the file S3_00B2D882_00000000_C2B560673F00D806_amFaceEyeColor_o_0xc2b560673f00d806%%+_IMG.dds in Photoshop. You will get the following prompt:
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_02.jpg
Hit 'OK' and the file will open. Make sure you have 'Load MIP maps' unchecked, or you'll get an image with a bunch of repeating and progressively smaller versions of the same image.
Step Two:
This is what you should see:
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_03.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_03.jpg)
This is the image that gives the eyes their texture, which gets a color overlaid on it in the game.
I've found that it's easiest for me to edit the image in color in a separate document, with my work in the same place as the image I'm going to be replacing. The 'ymFace_o' image is a good one to work on.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_04.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_04.jpg)
Working with several layers can give an endless supply of effects, but try to keep in mind that you'll be desaturating your work when you're done, and many details won't translate very well.
I haven't tried this myself, but in theory it may be possible to keep the image in color, with color variations that would translate into the game as different colors depending on what 'main' color was chosen. If anyone has time to test this, I think it'd be interesting to see the results. This tutorial is done using the greyscale method.
Any 'shine' you add to the eyes will show up as a very bright version of the overlay color, unless you get crafty with your alpha channel. (Alpha channels will be covered shortly.)
Step Three
When you're done editing your new eye texture how you want it, turn off all the layers that aren't part of the iris and pupil.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_5a.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_5a.jpg)
Use ctrl+a to select the entire canvas, then ctrl+c to copy. Make sure you're on a visible layer. Note the little black dot in the lower left hand corner. This is to help us position the iris in exactly the right place in the document we'll be importing. I use a hard round 19 pixel brush and have it a bit off the edge of the layer.
Step Four
Paste your edited iris texture in the amFaceEyeColor_o file. It'll end up in the center of the image.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_5b.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_5b.jpg)
Go to 'View' and make sure 'Snap' is on. Then go down to 'Snap To' and make sure the following options are checked:
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_5c.jpg
Drag your new iris layer down to the lower left hand corner of the document; it'll 'snap' in place when you've reached the edge.
I like to do a bit of cleanup at this point, using a hard round brush in white to 'erase' the original iris.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_5e.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_5e.jpg)
Once you've done this, with your iris layer selected go to Image -- Adjustments -- Desaturate and desaturate it.
Step Five:
Now we're going to work on the alpha channel. Click on the 'Channels' tab and click the little eyes next to RBG and Alpha in order to toggle them. With the Alpha selected, use a hard round brush in black to 'erase' the white part of the image.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_5g.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_5g.jpg)
Once you've done that, retoggle the RGB channels and return to the 'Layers' tab. Use ctrl+a and ctrl+c to copy your iris layer, then return to the 'Channels' tab. Again toggle the RGB and Alpha channels. With the Alpha channel selected, paste your iris layer.
DO NOT DESELECT ANYTHING!
Drag the selection down to the lower left corner, allowing it to 'snap' into place. You're now perfectly positioned to create your alpha, but don't deselect just yet!
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_5j.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_5j.jpg)
Now you're going to need to change this selection to pure white. The easiest way to do this is to go to Image -- Adjustments -- Levels, and slide the little triangle at the very bottom under the greyscale bar on the far left all the way over to the far right. This will turn your selection white.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_5l.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_5l.jpg)
Now you can deselect! Use a brush in black to get rid of the snap guide in the lower left, and you're all set! Toggle RGB on, then return to the 'Layers' tab to flatten the image before saving. Be sure to use DXT3 or DXT5. Don't change the name, and be sure to save it in a separate folder from the originals in case you want to go back and do more eyes at a later time.
If you wanted to add static 'shine' to the eyes, you'd simply 'paint' it on the alpha here in black. Those parts will show up white in the game.
Step 6:
Now it's time to build the package file. Open S3PE, select 'New,' and 'Import.' Navigate to where you saved your image file and hit enter or click 'OK' to import it into your package. You'll get the following screen:
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_07.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_07.jpg)
Without changing anything, just hit 'OK.' That's it!
Save it to your 'Mods -- Packages' folder with a descriptive name, delete your simCompositorCache.package from My Documents\Electronic Arts\The Sims 3, then fire up your game and see if they worked.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_08.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_08.jpg)
Bonus Tutorial: Changing the Whites
I never much cared for the whites that come with the game, and spent ages trying to figure out how to change them. (Part of my problem was that I'm still getting used to the idea of working with channels, and so never thought to look at the Alpha channels on the various overlay images.) They're OK, but I like a bit more realism in my game.
I have to warn that they're connected to an overlay image that also contains the teeth, tongue, inner mouth, and, for females, a lip overlay. So if someone makes a teeth overlay at any point, you'll either have to combine your favored whites, or go without something. Kind of a weird thing to be concerned about, but I thought I'd toss it out there anyway.
Step One:
You'll be editing the facial overlays for this, so open up whichever one you want to work on first. I worked on 'ymFace_o' for the tutorial.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_10.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_10.jpg)
You can see how the whites of the eyes are in the lower left corner, along with the iris. Edit that part of the image until you have something you're happy with.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_09.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_09.jpg)
(As you can see, I have a file specifically called 'eyes.psd' where I've done all my editing. I find this easier than trying to directly edit the overlay images.)
Copy all of your edited image and paste it over the 'ymFace_o' file, then click on the 'Channels' tab. Toggle the RGB and Alpha channels. Select a square around the lower left corner, and fill this with white.
http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/thumb_step_12.jpg (http://www.clubcrimsyn.com/Images/GoS/tutorials/ts3_default_replacement_eyes/step_12.jpg)
Toggle the RGB and Alpha channels once more, then go back to the 'Layers' tab. Flatten your image and save it as a DXT3 or DXT5 file, and save it with the same name away from the original file.
Repeat this for PU, CU, TF, TM, YF, AM, AF, EM, and EF to have the new whites show up for all the ages and genders.
Then, open S3PE, select 'New,' 'Import,' then navigate to where you saved your edited images. Select them all and hit 'Open,' then 'Import.' Save it to your 'Mods -- Packages' folder with a descriptive name, delete your simCompositorCache.package from My Documents\Electronic Arts\The Sims 3, then fire up your game and see if they worked.
If you have any questions, don't hesitate to ask! Even if I can't answer it, someone else may be able to.