3つのプリセットではなく、どんな曲線でも
Type on a Pathはレールのテキストツールのスロットにあります。スロットには小さな三角形が付いており、クリックするとフライアウトにメンバー一覧が表示され、その中にType on a Pathがあります。選んでからドキュメント内の任意のパスをクリックすると、テキストがそのパスに沿って流れます。
曲線そのものは何でも構いません。楕円を C で描けば、ロゴバッジやケーキトッパー用の円になります。編集バーで開始角と終了角を設定してArcタイプを選べば、看板用の開いたアーチに。鉛筆でゆるいフリーハンドの線を描けば、ステッカーの文字がその曲がりに一つひとつ沿います。結果はテキストの画像ではなく本物のSVGテキスト要素のままなので、曲線に載せた後でも打ち直せますし、テキスト全体を反転したりスライドしたりして、しっくりくる位置に調整できます。
フォントも固定のドロップダウンではありません。ファミリー一覧は任意のGoogleフォントをオンデマンドで読み込み、隣のボタンから自前のフォントをアップロードできます。.ttf、.otf、.woff、.woff2、.ttcファイルに対応し、複数同時に読み込めます。アップロードしたフォントはデバイスに保存されるため、リロードしても残ります。フォントサイズはポイント単位で、プリセットは4から144まで用意されています。
オンラインでテキストをパスに沿わせる手順
- エディタを開く。 rayzia.com/vector/ にアクセス。Windows、Mac、Linux、ChromeOS、タブレットのブラウザで動き、インストール不要、アカウントなしで始められます。
- 曲線を描く。 楕円ツールは C を押してドラッグします。編集バーでRxとRyを同じ値にすれば正円に、Arcタイプで開始角と終了角を設定すれば開いたアーチになります。波打つベースラインにしたい場合は、代わりに鉛筆でフリーハンドの線を描いてください。
- テキストを沿わせる。 レールのテキストスロットのフライアウトを開いてType on a Pathを選び、曲線をクリックします。テキストがパスに沿って流れます。
- 入力してスタイルを整える。 ファミリー一覧から任意のGoogleフォントを選ぶか、自前のフォント(.ttf、.otf、.woff、.woff2、.ttc)をアップロードします。サイズをポイントで設定し、色を決めます。あとはテキストをパスに沿って反転・スライドさせ、好みの位置に置きます。
- SVGまたはPNGを書き出す。 ファイル ▸ 書き出しでSVG、PNG、JPGを無料でダウンロードでき、PNGは透過を保持します。フォントのないマシンで表示する必要がある場合は、先にテキスト ▸ アウトラインを作成(Shift+Ctrl+O)を実行してください。
曲線テキストをSVGやPNGで書き出す方法と、アウトライン化のタイミング
ファイル ▸ 書き出しで、曲線テキストのSVG、あるいはPNGやJPGのラスターを無料で得られます。PNGは透過を保持するので、別の背景の上に載せるステッカーやトッパーに最適です。JPGはJPEGにアルファがないため、背後に白い背景が塗られます。書き出したSVGはテキストをテキストのまま保持するので、後でファイルを開き直して打ち直せます。1つ注意点として、素のSVG書き出しにはフォント自体は含まれないため、そのファミリーがないマシンでは別のフォントに置き換わります。
フォントがインストールされていない環境で表示する必要がある場合は、先に文字を変換します。 テキスト ▸ アウトラインを作成を選ぶか、 Shift+Ctrl+Oを押すと、各文字がフォント自体に依存せず字形を保つ固定のパスジオメトリに書き換えられます。気が変わっても取り消し1回で戻せます。変換後はノードの調整はできますが、文字の打ち直しはできません。
より大きなラスターが必要なら、ファイル ▸ スクリーン用に書き出しを使います。選んだターゲットに対して倍率と形式を掛け合わせて出力します。無料プランではPNG、JPG、SVG、WebPを0.5xと1xで、Proでは2x、3x、4xの倍率とPDFが使えます。レンダリングはブラウザ内で行われ、変換のためにサーバーへ送信されるものはありません。
曲線テキストに関するよくある質問
曲線テキストジェネレーターは無料ですか?
はい。無料プランにはすべてのツール、AIアシスタント、3つのクラウドファイル、標準解像度でのSVGとPNGの書き出しが含まれます。Proは月額$8で、PDF書き出し、1xを超える書き出し倍率、無制限のクラウドファイル、透かしなしの共有リンクが加わります。
テキストを完全な円に沿わせられますか?
はい。Type on a Pathはドキュメント内の任意のパスにテキストを沿わせられ、楕円もその対象です。Cで楕円を描き、編集バーでRxとRyを同じ値にしてから、ツールでクリックしてください。結果は反転やスライドで円の周りの好きな位置に配置できます。
曲線上ではどのフォントが使えますか?
ファミリー一覧は任意のGoogleフォントをオンデマンドで読み込み、アップロードボタンは.ttf、.otf、.woff、.woff2、.ttcファイルを複数同時に受け付けます。アップロードしたフォントはデバイスに保存され、リロードしても残ります。素のSVG書き出しにはフォントが含まれないため、フォントのない環境で表示する必要があるならテキストをアウトライン化してください。
曲線テキストをSVGやPNGで書き出せますか? 編集可能なままですか?
はい。ファイル ▸ 書き出しでSVG、PNG、JPGを無料でダウンロードできます。SVG内のテキストは開き直して打ち直せる本物のSVGテキスト要素のままで、PNGは透過を保持します。先にテキスト ▸ アウトラインを作成を実行すると、文字はフォントなしで表示できる固定のパスジオメトリになり、ノードの調整はできますが打ち直しはできなくなります。