Creating Advanced Art Layers

From FetishQuest Wiki
Revision as of 03:35, 9 October 2023 by JasX (talk | contribs)
Jump to navigation Jump to search
Inpainting nipple-studs/clothes: Only inpaint the clothes to make it easier later.

Advanced art layers can be used to give a character multiple/colorable outfits. Note: This tutorial was written for photoshop. You can use gimp, but you'll have to either rewrite my script, or add the art in game manually.

Creating the Art

The first thing you'll want to do is to create the actual art. If you're creating AI art, you'll want to draw some clothes over the character and only generate the parts you've drawn. Otherwise you may end up with clashing layers. If you know how to draw yourself, it's going to be significantly easier, since you can just draw the clothes on separate layers directly.

Since I can't draw, this tutorial will be from the perspective of using AI tools.

You can add as many or as few layers as you want, but for this tutorial I'll be creating the following layers:

  1. A naked base layer.
  2. Three versions of a sling bikini: Plate, Leather, Cloth.
  3. Two versions of a bikini: Leather, Cloth.
  4. A breast/crotch plate combo
  5. Two bodysuits: Leather, Cloth.
  6. A shirt/panties combo

Preparing the File

We'll need to create a photoshop file. In this tutorial I'll be creating a jaguar character. I'll drag the naked layer into photoshop and save it as a new file called "jaguar.psd"

The layer order, names, and settings will be used by the exporter to generate a file you can use in the FetishQuest devtools to make it easier to setup your character art. We'll start with the lower nr layers and go up.

FQ supports the following layers (tho see public/classes/PlayerIconState.js in the source for something more up to date:

  • FaceResting : 5 - Resting face reaction. I use it for orgasm faces.
  • FaceMild : 10 - Facial expression for mild reactions. I use it for pain/arousal.
  • FaceHeavy : 15 - Facial expression for heavy reactions, I use it for heavy pain/arousal such as critical hits.
  • CosmeticLower : 20 - Allows you to put cosmetics under armor. Nipple clamps and collars are good examples. I won't be using this in the tutorial.
  • ArmorLower : 25 - Lower body armor
  • Handheld : 30 - Handheld items. Not used in this tutorial because there's way too many items.
  • ArmorUpper : 35 - Upper body armor.
  • ArmorCosmeticJewellery : 40 - Jewelry layer. Not used in this tutorial.
  • ArmorCosmeticLower : 45 - Lower body cosmetic. Not used in this tutorial.
  • ArmorCosmeticUpper : 50 - Upper body cosmetic. Not used in this tutorial.
  • Stains : 55 - Stain/slime layers etc. Not used in this tutorial.

When the image is drawn, layers are drawn from lowest to highest, drawing active higher value layers on top of lower value layers. Only one image per layer is ever drawn. The higher the layer is in the FQ editor/photoshop file, the higher priority it gains. There's an exception for temporary layers, such as FaceMild and FaceHeavy, which are triggered from events and the last triggered one gets priority.

Preparing the Orgasm Face

The layer order and name matters. 5_orgasm means draw on layer 5 (FaceResting) and label the layer "orgasm".
Use difference and magic wand to select and delete all pixels that are the same as the background.

Note: In all these examples, if you draw your own art you can skip the erasing parts of these steps, and go directly to naming your layers. Just keep in mind that you can only have one photoshop layer per art layer. So if for instance your orgasm face is drawn on multiple layers, you'll have to merge those. But don't merge them to the background!

  1. Copy your orgasm face art over the background in the jaguar.psd file and rename the layer to 5_orgasm. The number followed by _ is required and tells the script what FQ art layer you want the photoshop layer to go on. Layer 5 is the FaceResting layer, which we'll use for orgasm. To make things easier, I'll create a Faces folder and put it in there. But you don't have to.
  2. If you want to prevent a layer from being exported, start the name with # and it will be invisible in the exporter script.
  3. Next we'll need to erase everything but the face (changed pixels). The easiest way I've found to do this is to change the blend mode of 5_orgasm to "difference". This makes pixels that are the same as the background pure black. While in this mode, use the magic wand with a tolerance of 1 and Sample All Layers checked on any of the black parts of the picture. Then delete the black pixels. Set the blend mode back to normal.
  4. You may want to do some touch-ups with the eraser tool.

Preparing the Reaction Faces

Reactions are layers that should show up for a specified amount of time. They're all bound to text events, meaning you probably want to use the meta tags conditions. Reaction layers are also special in that you can bind multiple ones to the same layer, and only the most recently triggered one will be made visible. This makes them good for facial reactions.

  1. Copy your aroused face art into the photoshop file.
  2. Name the layer 10_aroused to use layer 10 (FaceMild). And put it in the Faces folder, on top of 5_orgasm.
  3. Do the same difference trick. Remember to hide any layers except 10_aroused and the background.
  4. If you plan to add a collar, you probably want to use a soft eraser brush to remove everything below the chin.
  5. Do the same with the pain expression, but name it 10_pain
  6. Do the same thing with your heavy aroused/pained layers, but use layer 15 by naming them 15_aroused_heavy and 15_pain_heavy
  7. If you did it right, you should now have your layers setup as such:
    Example of facial reaction layers in photoshop. Ignore the #Background copy layer. I'm only using it to help erase needless pixels.

Preparing Clothing Layers

Using the difference trick to remove pixels that are the same on the clothing layer and background.
Selecting only the colorable part of the outfit.
Masking layer set to multiply and 68% opacity
Outfit with 70% opacity multiply layers on top.

Remember that the order of photoshop layers matter. Each layer number (this is the number the layer name starts with) is unique in FQ, and only the first valid layer nr matching a set of conditions will be drawn. Basically, put the most unique outfits on top, and use the lower ones as a fallback.

  1. The first outfit we'll prepare is the fallback outfit: An outfit that you can fall back on if none of the layers above it are valid. You can pick what you want, but for this I'm going to pick the cloth outfit (shirt and panties).
  2. Create a new group and name it something descriptive such as "cloth"
  3. Paste the cloth art into the file and put it in said group.
  4. Use the difference trick again to remove unchanged pixels. I also recommend using a soft eraser to make the visible parts as small as possible.
  5. Next select only the top part of the outfit, using a selection tool of your choosing.
  6. Hit ctrl+shift+J to split it into a new layer.
  7. Name the layer containing the top half of the armor something like 35_cloth_ub and the lower half layer 25_cloth_lb
  8. If you did it correct, you should have something like this:
    Ignore the #Background copy layer.
  9. To allow players to recolor the layer, we'll need to create a mask layer. Start by selecting the 25_cloth_lb layer.
  10. This is the time consuming part. Use a selection tool of your choosing and select only parts of the panties you want to recolor.
  11. Hit ctrl+j to copy it to a new layer. Name it 26_cloth_lb
  12. Hit ctrl+u to enter hue/saturation. Drag the lightness all the way up to make it pure white, and accept.
  13. Hit ctrl+u again and check colorize. Drag saturation all the way to max and color to -50.
  14. In the layer browser, change the blending mode to multiply or overlay, depending on what you think looks better.
  15. Alter the opacity until it looks good. Keep in mind this is what it's going to look like if the player dyes their armor pure red.
  16. Set your brush to pure red and use a small brush / eraser to patch up any sections you missed.
  17. You can use hue/saturation on this layer to preview what it's going to look like in different brightness and colors.
  18. Repeat for the top part of the outfit.
  19. Your layers should now look like this:
  20. Adding a bodysuit is basically the same, except you'll only be using layer 25 and layer 26, since it only affects one layer.
  21. From this point on it's just rinse and repeat for your art layers. But remember the order of your photoshop layers matter. The following is how I ended up laying it out. I went with the strategy of "most specific outfit" first, meaning bodysuits on top:
    Advanced armor setup with faces and armor types.

Using the script

Time to bake the different layers! If you wanna do this by hand, you'd crop, make a note of the top left corner, and manually add the layers in the FQ layer editor. But if you have photoshop you can run a script to bake all the layers into a folder and generate a JSON file you can use for uploading.


index.php?title=Category:Modding