Difference between revisions of "CreatingShieldIconsInGimp"

From FreeSpace Wiki
Jump to: navigation, search
(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…")
 
(→‎Split Shield into Segments)
 
(21 intermediate revisions by the same user not shown)
Line 8: Line 8:
 
* apngasm 3.1.6
 
* apngasm 3.1.6
  
 +
== Create Ship Image ==
  
 
# (if necessary) create a new canvas 112x93
 
# (if necessary) create a new canvas 112x93
Line 17: Line 18:
 
#*# screenshot'ing the HUD
 
#*# screenshot'ing the HUD
 
#*# converting the image to greyscale (TBC how best to do this!)
 
#*# converting the image to greyscale (TBC how best to do this!)
−
# draw guidelines at the ships edges
+
 
−
# create a new layer; transparent background (or black?)
+
== Create Shield ==
−
# 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
+
DAMNIT: need to "anti-alias" the outside of the shield better
−
#* aim to have the fore/aft edges as close as possible to the
+
 
−
#* might need to resize the original top down image
+
# Using fuzzy select (with zero threshold) select the area outside the ship image; then invert selection
−
# bucket fill the selection with full white
+
#* If necessary modify the selection to better fit the ship, e.g. using the oval select (additive) to round out an irregular shape
−
# alter the selection (select -> shrink) to be 4 pixels smaller
+
# Select -> Grow... by 10 (? try 11) pixels
−
# bucket fill the selection with full black
+
# Select -> Feather by 3 pixels (2 isn't smooth enough on outside edge)
−
# alter the selection (select -> grow) to be 2 pixels larger
+
# Create new layer (black background) & select the new layer
−
# apply the gaussian blur filter (2 pixels, width & height locked) CONFIRM THE SIZE!!
+
# Bucket fill: white
−
# use the colour select tool to select the area inside & outside the oval
+
# Select -> Shrink... by 3 (?) pixels  
−
# invert the select; then apply it as a layer mask (so you can see where the shield will be in relation to the ship)
+
# Bucket fill: black
−
# 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
+
# Select -> Grow... by 1 pixel
−
# through the middle of the oval; create rectangle selection 2 pixels high & shield width, then fill full black
+
# Filters -> Blur -> Gaussian blur; aspect locked; 3 (?) pixels (leaving a mostly 1 pixel full-white outline)
−
# at the end of each shield (4x ends) create rectangle selection, 2 pixels high & shield width
+
# Filters -> Artistic -> Softglow; 9 (?) pixels
 +
# Use colour select to select all the fully black regions (outside & inside shield); then invert selection
 +
# Layer -> Mask -> Add Layer Mask... using the current selection
 +
# Confirm you can clearly see the ship and the shields don't overlap the ship (unless you really want them to!)
 +
# SWITCH FROM EDITING THE LAYER MASK TO EDITING THE LAYER! (I've accidentally done the next steps to the layer mask TOO MANY FREAKIN TIMES!)
 +
 
 +
== Split Shield into Segments ==
 +
 
 +
(this assumes fore/aft two segment shields; adapt as necessary for more segments)
 +
 
 +
# 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?)
 +
#* ensure bucket fill has "Fill Whole Selection" selected (*sigh*)
 +
# 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
 
#* should have 4x small rectangles
−
#* might need to be done in two steps? fore/aft ends?
+
#* use additive select (hold down shift while selecting)
−
# apply the gaussian blur filter (1 pixel, width & height locked)
+
# apply the gaussian blur filter (2 pixels, width & height locked) (3 is too sharp a transition from white?)
−
# create a new layer and move fore or aft to it (should have 3x layers)
+
# duplicate the existing shield layer
−
# export image (all layers) as png
+
#* rename the layers to fore & aft if you wish
 +
# In the aft shield layer, Rectangle select (replace) the fore shield area
 +
#* Bucket fill (whole selection, black) the normal layer
 +
#* Repeat on the layer mask
 +
# Select the fore layer
 +
#* Invert your selection
 +
#* Repeat Bucket fill twice for layer & layer mask (creating the fore shield segment)
 +
# Check everything looks as expected by enabling/disabling visibility for the fore & aft layers
 +
# export image as png; for each layer in turn
 +
#* Disable the layer mask
 +
#* Make the layer the only visible layer
 +
#* Export As... the layer
 
# use apngasm to create APNG image
 
# use apngasm to create APNG image
−
#* apngasm -o shipname_shield.png ship_base.png ship_shield_fore.png ship_shield_aft.png
+
#* apngasm -o shipname_icon.png ship.png fore.png aft.png
 +
#* note the order; that's what FSO expects
 
# test in FSO
 
# test in FSO
  
 
WASH, RINSE, REPEAT
 
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?)
+
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...

Latest revision as of 10:36, 19 February 2017

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

DAMNIT: need to "anti-alias" the outside of the shield better

  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 by 3 pixels (2 isn't smooth enough on outside edge)
  4. Create new layer (black background) & select the new layer
  5. Bucket fill: white
  6. Select -> Shrink... by 3 (?) pixels
  7. Bucket fill: black
  8. Select -> Grow... by 1 pixel
  9. Filters -> Blur -> Gaussian blur; aspect locked; 3 (?) pixels (leaving a mostly 1 pixel full-white outline)
  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!)
  14. SWITCH FROM EDITING THE LAYER MASK TO EDITING THE LAYER! (I've accidentally done the next steps to the layer mask TOO MANY FREAKIN TIMES!)

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?)
    • ensure bucket fill has "Fill Whole Selection" selected (*sigh*)
  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
    • use additive select (hold down shift while selecting)
  3. apply the gaussian blur filter (2 pixels, width & height locked) (3 is too sharp a transition from white?)
  4. duplicate the existing shield layer
    • rename the layers to fore & aft if you wish
  5. In the aft shield layer, Rectangle select (replace) the fore shield area
    • Bucket fill (whole selection, black) the normal layer
    • Repeat on the layer mask
  6. Select the fore layer
    • Invert your selection
    • Repeat Bucket fill twice for layer & layer mask (creating the fore shield segment)
  7. Check everything looks as expected by enabling/disabling visibility for the fore & aft layers
  8. export image as png; for each layer in turn
    • Disable the layer mask
    • Make the layer the only visible layer
    • Export As... the layer
  9. 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
  10. 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...

Retrieved from "https://wiki.hard-light.net/index.php?title=CreatingShieldIconsInGimp&oldid=46042"