A Quick BMP -> PNG -> BMP How-To with GIMP Graphics Editor (Full Version)

All Forums >> [New Releases from Matrix Games] >> Campaign Series: Middle East 1948-1985 >> Mods and Scenarios



Message

Crossroads -> A Quick BMP -> PNG -> BMP How-To with GIMP Graphics Editor (9/30/2015 4:15:31 PM)

Just because the game engine supports BMP files does not mean we need to work with BMP format alone. For certain tasks, it is quite handy to transfer the files into PNG format for additional graphics manipulation, before saving the final versions back in 24bit BMP format.

This write-up is for those who are somewhat familiar with graphics editors. It is written using GIMP 2.6.10, which is my favorite version. There might be similar methods for PSP and the lot, but for I am not familiar with them that is another story.

PSP. I downloaded a free 30 day trial once, but all I got was one window.

In this quick How-To, we discuss

  • A method for transferring game's BMP files into PNG format while replacing the background color with a transparent layer
  • How to use helper layers with game's files
  • And finally, how to transfer these PNG files back to BMP format the game supports.


    Motivation for doing something like this

  • PNG files with true transparency can be scaled up and down without anti-aliasing with background color, as is the case with BMP files.
  • Shapes themselves have edges, so anti-aliasing may remain in the agenda, depending on the task at hand. You need sharp edges for a perfect BMP export for instance.

    As always, any questions just ask! Also, please share your favorite tips and tricks here.

    [:)]


    Updated 10/11/15 - Helper files available in the Attachment below:

  • _Icons7d_CellGridNATO_768x3840_GridWithNumbers.png <- A Helper Layer for NATO Icons sheet (icons7d.bmp)
  • _Icons7dnn_CellGrid_768x1600_GridWithNumbers.png <- A Helper Layer for 2D Unit Icons Sheets (icons7d##.bmp)



    • Crossroads -> RE: A Quick BMP -> PNG -> BMP How-To with GIMP Graphics Editor (9/30/2015 4:16:05 PM)

    Create a PNG master file with Select by Color Tool

    Select By Color is a really, really neat tool.

    I am using the Syrian icons7d26.BMP as an example here. The basic steps are:

  • Open the stock icons7d26.BMP file
  • With Select by Color Tool, click at a background spot, and observe the tool selecting all the areas filled by that color. Not only the helmet interior, but the 1x1 pixels inside tank wheels for instance!

    Threshold slider is your best friend with this tool:

  • With the Threshold slider bar you can set an threshold for "similar" colors. Set at 0, it only selects the one exact colored pixels as what we want to do here.
  • If you for instance need to preserve an old file that suffers from anti-aliasing, set the threshold to a level that selects all the magenta (or what ever) hue pixels you want to be rid off.

    So what you have at this stage is as follows:

    [image]local://upfiles/32195/4030BB02183A4FAEBCE3B32757346BD8.jpg[/image]



    • Crossroads -> RE: A Quick BMP -> PNG -> BMP How-To with GIMP Graphics Editor (9/30/2015 4:17:37 PM)

    Then, continue as with Counters example:

  • Layer -> Transparency - Add Alpha Channel; the selected area now is transfered into its own separate Alpha channel
  • Edit -> Clear, or just hit 'Del' key, and it is gone.
  • Select -> None; to clear the selection.

    What you have now is something like in the picture below.

    Now would be then the time to perform any graphics manipulation tricks you want!

    Resize, work with the shapes, add layers to background as helpers, remove and add new shapes into the original layer, and so forth.

    [image]local://upfiles/32195/6881CABB88014C9995EC204BFAF6A79E.jpg[/image]



    • Crossroads -> RE: A Quick BMP -> PNG -> BMP How-To with GIMP Graphics Editor (9/30/2015 4:20:27 PM)

    How to work with Layers

    As an example here's a neat technique on how to get all those icons aligned in a graphics file.

  • Earlier, I had created a PNG file with 64x64, 48x48 and 44x44 square grids, with rectangular NATO icon sized rectangulars in the middle. Open it -> Select All.

  • Go to your icons7d26.PNG and do a Edit -> Paste As -> New Layer.

  • The Grid file is now the top layer on the Icons7d## file, and since it is not transparent you don't see the icons below at all. (This is the Egyptian Icons sheet but never mind...)

  • Next, do a Layer -> Stack -> Layer To Bottom. Now the Grid is in the bottom, as it should.

  • Before starting to work with Icons, remember to select the top layer. This is easiest done with hitting the 'Home' key.

  • Now, perform the stuff you wanted to do with the top layer ie. with the original Icons7d## layer you started with.

  • When done, select the bottom layer (grid layer), easiest done with hitting the 'End' key, then do a Layer -> Delete Layer.

  • Now you should only have one layer in the window, the original Icons7d## you started with. Save As you would normally do.




    [image]local://upfiles/32195/907E9324992A469DA5605E1F729C0228.jpg[/image]



    • Crossroads -> RE: A Quick BMP -> PNG -> BMP How-To with GIMP Graphics Editor (9/30/2015 4:22:59 PM)

    Finally: saving it all back to a BMP format.

    I would like to save directly to Magenta 'ff00ff' background color, but it produces an anti-aliased end result. So I always save to BMP with background set on pure white, html code 'ffffff'

  • With Color Exchange tool (Colors -> Map -> Color Exchange), exchange any 'ffffff' white in the PNG file into say 'fefefe', almost a similar white.

  • If you want to have PNG master files, now'd be the time to save the file first as a PNG file

  • Then, save into BMP, making sure white is the selected background color in GIMP. At this stage to play safe I always set GIMP to pure Black '000000' foreground and pure White 'ffffff' background.

  • Make sure you set the format into 24 bit BMP in the little dialog window that opens up!

    Reopening the saved file, what you have now as a BMP file is as follows:

    At this stage, I typically spot a few pixels here and there I want to manually fix.

    [image]local://upfiles/32195/395C346BE10D4BB7A4EDFC7E06404A3D.jpg[/image]



    • Crossroads -> RE: A Quick BMP -> PNG -> BMP How-To with GIMP Graphics Editor (9/30/2015 4:23:51 PM)

    And to finish the job at hand:

  • Colors -> Map -> Color Exchange tool: exchange all white 'ffffff' into magenta 'ff00ff', to make sure everything's as it should be.
  • Magenta is butt-ugly, but it is for a reason. This way you can really observe how it turned out. Skip this step at your peril.
  • Save As / Export (depending on your GIMP version) as BMP (select 24 bit)

    What you should have is the final end product, all neat and tidy:

    [image]local://upfiles/32195/027E2BEB249C4344874FF68FBB8AE703.jpg[/image]



    • Crossroads -> RE: A Quick BMP -> PNG -> BMP How-To with GIMP Graphics Editor (9/30/2015 4:29:55 PM)

    How to work with layers Case Black 2D Unit Profiles

  • Using e.g. Rectangular Select Tool, Cut the preferred selection off the PNG master file. In this case, all the 2D unit icons themselves, below the flags and the Unidentified Unit Marker.
  • Then, immediately, Paste it back to same place. It is now there as a new Layer.
  • Not much going on with the picture below, but if you pay attention (and I know you do!), there's two layers there, with just the icons as a top layer.

    [image]local://upfiles/32195/97392DA1CAC044FD9C732E1EDCEDCBE8.jpg[/image]



    • Crossroads -> RE: A Quick BMP -> PNG -> BMP How-To with GIMP Graphics Editor (9/30/2015 4:32:01 PM)

    Then...

  • Perform the preferred operations / tools on the selection (new layer)

    In this case,

  • Colors -> Desaturate to turn the selection into grayscale
  • Apply a Brightness / Contrast that has the preferred effect
  • Then, Layers -> Anchor (instead of Flatten Image)I to merge the icon shape layer to original layer.

    To have something like this (helper layer shown in the background):

    [image]local://upfiles/32195/2A5696E4D8CB48769B1E4FD6B78722D6.jpg[/image]



    • Crossroads -> RE: A Quick BMP - PNG - BMP How-To with GIMP Graphics Editor (10/1/2015 6:02:52 PM)

    Just couldn't watch those interim unit icons, so had to paste in new icon sheets. Syrians in this case. The jpg pictures are done With Windows Snipping Tool, so they appear here a bit blurred.

    Hope this little How-to is helpful in getting you up to speed with these files. Again, GIMP is the editor I've grown up with so any tips and tricks with other editors are welcome here too.

    As always, very happy to help anyone with a question.

    [:)]



    Crossroads -> RE: A Quick BMP - PNG - BMP How-To with GIMP Graphics Editor (10/11/2015 6:45:57 AM)

    The helper files attached to the Opening Post have been updated.

    I just realised the even rows had the NATO icon symbol off by 1px due to me having flipped the original odd row over, but not realising the NATO icons are not centered but 1px to left.

    Please download again in case you're using them.



    DM729 -> RE: A Quick BMP - PNG - BMP How-To with GIMP Graphics Editor (6/26/2017 7:34:20 PM)

    I am attempting to combine my favorite aspects of the 3d icons which various people have modded over the years; specifically the 3d,4d,5d set which holds the minefield signs, armor wrecks and objective symbols etc. XMGO had a set with my favorite wrecks and I want to cut and paste swastika/sickle objectives from another set thus combining the two into one mod. When I do this, I get "ragged" white edges around the objective symbols in the game display. Is magenta the color I would use to clean up the jaggedness. I'm not a graphics guy but I am willing to learn!



    Crossroads -> RE: A Quick BMP - PNG - BMP How-To with GIMP Graphics Editor (6/27/2017 11:12:48 AM)


    quote:

    ORIGINAL: DM729

    I am attempting to combine my favorite aspects of the 3d icons which various people have modded over the years; specifically the 3d,4d,5d set which holds the minefield signs, armor wrecks and objective symbols etc. XMGO had a set with my favorite wrecks and I want to cut and paste swastika/sickle objectives from another set thus combining the two into one mod. When I do this, I get "ragged" white edges around the objective symbols in the game display. Is magenta the color I would use to clean up the jaggedness. I'm not a graphics guy but I am willing to learn!


    What you describe there is likely caused by anti-aliasing creating "soft edges", which happens when scaling graphics up or down, unless using a scaling algorithm that specifically does not use anti-aliasing. You'd need sharp edges, where the background color (magenta, in most cases) and the unit shape have a clear border.

    So either, if you have the original file and need to resize it to smaller sizes: use a resize algorithm that does not use anti-aliasig. In PSP it's the Pixel Resize option, and with GIMP it is Interpolation: None.

    Or: if you already have the graphics files where anti-aliasing took place, you'd need to manually tidy the shape edges. It could be a lot of work. So in this case, if this is an issue with most tiles, I'd say resize from 3d manually using a non-anti-aliasing (is that a word?) algorithm.

    Hope this helps! If not, ask again, I'm happy to help you out with this. [:)]






    DM729 -> RE: A Quick BMP - PNG - BMP How-To with GIMP Graphics Editor (6/27/2017 8:51:40 PM)

    Without resizing, I cut the objective symbols from one mod of "icons3d" and added them to another and this happens:

    [image]local://upfiles/54212/2580E9CAEEC74DE58FB6C1AA92FA0CDA.jpg[/image]



    Crossroads -> RE: A Quick BMP - PNG - BMP How-To with GIMP Graphics Editor (6/27/2017 9:16:01 PM)

    I'd guess the magenta hue in the file you copied from is not the exact same as in your target file. The magenta I use is hex 'ff00ff'.

    Try filling the magenta background say with neon green, with Fill tool, see if that helps.



    DM729 -> RE: A Quick BMP - PNG - BMP How-To with GIMP Graphics Editor (6/27/2017 9:52:14 PM)

    It worked! I understand now. The background must be one exact color.


    Many Thanks!



    Crossroads -> RE: A Quick BMP - PNG - BMP How-To with GIMP Graphics Editor (6/28/2017 7:41:03 AM)

    Nice! Looking forward to seeing your end product [:)]



    Padding -> RE: A Quick BMP -> PNG -> BMP How-To with GIMP Graphics Editor (10/7/2018 2:40:45 PM)

    I like this online converter.



    Page: [1]

    Valid CSS!




    Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
    1.609375