Monday, June 30, 2008

How to make SL clothes in the Gimp (part 2)

In part one we got ready to make Second Life clothes in the Gimp. Now we'll make a simple coloured shirt: our first item of actual SL clothing. You make Second Life skins using the same techniques: you just paint skin colours instead of clothing colours.







If your Layers dialog is missing, re-create it with Dialog->Layers from your Tutorial Shirt window, or File->Dialogs->Layers from the main Gimp window. You will need it for this lesson.











Open your Blended Upper Body Template.xcf file - or whatever you chose to call it. Over time, you'll probably add layers to it. Save it as Tutorial Shirt.xcf. (At least, that's what I'll call mine. You can call yours whatever you want to.)



There's an awful lot of information in the Blended Templates (now Tutorial Shirt) file. Let's turn some of it off - it's too much to deal with at this stage. Go to your Layers dialog.

Click on the eye symbol for each layer, and watch the Tutorial Shirt window. You'll see how each eye symbol you turn off makes something vanish from the Tutorial Shirt window.







Clothing and skin designers make a lot of use of this selective visibility of layers. For now, turn off everything except 'UVs' and 'Backdrop'. What's left should look like the image to the left.




Our goal is to make a new layer, and on that layer, cover each of the UV grids with our favourite colour. Then we'll turn off every other layer, and save only our coloured layer as the 'texture' for our shirt. We'll also give the shirt a nice neckline, and sleeves only partway down the arm.







So let's start by making a new layer. We've done that already, to make the backdrop. This time, we don't want a white background to the layer, we want it transparent. And we want a different name. So back to our friendly little page icon we go. I'm calling my layer 'Shirt Base Colour'. Click the 'Transparency' option under 'Layer Fill Type'. Leave the 1024 * 1024 layer size.



Move this layer so that it's under the UVs and above the background. Make sure this layer is selected: as in, the blue bar (when the layer window is selected) or gray bar (when its not) is on the Shirt Base Colour layer.







Use a selection tool (I used free select) and circle the entire blue UV layer. Go to the Colours (or Colors) dialog, and pick a colour you like. Or for this tutorial, use bright yellow because it shows up with each UV grid colour. Fill the selection with the bucket fill tool.



If your Colors dialog is missing, go to File->Dialogs->Colors, like we did with the layers.



Now to make the neckline for the front. Zoom in. View->Zoom->200%. (Why 200%? Because it lets the whole neckline show on my monitor. If your monitor shows the whole neckline at a different setting, feel free to use it.)







As the clearly visible bust shows, the blue UV grid on the left is the front of the body, so get the neckline of the blue UV grid into the middle of the window.



We could use any selection tool to get the yellow off our neck. We could even use the eraser. But I'll show you a very handy tool called the Paths tool. I've circled it in red for you.







Select the path tool, then click around the neck where you think it would look good. I find that using the intersections of UV lines works very well: these are points which don't change much over different avatar shapes. Make your first and last clicks up near the top of the screen, rather like I did.



Only experience (and lots of tries on your previewer) will let you decide which particular intersections of UV lines will have which effects - and when to ignore the UV lines and just place a feature precisely where you want it.



If you make a mistake with the placements, you can drag the little circles around. You might find as you do that that two little squares appear out of one (or more) of the circles. That's another nifty feature of paths - those squares let you make curves, rather than straight lines. You can get those squares out of any of the circles: select a circle by clicking on it, hold the control key down, then click in the circle and pull. You'll get two little squares (called 'handles').







Play with the path tool until you have a nice neckline. (You may need to switch between 'design' and 'edit' in the tools menu; design lets you drag circles around, edit seems to control the handles.)

Select the last circle, up at the top of the screen, then click on 'Selection from Path' in the tools menu at the bottom of the Gimp main menu. This makes the whole area above the neckline selected, and you can just cut it away (Edit->Cut or control-C).



If the Paths toolkit (which includes Selection from Path) isn't there, use File->Dialogs->Tool Options to re-create it.







Repeat the whole process for the back of the shirt, and colour both sides of the arm. Unfortunately, this is one arm - there's no opportunity for asymetrical sleeves in texture clothing in Second Life. This arm represents both of them.







Now we come to one of the big not-a-secrets of clothing design in Second Life. How do we match the front and back necklines?



Our front neckline crossed the shoulder seam at the second UV intersection from the shoulder, so our back neckline should cross at the same place. Another option is the match lines and seam edging lines that Robin and Chris have so generously given us.



The image is of the shirt at this stage, with both Robin and Chris' matching tools showing.



We're going to use match lines to help us with the sleeve, too. 'Edge Matching Guide' from Chris Midnight's templates is my favourite for this task. Robin's tool is 'Match Lines'. Make one or both of them visible by clicking the eye column in the Layers dialog.







Make sure you still have your 'Shirt Base Colour' layer selected. Decide how long you want the sleeve to be. Find one of Robin's match lines or the end of one of Chris' match colours that's about at that point, on each side of the top arm. Use a selection tool (paths are good) and get rid of all the yellow from those points to the end of the arm on that arm.







The two sides of the arm that are closest to each other are matches, and the two sides that are furthest from each other are matches. Find the corresponding match lines/end of a match colour on each side of the bottom arm. Use a selection tool and get rid of the yellow below those points on the bottom arm too.



Turn off every layer except your colour layer. Even the backdrop. Save your file as a .jpg and upload it to the UVMapper. (See part one if you've forgotten how to do that.)



Your tutorial shirt should look something like this. Use the zoom, hand and rotate tools (under Select->Mode) to make sure all your edges match. If they don't, go back to the Gimp and add a couple of pixels to the shorter surface, or remove a couple from the longer.





On the arms, it can be annoyingly difficult to be sure which arm edge corresponds to the edge on the tshirt. I put a coloured dot on the part I want to check, re-upload and look for the dot.

Repeat the process of tweaking the pixels until all the edges match to your satisfaction, then fill any coloured dots in with the proper colour.

If you want to use my advanced tutorial on using textures, this is the stage at which you put the texture in.


Now - finally - it's time to take it into Second Life. But let's not be hasty, we'll take it to the beta grid. First, we should save it in something better than a jpg.



Save your shirt. Save a backup, just in case.



Once it's been saved at full size, use Image->Scale, and scale it down to 512 by 512. The Second Life viewer will do this anyway, and Gimp is better at scaling than the viewer is. Also, 1024 * 1024 is four times larger than 512 * 512: since that extra size won't ever be seen, use the smaller one.








Then File->Save a copy, and save it as a Targa, or a .tga. Untick 'RLE compression' and 'Origin at bottom left' - we don't need either of these.



Another option is to save as a .png. PNGs are smaller than Targas, but some people have problems getting transparency with them. Most of the options don't matter much, but be careful with 'Save background color'. If you want a transparent background (to show skin above the neckline and below the sleeve hems), make sure this is NOT ticked. For anything where you don't want transparency, make sure it IS ticked.




Edit->Undo the scaling once you've saved the copy, so you don't forget and save it at its scaled-down size. If you do mess up, just undo back until it's 1024 again and save at the larger size. Undo is better than scaling it back up, because each scaling is slightly lossy. With the simple outfit we have this time, it doesn't matter much, but a fancy outfit could lose a lot of detail.



(If you can't undo back till its 1024 again - well, that's why you saved a backup before you scaled it, right?)







Now go into the Second Life beta, and upload the .tga or .png. Make sure it's the beta grid - don't upload it to the main grid (and cost yourself 10 Lindens) until you've checked it in the beta grid.







Upload with the File->Upload Image dialog. It will show you a preview of the image, and warn you that uploading will cost 10 Linden. Don't worry about that: the beta grid linden are almost infinite. (But nothing on the beta grid can be trusted to last, which is why they're effectively infinite.) The preview will have a checkerboard background if it's transparent. Accept the upload.



On the beta grid, you will probably be in a public place. If you're female, make sure you're wearing some sort of undershirt: even if it's just one you make with the sliders. Like the one I'm wearing in this picture.







Go into appearance mode. Select shirt. Use 'Take off' down at the bottom of the appearance mode dialog to remove any shirt you're currently wearing. (Thus, the undershirt.) Press 'Create new shirt'.

There are two squares. The top one is called Fabric. Press that one, and in the texture dialog which it summons, find the shirt. Save it as whatever you want to - Tutorial shirt will do - and you're done!

You can move the sliders around and see what effect that has on your shirt, and you can choose different colours in the colour window too, just to explore your options.



When you're selling, this is a good time to set permissions on your new piece of clothing. It's a good habit to get into now, so go into the inventory, find your shirt (probably at the bottom of your clothing folder), and right click on it. Select properties, and then down at the bottom, make sure the permissions you want are the ones that are ticked. Don't have both 'copy' and 'transfer' ticked unless you want it to be a freebie.







This is where I say 'the rest is art'.
Move on to part 3, Highlights and Shadows.

How to make SL clothes in the Gimp

Apparently, there are few good tutorials about making Second Life clothing & skins in the Gimp. Or so I'm told. Well, I use the Gimp, so I may as well explain.

Theory

Second Life clothing comes in two types. One type is prim attachments to the avatar, and that's not what we're working with in this tutorial. Those are made within SL, using prim building techniques.

The other type is painted onto a flat picture,then wrapped around the avatar. This is used both to make clothing and to make skins, and the techniques in this tutorial series will work for both.

As you can imagine, wrapping a flat picture around a bumpy avatar means you get some odd distortions to the flat picture. You also need to know which parts of the picture end up on which parts of the avatar.

Linden Lab made a set of reference images available. If you put the reference image underneath your painted clothing, you can see where on the avatar your painted clothing will end up. Chip Midnight and Robin Wood practiced and painted and studied the avatars, and made extra reference images available (thank you, Chip and Robin!), and I'm going to recommend that you use both of those.

I have created a post with a fuller explanation of the theory behind Second Life clothing.

Setting up
I recommend that you read Olila Oh's information on setting up as well as this tutorial - we say things in different ways. However, either tutorial will leave you in the same position: ready to make SL clothing or skins, and with a complete toolkit in your hands.

1. Download Robin Wood's and Chip Midnight's templates. Make sure you get the 1024 * 1024 layered versions. Yes, they're called photoshop files, but the Gimp can read them. You must get the .psd files, not .jpg!
These are our reference images. We use them to tell us where in our painted clothing to put a collar, or a button, or a seam.

To get Chip Midnight's templates from the above link, you will probably need to log in to the Second Life website. However, you can also try
Mirror 1
Mirror 2
or
Mirror 3



2. Blend the two together.
We're doing this so we can take advantage of both Chip's and Robin's work, rather than limiting ourselves to one or the other.

-- Open one (either one)
-- Save as Blended [body section] Template.xcf (for example, Blended Upper Body Template.xcf)
-- Open the other (if you started with Robin's upper body templates, open Chip's upper body templates)
-- For each layer of the second one:
**** Select all
**** copy the layer
**** paste into the first
**** press the little 'page' icon on the bottom left of the layers dialog, that makes the pasted layer a new layer. I've circled the icon in red.
**** name the new layer (use the name it had in its original file).



If you can't find your Layers dialog, re-create it from the main Gimp window. File->Dialogs->Layers. See the image to the left.



3. Press the little 'page' icon again to make a new layer. Call it 'Backdrop', and designate it as white. Then use the up and down arrows beside the page icon to move it to the very bottom of the layers list.
This will help you see the other layers more easily. There's no magic or anything, it's just to make things easier to see.

4. Get a previewer.
A previewer is just a program that will make an avatar shape for you, and wrap your painted clothing around it. It just lets you see what you're doing.

Olila suggests the UVMapper demo and the Second Life avatar mesh files (the .obj ones). I explain how to use this later in this tutorial.

Johan Durant wrote a previewer that can be found at the Second Life Texturing Forum. I haven't used it myself, but there's explanations of how to use it in the forum thread.
While you're there, bookmark the forum. Come back and read it regularly.

Another previewer is AvPainter, which is costly in Lindenbucks, but has a free demo version. Get both versions at the Avpainter page on SLExchange. The demo link is in the description, about halfway down. Again, I haven't used this, but I understand that instructions come with it.

You can also use the SL Beta grid, which is a test version of the SL grid. Go to the wiki page talking about connecting to the preview grid.
A useful site with answers about the Preview Grid is The Second Life wiki.
When you upload on the beta grid, it will claim it's charging you Lindenbucks, but it's charging you beta grid dollars and not money from your actual SL account. Beta grid dollars get renewed periodically; and stuff in your beta grid inventory WILL vanish every so often - it's a test platform and nothing is stable. But it works great for testing your uploaded creations for free.

A final alternative is to use one of the third party viewers which allows you to upload temporary textures. The temp textures don't cost any lindens - but they also vanish the moment the viewer is closed.
Imprudence is one such viewer.

Try a selection of previewers, see which you prefer.

5. Do a test 'garment'. Open a blended template, save it as a jpg (for UVMapper), then open your previewer.

Study your text garment. Compare the blended template in the Gimp to its counterpart wrapped around the 3D model. Get to know it, figure out which part is the neckline, which the wrist, which the hand. At least a little bit!

Practice will improve this, of course.

5a. Previewing with UVMapper.

I use UVMapper. To get my model, I open UVMapper, File->Open model, and browse to where I downloaded SL_Avatar_OBJ.

To use UVMapper, you MUST have Second Life avatar mesh files (the .obj ones).

Because I can't save in the demo version, I have to 'smooth' it every time: just go to the View menu, select 'Smooth', and accept the default settings.
With your model set up, it's time to load the saved template. In UVMapper, go to the Texture menu and select 'Load'.

You should get something like the picture to the right.



Okay, I cheated a little bit. Look under Select->Mode and you find zoom, hand, and rotate tools. I used those to drag the model to where I could show you a better view. In checking clothes, you'll use those tools a lot!

Ignore the fact that the head has a shirt template all over it. The legs do too. UVMapper isn't very smart about that sort of thing.

6. Use the SL Beta grid, which is a test version of the SL grid. Go to the wiki page talking about connecting to the preview grid.
A useful site with answers about the Preview Grid is The Second Life wiki.

You can do all your test uploading to there and save yourself many, many Lindens. Be aware that nothing uploaded to the beta grid gets copied to the main grid: you'll still need to upload your final versions. But by making a habit of uploading your 'final' versions to the beta grid first, you'll discover most of your mistakes before spending any Linden on uploading to the main grid.

Your preparations are all done! Move on to part two.

Sunday, June 29, 2008

GNUCash

Well, all my Seshat Studios records are duly included in GNUCash now.


Spark of Genius has cost me nothing (Thank you!) and I've sold 650 Linden worth of stuff there.
Carmarthenshire Market has cost me 1,680 Linden and I've sold 2,050 Linden worth of stuff.
Gianfar has cost me 320 Linden and I've gained 750 Linden.
Medieval Times Market has cost 200 Linden and gained 250 Linden.
In sales direct from my inventory, I've gained 1,730 Linden.

All told, including fixing errors, I've spend 3,900 Linden on uploads.

I've sold 3 Brigid items, 11 Curtseys, 8 Florence items, 5 Rowans, and a custom animation/script set.

Now I can get back to the fun part.

Saturday, June 28, 2008

Administration


I've been doing administrative work, for the last few days. Setting up an OnRez and an SLExchange shop, setting up a GNUCash financial management system, and generally dealing with the annoying parts of running some sort of business.

In SL, I've been meeting people, exploring, and mostly socialising. I've also created a roleplay character.



Amidst all that, I set up two more shops. So now I have shops at:
Spark of Genius
Carmarthenshire Market
Gianfar
Medieval Times Market

Friday, June 20, 2008

Eloh Eliot is generous


Eloh Eliot is an extremely generous woman. She has not only made quality free skins, she has provided the original PSDs for them.

Find Eloh's free skin PSDs here.

I haven't yet studied the files - I only got the link and sample skins today - but the skins I tried on my av look good.