はじめに
皆さんこんにちは！今回もご覧いただきありがとうございます ʕ•́ᴥ•̀ʔっ。今回は、いくつかのフィルターを使ってタイポグラフィにさまざまな効果を与える私の制作プロセスを共有します。それでは、前置きはこれくらいにして…\n\n始めましょう！！
1. フィルターについて知ろう
まずは、フィルターの種類やインターフェース、操作方法についての導入から始めましょう。\n\n> 注意： CLIP STUDIO PAINT バージョン 3.0以降では、「色収差」、「ノイズ」、「ヴィンテージフィルム」、「鉛筆画」のフィルターが使用可能です。バージョン 4.0以降では、「レンズぼかし」と「結晶化」が追加されました。\n\n
✦ どこにある？
スタジオモード： フィルターは、インターフェース上部の「フィルター」メニューにあります。
シンプルモード： 3つの円が重なったアイコンの中にあります。このオプションを展開すると、「フィルター」と「エフェクト」の2つのカテゴリーが表示されます。\n\n> 「フィルター」は色調の補正を行い、「エフェクト」はテクスチャの適用や線抽出に役立ちます。
スタジオモードに戻ると、ドロップダウンメニューには2つのグループが表示されます。\n\n1. 1つ目のグループには、シンプルで直感的なインターフェースでよく使われるフィルターやエフェクトがまとめられています。\n2. 2つ目のセクションには、機能別に分類されたより広範なリストがあります（線修正、ぼかし、変形、効果、シャープ、描画など）。この2つ目のセクションには、セクション1のフィルターに加え、さらに多くの機能が含まれています。
✦ インターフェース
まずは「クイックフィルター（またはインスタントフィルター）」から見ていきましょう。これらのフィルターは、選択中のレイヤーに適用するか、結合したレイヤーに適用する（元のレイヤーを保持したまま、すべてのレイヤーを1つに結合したものに適用する）かを選択できます。
インターフェースは以下の通りです：\n\n左側にはリアルタイムのプレビューが表示され、右側には各フィルターが並んでいます。下部にはズーム調整、進む・戻るボタン、フィルター適用前後の比較ボタンがあります。\n\nクイックフィルターには、ビビッド、暖色、寒色、レモネード、コバルトブルー、アクアマリン、オーロラ、セピア、モノクロなどがあります。
フィルターのサムネイルを選択すると、プレビュー画面がそのフィルターに合わせて変化します。クイックフィルターにはあらかじめ設定が用意されていますが、下部のスライダーで強度を下げることもできます。\n\n> 注意： これらのフィルターは、イラストの色調を整えるのに役立ちます。
一方、「調整」タブには、より正確で手動での色調補正を可能にする一連のオプションがあります。明るさ、コントラスト、色相、彩度、色温度、色調、シャープネスなどが調整可能です。\n\n> これらの調整は、上記のフィルターと組み合わせて、あるいは単独で使用できます。
2つ目のセグメントには、より具体的なフィルターやエフェクトがあります。カテゴリーを選択すると、最終的なフィルターが表示されます。例えば、「変形」カテゴリーには、それに対応するフィルターがあります。クイックエフェクトにもぼかし機能はありますが、このセクションほど多くはありません。
選択された各フィルターやエフェクトには、それぞれ固有の設定ウィンドウがあります。
最後に、クイックエフェクトセクションにある効果は、色補正フィルターを除き、2つ目のセクションにも含まれています。
例えば、セクション2の「色収差」エフェクトには、次のようなウィンドウがあります。
一方、「クイックエフェクト」ではこのように表示されます。\nこれらのエフェクトには、ぼかし、シャープ、イラスト調、ヴィンテージフィルム、色収差、ノイズ、線抽出などがあります。
- シンプルモード -\n\nシンプルモードに戻り、2つのオプション（フィルターまたはエフェクト）のいずれかを選択すると、選択中のレイヤーに適用するか、すべてに適用するか（結合レイヤーを作成）を尋ねるウィンドウが表示されます。
フィルターとエフェクトのサムネイルは、右下のスライドメニューにあります。
スタジオモードと同様に、クイックフィルター版では強度のスライダー、調整項目、比較ボタン (1) があります。\n\nフィルターの 「調整」 に切り替えると、対応するアイコンが表示され、その下に強度バー (2) が現れます。ここで明るさ、コントラスト、彩度、色相、温度などの値を変更できます。
✦ 注意事項
フィルターを使用する前に知っておくべきいくつかの点を見てみましょう：\n\n• フィルターは単一レイヤーまたはフォルダーに適用できます。ただし、フォルダーを選択した場合は、クイックフィルターの「すべてに適用（結合レイヤーを作成）」オプションのみが利用可能です。
「すべてに適用（結合レイヤーを作成）」は、フォルダー内のファイルを結合した新しいレイヤーを作成し、元のフォルダーはそのまま残します。
• フィルターは破壊的です。 大まかに言うと、新しいレイヤーではなくイラストのレイヤーに直接適用されることを意味します。そのため、フィルターなしのオリジナル版を失う可能性があります。これを解決するには、元のレイヤーのコピーを作成しておくことをお勧めします。
• フィルターはレイヤー全体に適用されます。 特定のセクションのみにエフェクトをかけたい場合には不便に感じるかもしれませんが、解決策があります。
• フィルターは選択範囲内に適用できます。 選択ツールのいずれかを使用して範囲を指定すれば、そのエリアのみにフィルターを適用できます。
最後に、テクニカルな情報として、ウィンドウの寸法を変更してスペースを有効活用できることも覚えておきましょう。
2. タイポグラフィ効果を作ってみよう
フィルターとエフェクトの基本がわかったところで、さまざまな場面で具体的に使ってみましょう。このセクションではすべてを紹介しきれませんが、特に面白いと思うものをいくつか取り上げます。\n\n
✦ 反射効果
① このスタイルのタイポグラフィを作成する最初のステップは、「テキスト」ツールを使用して、1文字ずつ別のレイヤーに追加することです。
② 次に、文字を順番に並べます。
注意： 各文字が揃っているか確認するには、「整列・分布」ツールを使用できます。このツールの詳細については、以下の公式チュートリアルをご覧ください：
③ 次に、ツールバーにある「グラデーション」ツールを選択します。
④ 好みのグラデーションを選択または作成し、任意の方向に適用します。グラデーションはキャンバス全体に適用されますが、テキストのみに適用されるようにするには、「レイヤー」ウィンドウにある「下のレイヤーでクリッピング」機能を有効にします。
色を変更するには、プレビューの下にあるノードに注目します。\n\n> これらのノードで以下のことが可能です：\n>\n> 1. 下部にある矢印を使用して、各色の量を調整する。\n>\n> 2. 下のライン（移動矢印がある場所）の任意の場所をクリックして、バー全体に新しいノードを作成する。\n>\n> 3. ノードを削除する。グラデーションのメニュー（「＋」シンボル）を展開し、詳細設定 > ノードを選択 > 削除 を選びます。
グラデーションの色を変更するには：\n\n① まずカラーサークルから色を選びます。\n② 次に、GIFにあるようにノードをクリックします。これを各ノードで行います。\n\n「サブツール」ウィンドウには、デフォルトのグラデーションがいくつかあります。独自のグラデーションを作成するには次のようにします：\n\n① デフォルトのグラデーションを選びます。私の場合は「青空」を選びました。\n② 次に、ウィンドウ下部の「サブツールの複製」アイコンをクリックするか、複製したいグラデーションを長押しして浮き出るメニューから選択します。
⑤ 次に、グラデーションレイヤーを各文字の数だけ複製し、それぞれの文字の上に配置します。
⑥ 次に、「下のレイヤーと結合」機能を使用して、文字レイヤーと対応するグラデーションレイヤーを結合します。
⑦ もう一度「グラデーション」ツールに行き、「マンガ用グラデーション」（ソフトにデフォルトで入っているものです）を選択します。\n⑧ 文字全体を覆わないように、1文字ずつ右から左へグラデーションを適用します。このグラデーションが影になります。グラデーションが文字レイヤーのみに適用されるよう、再度グラデーションレイヤーを「下のレイヤーでクリッピング」します。\n⑨ 最後に、このグラデーションレイヤーを各文字に合わせて複製し、それぞれの文字の上に配置します。
適用後にグラデーションの角度や位置を編集するには、ツールバーの最初のオプションにある「操作」ツールを使用します。ツールを選択してグラデーション領域をクリックすると、コントローラーが表示されます。
さて、次のステップは反射の追加です。方法を見てみましょう：\n\n① すべてのレイヤーを1つのフォルダーに入れます。\n② レイヤーを結合します。フォルダーを右クリック（タブレットやスマホの場合は長押し）し、メニューから「選択中のレイヤーを結合」を選択します。これで完了です。\n\n> 各文字の個別プロセスを失いたくない場合は、結合する前にフォルダーを複製しておくと良いでしょう。\n③ 次に、結合したレイヤーを複製します。\n④ 複製したレイヤーを選択した状態で「変形」ツールを起動し、「ツールプロパティ」ウィンドウの「上下反転」オプションでレイヤーを反転させます。\n⑤ 反転させたテキストをメインテキストの下に移動させます。
(1) 変形ツールは、タブレット版の場合は上部メニューのショートカット、または次のパスにあります：編集 > 変形。キーボードショートカットは「CTRL + T」です。\n>\n> (2) ツールプロパティ > 上下反転。
⑥ 次に、「選択範囲」ツールの長方形選択を使用して、反転したテキストの下半分を選択し、削除します。\n\n> 選択範囲ランチャーの6番目のオプションには、選択範囲内をワンクリックで削除できるボタンがあります。
次はフィルターの使用です。方法を見てみましょう：\n\n① 反転したテキストのレイヤーを選択し、次のパスに進みます：フィルター > クイックエフェクト。\n② エフェクトウィンドウで「移動ぼかし」を選択します。コントローラーを使用して、動きが下を向くように角度を調整します。一方、「ぼかしの距離」はぼかしが強くなりすぎないよう低めに設定します。\n③ 最後に、カットした文字に「マンガ用グラデーション」を適用して完成です。
✦ グリッチ
次にグリッチ効果を見てみましょう：\n\n① まずテキストレイヤーをラスタライズします。レイヤーを右クリックして、ポップアップメニューから「ラスタライズ」を選択します。\n\n> テキストレイヤーのままでは編集や描画ができないため、ラスタライズされたレイヤーで作業します。
② 次に「選択範囲」ツールを使って文字の上に小さな領域を作り、「変形」ツールで選択範囲を文字から少しずらします。
③ 次に、フィルター > クイックエフェクト に進みます。\n④ エフェクトウィンドウで、「放射状色収差」または「横方向色収差」のいずれかを選択します。私の場合は後者を選びました。選択したら、コントローラーで強度と角度を決定します。\n\n> • 放射状モード： 円状に広がるように効果を適用します。プレビュー画面中央に円の中心を示す「X」が表示されます。「X」を動かして効果の起点を指定できます。\n>\n> • 横方向モード： 一定の方向に沿って色収差が動きます。「角度」セクションのスライダーを動かして方向を指定します。
上記が完了した後、色収差の色が少し不透明に見えたので、改善するために最終的なレイヤーを複製し、不透明度を少し下げました。
- 色の変更 -
色収差の色は直接選べませんが、色調補正レイヤーを使って変更できます。\n\n① まず色収差がかかっているレイヤーを選択し、右クリックします。\n② メニューにある「新しく色調補正レイヤーを作成」を選択します。
③ 展開されたオプションからいくつか選べますが、今回は「グラデーションマップ」を選びます。\n④ ウィンドウが開くので、好みのグラデーションを選び、OKを押します。\n\n> グラデーションの色がレイヤー全体に適用されないよう、「下のレイヤーでクリッピング」を有効にします。\n⑤ 次に、色収差エフェクトがかかった元のレイヤーを複製し、グラデーションマップの上に配置します。
⑥ 次のステップは、補正レイヤーと文字のレイヤーを結合することです。\n⑦ この新しいレイヤーにフィルターを使って色補正を適用します。フィルター > クイックフィルター に進みます。調整項目で好みの色設定が見つかるまでパラメータを調整するか、設定済みのフィルターを使用します。
- 輝き -
輝きの効果を追加するには：\n\n① まず、スタイルを整えた文字レイヤーのコピーを作成します。\n② 片方のレイヤーに、先ほど説明したように「色収差」を適用します。\n③ 次に、もう一度 フィルター > クイックエフェクト に進みます。そこで「移動ぼかし」を選び、好みに合わせてパラメータを調整します。\n④ 効果を適用していないレイヤーを、適用したレイヤーの上に移動し、「変形」ツールで各文字を小さくして中央に配置します。
色がくすんで見える場合は、フィルター > クイックフィルター を使って解決できます。
✦ パンサー効果
この効果はとてもシンプルです：\n\n① まず、前述のようにテキストに「色収差」を適用します。\n② 次に、テキストの上の新しいレイヤーで、「図形」ツールの「塗りつぶし長方形」を使って、テキスト全体を覆うように平行な線を描きます。
③ 平行な線を描いたレイヤーを選択し、そのレイヤーのサムネイルを選択しながら「CTRL」キーを押します。タブレット版を使用している場合は、サイドバーにこのボタンがあります。これでレイヤー上の各線が選択されます。\n④ 次に、平行線のレイヤーを非表示にし、テキストがあるレイヤーを選択します。
⑤ 最後に、選択範囲ランチャーにある削除ボタン (1) を使用します。その後、これまで選択していたバーの選択を 「選択解除」 (2) します（選択範囲メニューから可能です）。\n⑥ 前のステップで分割された文字レイヤーを複製し、「変形」ツールで適切な位置に移動させます。これで完成です。
✦ ネオン
こちらの効果は次のように行います：\n\n① まずテキストレイヤーをラスタライズし、複製します。\n② 次に元のレイヤーを選択し、フィルター > クイックエフェクト に進みます。\n③ そこで「ガウスぼかし」を選択します。ぼかしの強さは控えめにします。
④ 元のレイヤーを選択したまま右クリックし、新しく色調補正レイヤーを作成 > グラデーションマップ に進みます。好みのグラデーションを選び、納得がいくまで調整します。\n\n> グラデーションマップツールのグラデーションは、ツール内で手動作成したり、メインメニューのグラデーションツールから作成したり、Clip Studio ASSETSからダウンロードしたりすることもできます：
上記の後、レイヤーの順序は「複製したレイヤー、色調補正レイヤー、元のレイヤー」となっているはずです。\n\n⑤ そこで、元のレイヤーにさらに少しガウスぼかしを加えることにしました。
⑥ 次のステップとして、素材 > Monochromatic pattern（単色パターン） > Texture（テクスチャ） にある 「Cotton（コットン）」 テクスチャを使います。キャンバスにドラッグして適用します。\n⑦ テクスチャを追加したら、「レイヤープロパティ」ウィンドウの「効果」セクションで「質感合成」を有効にします。スライダーでテクスチャの強さを調整できます。
⑧ 以上が完了したら、作成したすべてのレイヤーを結合します。\n⑨ 結合したレイヤーにノイズエフェクトを適用します。ノイズは フィルター > クイックエフェクト にあります。「カラーノイズ」と「グレーノイズ」の2種類があり、名前の通り、カラーは色収差のような色のノイズを与え、グレーは灰色がかったノイズを与えます。このスタイルではグレーを使用しました。これで完成です。\n\n> ノイズの強さはあまり高くせず、15から20の間が最適です。
✦ カラー効果
次のスタイルは暗い背景に映えます：\n\n① テキストレイヤーをラスタライズすることから始めます。\n② 文字の下部を選択し、フィルター > クイックエフェクト に進みます。\n③ エフェクトウィンドウで「移動ぼかし」を選択します。角度は下向きにし、強すぎないように設定してOKを押します。\n④ 次に、「ゆがみ」ツールを使って、ぼかした文字の領域を好みに合わせて歪ませます。\n\n> 選択範囲で区切られた領域をぼかすと、エフェクトがかかった部分とかかっていない部分の間に境界線ができやすくなります。この変化を滑らかにするには、ツールバーの「色混ぜ」ツール内にある「ぼかし」ブラシを使用できます。
⑤ 先ほど調整したレイヤーを選択し、「変形」ツールを起動します。起動したら「ツールプロパティ」で「モード」を「自由変形」に変更します。これで、文字を別のパースに合わせることができます。
⑥ 次に、新しい色調補正レイヤーを作成します。レイヤーを右クリックして、新しく色調補正レイヤーを作成 > グラデーションマップ に進みます。ここで好みのカラーマップを選んだり編集したりできます。終わったらOKを押します。
次のステップはテクスチャの追加です。私の場合は、デザインに折り目のテクスチャを加えるために、私物の「折れ曲がった紙」の画像をインポートしました。手順は以下の通りです：\n\n> 1. ファイル > 読み込み > 画像...（またはデバイスから読み込み）に進みます。\n>\n> 2. 画像のノードを使って、希望の角度と位置に合わせます。\n>\n> 3. レイヤーの「合成モード」を「乗算」 (1) に変更します。期待通りの効果が得られない場合は、他の合成モードを試してみてください。テクスチャの馴染みを良くするためのもう一つの要素は、レイヤーの不透明度の調整です。\nまた、補正レイヤーの色がキャンバス全体に適用されないようにしたい場合は、グラデーションマップレイヤーに自動生成されるレイヤーマスク(2)を選択し、不要な部分を消去してください。
⑦ 最後に、フィルター > クイックエフェクト から「グレーノイズ」または「カラーノイズ」を適用します。これで完成です。
✦ ガラス効果
この「すりガラス」のような効果の作り方を見てみましょう：\n\n① タイポグラフィとデザインの全要素を、すべて結合した単一のレイヤーにまとめておきます。
② 次に、デザインレイヤーの上に新しいレイヤーを作成します。\n③ この新しいレイヤーに、白で図形を描きます。図形は何でも構いません。ツールバーの「図形」ツール（四角いアイコン）を使用できます。\n④ 次にデザインレイヤーを複製し、白い図形のレイヤーの上に配置します。
⑤ この複製したレイヤーに、フィルター > 効果 > クイックエフェクト > ガウスぼかし にある「ガウスぼかし」を適用します。ぼかしの強さは45に設定しました。OKを押します。
⑥ 今ぼかしフィルターを適用したレイヤーを、下の画像に示すオプションを使って「下のレイヤーでクリッピング」に設定します。
⑦ このレイヤーで行う最後のステップ（現時点）は、レイヤーをロックすることです。レイヤーウィンドウの設定にある南京錠アイコン「レイヤーをロック」を押します。
ここまでで工程の50%が完了しました。「操作」ツールを使って白い図形のレイヤーを選択した状態で、図形を長押ししてキャンバス上を動かすことができます。 動かしてみると、図形をどこに移動させてもその範囲内はぼかし効果が維持され、それ以外の部分は鮮明なまま保たれることがわかります。
では、ガラス効果に奥行きを与える方法を見てみましょう：\n\n① 白い図形のレイヤーを複製し、ロックしたレイヤーを一時的に非表示にします。\n② 白い図形のレイヤーの上に新しいレイヤーを作成し、これを「下のレイヤーでクリッピング」します。レイヤーの順序は、ロックされたデザインレイヤー、空のレイヤー、複製された図形レイヤー、元の図形レイヤー、元のデザインレイヤー、となります。\n③ 空のレイヤーに白黒のグラデーションを適用します。グラデーションはどの方向でも構いませんが、図形の表面にきれいに乗ることが重要です。
④ 上記が終わったら、グラデーションレイヤーと白い図形のレイヤーを結合します。これは「レイヤー」ウィンドウのオプションにある「下のレイヤーと結合」で行えます。\n⑤ 結合してできたこの新しいレイヤーに、フィルター > 効果 > クイックエフェクト > ガウスぼかし から、15～20%の強度で「ガウスぼかし」を適用します。OKを押します。
まとめると、最終的なレイヤー構成は、(1)ロックされたレイヤー、(2)グラデーションのかかった図形レイヤー、(3)白い図形レイヤー、(4)元のデザインレイヤーとなります。これらが効果を作るのに必要な全レイヤーです。ここでロックされたレイヤー(1)を表示させると、次のような結果になります：
これは任意ですが、以前にぼかしを適用した図形のレイヤーに、さらに追加で「ガウスぼかし」をかけることもできます。
最後のステップとして、ガラスに質感を与えるためのフィルターをいくつか適用します。\n\n① まず、ロックされたレイヤーに移動し、ロックを解除します。\n② 次に解除したレイヤーに「結晶化」フィルターを適用します。これは フィルター > 効果 > 結晶化 にあります。コントローラーで並びや密度を調整できます。\n③ 2つ目のフィルターとしてノイズを追加します。フィルター > 効果 > クイックエフェクト に進みます。私の場合は「グレーノイズ」を使用しました。\n④ 最後にレイヤーを再びロックします。
これでエフェクトは完成です。キャンバス上で図形を動かしたい場合は、両方の図形レイヤーを選択した状態で「操作」ツールを使用してください。
- 効果を反転させる -\n\n画像全体がぼけていて図形の部分だけがはっきりと見えるように効果を反転させるには、ロックされたレイヤーと元のデザインレイヤーの場所を入れ替えるだけで簡単にできます。
✦ シンプルなエフェクト
最後に、手軽にできる素敵なエフェクトをいくつかご紹介します。
次はとてもシンプルな効果で、テキストツールのプロパティから直接行うこともできますが、紹介しておく価値があります。この効果は「イラスト調（線のみ）」フィルターを使用して、中抜きのテキストを作る方法です。手順を見てみましょう：\n\n① テキストレイヤーをラスタライズされたレイヤーに変換し、複製することから始めます。\n② 次に、フィルター > クイックエフェクト に進みます。\n③ ウィンドウで「イラスト調」のエフェクトを選びます。設定内で線の太さ、単純さ、密度を調整できます。終わったらOKを押します。\n④ 中抜きになった文字は色々な使い方ができますが、今回はベースレイヤーの下に移動させ、横に少しずらしてテキストに立体感を出してみました。
次は、ぼかしとノイズを組み合わせた効果です。\n\n① テキストレイヤーをラスタライズします。\n② フィルター > クイックエフェクト > ガウスぼかし に進みます。この最初のぼかしは軽くかける程度にします。\n③ 次に、選択範囲ツールで好きな場所を選びます。私の場合は下部を選びました。\n④ 再び フィルター > クイックエフェクト > 移動ぼかし に進みます。このぼかしで動きの角度と強度を選びます。\n⑤ 枠で囲った範囲を解除し、背景とタイポグラフィのレイヤーを結合してから、フィルター > クイックエフェクト > グレーノイズ でノイズ効果を適用します。
次はテキストにシンプルなクリスタル効果を与えるフィルターです。手順は以下の通りです：\n\n① レイヤーをラスタライズします。\n② 選択範囲ツールで希望の領域を選択します。\n③ 次に、フィルター > クイックエフェクト から「ガウスぼかし」を追加します。これで完了です。
おわりに
タイポグラフィのデザインはとても楽しく、最近のエフェクトやフィルターのアップデートにより、作成できるデザインの幅と手軽さがさらに増しました。皆さんもぜひ実験して楽しんでいただければと思います。\n\nここまで読んでいただきありがとうございました！「いいね」をいただけると大きな励みになります。それでは、またお会いしましょう！(≧∇≦)/\n\nバイバイ。\n\n私の詳細についてはこちら：
この投稿を「いいね！」したユーザー
コメント