ADHelperで立体押し出し線を引く

みなさん、こんにちは。Mochitchies（もちっちーず）です。今回は自作アプリの紹介です。文字や図形を立体化するための押し出し線を引くアプリです（App Storeに申請中）。

前回小ネタ１４で、Affinity Designer 2で立体文字を作る方法を解説しました。前面と背面をつなぐ線（＝立体押し出し線）を引くのが大変でしたよね。ですので、立体押し出し線を自動で引くアプリ（無料アプリ）を自作しました。ADHelperという名称です。今回はADHelperとAffinity Designer 2を使って立体文字を作る方法を解説します。

ADHelperだけで立体文字作成を完結させることはできませんので、その点はあらかじめご承知おきください。以下のようなTESTという立体文字の作成手順を解説します。慣れたら、作業時間は5分程度でしょう。

今回使用するツール

今回使用するツールは以下のものです。

「シェイプビルダー」の基礎は小ネタ１２と小ネタ１３で学んでください。「ベクター塗りつぶし」は小ネタ１４で学んでください。

大まかな手順

大まかな手順は以下の通りです。

以下、立体文字の作り方の手順を具体例で説明します。

下絵作成の手順

①Affinity Designer 2で300ピクセルｘ300ピクセルのドキュメントを作成します（ドキュメントサイズに深い意味はない）。テキストツールを使って文字を作成します。それから、ブール演算の除算を使って１文字ずつのカーブへと分解します（ブール演算は小ネタ１２の２章を参照）。それから、もしグループ化されていたら解除をしてください。そして、もしいらないカーブが出現したならば、削除してください。

②それからカーブを全部選択して、ブール演算の追加を使って1つに融合します。カーブは必ずドキュメントの中央に置くようにしてください。

③最終的にはこうなります。

④ファイル　＞　書き出し　をクリックして書き出しウィンドウを出します。スクショのように設定してください。特に以下の設定リストの設定は必須です。書き出しを押して、SVGとして書き出してください。（毎回設定するのが大変な場合は、プリセットの右の３本線を押して、プリセット登録してください。ここではその登録方法は説明しません。）

ADHelperの使用手順

時間がない方で動作検証したい方は以下のSVGをダウンロードしてお使いください。

①ADHelperを起動します。最初の画面で「立体押し出し線ツール」ボタンを押して「立体押し出し線ツール」画面を表示します。

②「SVGを取り込む」ボタンを押してSVGを取り込んでください。取り込まれているものがない場合は、「押し出し線を引いて保存」ボタンと「テスト」ボタンが無効となって押せませんのでご注意ください。SVGが取り込まれると左側にプレビューされます。（ファイルの置き場ですが、ダウンロードフォルダであればアプリから確実にアクセスできます。）

③デフォルトの設定のまま「テスト」ボタンを押してみましょう。すると、以下のように、押し出し線が引かれたものが右側にプレビューされます。

④設定値を変えて何度かテストして設定値を決めます。「押し出し線を引いて保存」ボタンを押します。出てきたウィンドウに名称を入力し、保存ボタンを押します。

立体図形の最終仕上げ

①ADHelperで作ったSVGをAffinity Designer 2で開きます。まず、最初にすることは、赤い図形と青い図形を分解して、同じ立体図形に所属する仲間ごとにグループ化することです。

②グループ化後はこんな感じになります。

③１文字ずつ加工していくことになります。加工しない他の３グループは白丸（灰色？）を押して非表示にしましょう。

④一番左のTのグループを編集します。グループを選んで、シェイプビルダーツールのボタンを押しましょう。そして、ドラッグメソッドを線にして、アクションを+にして、クリーンアップを接続されたカーブにして、領域をいい感じで結合していきましょう。結合が完了したら、余ったいらない線やグループフォルダーができていると思うので、全部削除してください。そして、カーブに境界線をつけ、塗りつぶしをいい感じにしてください。カーブがばらけていると思うので、最後に再びグループ化してください。

⑤さっきの作業を他の３つの文字に対しても行います。そして、全体のバランスを見て塗りつぶしの色や線の色や太さを決めます。すると、以下のように完成です。

おわりに

今回は自作アプリADHelperを使った立体押し出し線の引き方を含めた立体文字の作成方法を解説しました。アプリには今後もAffinity Designer 2の作画を補助するツールを追加していきたいと思います。