Hi there! You are currently browsing as a guest. Why not create an account? Then you get less ads, can thank creators, post feedback, keep a list of your favourites, and more!
Test Subject
Original Poster
#1 Old 24th Mar 2008 at 9:22 PM Last edited by ChemistryCourtney : 24th Mar 2008 at 11:07 PM. Reason: fixing link
Default Gimp Tute 5: How to Add realistic Details with Photoskinning Using Gimp
How to add realistic details with photo skinning using GIMP
By: ChemistryCourtney and Saraswati with Suggestions by SimGuy, Markus, Vanilyn and Kalynn.


This tute covers how to add details to an outfit using photo skinning with the GIMP. This is tute five in a series. Please do not attempt this tutorial until you have completed tutes 1-4. Tutes Here This tutorial is an intermediate tutorial. It will not teach you things like how to open Bodyshop, create a project, or use the GIMP filing system as this information was well and truly covered in the other tutes.

This tutorial is written using GIMP version 2.4.5, current as of March 9, 2008. Available for download from:
Http://gimp-win.sourceforge.net/stable.htm

This tutorial has its original base in the How to make a top from a shirt tutorial for Paint Shop Pro 9, written by Bluesims. It can be found here: http://www.modthesims2.com/showthread.php?t=91242
We have taken the basic concepts in this tutorial, and transferred it into GIMP terms. We also changed the clothing item being made, to fit in with the tutorial set by Saraswati. So here we go!

1. First things first, you will need to open up GIMP and your Lavender dress with boots in body shop. As you look at this dress, you can see how nice it is, but you could have a skirt and lavender top, with a lacey insert, instead of a dress if you wanted. I’m going to show you how to do that change. You obviously will need a picture of a denim skirt, and a picture of some nice looking lace. I am choosing to use this skirt:

Found here: http://www.sierratradingpost.com/i/...-For-Women.html
I want you to save this photo as an jpg or png in your pictures folder, so you have it in case you need to stop your project and start again later, or the website moves your photo, and it is lost forever.
For a lot of photskinning, it is helpful to have a front and back image, but for this, we’re going for an untucked look, so just the front will do nicely.
Just a note: You are better off finding large pictures and scaling down, to keep photo integrity, instead of small pictures and scaling them up. That can lead to pixilation, and unclear images.
And the lace. I recommend just doing a Google image search.
I found this lace, that I think will be very nice. Feel free to look around and find a lace or brocade, or detail fabric that suits your tastes, and then we’ll get started on the “hard work”.


Found here: http://www.regaliafabrics.com/lace5.jpg

I have also saved this image as a jpg. You can make a lace photo into a pattern, like you did with the lavender swatch, but for this specific project, that isn’t necessary.
If you really like the dress, and want to keep it, start a new project, then select the altered dress for your base. If you could do without the saved dress project, then load up the saved project dress, and we’ll alter directly on that. It is important to note, if you haven’t imported your dress into your game, when you alter your saved project, the dress will be gone.

2. Name your project and export selected textures. I have decided to name my project Lav_Shirt_Skirt but you name yours whatever is easy to find.


3. Using GIMP, open your base texture file for your project.


4. I think we should start at the bottom and work our way up. Open the skirt picture now, using the GIMP.
The the tutorial written for PaintShop Pro uses the magic wand tool to select the picture. GIMP has a magic wand tool as well. It’s full name is the “Fuzzy Select” tool, or “Select Contiguous Regions” tool. It is an effective tool when you are selecting solid colors with a solid border, but is not as effective for intricate borders or multiple color items. We will use it to select the skirt, so you can see how to use it.
5. Once you have opened the skirt, select the magic wand tool.

6. Once the magic wand is selected, click in any of the white area around the skirt, once. You’ll see the “marching ants” around the entire skirt.


7. Once selected, go to the select menu, and click Invert selection. Now, you have the skirt selected instead of the white background.


8. Go ahead and copy that. Go to the Lavender Texture file, and add a layer. Then paste the skirt onto it.


9. As you can see, the skirt is much larger than we need. That’s ok. We’re just going to scale it down. As previously stated, I’d much rather scale down and keep the picture integrity, than scale up and end up pixilated. Now that you have pasted, you may close the skirt Jpg. One less open file to worry with.

The scaling process can be a bit of a guessing game. You should use the outline as your base to figure out the correct size.


I’ve scaled the skirt down until it looks like it fits into the bottom part of the dress texture.


10. At this point, I save and see what It looks like.
Advertisement
Test Subject
Original Poster
#2 Old 24th Mar 2008 at 10:40 PM Last edited by ChemistryCourtney : 24th Mar 2008 at 10:42 PM. Reason: making smaller sections
Remember, we are looking at the bottom of the skirt, since we’ll be doing a kind of untucked shirt look. The placement is actually pretty good. If you need to move it over or up, now is the time to do that.

11. We need to go ahead and put the skirt on the back as well. What we do, is copy our newly scaled skirt, and then anchor our selection, (since you’ve added that layer, you are now anchoring your skirt photo to this new layer.) then paste.


12. Flip the skirt horizontally, so that all of the parts will line up nicely.


Line up the flipped skirt, and save.


13. Refresh body shop, so we can see what it looks like.


Now that we have photskinned a skirt, we are going to do some cuts to make it look like there is a fitted lavender top, untucked over the skirt.

14. Anchor the backside of the skirt to you layer, like you did with the skirt front, and select the circular select tool.
Using circular select, make a long oval over the top part of the skirt you have pasted. We are going to cut out the extra skirt, and we are using the circular select to make it look more like the natural fall of a top.


15. So go ahead and cut.


Then save, so we can refresh our body shop view.


16. Now we do the same to the back.




Save, and refresh body shop, so we can see where we are.


17. Since you are photo skinning, you should now hit the F6 button, to lift the arms, so you can see if the sides are lined up with each other.


Ok, I like it. They are even. If they weren’t, you would make small cuts on the sides of the skirt until they were.

18. We have now finished the skirt part of this tutorial. We will now be adding a lacy insert to the top.
Go ahead and add a new layer to your Dress Texture BMP. Make sure it is a transparency.
Test Subject
Original Poster
#3 Old 24th Mar 2008 at 10:44 PM
19. Using GIMP, open up the lace swatch you chose.
Using the rectangular/square select, select a section of the swatch.


20. Copy this, and paste it into your dress texture.bmp.


21. As you can see, the swatch piece is huge! We will need to resize that before we do anything else.
As before, you select the Layer menu, and scale layer. Move the size down, until it is a much more manageable size.


22. Go ahead and save, so we can refresh in body shop and see if we have the placement and size right.

23. Although the lace looks fine at this size, and we have it in the place we need it, I think I’m going to make it just a bit smaller, so we can see more lace details.

And we save and refresh in body shop.

I like that much better.

24. You can also anchor your pasted piece to the layer you have added.

25. In order to polish up what we’ve made, we will be using the intelligent scissors. Select intelligent scissors from the GIMP menu.

Intelligent scissors work by placing a guide line in between points you click on. The guide line uses color. Similarly to the magic wand, but a little easier to control. I order to get a nice clean line, we need a guide. In order to get the right guide, we need to use the original low cut dress with go go boots, unaltered.

26. That being said, save and close your project in body shop. (not in gimp.) Start a new project, using the black dress and boots, unaltered. Name it something like throwaway_project.

27. Re open your skirt/shirt in body shop. In gimp, open the alpha in the Throwaway project. Select the whole page, copy, and paste it into your current project. That will end up looking like this:

28. Open up the layer dialog box. Turn the pasted layer into it’s own layer.


29. Of course, now you can’t see the swatch. That just won’t do! Open up the layer box in the dialogs selection. We are going to move this alpha layer down one, so we can see the swatch again. To do this, click on the alpha layer, and drag it down until it is below the lace layer. The lace layer is now on top.


30. You still can’t see the border, but that is easily fixed. Open up your layer box again in the dialogs menu. Select your lace layer, and change the mode from normal to Multiply.


31. Go ahead and zoom in on your template. The process of removing pieces for this insert is very organic, and has an element of trial and error to it. Still fun though! I recommend viewing at Either 200 at least, or higher, if you need it.

Using the Intelligent scissors, make a V shape, where the insert should be. This insert is going to sit right inside of the area we added to the dress before to give it a more modest bust line. Since we have the very clear outline, the intelligent scissors have a border line to follow as you click. Use as many clicks as you need to get your V cut.
Test Subject
Original Poster
#4 Old 24th Mar 2008 at 10:45 PM
32. To close our V, we simply click on the first Dot we made,(the cursor will have what looks like two joined circles) and then click inside of the V. That will turn the dots into the marching ants.


33. Like we did with the magic wand, you should now use the toolbar Select>Invert


34. And then Edit> Cut.


35. Yes, it does look like we’ve just lost our pattern. Don’t worry though. It’s just hiding.
We are all finished using the alpha dress layer now. So we are going to delete it. Before we do, though, we are going to change the mode of our lace layer. Go ahead and open up the dialog box. We can do both at once.

36. Change the mode of the lace layer from Multiply to Normal.


37. Now select the alpha dress layer and throw it in the garbage can.


38. Go ahead and save, and refresh your project in body shop.


Well, that certainly looks nice, doesn’t it?

39. I recommend zooming in on your cutout triangle at this point so we can blur a bit along the edge to give it a natural flow.


40. I then recommend selecting a smaller brush size. I like 03, personally.


41. Now, just go around the edges of your lace insert and add a bit of blur. It will soften the harder line, and let you work out any unevenness.


42. Once finished with that, save and refresh body shop.

The difference is not that noticeable in bodyshop but it is there.

43. You are done making your adjustments at this point. I recommend saving a copy of this project, in xcf, GIMP’s native format, in case you load up your game and decide you want to tweak the layers some more. If you save your project and close body shop as is, the layers will be flattened, and you will not be able to alter them later. Just make a folder on the desktop, label it Lavender Skirt and Shirt GIMP format or something, and save a copy in xcf format.

44. Go ahead and load up your game and check out the awesomeness of your new outfit.



You have now finished a skirt and added a lace insert! Good Job!

Next tutorial will get into finish techniques, such as adding stitch lines to have a very polished look. Thanks for reading!
Test Subject
#5 Old 1st Apr 2008 at 2:21 PM
This was great CC. Thanks.
Test Subject
Original Poster
#6 Old 7th Apr 2008 at 4:52 PM
You're welcome dachs. Glad you found it easy to follow/ informative.

spending spare time drinking more coffee
Test Subject
#7 Old 17th Apr 2008 at 1:28 PM
Thanks this was really helpfull
Test Subject
#8 Old 19th Apr 2008 at 3:00 AM
Thank you so much! Your tutorials have built up my confidence and made me realize that making custom clothes isn't quite as hard as I originally thought it was. It has shown me that, with alittle imagination, I can also create beautiful clothes for sims to wear. Keep up the great work!

It is easy to hate. Anybody can do it. But to love others, even those that despise us, takes the strength of a warrior.
Test Subject
Original Poster
#9 Old 23rd May 2008 at 1:06 AM
Thank you Jaimy1986 and cyberstwipes87. I'm glad that you've found the tutorial series helpful. I'm always glad to hear that something I'm a part of inspires imagination.

spending spare time drinking more coffee
Test Subject
#10 Old 23rd May 2008 at 7:40 PM
You've done it again guys! A brilliant tutorial!
Test Subject
#11 Old 8th Jul 2008 at 10:12 AM
Very elegant...i will save it and practice it till i get better thanks...^_^

xX(-_-)IM"Weird"(-_-)Xx
Test Subject
#12 Old 9th Jul 2008 at 10:02 PM Last edited by ktn048 : 9th Jul 2008 at 10:56 PM. Reason: attached screenshot for more description
Well I've reached this tutorial with no problems, but now of course I am having one. Basically when I open the base texture file in Gimp, I don't see the sleeves and necklines cut out as in your screenshots, I just see the huge block of pattern I stuck on there before I added the sleeves and modified the neckline.

So I can't know where I am placing the lace and such.

I tried going to dialogue>layers but it shows only one layer called background after the files were saved and Gimp was closed and reopened.

I did start a new project and completely redid it step by step, but still having the same issue. I am worried it is something that Gimp does when I save, it says it has to merge the layers.

Any ideas?

I added screenshots so you can see what I'm talking about. Yeah, I didn't want to use the lavender :p
Screenshots
Lab Assistant
#13 Old 15th Jul 2008 at 9:18 PM Last edited by Lex917 : 15th Jul 2008 at 9:30 PM.
Quote: Originally posted by ktbcca
Well I've reached this tutorial with no problems, but now of course I am having one. Basically when I open the base texture file in Gimp, I don't see the sleeves and necklines cut out as in your screenshots, I just see the huge block of pattern I stuck on there before I added the sleeves and modified the neckline.

So I can't know where I am placing the lace and such.

I tried going to dialogue>layers but it shows only one layer called background after the files were saved and Gimp was closed and reopened.

I did start a new project and completely redid it step by step, but still having the same issue. I am worried it is something that Gimp does when I save, it says it has to merge the layers.

Any ideas?





Ugh..I'm having the same exact problem
Glad to see I'm not the only one!

But I do love these tutorials, and I'm hoping to be able to finish them!


EDIT: I've figured it out! (probably the hard way, but who gives? -if you don't know the easy way.. :p

But yeah, you have to open both the texture file AND the alpha. paste the alpha as a new layer, and drag it behind the colored layer. drag the opacity of the colored one down to about 50%. Then use the paths tool to cut out the parts in the colored one that you don't want, and line it up with the alpha behind it. Delete the background layer, and raise the Foreground layer opacity back up to 100%. Voila! You have the shape of the dress. Hope I wasn't too confusing!
Test Subject
Original Poster
#14 Old 6th Aug 2008 at 2:28 PM
sorry for the delay. i see what you are saying. i think you missed a step.

"Start a new project, using the black dress and boots, unaltered. Name it something like throwaway_project.

27. Re open your skirt/shirt in body shop. In gimp, open the alpha in the Throwaway project. Select the whole page, copy, and paste it into your current project.

28. Open up the layer dialog box. Turn the pasted layer into it’s own layer. "

once you've done that, you change the layer settings, and then you get the original dress cutout like I have up above. Hope this helps.

spending spare time drinking more coffee
Test Subject
Original Poster
#15 Old 6th Aug 2008 at 2:34 PM
Quote: Originally posted by ktbcca
I tried going to dialogue>layers but it shows only one layer called background after the files were saved and Gimp was closed and reopened.

I did start a new project and completely redid it step by step, but still having the same issue. I am worried it is something that Gimp does when I save, it says it has to merge the layers.

Any ideas?

I added screenshots so you can see what I'm talking about. Yeah, I didn't want to use the lavender :p


Ok, just saw this question as well. When you close gimp, it will flatten your layers, making them gone for good. If you are mid project, and want to keep your layers, what you need to do is save a copy of your project in .xcf, which is the GIMP native format, and will keep the layers for you.

(you don't have to use lavender if it doesn't suit you. )

spending spare time drinking more coffee
Test Subject
#16 Old 18th Aug 2008 at 4:41 PM
Thanks for this!
Very easy to follow...
Now I think I have a better understanding of Gimp.

Wheeeeeeeeee!
Test Subject
#17 Old 3rd Sep 2008 at 2:21 AM
This is awesome, and a lot of these steps can be applied to Photoshop.
Test Subject
#18 Old 5th Sep 2008 at 11:21 PM
Great tutorial. I've been trying to figure out how to create textured clothing correctly with this software for some time now.
Mad Poster
#19 Old 30th Sep 2008 at 1:34 AM
Another awesome tutorial :-) I'm so happy with my new pretty dresses!!
Test Subject
#20 Old 23rd Oct 2008 at 1:05 AM
great tute!!! please tell me where i can find the next one!!!

Music is poetry with personality. ~Ross Lynch
Of course it is happening inside your head, Harry, but why on earth should that mean that it is not real? ~Albus Dumbledore
Test Subject
#21 Old 25th Oct 2008 at 12:03 AM
This was the hardest of the series for me.. I kept starting and restarting because I didn't have the cut out on the textured file so I couldn't see what I was doing. But after reading the other reviews and seeing that I wasn't alone, I felt better lol. Thanks soo much for these tutorials. They really do help!
Test Subject
#22 Old 26th Oct 2008 at 11:19 PM
oh thats funny .. i cant find the thanks button on the page so THANKS :D
really appreciate all the hard work youve done to bring this to us.
and so glad someone is doing tuts for gimp .. ty ty <3
Test Subject
#23 Old 14th Nov 2008 at 3:33 AM
I await the next one
Forum Resident
#24 Old 9th Apr 2009 at 3:26 AM
Finally got it! Thanks for all the tutorials. Can't wait until the next one.
I just used the Alpha in the project I was already using and then changed the layer settings... so I could see to place the skirt and the lace. Used the throwaway project at the end for the "V"neck.
Test Subject
#25 Old 21st Apr 2009 at 5:23 AM
on step thirty i changed the mode from normal to multiply and yet the marching ants didnt appear. i continued the tutorial anyway and when i looked at the product in bodyshop the lace was not there. any idea what went wrong?
Page 1 of 2
Back to top