2Ｄテロップ作成チュートリアル

日興通信株式会社
1.0 版(2014/10)

Telop Canvas 3 2D テロップ作成チュートリアル

目次

1. テロップを作成しましょう ........................................................................................................ 3
1.1. 図形を描く ........................................................................................................................................................................ 3
1.2. オブジェクトに色をつける......................................................................................................................................... 4
1.2.1. 色の設定 ....................................................................................................................................................................... 4
1.2.2. キーの設定................................................................................................................................................................... 5
1.2.3. エッジ・シャドウの設定 ........................................................................................................................................... 5
1.2.4. グラデーションの設定 ............................................................................................................................................. 6
1.3. 文字の入力 ...................................................................................................................................................................... 9
1.4. 静止画の配置 .............................................................................................................................................................. 11
1.5. ルミナンス処理 ........................................................................................................................................................... 121.6. 静止画の効果 .............................................................................................................................................................. 121.7. オブジェクトの配置 ................................................................................................................................................... 13©2014, Nikko Telecommunications Co.,Ltd.

2014.102

Telop Canvas 3 2D テロップ作成チュートリアル

1. テロップを作成しましょう
まずは、基本的なテロップを作成しましょう。今回は例として下記のテロップを作成していきます。

1.1. 図形を描く
まずは、図形を描きましょう。ツールバーから、図形オブジェクトを選択します。
今回は、【角丸四角形】のオブジェクトのボタンを選択します。

ビュー画面をクリックし、画面上にドラッグすることで、図形を描くことが出来ます。

描いた図形の位置や大きさなどは、【プロパティ】ウィンドウで、詳しく設定することができます。
【角を丸くする】欄で、角をどれだけ丸くするかの半径も設定します。

©2014, Nikko Telecommunications Co.,Ltd.

2014.103

Telop Canvas 3 2D テロップ作成チュートリアル

1.2. オブジェクトに色をつける
描いたオブジェクトに,色をつけます。色は、【スタイル】ウィンドウで直接設定することができます。

1.2.1. 色の設定

【スタイル】内【表面色】の欄にある小さい四角を、ダブルクリックすると、【色選択】ウィンドウが表示されます。
設定させたい色を選択して、OK ボタンを押すと、色が適用されます。
色選択ウィンドウでは、PAGE1 と PAGE2 のタブを切り替えて、自由に色の設定が行えます。

©2014, Nikko Telecommunications Co.,Ltd.

2014.104

Telop Canvas 3 2D テロップ作成チュートリアル

1.2.2. キーの設定
オブジェクトの透明度（以下：キー）を設定します。【スタイル】の中の、ボタンをクリックすると、以下のウィンドウが現れます。

Key のバーをスライドさせるか、数値を打ち込んで透明度を設定します。
数値は、％単位での設定になっています。
左の図のように、70 にすると、70％の濃さとなります。

1.2.3. エッジ・シャドウの設定
オブジェクトに、エッジ・シャドウを追加します。スタイルウィンドウの、【追加】ボタンをクリックして、【エッジ】を選択します。

さらに外側に、エッジを追加します。エッジとシャドウは合計で 12 個までつけることができます。先ほどと同じ手順で、【追加】ボタンからエッジを選択します。

©2014, Nikko Telecommunications Co.,Ltd.

2014.105

Telop Canvas 3 2D テロップ作成チュートリアル

1.2.4. グラデーションの設定作成したエッジにも、色やキーをつけることができます。今回は、単色ではなく、グラデーションを設定します。
【スタイル】ウィンドウの左側の大きい四角をダブルクリックしてください。
【色詳細設定ダイアログ】ウィンドウが表示されます。グラデーションは、このウィンドウ上で設定を行います。

まずは、【指定点設定】の中の四角をダブルクリックします。すると、表面色のときと同じ【色選択】ウィンドウが現れますので、色を設定し、【ＯＫ】を押します。

©2014, Nikko Telecommunications Co.,Ltd.

2014.106Telop Canvas 3 2D テロップ作成チュートリアル

次に、ウィンドウの上にあるバー上で、ダブルクリックすると、指定点が追加されます。

作成した指定点を選択した状態で、また下の四角をダブルクリックし色を設定します。
これで、指定点ごとに別の色が指定され、グラデーションになります。

次に、グラデーションの種類を変更します。色
詳細設定ダイアログの左下にある、【グラデーション】欄を変更すると、グラデーションの色の向きが変更されます。

©2014, Nikko Telecommunications Co.,Ltd.

2014.107Telop Canvas 3 2D テロップ作成チュートリアル

これで、グラデーションの設定は終了です。色詳細設定ダイアログの【OK】ボタンをクリックすると、ビューのオブジェクトに設定されます。

他のエッジも、同じように設定します。これで、オブジェクトの設定は全て終了です。

他の形の図形でも手順は同じですので、今度は【丸】ボタンを選択し、さらに円のオブジェクトを追加します。
[shift]キーや[ctrl]キーを押しながらドラッグすると、縦横の数値が同じ正円をを描くことができます。
先ほどと同じように、色やキー、エッジ・シャドウなどを設定して、オブジェクトの設定が終了します。

©2014, Nikko Telecommunications Co.,Ltd.

2014.108

Telop Canvas 3 2D テロップ作成チュートリアル

1.3. 文字の入力
次は、文字を入力します。図形と同じようにツールバーの中から、【文字】ボタンをクリックします。
ビュー内の文字を打ち込みたい場所にクリックし、文字を入力して、Ｅｎｔｅｒキーで確定します。

文字を打ち込んだ後の細かい設定は、【プロパティ】ウィンドウで行えます。
まずは、フォントの種類を設定します。
【フォント名】の横にある【参照】ボタンをクリックすると、【フォント】ウィンドウが表示されます。使用したいフォントを選択して【ＯＫ】ボタンを押すと、選択したフォントが適用されます。

文字のサイズや、横幅縦幅、文字間などもプロパティウィンドウで数値を打ち込むことで設定できます。

©2014, Nikko Telecommunications Co.,Ltd.

2014.109

Telop Canvas 3 2D テロップ作成チュートリアル

次に、文字に色やキーを設定します。図形と同じ手順で、【スタイル】ウィンドウから設定できます。
エッジや、シャドウなどの設定も同じく行うことができます。

これで、文字の設定は一通り終了します。同じ手順で、他の文字も打ち込みます。

©2014, Nikko Telecommunications Co.,Ltd.

2014.1010

Telop Canvas 3 2D テロップ作成チュートリアル

1.4. 静止画の配置
写真や絵などの静止画を配置します。ツールバーの中から【ピクチャー】ボタンをクリックします。
下図のような静止画選択ウィンドウが現れます。読み込みたい画像ファイルを選んで【ＯＫ】を押します。

ビュー上に静止画が配置されます。

静止画の大きさや位置などは【プロパティ】ウィンドウの静止画 1のタブで変更できます。

©2014, Nikko Telecommunications Co.,Ltd.

2014.1011

Telop Canvas 3 2D テロップ作成チュートリアル

1.5. ルミナンス処理
配置した静止画に対してルミナンス処理（明度によってキーを抜く処理）が行えます。
プロパティウィンドウの【ルミナンスカット】でカットレベルを設定できます。数値が大きいほど抜け具合が大きくなります。
今回は黒（Ｒ：0Ｇ：0Ｂ：0）の部分の色を抜きますので、数値 1 で下図のように、黒い部分の色が透明になります。

次に、【ルミナンスソフト】でカットした縁を滑らかにします。
数値が大きいほど、縁にアンチエイリアスが強くかかり、ピクセルのギザギザが目立たなくなります。

1.6. 静止画の効果
静止画にも、オブジェクトや文字と同じように色やエッジ・シャドウなどの効果をつけることができます。
色を設定するには、プロパティウィンドウの【静止画 2】タブを開きます。
【色変換】の欄にチェックを入れると、静止画にも色の設定が行えるようになります。【拡張色変換】にもあわせてチェックを入れておくと、単色だけでなくグラデーションにも対応します。

チェックを入れるとオブジェクトと同じようにスタイルウィンドウなどを使用して色やエッジ・シャドウの設定を行えます。

以上で、静止画の設定が終了です。

©2014, Nikko Telecommunications Co.,Ltd.

2014.1012

Telop Canvas 3 2D テロップ作成チュートリアル

1.7. オブジェクトの配置
作成した図形や文字を、簡単に整列することができます。
ますは、ビュー内のオブジェクトの位置を設定します。
移動させるオブジェクトを選択します。今回は、二つのオブジェクトを一度に設定しますので、両方とも選択状態にします。[shift]キーまたは[ctrl]キーを押しながらオブジェクトをクリックすると、複数のオブジェクトが選択できます。

次に、【全面配置】ツールバーの中から、【全面の中下寄せ】ボタンをクリックします。
選択していたオブジェクトが、セーフティエリア内の中下に寄せられます。

次に、オブジェクト同士の配置を設定します。今度は、【オブジェクト配置】ツールバーの中から、【センター（上下）合わせ】ボタンをクリックします。すると、オブジェクトのが上下の座標が、合わさり、オブジェクト同士が正確に配置されます。

他のオブジェクトも定位置に移動させ、オブジェクトの配置が終了します。

©2014, Nikko Telecommunications Co.,Ltd.

2014.1013

Telop Canvas 3 2D テロップ作成チュートリアル

以上で、基本的なテロップを作成する手順は終了です。

©2014, Nikko Telecommunications Co.,Ltd.

2014.1014