This is a walkthrough for making interface art for FreeSpace2. It should come with all the interface templates you'll need. I use Corel's graphics programs, not Adobe's, so if you do, you'll have to translate what I say into your program's lingo. You'll need both a pixel-based graphics program and a vector-based one to do everything in this tutorial as I do it. If you don't have a vector-based program, making the shield bubble for your shield ani will be harder, but not impossible. You'll have to figure out how for yourself, though.

With practice, you should be able to get the entire process here down to about a 35-minute job. I've typed in excruciating detail, but don't let the mass of words put you off. Writing a tutorial for interface art is rather like writing out the method for tying shoelaces. If you've ever tried that, you'll understand.

Interface at a Glance:

Size of Pic for Loadout Overheads:
Resized to fit template.
Settings for Shield Ani Fighter Image (prior to pasting into shieldReshef0000.pcx):
Brightness eyeballed to match that of shieldReshef0000.pcx using Brightness, Contrast, Intensity adjustment.
Max height of 78 pixels.
Settings for Icon Frames:
icon0004: same brightness as shield ani picture, 28*32 pixels, green background.
icon0005: icon0004 > gamma adjusted to 0.60 (except for the green background)
icon0003: icon0005 > colour balance adjusted to orange (except green background)
icon0002: icon0004 > colour balance adjusted to cyan (except green background)
icon0001: icon0002 > brightness adjusted down -17 (except green background)
icon0000: icon0001 > brightness adjusted down -17 (except green background)


Getting the Image:

  1. Open the model in ModelView32. (Alternatively, use your rendering program.)
  2. Set the background to a colour which contrasts well with the colouring of the ship.
  3. Position the ship in ModelView32 such that you have a top-down view with the nose of the ship pointing to the top.
  4. In the Submodels tab, select only the fighter's hull so that the thrusters are not visible, and take a screenshot.

    5. In the case of bombers with turrets (which count as separate submodels), things get more complicated, but you should be able to figure out how to put together two images into one easily enough.
  5. Open the screenshot in Photo-Paint as a new file. This will be our base image.


Making the Loadout Overheads:

  1. Using the Wand tool (or equivalent colour-based mask selection tool in your graphics program) set to no anti-aliasing, zero colour tolerance and subtractive selection, click on the background colour surrounding the image of the fighter. This will leave only the image of the ship itself selected, like so:



  2. Open LoadTemplate.pcx and 2_LoadTemplate.pcx and remove any unnecessary weapon bank slots from those images.
  3. Copy and Paste as New Object* into 2_LoadTemplate.pcx. Pasting as a new object is important, as it allows you to easily resize the image to fit the space available. Do so.

    (Resized down:)



  4. When everything looks great, convert the image to 8-bit format (i.e. 256-colour paletted mode) and save as 2_Load<Fighter>.pcx. When you convert to 8-bit, you will probably be asked if you want to flatten the image (i.e. combine all objects with background), and you should say yes to this.
  5. Repeat the above process with LoadTemplate.pcx for the low-res version.

Making the Shield Ani (Part 1):

  1. Return to the base image. It should still have its mask selection only around the image of the fighter itself, but if it does not, make it so. Now, convert the base image to 16-bit grayscale mode (not 8-bit!).
  2. Open shieldReshef0000.pcx. We will be using this file to compare brightness levels with.
  3. Crop the base image to selection. (This is why it was important to ensure that the fighter only was selected, and not the background.)
  4. Use the Brightness, Contrast and Intensity dialogue box on the base image to get your grayscale image of the fighter to the same brightness levels as the image of the Reshef in shieldReshef0000.pcx. Use your eyeball to measure this.


    5. I usually turn the brightness and contrast settings both up to 50, and then fiddle more from there. Because the Reshef itself was light in colour, 39 worked for it. Keeping the Brightness and Contrast values equal produces the best results. Alternatively you may use Gamma Adjustment instead of BCI, but the effects tend to be more washed out as compared to BCI's sharp images. I recommend Gamma only for darkly coloured ships.

  5. Invert the mask, use the fill tool to turn the background 100% black, and then invert the mask back.
  6. Resample the base image so that it is no more than 78 pixels high. This will give space above and below to work with in adding the shield bubble. (In the Reshef's case, we will make it even shorter because it is so wide.)



  7. Copy and paste the newly shrunken base image into shieldReshef0000.pcx. This is important! It is imperative that you use exactly the same colour palette as shieldReshef0000.pcx, or the final ani will look horrible on the HUD in Freespace. The easiest way to ensure this works out properly is to paste into an already existent image which contains the proper palette. The Dithering prompt which comes up when you paste from the base image into shieldReshef0000.pcx will ensure that everything gets worked out nicely, so when it asks, say that you want to use Error Diffusion dithering.
  8. Save shieldReshef0000.pcx as shield<Fighter>0000.pcx. Then select the whole image and copy it to the clipboard.

    9. Making the Shield Ani (Part 2):

  9. Open CorelDraw (the vector based companion of Photo-Paint).
  10. Paste the image of shield<Fighter>0000.pcx from the clipboard into CorelDraw.
  11. Zoom in on the image (it'll appear quite small on the page at first).
  12. Create a shield bubble around the image of the fighter.

    Making the Shield Ani (Part 3):

  13. Returning to Photo-Paint, paste the shield bubble from the clipboard into shield<Fighter>0000.pcx. It will again ask you about dithering. Again, tell it to use the Error Diffusion.
  14. Use the Freehand Mask Selection tool on Additive mode to select areas of the shield bubble to delete so as to divide it into quadrants. When everything looks nice and symmetrical, delete them.



  15. Now use the Freehand mask tool to go between the lines you just created in the shield bubble and isolate the top quadrant from the other three. Delete the other three and then EXPORT the image as shield<fighter>0001.pcx. DO NOT HIT THE SAVE BUTTON!!! Saving will lose all the previous undo list, and your other three sections will be gone forever. By exporting instead, your actual image sitting in front of you remains unchanged: only a copy of it has been saved as shield<fighter>0001.pcx.



  16. Press the Undo button to restore the deleted three quadrants, and then repeat the process of the previous step with the other three quadrants. The right quadrant is shield<fighter>0002.pcx, the bottom quadrant is 0003, and the left quadrant is 0004.
  17. Use AniBuilder32 to compile these images into shield<fighter>.ani.


Making the Selection Icon:

  1. Return to our base image in Photo-Paint, which should be in 16-bit grayscale and should have been cropped to the size of the fighter image itself, and convert it back to 24-bit RGB colour.
  2. Clear all mask selections. Failure to do so now is likely to produce green flecks around your icon in the final file, so do it!
  3. Resample the image to dimensions not exceeding 32*28 pixels.

    Usually, the height is the important dimension here (but in the Reshef's case it is the width). Most likely, to get the one dimension down to the right size, the other will becomce too narrow. E.g. To get the width down to 32 pixels, the height becomes less than 28 pixels. We'll fix that next.


  4. Increase the paper size of the base image so that its dimensions are exactly 28*32 (leaving the image centred). The difference between resampling and changing the paper size is this: resampling stretches or squishes the image into a specific size, while changing the paper size leaves the image itself alone and just adds or removes pixels around the outside.



  5. Double-check that there is currently no mask selected, then use the Wand tool, still set to zero colour tolerance and no anti-aliasing, to select all the black background that surrounds the fighter image (don't select any of the 90% or 80% black, etc., that is at the edges of the fighter image--we want to keep those parts). Fill this selection with pure green.



  6. Invert the mask so that the fighter image is selected (i.e. not the green background).
  7. Export the file as icon<fighter>0004.pcx (we'll convert it to 8-bit later)
  8. With the fighter image selected, adjust the gamma down to 0.60. Export as icon<fighter>0005.pcx



  9. With the fighter image still selected, adjust the colour balance to 100% red on the cyan-red slider and to 100% yellow on the yellow-blue slider in the Colour Balance dialogue box. Export as icon<fighter>0003.pcx



  10. Press Undo twice to return to the state of the image when we exported icon<fighter>0004.pcx.
  11. With the fighter image still selected, adjust the colour balance to 100% cyan on the cyan-red slider. Export as icon<fighter>0002.pcx



  12. With the fighter image still selected, adjust the brightness down -17 in the Brightness, Contrast and Intensity dialogue box. Export as icon<fighter>0001.pcx



  13. With the fighter image still selected, adjust the brightness down another -17 in the Brightness, Contrast and Intensity dialogue box. Export as icon<fighter>0000.pcx



  14. Close the base image without saving. We're done with it.
  15. Open all of the icon<fighter>000*.pcx files we just made. Convert them all to 8-bit at once using the Batch tab under the Image > Mode > Paletted (8-bit) menu option, and save. Doing them all at once in a batch process ensures that they will all be converted to the same palette, which is important. Converting each one individually to 8-bit will give each one its own separate palette, which will make a horrible mess in the end.



  16. Compile icon<fighter>.ani with AniBuilder32.
  17. Check to make sure frame 0004 doesn't have any unwanted orange pixels. Sometimes AniBuilder screws up the image a little bit here. If it does, save the frame as icon<fighter>0004.pcx, reopen it in Photo-Paint and paint the orange pixels gray again. Save, and recompile.

Making a One-Frame SS Ani:

  1. We need a new base image, so go to ModelView32 and position the fighter at XRot:30.00, YRot:330.00. Make sure only the hull submodel is selected and not the thrusters. Take a screenshot
  2. Open the screenshot as a new file in Photo-Paint.
  3. As at the beginning with the last base image, deselect the background colour using the Wand tool on subtractive mode with zero colour tolerance and no anti-aliasing. This will leave you with just the image of the fighter selected.
  4. Copy the selected image of the fighter, and paste it as an object into 2_slantgrid.pcx. Resize the fighter to fit nicely over the grid, convert to 8-bit, and save as 2_ss<fighter>0000.pcx



  5. Either repeat the above step using slantgrid.pcx, or simply resample 2_ss<fighter>0000.pcx to the dimensions of 350*230 and save as ss<fighter>0000.pcx.



  6. Compile both images into anis.


You're done!

* If your graphics programs doesn't have this functionality 1) slap yourself and go buy Corel Photo-Paint, and in the meantime 2) resample the image downwards until it has the right dimensions, and then paste that in.