CreatingShieldIconsInGimp

From FreeSpace Wiki
Revision as of 04:11, 18 February 2017 by Niffiwan (talk | contribs) (Split Shield into Segments)
Jump to: navigation, search

This is a quick summary of how I created two segment shield icons for the HUD.

I'm writing this down so I remember how to do this, because me not being an artist, it took me ages to figure out how to do this and I don't want to go through the frustration of rediscovering it!!!!

Programs I used:

  • GIMP 2.8
  • apngasm 3.1.6

Create Ship Image

  1. (if necessary) create a new canvas 112x93
  2. Import a top down image of the ship & centre it
    • so far I've grabbed the existing shield anim frame 0
    • might be able to grab other ships by
      1. setting shield anim to be FSO generated
      2. DISABLING shields (or the auto-generated shield bars may overlap the image)
      3. screenshot'ing the HUD
      4. converting the image to greyscale (TBC how best to do this!)

Create Shield

  1. Using fuzzy select (with zero threshold) select the area outside the ship image; then invert selection
    • If necessary modify the selection to better fit the ship, e.g. using the oval select (additive) to round out an irregular shape
  2. Select -> Grow... by 10 (? try 11) pixels
  3. Select -> feather set to 2 pixels
  4. Create new layer (black background) & select the new layer
  5. Bucket fill: white
  6. Select -> Shrink... by 3 (?) pixels
  7. Bucket fill: black (leaving a mostly 1 pixel full-white outline)
  8. Select -> Grow... by 2 pixels
  9. Filters -> Blur -> Gaussian blur; aspect locked; 3 (?) pixels
  10. Filters -> Artistic -> Softglow; 9 (?) pixels
  11. Use colour select to select all the fully black regions (outside & inside shield); then invert selection
  12. Layer -> Mask -> Add Layer Mask... using the current selection
  13. Confirm you can clearly see the ship and the shields don't overlap the ship (unless you really want them to!)

Split Shield into Segments

(this assumes fore/aft two segment shields; adapt as necessary for more segments)

  1. through the middle of the the shields; create rectangle selection 3 pixels high & shield width, then bucket fill full black (try 5 pixels to give more gap between the segments?)
  2. at the end of each shield (4x ends) create rectangle selection, 4 pixels high & shield width (1 pixel into black space; the other 3 over the shield)
    • should have 4x small rectangles
    • might need to be done in two steps? fore/aft ends?
  3. apply the gaussian blur filter (3 pixel, width & height locked)
  4. create a new layer and move fore or aft to it (should have 3x layers at this point)
    • select / cut / etc DO EEET AND WRITE ABOUT EEEET
  5. export image (all layers) as png (or one at a time; whatever floats your boat)
  6. use apngasm to create APNG image
    • apngasm -o shipname_icon.png ship.png fore.png aft.png
    • note the order; that's what FSO expects
  7. test in FSO

WASH, RINSE, REPEAT

TODO: figure out if there's any benefit to creating an ani instead of an apng (maybe uses less ram/texture memory? since apngs auto-expand to full 24bits per pixel?). On the other hand, creating an ANI seems like a PITA...