How to design a tattooed skin for IMVU

By Shilohskid © 2007

This tutorial will allow you to design a tattooed skin for IMVU and still be able to put clothes over top your avatar.

Things you must have decent paint program and the IMVU Previewer program. I am using Jasc’s Paint Shop Pro Studio but the steps are the same in any paint program if u can use layers. I will be taking little steps but it will be useful if you know your paint program and how it works.

I have also included what I call Developer Tricks…little things that I picked up along the way. Things to help make your developing time easier and much more fun. J

Step 1:

•   Get the appropriate skintone template. Along with this tutorial, you should have received a self-extracting zip file containing all 44 head and body templates. They are saved in jpg format and should be sized properly. Have it extract the files into the appropriate location.
• I have learned from browsing the IMVU Forums and developer’s section it is best to have a master IMVU product file folder some where away from the actual IMVU Previewer programs for safe keeping.
• Save the templates in a separate file folder in the master IMVU product file folder…something like skintone avatar templates. 
• Now create another file folder inside the master IMVU product file folder…something like Tattoos for “insert degree number here” skintone. I find being extremely organized will help you in the future.

Step 2:

• Open your chosen template in the paint program.
• If you are doing a tattoo on the body open the body template.
• If you are doing a tattoo on the head open the head template
• To make sure you have your template the right size, locate the image resize option and check the size of the image. If necessary, scale your template accordingly.
• The proper size for heads is 256x256.
• The proper size for bodies is 512x256
• The files that should have been included with this tutorial are modified from the ones zipped in the developers section of IMVU but they can not be opened in some programs so they are now in jpg format and will serve as the background layer for your tattoo.

Step 3:

• Save your resized image as a new file before you do anything else. Make the original template file is saved and untouched in that folder you created for skintone avatar templates…in case you mess up. J
•  In the file folder you created for this particular product (ex. Tattoos for “insert degree number here” skintone) I recommend that you use 2 copies of your work.
• The first copy should be saved in the default file extension of your program. In mine it is pspimage.
•  This is what I call your working file and is best for adding layers to your work. It is this file you will make all the necessary changes.
• Usually I name it something like My “insert descriptive word here”  Tattoo.“default extension should appear here” that way you know what it is
• The second copy should be saved as a jpg file…it will flatten the layers and the paint program will say something to the effect of it can’t save certain aspects of the file. That is ok….go ahead and save it.
• This is what will be uploaded into the IMVU Previewer for testing and finally submission to the catalogue.
•  Usually I name this file testtattoo.jpg until I am done and ready for submission.

****Developer’s Trick: Save your working file after each modification is made…usually after adding a new layer to your work or after modifying existing layer. Save your jpg file almost as often and before each test run in the IMVU Previewer.****
 

Step 4:

• Now that you have your background layer resized and saved. It is time to add a layer. You’ll want to add a Raster or transparent layer over your background layer. 

****Developer’s Trick: Using layers allows you to draw over the existing layers without destroying what is underneath and it is much easier to delete a layer then having undo what maybe hours of work.****

• On this layer, you will want to trace over the body part you want to start with. If you are doing only say a back tattoo then trace the back part of the avatar template.
• In my program, I have the ability to name each layer so that you know what it is. If you can name your layer call it something like “insert body part here” outline.
•  When you trace the outline, I recommend using a colour that is NOT from the template for now…to make the outline stand out. Even better, use the main colour you’ll use for your tattoo design.
• Use the zoom tool to get closer in. I like to get right in there so I can see individual pixels…makes easier when following a pattern in the overall picture like outlining.
•   I don’t recommend your outline being any thicker then 2 pixels wide especially if your tattoo is being wrapped around to other body parts because when you do those parts they will have outlines too and may lead to false image ideas…especially where they connect.
• You can trace either just outside the body part you are working on or up to 2 pixels of the actual body part. It is up to you.
•  Just remember that if you trace over actual body parts any tattoo lines that need to go to the edge of body must overlap your outline.

****Developer’s Trick: Never use pre-formatted tools like straight lines, use the actual paintbrush tool and in most cases its size should be 1 pixel to 3 unless  you are painting a larger area a single colour.**** 

****Developer’s Trick: Never use the eraser function it makes things worse. If u make a mistake use the undo button…even if you end up removing a larger amount of work. On my computer, I can use CTRL+Z to undo…check yours easier than using menus ****

•  Once Your outline is complete, save your work to your working file. 

Step 5:

• Add another Raster or transparent layer
• Name it something like “insert body part here” tattoo base.
• This layer is for the basic drawing of the tattoo, its shape, background/main colour and placement for this particular body part. 

• Go ahead and have fun playing with colours and design here.
• Once the basic design and placement is done, save your work both to your working file and your testing file (the jpg file)

Step 6:

• Time to test your basic design. Open the IMVU Previewer and login.
• You are creating a derived item so under the File menu choose create a Derived product.
•   In the pop up window, enter the appropriate product id
• For male avatars enter 263
• For female avatars enter 252
• An avatar with basic clothing will appear.

Step 7: 

•  Now we must apply our test image, in the main window of the IMVU Previewer there is a material list with 2 number codes. They are the same for both avatar genders.
•  M02 is for the head texture
•   M07 is for the body texture
• You want to make sure that the appropriate texture code is highlighted. As we are working with a back tattoo in the tutorial we need M07 highlighted.
• Next to material list is material information area including a Change Texture button…click it!
• In the Load file pop up window locate your test image and then click open. Your test image should appear in the tiny thumbnail image but not your avatar.
• Finally, click on the big Apply Changes button and your test image will be transformed unto the avatar window.

Step 8:

• Take some time examining the avatar from the various angles and such, making sure colour and placement looks good. Don’t worry about the outline showing up on the avatar at this time…we will take care of that later.

• When you are finished examining your work, switch back to the paint program make any necessary changes on the current layer in the working file.
•  Resave your work in both the working file and the testing file
• Switch back to the IMVU Previewer, reload your file by clicking the Change Texture button and reloading your test file.
• Make sure to click the Apply Changes button after reloading the file or the updated version won’t appear.
• Examine once again…repeat Step 8  as many times as you want until u are absolutely satisfied.
• If you are using a scanned image Click Here to go to Step 10. However Step 9 does contain useful information about multi-body part tattoo design.

Step 9:

• Finally, you are satisfied with the basic stuff for your design and want to add all the other stuff, details, other colours, even play with the effects section of your paint program.
• First, add another Raster or transparent layer to work on (Remember to do this in your working file). Then go ahead and add whatever you want to your tattoo.  Remember to save after each major addition, and naming your layers as you go.

****Developer’s Trick: you may want to consider using several layers in doing this if you are adding several colours or details.**** 

• Test your design in the IMVU Previewer as you see fit…I recommend doing it often. 

****Developer’s Trick: For multi-body part tattoos just keep adding layers for each body part remembering to make an outline layer, a basic design layer, and the detail layers.****

****Developer’s Trick: If you want to make a tattoo that be used on any avatar…just remove the background layer you started with…but I would recommend as the skin gets darker to open a new test file with the darker skintone templates and copy and paste your tattoo layers onto it…for colour testing. Also remember the male avatar and female avatar are designed differently so you may have to change your tattoo design accordingly. ****

Step 10: 

• Ok, you’re done your design and ready to submit to the catalogue. First, in working file, you need to get rid of your outline.
• Locate the layer palette/navigation box in your paint program.
• Find the Outline line layer, right click on it and then delete.
• Save as a new file naming it something like “insert descriptive word here” tattoo finished product.
• Load this file into the IMVU Previewer like normal…double check it on the avatar…just in case.
• Click File then save as…name the file something you will remember in the default directory for the IMVU Previewer. Then, save it again in your master IMVU Product file in a sub-folder. This sub-folder is should hold copies all your completed .cfl files.
• Next, in the paint program save your finish item again as “insert name here” catalogue icon.
• Open the resizing tool and resize it to 100 pixels wide and 80 pixels high. Save it again. You will need it for your catalogue page.
• Finally, back in the IMVU Previewer click the red Submit Product to IMVU Catalogue. Follow the instructions and fill in the relevant information on the page that pops up…and there you have it… your tattoo is done.

Contact Info:

If you have any questions please feel free to contact me on my IMVU homepage (Shilohskid). Leave  a private message with your concerns and e-mail address or E-mail me at children_of_shiloh@cogeco.ca.

Appendix A: Making a Tattoo Design from a Scanned Image 

• If you do this, remember you are going to have to resize the image and if you put a lot detail into it; it will be lost in the resizing 
• After you have scanned your image into the computer and is saved as a jpg file. Open it up in the paint program and clean up the image the best you can by using the paintbrush tool at the pixel level darkening areas that need to be or colour that needs to be retouch to make the image crisp and clear. 
• This is the only time you will need to use the eraser tool. You’ll want to eraser most of the background around the tattoo and in the open spaces in the tattoo.
• You will know if you are erasing properly if you can “see” the “canvass” underneath…in my program it is grey and white squares.
• Zoom in closer to see your image at the pixel level to erase right to the edges of the tattoo line…it will look better that way.
• Once the tattoo is fixed save the file. 
• The next part will be by trial and error. You will need to have your both your scanned image file and the one you created in Step 5 opened.
• The file that you created in Step 5 must be open with the newest Raster or transparent layer highlighted. At this point you should have 3 layers: the template background layer; the outline layer; and an empty layer.
• Go back to your cleaned up scanned image file. Now, you know how big the background image is so your cleaned up version of your scanned image has to be smaller in order to fit on the avatar body so go ahead and resize your image to what you think is appropriate and make allowances for loss of detail.

****Developer’s Trick: Do NOT save any resized image into the file you are using to resize use the save as function to create a new file. That way there is now way of losing your cleaned up image.**** 

• Now you must select your image, this option can be found either in the edit menu or selection menu. Once the image is selected. Copy the image…quickest way is to use CTRL+C
• Now switch to your file created in Step 5 and click on the edit menu and find the paste options. You must select the option that resembles “paste as a transparent selection”. This gives you the ability to move your tattoo image and place it where it need to be and has no background stuff.

• If the image is not the right size put the image down and press CTRL+Z this will remove it. Then go back to your original unresized image and resize it again. You will eventually get the right size and hopefully without too much loss of the design.
• Note: you may need to rotate or flip your image and/or clean it up a bit more after resizing do this in the file that you are resizing in before you paste it into the file you created in Step 5.
• Once the tattoo image is in place. Save your files and Click Here to go to Step 6 to learn how to test your image.