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

Discussion in 'GBAtemp Art Studio' started by GHANMI, Jun 1, 2014.

  1. GHANMI
    OP

    GHANMI GBAtemp Advanced Fan

    Member
    971
    493
    Jun 10, 2012
    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)

    help.png
     
  2. king_leo

    king_leo Real Hero

    Member
    834
    625
    Sep 12, 2009
    De RigueurMortis
    Why not simply do one of two things, use gimp when doing pixel work, and draw the outlines by hand.
     
  3. GHANMI
    OP

    GHANMI GBAtemp Advanced Fan

    Member
    971
    493
    Jun 10, 2012
    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.
     
  4. Cyan

    Cyan GBATemp's lurking knight

    Global Moderator
    18,263
    8,740
    Oct 27, 2002
    France
    Engine room, learning
    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.

    [​IMG]


    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 likes this.
  5. GHANMI
    OP

    GHANMI GBAtemp Advanced Fan

    Member
    971
    493
    Jun 10, 2012
    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

    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 :)
     
  6. Cyan

    Cyan GBATemp's lurking knight

    Global Moderator
    18,263
    8,740
    Oct 27, 2002
    France
    Engine room, learning
    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 :)
     
    GHANMI likes this.