PDA

View Full Version : Custom Font Tutorial


GeckoKid
23-11-07, 04:34
http://www.larashome.com/forums/index.php?showtopic=25287

Hello, since there's this amazing tool that we can now customise fonts in trle, here's a small tutorial on how to make a custom font set for yourself.

note that this doesn't include how to put it into your fonts.pc or how to align them in leikkuri, as they are included in the readme.

tools you'll need

Photoshop (here I use 7, but it doesn't really matter what you use, unless it's really ancient i suppose; as far as i remember photoshop 4 already has layer masks)

GeckoKid
23-11-07, 04:37
http://img263.imageshack.us/img263/1103/01bh5.jpg

First step.

Type out all the conceivable text that the original font.pc has (a tip is to export the tga and reference it to the side)

Note how the layers are spread: the top one is just those useless PS buttons, I don't even think you need them actually. The second one are the arrows, and the 3rd one is where you typed all the text in. The order here doesn't matter at all. Also fill the background layer with black.

However do note the text tool box above, I have set the text distance to 100, so that the text won't go too close together, you will see why in a second.

http://img263.imageshack.us/img263/5572/02og9.jpg

Create a layer just above the background layer, fill it with a random colour that doesn't hurt your eyes, do not choose any colour that exists within your picture tho, and don't use that scary magenta, yet.

http://img401.imageshack.us/img401/1481/03hf3.jpg

Now right click on your text layer, and choose BLENDING OPTIONS.

Go to the stroke section, tick it, and give it a 1 pixel, outside, black stroke to give the text have a nice little outline.

(this is also why i recommend keeping the distance between letters)


(older photoshop versions may have them called differently, you can still do the same job however by ctrl+clicking the text layer and edit->stroke)

GeckoKid
23-11-07, 04:39
http://img159.imageshack.us/img159/1741/04nt4.jpg

do the same to the other layers if you like. (quick way is to copy the layer effects off the text layer first, then paste it on the ones you want)

http://img208.imageshack.us/img208/9261/05wa0.jpg

Here's the fun part. (read: important and don't mess it up)

Now create a new layer above all layers.

Go to select -> colour range...

And pick the temporary background colour. The fuzziness doesn't really matter at the moment. Just don't make it too big that you select the black or the white of the picture as well. You can choose 0 to skip a step, but it could give you too many black space in the end product.

Anyway click OK when you are done.

http://img159.imageshack.us/img159/3692/06cm6.jpg

now with the colour selected, click on Add Layer Mask.

GeckoKid
23-11-07, 04:42
http://img509.imageshack.us/img509/1166/07cc6.jpg
automatically the mask is selected instead of the layer itself, rectify it by clicking on the layer thumbnail. (single click it is, some people like my mom are obsessed with double-clicking)

http://img148.imageshack.us/img148/4596/08rr2.jpg
and fill it with that horrifying 255,0,255 pink!

(if you can only pick a grey colour, you didn't select the layer instead of the mask)

http://img148.imageshack.us/img148/3664/09os5.jpg
getting there now.

your screen should look like this at the moment, however there are still fuzzy pink edges.

GeckoKid
23-11-07, 04:45
http://img249.imageshack.us/img249/1917/10vs0.jpg
select the mask again by clicking on the mask thumbnail...

http://img267.imageshack.us/img267/6425/11py0.jpg
go to threshold...

(adobe kinda rearranged the menu every so often in different photoshop versions, mine is 7 here, yours may be put somewhere else, but it's gotta be somewhere)

http://img441.imageshack.us/img441/1415/12is7.jpg
Adjust that little triangle until you see little thin lines surround the text, or to whatever you feel like.

The point of going through this step is to completely remove any transparent pink pixels. It doesn't matter what number you use here, as long as it's done, it's fine.

http://img441.imageshack.us/img441/2351/13bi7.jpg
now hide the temporary background layer....

GeckoKid
23-11-07, 04:47
...And you are done!

It's all up and ready to be exported as tga for fontedit to save it as font.pc!

In the case of leikkuri, I just can't imagine how you can work with that magenta for a long time, so just simply hide the magenta layer and show the temporary background layer, and save as a copy of the bmp file. as it's only a reference picture for the exe, you won't get to use it in the end, so it doesn't matter, as long as YOU get to see it properly.


There you go!

(you can have this font as a sovenieer :) it's a PNG file so there's no visible compression.)

http://img261.imageshack.us/img261/2282/fontuc3.png


Optionally if you feel very dedicated to your font, I would recommend you to use the pencil tool, use EITHER BLACK OR WHITE, and slowly smooth out the rough edges you may encounter to make it look prettier. (remember you work on the mask, not on the coloured layer itself, and i would only recommend doing it until you are completely happy with it, cos if you decide to change the font you'd have to repeat the whole colour range step again.)

Here i have fixed the Z (please, fill the magenta with some other colours when you do decide to fix it to avoid eye damage)

http://img160.imageshack.us/img160/7192/14om6.jpg

SSJ6Wolf
23-11-07, 06:06
This looks very useful! Thanks for posting. :D

Piega
24-11-07, 11:39
I cannot make head or tail from it. I'm pretty good with layers and such but text is not my strongest point. I have this font that I want to have. It seems that I have chosen a very difficult one cause it has many curls that bends into the zone of other letters. But that is not my main problem now. I have exactly the same values in the character window but when I type my font into the window I get a lot of space between the lines and I dont know how to get rid of that. Is my font possible at all?

Edit:solved

http://home.hetnet.nl/~piega3/font.jpg

Gambit37
24-11-07, 11:50
First, as you say, with all those curly descenders, it's not a suitable font -- you'll get all sorts of problems.

Second, you need to change the leading (that number 30 pt) to something much smaller.

Fluen
24-11-07, 12:06
Hello, since there's this amazing tool that we can now customise fonts in trle, here's a small tutorial on how to make a custom font set for yourself.

What is the name of the tool (leikkuri?) and where to download it? I just find a load of Finnish pages when searching for this name.

Piega
24-11-07, 12:39
OK fixed the text issues but can some one upload a photoshop ready standard text package with all symbols typed in the window cause I have real troubles to find them all.

Pyuaumch
24-11-07, 13:01
@Fluen: Right, "Leikkuri" is a finnish word :D . You can download this tool at TREP homepage (http://trep.trlevel.de/en/downloads.html).

Piega
24-11-07, 22:51
I want to add something. I just finished my first font :) but here it comes. When I load the game I have some letters that have junk information from other letters. The letters have one pixel on the right free that is included in selection but if you have a letter straight next to it you get the first pixel line as junk on your screen even if it is not in your selection! So when you create your font in photoshop make sure you have two pixels free in between letters! Now I must move a lot and reselect those letters!

When you have a letter on the right against the edge and you have a letter on the edge on the left you will also get junk on your screen from the left! Maybe you can add this to the readme?

Edit: My first font "Sands of Fire", now at TRsearch :)

http://home.hetnet.nl/~piega3/font.jpg

Los Angeles
25-11-07, 12:47
I don't understand!!!

1. How can I open the original Fonts.PC with Photoshop?

2. How do I know in which distance I have to put the letters?

Sorry, it's because I don't understand everything.! :o

Piega
25-11-07, 13:57
You dont need the original font! What you do need is Fontedit.exe from TRsearch. Now just take your favourite font and type it in a 256 x 256 pixels window. Make sure that when you have the letters complete with Gecko's tutorial that you have at least two pixels free in between letters. Read the readme from Leikkuri!

With Fontedit.exe you make your new font ready for the level conversions. That means that the BMP you created for Leikkuri must also be saved as a Targa file. With Fontedit.exe you create the font.pc file with the Targa file. With Leikkuri you arrange the letters to patch the engine. Dont think too hard, it is easier then it seems but you are spending some time to arrange the letters in Leikkuri.

Los Angeles
25-11-07, 17:34
You dont need the original font! What you do need is Fontedit.exe from TRsearch. Now just take your favourite font and type it in a 256 x 256 pixels window. Make sure that when you have the letters complete with Gecko's tutorial that you have at least two pixels free in between letters. Read the readme from Leikkuri!

With Fontedit.exe you make your new font ready for the level conversions. That means that the BMP you created for Leikkuri must also be saved as a Targa file. With Fontedit.exe you create the font.pc file with the Targa file. With Leikkuri you arrange the letters to patch the engine. Dont think too hard, it is easier then it seems but you are spending some time to arrange the letters in Leikkuri.

Last Question: What is Leikkuri? :o

Gambit37
25-11-07, 18:19
Read the whole thread! It's right there.

Piega
25-11-07, 20:12
I have another tip. In the readme of Leikkuri it says that you must leave one pixel space on the right when you select a symbol. But it is better to add this pixel to the left!

Actually all selected info will shift one pixel to the right. So if you select a symbol with one pixel on the right the first line from the symbol can be cutted from the screen and if you have a letter directly attached to your selection in Leikkuri the first pixel line will be drawn wich creates akward lines or pixels on screen. Now this is not the best example but if you have more straight up letters you will see it is ugly.

http://home.hetnet.nl/~piega3/fontcut.jpg

Pyuaumch
26-11-07, 05:26
I think it has something to do with engine's resolution scaling. Higher resolutions will result in higher chance of wrong symbol rendering. But even some native TR4 letters are also cutted from sides because of this bug, even if they have proper alignment. In this case i add some pixels to a side where bug occurs.

P.S.: Readme updated, as well as Leikkuri itself, which now supports automatic adding of pixels to the right side.

Piega
26-11-07, 16:24
I'm pigheaded and add pixels to the left and not on the right :) No letters are cut in any way from left or right on all resolution above the resolution settings in Leikkuri (wich is 960x720). I play in 1600x1200 and they look ok. I know the font of Core has cutted symbols too especially the "z". When you swap the free pixel line this font would also be correctly displayed.

The blue is Leikkuri, the red is how it will be drawn in game. This does not count for all symbols but many do so if you have your letter selected this way you get the first pixel line from the "H" on your screen. If your lucky the next symbol will be drawn over that line. When you select a pixel on the left this problem will never happen!

http://home.hetnet.nl/~piega3/fontcut2.jpg

.:Tirivol:.
26-11-07, 16:47
Sorry but it doesn't work for me...
When i try to load the lps file this is what append

http://img511.imageshack.us/img511/8767/screenlo3.jpg

I push patch, copy the tr4 in the trle folder, and the font.pc in the wads/graphics folder, and when i convert the main title i see only strange symblos instead of the normal text...why?

Piega
26-11-07, 17:11
The reload BMP can happen. Just reload it. For patching you dont need the BMP as it is only for selecting symbols to edit. Make sure you use the font.pc file from the download or are you making a font of your own?

.:Tirivol:.
26-11-07, 17:17
T__T
I reload the bmp and do the same things,but...

http://img138.imageshack.us/img138/4710/screenis6.jpg

Can someone of you write here ALL the things i have to do to change font?
I've download the times new roman font from trsearch

Piega
26-11-07, 17:19
Is it download or selfmade font?

.:Tirivol:.
26-11-07, 17:19
download

Piega
26-11-07, 17:35
Actually you did nothing wrong.

1. extract font.pc into grahpics wad folder. This is the new fond.
2. load the timenewroman.lps file into leikkuri. Ignore the BMP message and patch the engine.
3. Convert title.TOM that should do it.

.:Tirivol:.
26-11-07, 17:56
it doesn't work...T__T

Pyuaumch
27-11-07, 16:57
I'm pigheaded and add pixels to the left and not on the right :)Nah, update again (http://trep.trlevel.de/leikkuri/leikkuri_v043.rar), now it also can add pixels to the left :D . You can easily do a 1-pixel shift to the left (which you described above) by entering 1 in the "L" (left) field and -1 in the "R" (right) field, but obviously it won't shift letters that are adjacent to the left edge of picture.
No letters are cut in any way from left or right on all resolution above the resolution settings in Leikkuri (wich is 960x720).How about vertical cutting? I can't align some letters properly, vertical position (baseline) becomes different for certain letters, if resolution is too large.
I know the font of Core has cutted symbols too especially the "z".Another example is apostrophe (or whatever it's called), which is extremely cut on the left side in default tomb4.exe.

Piega
28-11-07, 07:38
Now that you mention it, the font is cutted from the top too but there is no free pixel line at all in vertical position. This is not really disturbing.

However they are aligned ok and I have a 1600x1200 resolution. Could it be that it depends on the size of a symbol? Maybe it has something to do with even or uneven amount of pixel size?

Anyway, thanks again for the update :tmb:

tomblover
31-12-07, 09:57
it doesn't work...T__T I have this problem too. :(

My load bar dissapears as well.

Boris S.
09-03-08, 12:56
I have one more error: when I try to load *.lps font table using Leikkuri it always has a message "Error opening file! Make sure that selected preset isn't corrupted." I've tried to load different tables, including donloaded from trlesearch.org, but I always have the same. :hea:

spider-pig
09-03-08, 14:33
No mater how many times I try, when I patch the font with leikurri and recompile my levels, It never shows the font on my main menu and in many other parts, only in the inventory it works +\-... OMFG! Help please

Boris S.
31-03-08, 07:02
I have one more error: when I try to load *.lps font table using Leikkuri it always has a message "Error opening file! Make sure that selected preset isn't corrupted." I've tried to load different tables, including donloaded from trlesearch.org, but I always have the same. :hea:
Can it be connected with russian version of Windows XP? I really can't understand, what is problem!

jeffrey van oort
04-04-08, 23:08
http://aycu24.webshots.com/image/51503/2004101787535197034_rs.jpg (http://allyoucanupload.webshots.com/v/2004101787535197034)

I have tried on every single way to get this font to work.. it simply refuses to work..
could someone explain to me why?
(I use fontedit also, but on someway it always says bad TGA & I use the Leikkuri.exe tool to cut and slice and save coördinates and allignes) could some one tell me either that this is not correctly done or that I need to do something more to get it to work.

GeckoKid
05-04-08, 00:29
that's odd, so you mean it's solely happening with fontedit? remember that the file you use for fontedit and leikkuri are seperate and are not related... so if leikkuri went fine, it's just simply fontedit wasn't working properly.

in the case of photoshop, just try saving it in different ways, i can't really say for certain... do you have a screenshot of your saving screen in photoshop?

jeffrey van oort
06-04-08, 11:35
that's odd, so you mean it's solely happening with fontedit? remember that the file you use for fontedit and leikkuri are seperate and are not related... so if leikkuri went fine, it's just simply fontedit wasn't working properly.

in the case of photoshop, just try saving it in different ways, i can't really say for certain... do you have a screenshot of your saving screen in photoshop?

What do you mean with saving screen?
like this?
http://aycu32.webshots.com/image/51831/2004470417217165400_th.jpg (http://allyoucanupload.webshots.com/v/2004470417217165400)

I got it to work in leikkuri but there seems to be a problem with my font pc..
It ask for some dll which I can not find ms..50.dll something like that.

.:Tirivol:.
02-05-08, 11:33
I try...but it doesn't work for me.......every time i patch i can't see any words :(

jeffrey van oort
02-05-08, 21:09
I try...but it doesn't work for me.......every time i patch i can't see any words :(

I had the exact same problem.
Then I came to the conclusion that Leikkuri is not patching the tr4.exe like it should.
My font.pc was fine and had nothing to do with it.
I am using Vista.
Try asking someone else to patch your tr4.exe.

TRJTA
24-10-08, 14:48
Can someone explain why I never see the text in the title screen when i patched with leikkuri....doesn it work with anybody :S?

Titak
24-10-08, 16:35
Custom font is working for me in every level. ;)

As far as I know you also have to reconvert the title.tom into a new title.tr4.

stranger1992
24-10-08, 17:56
It works in TRNG Titak?

TRJTA
25-10-08, 11:21
Custom font is working for me in every level. ;)

As far as I know you also have to reconvert the title.tom into a new title.tr4.

Yes I did that, but no text appears in the menu :( I did exactly what I was supposed to do, please contact or reply me Titak, medehollander :p