CreatingShieldIconsInGimp

From FreeSpace Wiki
Revision as of 10:51, 13 February 2017 by Niffiwan (talk | contribs) (Created page with "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 age…")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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


  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!)
  3. draw guidelines at the ships edges
  4. create a new layer; transparent background (or black?)
  5. use oval select tool to create selection that covers ship, with at least ~6 pixels room around the ship ### TODO replace with the ship outline, expand and feather
    • ensure you have anti-aliasing selected
    • aim to have the fore/aft edges as close as possible to the
    • might need to resize the original top down image
  6. bucket fill the selection with full white
  7. alter the selection (select -> shrink) to be 4 pixels smaller
  8. bucket fill the selection with full black
  9. alter the selection (select -> grow) to be 2 pixels larger
  10. apply the gaussian blur filter (2 pixels, width & height locked) CONFIRM THE SIZE!!
  11. use the colour select tool to select the area inside & outside the oval
  12. invert the select; then apply it as a layer mask (so you can see where the shield will be in relation to the ship)
  13. move the layer containing the ship so that it fits correctly inside the shield bubble (including resizing the layer if necessary), OR redo the shield bubble oval so that the ship fits correctly
  14. through the middle of the oval; create rectangle selection 2 pixels high & shield width, then fill full black
  15. at the end of each shield (4x ends) create rectangle selection, 2 pixels high & shield width
    • should have 4x small rectangles
    • might need to be done in two steps? fore/aft ends?
  16. apply the gaussian blur filter (1 pixel, width & height locked)
  17. create a new layer and move fore or aft to it (should have 3x layers)
  18. export image (all layers) as png
  19. use apngasm to create APNG image
    • apngasm -o shipname_shield.png ship_base.png ship_shield_fore.png ship_shield_aft.png
  20. 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?)