FontCreator file. It’s simple: click on the glyphs of the original font...

17
First of all, I apologize for not format this thread properly. I'm not really online that often and it'd be a pain in the neck to learn all those HTML codes and whatnot. So Photoshop now supports color font (yep, actual fonts with colored glyphs), which will potentially make proxy making that much easier. Now you won't have to painstakingly type in black-and-white mana symbols, rasterize them, then color them, or equally painstakingly add raster mana images every time you need them. The key is to build a color font to easily input those special symbols. If you're interested in such a prospect, you may want to take a look at this tutorial. I. Acquire a plain font with the necessary glyphs There should be a lot of renditions of the MTG Symbols font out there for you to choose. But if you want to build the font from scratch, this is a good place to start: https://wpn.wizards.com/en/resources/rules-documents/244. Simply download all the documents, especially starter guides, that contain card images. Next up, extract the fonts from those PDFs. Note that none of the fonts will be complete, so you want to get as many characters from them as possible. That’s why you got to get as many different PDFs as possible. Extract the fonts with mutool: https://mupdf.com/downloads/archive/mupdf-1.11-windows.zip. You might want to Google how to run a command-line program. The symbol font used in those PDFs are called MagicSymbols or MTGSymb (used in new prints, with different glyph shapes for numbers). Some of the font file aren’t in .TTF or .OTF and cannot be edited with FontCreator; open those with FontForge (https://fontforge.github.io/en-US/), then generate TTFs from them. These tasks are easy and just a few Google searches away in case you want to learn how do them. Now create a new font with FontCreator, and copy the glyphs from those extracted font file. It’s simple: click on the glyphs of the original font files > Ctrl+C > click on the glyphs of the newly created font file > Ctrl+V. It’s a good idea to map the mana symbols onto Latin characters as per convention (e.g: B and b for “black”).

Transcript of FontCreator file. It’s simple: click on the glyphs of the original font...

Page 1: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such

First of all, I apologize for not format this thread properly. I'm not really online that often and it'd be a

pain in the neck to learn all those HTML codes and whatnot.

So Photoshop now supports color font (yep, actual fonts with colored glyphs), which will potentially

make proxy making that much easier. Now you won't have to painstakingly type in black-and-white

mana symbols, rasterize them, then color them, or equally painstakingly add raster mana images

every time you need them. The key is to build a color font to easily input those special symbols. If

you're interested in such a prospect, you may want to take a look at this tutorial.

I. Acquire a plain font with the necessary glyphs

There should be a lot of renditions of the MTG Symbols font out there for you to choose.

But if you want to build the font from scratch, this is a good place to start:

https://wpn.wizards.com/en/resources/rules-documents/244. Simply download all the

documents, especially starter guides, that contain card images.

Next up, extract the fonts from those PDFs. Note that none of the fonts will be complete, so

you want to get as many characters from them as possible. That’s why you got to get as

many different PDFs as possible. Extract the fonts with mutool:

https://mupdf.com/downloads/archive/mupdf-1.11-windows.zip. You might want to Google

how to run a command-line program.

The symbol font used in those PDFs are called MagicSymbols or MTGSymb (used in new

prints, with different glyph shapes for numbers). Some of the font file aren’t in .TTF or .OTF

and cannot be edited with FontCreator; open those with FontForge

(https://fontforge.github.io/en-US/), then generate TTFs from them. These tasks are easy

and just a few Google searches away in case you want to learn how do them.

Now create a new font with FontCreator, and copy the glyphs from those extracted font

file. It’s simple: click on the glyphs of the original font files > Ctrl+C > click on the glyphs of

the newly created font file > Ctrl+V. It’s a good idea to map the mana symbols onto Latin

characters as per convention (e.g: B and b for “black”).

Page 2: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such

After gathering all the necessary glyphs, save the FontCreator project file.

II. Color the glyphs

There’s already a handy tutorial here: https://www.youtube.com/watch?v=J4BSK_ASOlw

Coloring glyphs is pretty simple as shown in the video. I’ll just add a few minor notes:

• To add a new color to the Palette panel, click on the “+” button, then on the

prompted box, then paste the color code into “Hex color”, and “Apply”

• Any of the applied colors can be easily changed later, and the change will be applied

on all affected glyphs.

• You can get the color codes from pictures using the Eyedropper tool in Photoshop.

Here are the codes I got from images from Magic Duels. “FG” is for “foreground”,

“BG” for “background”

Page 3: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such

o #000000: FG of {0-16; ½; 100; 1,000,000; ∞; C; T; X}; “midground” of {S}; BG

of {Q}

o #FFFFFF: FG of {S; Q}

o #D6CBC6: BG of {0-16; ½; 100; 1,000,000; ∞; B; C; S; T; X}

o #181012: FG of {B}

o #ADD3AD: BG of {G}

o #001810: FG of {G}

o #F7AE94: BG of {R}

o #211008: FG of {R}

o #BDE3F7: BG of {U}

o #081421: FG of {U}

o #FFFBDE: BG of {W}

o #181918: FG of {W}

o #8C8A84: BG of {B/P} and {B} in {2/B}

o #8CAA94: BG of {G/P}

o #C67963: BG of {R/P}

o #94B6CE: BG of {U/P}

o #E7E3AD: BG of {W/P}

Page 4: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such

III. Add OpenType features

There are a lot of tools to add special characters into text. But rather than painstakingly

doing that every time (even with the Glyph panel of Photoshop), why don’t you make

shortcuts that will help you insert special characters without even get your hands off the

keyboard?

OpenType fonts will enable just that. What you need is ligatures –characters that are

combinations of other characters.

In FontCreator, go to Font > OpenType Designer… (Ctrl+F8). A new dialog will appear.

Now let’s add a ligature feature.

1. Right-click on “Scripts” on the upper right corner of the screen to add a script.

Page 5: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such

2. A new dialog pops up. Pick either “Default script (comes with default language)” or

“Latin (latn)” from the “Known script” drop-down. Then click “Next”.

3. Now pick either “Default language (DFLT)” or “English (ENG)” from the “Known

language” drop-down. Then click “Next” to add a language.

4. Next, right click on the language’s name to add a feature.

Page 6: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such

5. Choose “Standard Ligature (liga)”, then “Finish”

6. Back at that leftmost column, right-click on the feature’s name to add a lookup table.

Page 7: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such

7. Choose “Ligature substitution”, then “Finish”

8. Now click on the lookup’s name and look at the left column of the dialog. That’s where

you add ligature substitutions. Click on the “+” button.

Page 8: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such

9. The “New Substitution” dialog pops up. Scroll to pick the first character of the ligature

sequence on the left list and the ligature on the right list (most of the time you can just

ignore the left list altogether). Type glyph names in the “Filter” field to search more

quickly.

Page 9: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such

10. In this example, I want to substitute the sequence “BG” with the ligature named “Aring”.

B is the black mana symbol. “B” is for black mana, “G” for green mana and “Aring” for

hybrid black/green mana.

Page 10: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such
Page 11: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such

Don’t worry about the name. I’m just using the default glyphs in FontCreator. If your

hybrid black/green mana has a different name, use it. Glyph names are displayed on

top of the glyph boxes in the main window.

Page 12: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such

11. After picking glyphs from the “New Substution” pop-up, a substitution is added like this

Page 13: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such

12. Now enter <space>G into the input field, after B, then press Tab or click Apply on the

bottom of the dialog. The substitution will be like this.

13. Test by typing BG in the test field below and you’ll see the sequence “BG” is

automatically turn into the hybrid mana symbol. That’s the key: ligature substitutions

help you automatically turn sequences of characters into single designated

characters, which will save you a lot of pain from manually adding special characters

into text.

Page 14: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such

14. However, you still want to use the sequence “BG” as “B” and “G”, not as hybrid B/G, at

times, right? In that case, add what I’d call a “trigger character” into the input field. A

“trigger character” should be easily typed in with just one key stroke, like the left bracket

( [ ) for example. Now the hybrid mana symbol is only triggered by typing in “BG[”, and

you still have the sequence “BG” to use. So go ahead and type in <space>bracketleft.

15. Do all this with other special characters (hybrid mana, phyrexian mana, 10-16 mana,

infinity mana, etc.). Apart from “BG”, I recommend adding other substitutions like “bg”,

“Bg”, “bG”. All of this takes a lot of work, but it will help a lot in the long run. You can

also make use of glyph classes to speed up your process. A class of “B, b” will work

just like “B” and “b” alone. You can’t use more than one class in substitution though.

Page 15: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such
Page 16: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such

16. After you’re done, click “OK” to close the dialog to apply the OpenType feature. Don’t

forget to save your FontCreator project just like you do with Word files every once in a

while either.

IV. Convert the font into OpenType-SVG format

Now that you’re done with all the glyph adding, glyph coloring, OpenType flavoring, simply

export your font. Go to File > Export Font > Export TrueType/OpenType Shift+Ctrl+E.

The font is now a color font just like a emoji font. But it only displays colors on Microsoft

and Google apps. That’s because it’s not an OpenType-SVG font – what works in

Photoshop.

The last thing to do is to convert it into an OpenType-SVG font, using TransType.

Open TransType. Then use Ctrl+O or dragging-and-dropping to open your exported font

file.

Make sure to choose “OpenType PS .otf” for “Profile”. Additionally, you can change the

font’s family names. Then click the “play button” and save the converted font files.

Page 17: FontCreator file. It’s simple: click on the glyphs of the original font …magicseteditor.sourceforge.net/system/files/color font... · 2020-02-25 · you're interested in such

Now browse to where you save those font files and install the one with names end in “SVG”

– that’s the color font you need.

Don’t forget to turn on “Standard Ligatures” in Photoshop.