3 replies to this topic

[Sam.]

Creating Shadows for Large Item Icons ->

 

I have recently written a little ImageMagick ‘script’ to generate shadows for the large frame in an item icon, and figured I’d share it.  It looks something like this:

"D:\Program Files\ImageMagick\convert.exe" SomeImage.bmp -fill "#00FF00" -opaque "#000000" -trim -sample 60x60^> RemoveShadow.png

"D:\Program Files\ImageMagick\convert.exe" RemoveShadow.png -fill "#000000" +opaque "#00FF00" -bordercolor "#00FF00" -border 4 Shadow.png

"D:\Program Files\ImageMagick\convert.exe" RemoveShadow.png -transparent "#00FF00" RemoveShadow.png

"D:\Program Files\ImageMagick\composite.exe" RemoveShadow.png Shadow.png NewWithShadow.bmp

"D:\Program Files\ImageMagick\convert.exe" NewWithShadow.bmp -trim -type Palette -compress none BMP3:SomeImageWithShadow.bmp

del Shadow.png
del RemoveShadow.png
del NewWithShadow.bmp

Pause

ImageMagick (IM for short) is a VERY powerful image processing and editing engine, but it can also be a bit overwhelming.  Examples of ImageMagick Usage contains great explanations and tutorials on how to do perform a huge variety of image manipulations with IM.

 

I will break down the above script and attempt to explain what each line is doing.  Note that while IM is cross-platform, this tutorial assumes you are on Windows.

 

Step 0: Setting up the script

In the same directory as the item icon images you will be using for your BAM, create a windows batch file (with a file extension of BAT) and paste in the above code.  To create a BAT file, you can start with a TXT file and simply change the .txt file extension to .bat.

 

Line 1: ->

"D:\Program Files\ImageMagick\convert.exe" SomeImage.bmp -fill "#00FF00" -opaque "#000000" -trim -sample 60x60^> RemoveShadow.png

 

"D:\Program Files\ImageMagick\convert.exe"

This is the quoted full path name to IM's "convert" utility.  Note:  If you have added the IM directory to your system path or if you are performing running the above BAT file in the IM directory (not recommended), you need not include the full path.

 

SomeImage.bmp

This is the image you want to add a shadow to for use as the large item icon in your final BAM.  Substitute "SomeImage" with the actual name of your file and "bmp" for your file's actual file extension.  Note that IM supports a vast number of image file formats.

 

-fill "#00FF00" -opaque "#000000"

This pair of commands finds all pure black (#000000) pixels in the image and filling them with green (#00FF00 - the background color).  This should effectively remove any existing shadow from the image so that we start with a clean item icon to add our shadow to.  If you instead want to convert pixels that are "nearly black" to green, use a -fuzz factor.

 

-trim

This removes any edges that are exactly the same color as the corner pixels.  Basically it trims any rows and columns of transparent (green) pixels from around your actual image.

 

-sample 60x60^>

This will resize your image to the given dimensions (while preserving aspect ration) by removing rows and columns of pixels thus preserving your original colors.  "60x60" specifies the maximum dimension (either in width or height) of your image after resizing.  You will want to choose dimensions that are 4 pixels less than the actual maximum frame size allowed by the game.  This is because the item's shadow will be offset down and to the right of the item by 4 pixels in each direction.  As the maximum dimensions of the large item icon in a BAM are 64x64, well want to choose 4 pixels less than that; thus our dimensions of "60x60".  Finally ">" is a special trigger that says "only resize if image is larger than the specified dimensions".  Note that "^" is the escape character in Windows CMD and is necessary here since ">" is usually a pipe character.

 

RemoveShadow.png

Finally, this is the name of the output image that will be saved after performing the above manipulations.  This is an intermediate file (which we will use again later) so do not change the file name or extension.

 

 

 

Line 2: ->

"D:\Program Files\ImageMagick\convert.exe" RemoveShadow.png -fill "#000000" +opaque "#00FF00" -bordercolor "#00FF00" -border 4 Shadow.png

 

"D:\Program Files\ImageMagick\convert.exe"

Again, this is the quoted full path name to IM's "convert" utility.

 

RemoveShadow.png

Our input file (the one generated by Line 1 above).  Do not change this filename or extension.

 

-fill "#000000" +opaque "#00FF00"

This time, we are finding every pixels that is NOT green (the special "+" flag in front of "opaque" means NOT) and filling them with black (the color of our shadow).

 

Now we want to make room in the item icon image for the shadow of the item which will be offset down and to the right of the original image.  To do this we will simply add a "boarder" around the original image.

-bordercolor "#00FF00"

This specifies that we want the color of our boarder to be green (the background/transparent color).

 

-border 4

And this actually adds a border with a width of 4 pixels.

 

Shadow.png

Finally, this is the filename and extension of the resulting image: the image of the item's shadow.  Again, this is an intermediate image so the name and extension should not be changed.

 

 

Line 3: ->

"D:\Program Files\ImageMagick\convert.exe" RemoveShadow.png -transparent "#00FF00" RemoveShadow.png

This is modifying the image produced by Line 1 so that the green pixels become transparent.

 

 

Line 4: ->

"D:\Program Files\ImageMagick\composite.exe" RemoveShadow.png Shadow.png NewWithShadow.bmp

 

"D:\Program Files\ImageMagick\composite.exe"

This is the quoted full path to IM's "composite" utility which is used to overlap one image over another.

 

RemoveShadow.png

The image on top.

 

Shadow.png

The image on bottom.

 

NewWithShadow.bmp

The resulting "composite" image.

 

 

Line 5:

"D:\Program Files\ImageMagick\convert.exe" NewWithShadow.bmp -trim -type Palette -compress none BMP3:SomeImageWithShadow.bmp

This takes our composite image from Line 4, trims excess rows and columns of transparent pixels from around the actual image (as before), and saves it as a 256-color paletted and uncompressed Windows Bitmap Version 3.  You can replace "SomeImageWithShadow" with your actual file name, but leave the file extension as BMP.

 

 

Lines 6,7,8:

del Shadow.png
del RemoveShadow.png
del NewWithShadow.bmp

This deletes the intermediate files we no longer need.

 

 

Lines 9:

Pause

Pauses the script before the console window closes to make sure IM didn't throw any errors or warnings.

 IMShadowCreator.zip   8.81K   342 downloads

 

 

At this point you can take your large inventory icon (which now has a shadow) and your small image icon (which you already had or can creating using IM's convert utility and the "-trim" and "-sample 32x32^>" options and use BAM-Batcher to convert them to a proper Item Icon BAM.

 

Edited by Sam., 24 October 2017 - 10:08 AM.

[Gwendolyne]

Thanks for sharing this. I hardly use IM for this kind of task, but I will now to create my item shadows and get rid of my toshop script.

[Miloch]

Very cool. I have always done this by hand but have always thought an automated tool would be useful.

[Sam.]

FYI, a conversion of the code in the 1st post for ImageMagick v7 and using named colors would be:

magick.exe convert SomeImage.bmp -fill lime -opaque black -trim -sample 60x60^> RemoveShadow.png

magick.exe convert RemoveShadow.png -fill black +opaque lime -bordercolor lime -border 4 Shadow.png

magick.exe convert RemoveShadow.png -transparent lime RemoveShadow.png

magick.exe composite RemoveShadow.png Shadow.png NewWithShadow.bmp

magick.exe convert NewWithShadow.bmp -trim -type Palette -compress none BMP3:SomeImageWithShadow.bmp

del Shadow.png
del RemoveShadow.png
del NewWithShadow.bmp

Pause