Graphical edition question: Proper way to make character outlines for pixel fonts

[GHANMI]

So, this is a problem I faced multiple times before:
You know that when editing fonts in games, there's a 1px outline around the character -or alternatively, a drop shadow by 1px diagonally- in a different color, so that the white letters are visible no matter what background color they are on.

I often like to take monochrome pixel fonts and rework them for games I'm working on that allocate 4 colors to letters (one for transparency, one or two for the actual letter, and one for the outline/drop shadow). -I'd appreciate it a lot if anyone could refrain from just saying: take an already existing common dull font where this has been done before.

So, I copy the monochrome font as a whole from Crystaltile to Photoshop, and then I do:
-the outline: select color>letter color(white) , copy white letters, extend selected zone by one pixel, fill it all with outline color (black), paste white letters
OR
- the drop shadow: I just copy the white letters, and move the selection diagonally 1px and then fill with the shadow color, and then move the selection back and fill with the white color.

And all is fine, except for one major annoyance:
Tiles containing individual letters are 8x16/16x16/ whatever... but very often, with letters filling most of the tile (for example: M, W.. and practically every accentuated character), the outline/shadow spills on the adjacent tile.

... Causing some letters to have annoying black pixels on the sides, either vertically or horizontally.
I used to clean those up myself manually pixel by pixel and even then I let some slip.

Is there a better way?
Example (overflowing bits in red, notice Photoshop has the graphic like in the third example, without the grey separator between tiles)

 

[Deleted User]

Why not simply do one of two things, use gimp when doing pixel work, and draw the outlines by hand.

 

[GHANMI]

Why not simply do one of two things, use gimp when doing pixel work, and draw the outlines by hand.

Drawing outlines for ~130 characters manually, for each font, is not exactly my definition of fun.
Did it three or four times already, and it's too much time-consuming.
That's what led me to look into Photoshop, and eventually this particular issue.

 

[Cyan]

I tried to do it with macro. http://filetrip.net/dl?GPmIsguTYl
I think It's working, but you currently have to press the "play" button for each letter.
You can probably add a macro to repeat it automatically for a set mount of time.

Load the .atn in the Action tab :
Alt+F9, little arrow, load action

Once loaded, open your font file, select the first letter, select the "add contour" macro, press "Play" button.

The macro is currently doing this:
- Memorize the current selection
- Copy the selection to a new layer
- Pick the background color (yellow) and delete it from the new layer (it will have only the letter left, with 1 or 2 color)
- Set a layer style (Outerglow in green, 1pixel around the letter, using specific options to prevent Anti-aliasing)
- Extract the Style to its own layer
- Load the saved selection, and crop anything outside the selection from the style layer
- delete the saved selection
- Merge all visible layers
- advance the current selection 8 pixel to the right

You can double click on each sub-macro to edit the properties, names, values, colors, etc., but you need to do it in correct order as double-clicking is also applying the effect.


Edit:
I used Photoshop 7.

edit2:
if you have "set1.atn", redownload it, I uploaded "Set 1.atn" (with a space in the name).
I removed unneeded macros.

 

[GHANMI]

Cyan
Really thanks a lot for your help and even going through the trouble of doing the macro. I really appreciate it.
This is exactly more or less what I have been looking for: didn't know Photoshop allowed macros.
I think I'll tweak this part to suit my various needs

- Set a layer style (Outerglow in green, 1pixel around the letter, using specific options to prevent Anti-aliasing)
- Extract the Style to its own layer

from what I see the outerglow effect doesn't cover diagonal pixels which can be jarring visually at times... I'll replace it with a dilute selection by 1px/move 1 px diagonally as I need for that particular case, and it can make for a good learning experience.

Besides that, everything else is perfectly fine

 

[Cyan]

I'm glad it worked on your version of photoshop, as I did it on v7 which is a little old.

I did the effect this way as an example, you can change it or insert different actions in the macro (select the place where you want to insert a new action and click on the record button, do what you want and click on the Stop recording button)
I hope you can make a macro to do what you want in one click