Working on a different projects that uses Adobe AIR and Starling – I often require stylized fonts, that I want to embed inside my applications. I use freeware BMFont by AngelCode for texture atlases generation with my fonts.
If you are required to apply some effects for each chars as on left image, then you need to slice each char to separate layer. This can be done manually but it will take a lot of time or you can use my script that will do the same but faster and better – automatically.
If you don’t understand the difference – take a closer look at the right image. It’s one layer and gradient filter is applied. This is most popular issue when you need to stylize bitmap font in photoshop. Let’s solve this easy!
My script was developed under Windows and Adobe Photoshop CC 2014 and I don’t know if it can be applied to older Photoshop versions or another platforms. As I heard from some script user – he can use this script in Photoshop CS5 🙂
Script doing analysis of opened files and checking automatically page from source *.fnt (xml) descriptor.
1) Launch BMFont generator
2) Check preferred chars
3) Go to Options > Font Settings and setup there everything according to your requirements.
4) Go to Options > Export Settings. First that you must to know – it’s Padding. Very useful feature in font stylizing. If you want to add some shadows, outlines and other effects – they can exceed char bounds in the atlas and you will get the same result as on image above.
For fixing this issue you must add padding for all sides. My script automatically draw chars bounds in debug layer and you can see the real size that used by char. Go back to the BMFont and in Export Settings setup padding by 5px for each side.
Open atlas in Photoshop, execute script and you will receive perfect image:
After you added some effects – you must remove debug layer, merge all layers and you can save your atlas!
How to use:
1) Export PNG + FNT (XML) file from BMFont. Be sure that you selected XML and not TEXT or BINARY
2) Open generated PNG in Photoshop
3) Execute BMFont Slicer.jsxbin script by File > Scripts > Browse (select jsxbin in file filter). If you want to use this script on regular basis – I can suggest you to put it in the *scripts folder:
Windows 7 x64:
C:\Program Files\Adobe\Adobe Photoshop CC 2014\Presets\Scripts\BMFont Slicer.jsxbin
*After this your script will be available in File > Scripts > BMFont Slicer
4) After script executed – Explorer will be opened and you must select generated *.fnt file from BMFont
5) When slicing is done – you will see layers for your chars
Download BMFont Slicer here.