Producing a colourized glyph using FontCreator 7.5.0

Before asking a question on FontCreator look here for possible solutions and tutorials. Please do not post support requests here.
Post Reply
William
Top Typographer
Top Typographer
Posts: 2038
Joined: Tue Sep 14, 2004 6:41 pm
Location: Worcestershire, England
Contact:

Producing a colourized glyph using FontCreator 7.5.0

Post by William »

The purpose of this tutorial is to show how to produce a colourized glyph using FontCreator 7.5.0 (build 512).

The tutorial is written especially for the purpose.

The tutorial explains how to produce a colourized glyph for a lowercase letter i.

Please know that I am not in any way suggesting that colourizing a lowercase i is a good typical use for colour glyphs. Maybe it is, maybe it is not. That is not the issue in this tutorial.

The reason for colourizing a lowercase i in this tutorial is that I was looking for an example, yet I found that the tasks for which I have thus far used the colourizing technique also use other techniques, such as additional artwork or Private Use Area mappings and I wished to keep the tutorial just about straightforwardly colourizing one glyph.

So, here is a transcript of working through producing a colourized glyph for a lowercase letter i.

The transcript is as I worked through the process.

Please note that I have written what I did. Sometimes the choice made, such as the colour of the metrics lines, was just my choice at the time. I thought that it might be helpful to list everything in case that is helpful to some readers.

William Overington

6 August 2013

----

Start FontCreator 7.5

I am using FontCreator 7.5.0 (build 512) on a computer that is running the Windows xp operating system.

File
New Project...

Use the following name in the dialogue box.

tutorial_example

Choose Regular

Choose Don't include outlines

Click OK

File
Save Project

tutorial_example.fcp

tutorial_example.fcp was offered automatically, so I used that.
Save

Tools
Grid Options...

Show Grid checked
Between grid points in units set to 256
Between grid points in pixels 16
Solid
Color as Light Orange
OK


Tools
Metrics Options...

Show metrics and reference line checked

Line Style Solid
Color Blue
Except for Typo Ascender and Typo Descender, everything is checked.
OK

File
Save Project

In the rightmost drop down selection box of the standard toolbar, choose Glyph Name.

In the Font Overview window, highlight the cell for lowercase i.
Press the Return key
This should open the glyph edit window.

Draw a lowercase letter i.

The design is not critical as long as there are two clockwise contours that do not overlap and are both within the box that is formed by the metrics lines and one contour can be referred to as the vertical and the other contour can be referred to as the dot.

Close the glyph edit window.

File
Save Project

Display the Preview panel either by pressing the F8 key or by the following.

View
Toolbars
Click on the word Preview in the cascading menu that is displayed.

In the preview panel that is displayed, key the lowercase letter i into the text box at the top right.
Set the leftmost box to 144 and note that the Kerning checkbox is checked.

Thus far everything is monochrome.

The task is now to make a colourized glyph of the lowercase i with a green vertical and a red dot.

The choice of colours of green and red is more or less arbitrary, but there are two reasons for naming them.

The first reason is that it is easier to explain the process by using specific colours rather than writing something like "the colour that you have chosen for the vertical".

The second reason is that I have avoided using blue. That is because FontCreator uses blue as a placeholder colour and, although one can colour a contour blue, I feel that it is easier if I avoid using blue in this example so that mention of blue in this example is for when FontCreator is using blue as a placeholder.

In the Font Overview window, highlight the cell for lowercase i. It might still be highlighted from before, yet I think that it worth mentioning the action here.

On the Drawing toolbar, make sure that the Fill Outlines facility is on. It is the logo that has a black filled square and an unfilled square and a diagonal line.

On the main FontCreator menu bar,

Insert
Glyphs...

Insert 2 Glyphs
After each selected glyph
OK

In the Font Overview window, highlight only the cell for lowercase i.

Edit
Copy

Highlight only the cell that is next to the right of lowercase i cell.

Edit
Paste

Highlight only the cell that is next but one to the right of the lowercase i cell.

Edit
Paste

File
Save Project

----

Highlight only the cell that is next to the right of lowercase i cell.
Press the Return key on the keyboard.

In the Glyph Edit window, delete the dot contour.

Somewhere on the orange grid, right click.
Click on Colorize

The vertical contour should become blue.

View
Toolbars
Palette

Click on the green square.
Click on the vertical contour.

The vertical contour should turn green.

Close the palette window.

Close the glyph edit window.

----

Highlight only the cell that is next but one to the right of lowercase i cell.
Press the Return key on the keyboard.

In the Glyph Edit window, delete the vertical contour.

Somewhere on the orange grid, right click.
Click on Colorize

The dot contour should become blue.

View
Toolbars
Palette

Click on the red square.
Click on the dot contour.

The dot contour should turn red.

Close the palette window.

Close the glyph edit window.

----

Highlight only the lowercase i cell.
Press the Return key on the keyboard.

Somewhere on the orange grid, right click.
Click on Colorize

The two contours should both become blue.

Click on the dot.
Press the Delete key on the keyboard.

Somewhere on the orange grid, right click.
Click on Add...

In the dialogue panel, highlight the cell with just the vertical contour in it.
Click OK

Somewhere on the orange grid, right click.
Click on Add...

In the dialogue panel, highlight the cell with just the dot contour in it.
Click OK

Close the glyph edit window.

----


File
Save Project

Click on the background to the right of the cells so as to remove the highlighting from the cell.

View
Toolbars
Preview

The panel should display a large lowercase i with a green vertical and a red dot.
kafany
Posts: 17
Joined: Mon Jun 03, 2013 11:46 am

Re: Producing a colourized glyph using FontCreator 7.5.0

Post by kafany »

thank you!
it will be great if you add some screenshots or make it a video.
William
Top Typographer
Top Typographer
Posts: 2038
Joined: Tue Sep 14, 2004 6:41 pm
Location: Worcestershire, England
Contact:

Re: Producing a colourized glyph using FontCreator 7.5.0

Post by William »

kafany wrote:thank you!
it will be great if you add some screenshots or make it a video.
Thank you.

I am happy to try to add some images made from Print Screen images. However, as the screen display changes so many times during the tutorial, are there any particular images that you would particularly like to be posted?

To readers of this post in general, if you try working through this tutorial and would like to post some images of what you produce, that would be good.

As regards a video, that is something that I cannot do.

Although I do, in fact, have some Serif software for making movies, I have never really used it apart from a very brief try out.

Also, I think that the file size would be greater than can be uploaded as an attachment to this forum.

However, it is possible that someone reading this might like to try to make a video of working through the tutorial and make that video available free on the web, so for the avoidance of doubt, if someone wants to do that, then that is fine by me: please post a link in this thread if such a video is produced.

Just in case readers have not noticed it, there is a thread named "Colour font previews" in the Gallery section of this forum.

viewtopic.php?f=10&t=4519

Thus far, at the time of writing this post, all of the posts in that thread are by me, yet I am hoping that in time more people will post in that thread.

William Overington

7 August 2013
Alfred
Top Typographer
Top Typographer
Posts: 1030
Joined: Thu Apr 18, 2013 8:08 am

Re: Producing a colourized glyph using FontCreator 7.5.0

Post by Alfred »

William wrote:I am happy to try to add some images made from Print Screen images. However, as the screen display changes so many times during the tutorial, are there any particular images that you would particularly like to be posted?
I would have thought that you could simply take a screenshot for each step, or perhaps for selected steps where the description is quite lengthy, such as "Highlight only the cell that is next but one to the right of lowercase i cell."
William wrote:As regards a video, that is something that I cannot do.

Although I do, in fact, have some Serif software for making movies, I have never really used it apart from a very brief try out.
Assuming that you are referring to MoviePlus, it does not include a 'screencasting' (video screen capture) feature. You would need to use a free product such as CamStudio or BB FlashBack Express, or a paid product such as Camtasia or one of the other versions of BB FlashBack.
William wrote:Also, I think that the file size would be greater than can be uploaded as an attachment to this forum.
As an alternative, you could upload it to your own web space or to a file-sharing site.
FC14 Pro (Help) + MT11.0 Pro (Help) • Windows 10
Bhikkhu Pesala
Top Typographer
Top Typographer
Posts: 9869
Joined: Tue Oct 29, 2002 5:28 am
Location: Seven Kings, London UK
Contact:

Re: Producing a colourized glyph using FontCreator 7.5.0

Post by Bhikkhu Pesala »

Or people could just watch The Video Already Made by Erwin.
My FontsReviews: MainTypeFont CreatorHelpFC15 + MT12.0 @ Win 10 64-bit build 19045.2486
Post Reply