テキストのアウトライン化〜Vectornator。

〽️ アウトライン化とは? 〽️ ソノ・テジュン(その手順)。 〽️ テキストオブジェクト。 〽️ 図形オブジェクト。 〽️ SVGで出力してみる。 〽️ ロゴ作りならアウトライン化必須。







⬆︎Vectornator使い方についてのまとめページはこちら。

アウトライン化とは?


こんにちは、「ふ」です。今回はテキストのアウトライン化について考えていきたいと思います。

Vectornatorのみならず、イラレやINKSCAPEなどのベクターグラフィックアプリにも共通する事柄なので、参考になれば、と思います。

アウトライン化とは?




ベクターグラフィックにおける「アウトライン化」という言葉は、図形オブジェクトに対して使われる場合と、テキストオブジェクトに対して使われる場合があります。

テキストのアウトライン化

テキストのアウトライン化とは、テキストオブジェクトを図形オブジェクトに変換することを指します。

実際にVectornator上でやってみましょう。





 

ソノ・テジュン(その手順)。


画像は、Vectornatorのテキストツールで文字を入力したものです。
現時点ではこれは「テキストオブジェクト」です。

インスペクターパネルの「レイヤー」で確認してみましょう。「曲線」と表現されています。
ちょっとその呼び名に疑問を感じつつも、単一のオブジェクトとして認識されていますね。

「パス」のパネルに切り替えて、「テキストのアウトラインを作成」をクリック。

バウンディングボックスが文字ごとに分けられました。レイヤーパネルを見てみましょう。

1文字ごとに個別のオブジェクトとして認識されています。

一度選択を解除して、ノードツールでクリックしてみます。
すると、アンカーポイントが表示されました。

テキストの輪郭をもとに、パスで構成された「図形オブジェクト」が生成されていますね。



これがテキストのアウトライン化です・・・・・・・・



だから何?

果たして、この「アウトライン化」がどういう意味を持つのか。文字データと図形オブジェクトの双方について、双方の性質を知った上で、検証していきましょう。





 

テキストオブジェクト。


◼︎ 文章の編集はお手の物。

◼︎ テキストに関するスタイルの変更が可能。

◼︎ 塗りなどの情報は一括ならOK。

◼︎ ノードツールで部分選択はできない。

まづはテキストオブジェクトから調べていきます。
Vectornatorでテキストをタイプし、アウトライン化していない状態でエディットしてみます。

◼︎ 文章の編集はお手の物。

当然ですがテキストオブジェクトなので、文章の編集は自由に行うことができます。

◼︎ テキストに関するスタイルの編集が可能。

インスペクターバーの「スタイル」を開きます。
テキストオブジェクトだけに用意されたプロパティを使って、フォントの種類やカーニングなど、様々な編集が可能です。

テキストとしてのプロパティ指定に関しては、選択した部分だけ変更することができました。

◼︎ 塗りなどの情報は一括ならOK。

テキストオブジェクトの状態では「単一のオブジェクト」として認識されているため、文字ごとの色や影の指定はできません。
部分選択して「塗り」を変えようとしても、一括で変わってしまいます。

◼︎ ノードツールで部分選択はできない。

テキストオブジェクトは「パスで構成された図形」ではないので、ノードツールで部分的に変形させることはできません。





 

図形オブジェクト。


◼︎ 文章の編集や、テキストオブジェクトの持つプロパティは使えない。

◼︎ 文字ごとにエディットが可能。

◼︎ ノードツールで自由に変形可能。

次、図形オブジェクト。
先ほどのテキストオブジェクトをアウトライン化させて、エディットしてみます。

◼︎ 文章の編集や、テキストオブジェクトの持つプロパティは使えない

アウトライン化して図形オブジェクトになったため、文字情報は失われます。そのためテキストオブジェクトで指定できたプロパティはスタイルタブには出現しなく成増。もちろん文章の編集もできません。

リアルタイムに編集中なのであればRedo機能を使って、テキストオブジェクトに戻すことができるのですが、一旦ファイルとして保存したイラストの場合はテキストに戻すことはできません。
アウトライン化させる際はそのタイミングを慎重に選んだほうがよさそうですね。

◼︎ 文字ごとにエディットが可能。

アウトライン化したあとは一文字一文字が独立した図形オブジェクトになっているので、文字ごとに塗りや位置のエディットが可能です。

ところで。「o」の文字を選択して移動させると、穴の部分が置いてきぼりになってしまいました。

穴あき文字や離れた文字は複合パスになっているのですね。
設定の際は文字の部品をすべて選択してあげましょう。

◼︎ ノードツールで自由に変形可能。

そしてアウトライン化後はノードツールで細かなアンカーポイントやパスの変形が可能です。

複合パスになっている場合はノードツールが使えないみたいです。
その場合は、「パス」のタブから「分解」をタップしてノードツールで選択できるようにしてやりましょう。





 

SVGで出力してみる。


文字データとアウトライン化された図形オブジェクト。外部のアプリやデバイスで使用するために、ファイルとして書き出した場合それぞれどのような状態になるのか。

例としてVectornatorで編集したものを、SVGデータ(ベクター画像)として「書き出す」場合で調べてみましょう。

これはテキストオブジェクトで、部分的にサイズ変更やカーニングを施したもの。
ワークスペース左上にある「✖️」をタップして、メイン操作バー(命名:ふ)を開きます。

共有ボタンをタップします。

書き出し形式の一覧が表示されるので、「SVG」を選択。

嬉しいことに、VectornatorでSVG保存する場合にはプレビューが表示されるのです。

プレビュータブの中に、「Create Outlines from Text」というスイッチがありますね。「テキストからアウトラインを生成します」という意味ですね。現在「ON」になっています。

これをあえて「OFF」にして、テキストオブジェクトのままでSVG出力するとどうなるのか。

おやや?

個別で指定したフォントサイズやカーニングがキャンセルされてしまいました。
テキストオブジェクトとしてのプロパティを使ったレイアウトは無効になってしまうのですね。

現状のレイアウトなどの「見た目」を保持したまま書き出したい時には、アウトライン化させなければならないようです。





 

ロゴ作りならアウトライン化必須。

長くなってしまいましたが、「テキストのアウトライン化」について紹介してきました。テキストオブジェクトと図形オブジェクトの長所短所がおわかりいただけたでしょうか。

テキストのアウトライン化、その目的。

◼︎ 編集したテキストオブジェクトの「見た目の状態」を保持しつつファイルとして書き出す。

◼︎ テキストオブジェクトを「図形化」することで、さらに自由度の高い編集をほどこす。

この2つが挙げられます。

Vectornatorで作成したテキストロゴを別のアプリやブラウザ上で利用する場合には、アウトライン化は必須ですね。
ただし先ほども述べましたが、テキストオブジェクトの段階でしかできないエディットを終わらせてから、アウトライン化させる。タイミングにはご注意ください。











関連記事











「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧