Page 1 of 1

Kinsie's Photoshop Sprite Workflow

PostPosted: Fri Dec 29, 2017 5:58 am
by Kinsie
Throughout the development of MetaDoom and Juvenile Power Fantasy I managed to put together a reasonably decent workflow for creating and modifying artwork using Photoshop. Since a script landed in my lap that makes it a bit easier, I thought I'd share it with everyone publicly.

Please note that I use Photoshop CC. Some features I mention may not be available if you're using versions before CC 2015. Also please note that I am not a very good artist, and that this workflow might not actually be very good at all. Feedback and improvements are welcome!

Image

Here's one of my source files from JPF, from when I was "upgrading" Heretic's Iron Lich with tank treads because I was very upset at a floating head not actually being able to float and wanted to visually justify it. The first thing you'll notice is that every frame has its own folder in the layers area. Back when I was making these mods I had to make a folder for every sprite manually, but as of today there's now a nice script by @panicexp on Twitter that automates this! What a swell guy. So with that in mind, here's how to start things off:

1.) Save that script to the Presets\Scripts subdirectory of your Photoshop install. Give it a nice name and a .jsx extension. I don't know if that last part is completely necessary, but I did it anyway. I dubbed it "Create Folders from Layers.jsx".
2.) Open Photoshop (restart if it's already open) and create a new document. Make it reasonably big and 72dpi, with a transparent background if you can help it (if not, just delete the background layer or something).
3.) Drag and drop the sprite set you want to edit onto the document, then hold down Enter for a little while to confirm placement of all of them as Smart Objects or whatever.
4.) Drag and sort them around the document as you wish. This bit's up to you, frankly. I don't know how OCD you are. Personally, I like to highlight them all and go Layer > Arrange > Reverse so that all the A rotations are at the top of the list etc.
5.) Highlight all the layers, right click them and select "Rasterize Layer".
6.) With the layers still all highlighted, Click File > Scripts > The Name Of The Script We Saved Earlier.

You'll now have a big bunch of folders, each containing a single layer, each named after the layer inside of it. This will be helpful later!

Right, next step. Let's look inside one of my folders.
Image
You'll notice that I use layers. I use layers a lot. I use them so much. Using this method, you can cheerfully use all the usual Photoshop tools like brushes, adjustment layers etc. on your sprites.

Once your sprites are done, minimise all your folders (so you can't see the contents in the layer viewer), select them all, and Right Click > Export As.
Image
You'll notice that all your layers have each been merged down into a single, lovely graphic that has all your changes. Select them all and set them to PNG, 8-bit, then click Export All and select a convenient folder. Congrats! Now you have all your sprites with the proper naming conventions all edited up and ready to be imported into SLADE! Granted, they don't have offsets, but that's fairly easy to fix.

BUT!
Image
Depending on what tools you used or how you did things (like resizing or rotating), some of these sprites may have anti-aliasing around the edges, may be 16 million colour instead of paletted (not that GZDoom cares much) or other things that effect the beautiful crispness and purity of your work. This cannot be allowed. (Or it can. Either/or.) Either way, if you want to fix this, it's quite easy. Just open that sprite and use Image > Mode > Indexed Color to crush that bad boy down to 256 colours. This will also remove such aliasing.
Image
I personally set "Matte" and "Dither" to "None" when doing this. I also don't force a palette unless I need to (ie. for player palette translation) since I target hardware renderers that don't much care about sticking to one palette. If you do care, it shouldn't be too hard to export a sprite from Doom 2 etc. from SLADE, load it into Photoshop and save its palette for future use.

It may take a while to manually apply this to a lot of sprites (like say every frame of a monster), though, so here's what I like to do after completing all of the previous steps and exporting my sprites:
1.) Open the Actions panel (Window > Actions)
2.) Create a new Action with a sensible name. You'll notice the record button lighting up.
3.) Without doing anything else, use Indexed Color as stated above.
4.) Hit the stop button.

Now we have an Action of you hitting the Indexed Color command. So what? So now we can batch-apply the command to all your sprites.
1.) Close your source document. Make sure it's saved nicely in a memorable place!
2.) Open all your exported sprites. Just drag and drop 'em into your empty Photoshop window. It'll probably take a minute or so to load them all.
3.) Click File > Automate > Batch and this window will pop up.
Image
4.) Set the Action to the action you just recorded, and the Destination to "Save and Close". Hit Okay.

Photoshop will now individually index-ify, save and close all those sprites you opened up, so you should probably go get a drink at this point because it might take a couple of minutes depending on your machine.

And that's it! Hopefully someone finds this useful, or at least doesn't consider me completely crazy for doing things like this. There are almost certainly ways to improve upon this, and I'd love to hear them!