Procreateで文字を編集したい。
テキストはどうやって入力すればいいのだろう?
今回は、Procreateでテキストを入力する方法や、イラスト制作でテキストを活用する方法をご紹介します。
この記事の目次
Procreate テキストの基本的な使い方
テキストを入力する
テキストを追加する

テキストは「アクション」メニューから追加できます。
画面左上のスパナボタンをタップして、「テキストを追加」を押します。
文字を入力する

画面の下部にキーボードが表示されるので、文字を入力します。
キーボードを閉じたい場合は、キーボード内の右下のボタンを押します。
テキストボックスを調整する/テキストを移動する

テキストを入力する際、テキストの周りに水色のテキストボックスが表示されます。
テキストボックスの枠内に沿って、入力した文字が改行されます。
正しい位置で改行されない場合は、水色のガイド線上をドラッグして、テキストボックスのサイズを調整しましょう。
また、ガイド線以外の部分をドラッグすると、文字の位置を移動できます。
テキストの色を変える
文字を選択する

テキストボックス内をダブルタップすると、文字が選択されます。
この状態で、画面右上のカラーボタンを押します。
色を変える

カラーサークルから色を選ぶと、テキストの色が変更されます。
文字が選択されていないと、カラーを変更しても画面に反映されません。
選択されている文字は、文字の周りが水色でハイライトされます。
文字が選択されていることを確認してから、色やサイズなどの編集を行いましょう。
テキストのフォントやサイズを変更する
スタイル編集パネルを表示する

フォントの種類やサイズの調整は、スタイル編集パネルから行います。
テキストボックス内をダブルタップして文字を選択し、メニューを表示します。
このメニュー内には、配置や縦書きを設定するボタンがありますが、スタイル編集パネルでも設定が可能です。
メニュー内のフォント欄をタップして、スタイル編集パネルを表示します。
スタイル編集パネルの画面

スタイル編集パネルからは、フォントの種類やスタイル、フォントの属性を設定できます。
文字を編集する

スタイル編集パネルの左上には、4つのボタンがあります。
左から順番に、キーボードの表示、選択中の文字の削除、選択中の文字のコピー、文字のペーストの機能です。
入力した文字を編集したいときに使います。
フォント/スタイルを変更する

「フォント」の項目から、フォントの種類を変更できます。
「スタイル」欄には、各フォントに対応したスタイルが表示されます。
斜体になる「Italic」や、太字で強調される「Bold」など、使い分けてみてください。
フォントスタイルを変更する

「フォントスタイル」からは、文字のサイズや字間を調整できます。
- サイズ:文字の大きさを変更できます。
- カーニング:隣り合う文字の間隔を調整できます。
- トラッキング:全ての文字の間隔を調整できます。
- レディング:行の間隔を調整できます。
- ベースライン:文字を入力する際のカーソル線の位置を調整できます。
- 不透明度:文字の透明度を調整できます。
フォント属性を変更する

「フォント属性」の上段の4つのボタンからは、文字を整列できます。
左から順番に、左揃え、中央揃え、右揃え、両端揃えのボタンです。
中段の3つのボタンからは、テキストに効果をつけられます。
左から順番に、下線、中抜き、縦書きのボタンです。
下段のスイッチは、大文字化の機能です。
スイッチをONにすると、小文字を入力した箇所も大文字で表示されます。
ダウンロードしたフォントを読み込む
カスタムフォントをダウンロードする
Procreateは日本語のフォントが少ない……。
そんなときは、日本語のカスタムフォントをインストールしましょう。
インターネット上には、様々なフォントが公開されています。
今回は、手書き感がある油性マジックのフォント、「たぬき油性マジック」をダウンロードします。
ダウンロードしたファイルを解凍する

Procreateではzip形式のファイルは読み込めないので、解凍しておきましょう。
「ファイル」アプリを開き、ダウンロードしたzipファイルを選択すると、ファイルが解凍されます。
フォントを読み込む

スタイル編集パネルの右上にある、「フォントを読み込む」ボタンを押します。
解凍したttfファイルを選択する

フォントをダウンロードしたフォルダへ遷移して、先ほど解凍したttfファイルを選択します。
カスタムフォントを使う

フォントが読み込まれると、「フォント」欄から「たぬき油性マジック」が選べるようになります。
お好みのフォントを探して、Procreateで使ってみてください。
各フォントにはそれぞれ利用規約があるので、よく読んでから使いましょう。
テキストを変形する

テキストを入力したレイヤーを選択して、画面左上の「変形」ボタンを押します。
テキストの周囲に表示されるガイド線をドラッグすると、テキストの拡大/縮小や回転ができます。
画面下部の欄から、変形の方法を選択できます。
「フリーフォーム」では、縦横の比率を自由に変形できます。
「均一」からは、縦横の比率を保ったまま変形できます。
「フリーフォーム」又は「均一」でテキストを変形した場合、テキストのレイヤーは保たれ、文字の再編集が可能です。
「ディストーション」又は「ワープ」で変形した場合、テキストのレイヤーはラスタライズされ、文字の編集ができなくなります。
Procreate テキストをイラスト制作に活用する
テキストのラスタライズやイラスト制作での活用法など、テキストの応用例を解説しています。
テキストをラスタライズする
テキストは「ベクターレイヤー」に属する

Procreateで新規レイヤーを作成すると、ラスター形式のレイヤーが作成されます。
テキスト入力から作成したレイヤーは、ラスター形式ではなく、ベクター形式に属します。
レイヤー欄のサムネイルに「A」と表示されているレイヤーが、ベクター形式のテキストレイヤーです。
ベクター形式のテキストレイヤーは、以下の特徴があります。
- テキストやスタイルの再編集が可能
- 拡大・縮小を繰り返しても粗くならない
テキストの編集に便利なベクターレイヤーですが、自由変形やフィルターなどが使えない欠点もあります。
テキストを複雑に変形したり、フィルターをかけたりする場合は、レイヤーのラスタライズが必要です。
テキストをラスタライズする

ラスタライズしたいテキストレイヤーをタップして、「ラスタライズ」を選びます。
「ラスターレイヤー」に変換した後

ベクターレイヤーをラスタライズすると、ラスターレイヤーに変換されます。
レイヤーのサムネイルも、「A」の文字からレイヤーに描画されている内容に変わっています。
上記のラスタライズ操作をせずとも、ベクター形式のテキストレイヤーに自由変形やフィルターを実行すると、自動的にラスタライズが行われます。
テキストをラスタライズすると、文字入力やテキストのスタイル編集はできなくなるので、注意してください。
テキストの一部に色をつける(クリッピング)
スタンド看板にテキストを重ねる

フォント:Chalkdusterに設定したテキストを、スタンド看板に重ねています。
スタンド看板には既に影が塗られており、影の領域内のテキストが浮いて見えます。
テキストの色を部分的に調整して、馴染ませる必要があります。
テキストの色を部分的に変更する

テキストを書いたレイヤーの上に影レイヤーを作成します。
影レイヤーをタップして、「マスクをクリップ」を選択します。
「マスクをクリップ」を設定したレイヤーは、下のレイヤーからはみ出た部分が隠れるようになります。
この影レイヤー上に、テキストの影色を塗ります。
看板の下部にテキストを入れる

全体が影色になるテキストは、影レイヤーを作らず、テキストの色自体を変えてもOKです。
テキストの一部に色をつける(クリッピング+合成モード)
レイヤーを結合する

これから看板に影をつける場合、テキストと看板のレイヤーを結合して、上から合成モードで影入れすると早いです。
テキストと看板のレイヤーを右スワイプして、複数選択します。
その後、複数選択したレイヤー上でピンチインの操作をして、レイヤーを結合します。
乗算レイヤーを作成する

新規レイヤーを作成します。
合成モードの欄をタップして、「標準」から「乗算」に変更します。
影を入れる

乗算レイヤーに色を塗ると、テキストも含めた看板全体に影をつけることができます。
テキストにフィルターをかける
「調整」メニューからフィルターをかける

テキストを入力したレイヤーを選択して、画面左上の「調整」ボタンを押します。
フィルターの一覧が表示されるので、お好みのフィルターを選びましょう。
「ゆがみ」をかける

フィルターの「ゆがみ」→「クリスタル」を選択して、テキストをゆがませました。
テキストレイヤーにフィルターを実行すると、自動的にラスタライズされます。
テキストをネオン風に発光させる
レイヤーを複製する

合成モードを設定したレイヤーを複製してガウスぼかしを重ねていくと、発光している表現ができます。
発光の表現の際には、背景の明度を低くしておくと、光が目立ちやすいです。
フォント属性を中抜きに設定したテキストを作成します。
テキストのレイヤー上で左にスワイプして、「複製」を押します。
複製したレイヤーにガウスぼかし(小)をかける

複製したレイヤーを選択して、「調整」→「ぼかし(ガウス)」を選びます。
キャンバス上で右にドラッグして、ぼかしの量を1%に設定します。
テキストのサイズによってぼかし量は変わりますが、まずは、ほんの少しぼやける程度に抑えます。
ぼかしたレイヤーの合成モードを「追加」にする

ぼかしをかけたレイヤーの合成モードを、「標準」から「追加」に変更します。
「追加」は下のレイヤーと混ざると明るくなるので、光を表現するのに適しています。
レイヤーの内容が分かりやすいように、レイヤー名を「ガウス小」に変更します。
「ガウス小」レイヤーを複製して、ガウスぼかし(中)をかける

「ガウス小」レイヤーを複製して、同じ手順でガウスぼかしをかけます。
ぼかしの量は3%にして、中程度ぼかします。
レイヤー名を「ガウス中」に変更します。
「ガウス中」レイヤーを複製して、ガウスぼかし(大)をかける

「ガウス中」レイヤーを複製して、同じ手順でガウスぼかしをかけます。
ぼかしの量は9%にして、大きくぼかします。
レイヤー名を「ガウス大」に変更します。
「ガウス大」レイヤーを複製する

「ガウス大」レイヤーを複製します。
合成モードが「追加」のぼかしレイヤーが重なり、発光しているように見えます。
元のテキストのレイヤーを白くする

ぼかしていない元のテキストレイヤーを選択して、「調整」→「色相、彩度、明るさ」から明るさを上げ、白っぽくします。
元のテキストレイヤーを白色に寄せると、発光している物体の中心に向かうほど色が明るくなる表現になり、リアリティが出ます。
まとめ
Procreateのテキスト機能の解説でした。
テキスト入力は、イラスト制作や漫画のセリフ、ロゴデザインなど、様々な場面で活用できます。
テキストの使い方を覚えて、Procreateでの創作活動に活かしてみてください。