講座/CLIP STUDIO PAINTのベクターで紐の輪郭線を作成

紐の輪郭線に代表されるような、およそ等間隔な2本の線を、以前の記事【情報/CLIP STUDIO PAINTのベクターレイヤーの基本(線修正ツール)】で触れたベクターレイヤーを利用し、比較的簡単に作成と調整が可能な方法について書きます。
 ※ある程度の線の太さが必要です。細い線が必要な場合は大きく描いて縮小を。
ラスターでそれぞれの線を1本ずつ描くよりは、短時間で作成できるかと思います。
d026_0
▲このようなベース線 → 輪郭抽出および線幅修正し輪郭線に。

1

ベクターレイヤーに適当なブラシで、
求める形のベースになる線を大まかに描きます。
その前に別レイヤーにラフを描いて、それを下敷きにしても良いでしょう。
1-1.
適当なブラシといっても、等幅かつ濃淡の激しくない「ペン」や「マーカー」のようなブラシが扱いやすいかと思います。
この工程はラスター形式で描いても良いですが、ベクター形式の方が前述の別記事でも書いた通り曲線の調整等がしやすいです。既にあるラスター画像を利用する場合は、そのまま使っても(わざわざベクターに起こさなくても)構いません。
そして線修正ツールのサブツール(「制御点」、「ベクター線描き直し等」。詳細は前述の別記事を参照)を適宜利用して制御点とベクター線を操作し目的の形にします。
d026_1
▲まずは1本の線で描いて形を調整。

2

CLIP STUDIO PAINTのレイヤー変換と、それに付随するベクターレイヤー変換設定を利用して輪郭線を抽出します。

※レイヤーをコピーして1本線の状態も残しておいたほうが後々便利です(この記事では詳細は書きませんが、これを着色の際のクリッピングマスクのベースに利用しても良いでしょう。参考【講座/イラスト01_キャラクター2/2 着色編】
 後述のレイヤー変換の設定で、コピーを残した上での機能を適用もできます。

2-1.
その機能を利用するため、まず[1]で作成したベクターレイヤーをラスタライズしてラスターレイヤーにします。
右クリックから「ラスタライズ」かメニューの「レイヤー」>「ラスタライズ」
(ベクターレイヤーのままでも後述のレイヤー変換は可能ですが、それでは輪郭抽出にはならないようなのでラスター化を)
d026_2

2-2.
右クリックから「レイヤー変換」かメニューの「レイヤー」>「レイヤー変換」を選び、
d026_3
そのポップアップウィンドウの設定を、
・種類    ベクターレイヤー
・名前    (適当に任意で)
・表現色   カラー ←ちなみにここの設定で、モノクロや白黒(2値化)レイヤーに変換可能です。
・合成手法  通常

 ※レイヤーのコピーはここの「元のレイヤーを残す」にチェックを入れることによっても可能です。
d026_4
とし、さらに「ベクター設定」ボタンからベクターレイヤー変換設定をポップアップさせ、
・最大線幅  2px(最小値)
・補正    1
・濃度の閾値 127

 ※他はデフォルトで良いかと(必要に応じて適時設定)
d026_5
でOK、レイヤー変換のポップアップに戻りそこもOKとすると、下図のようにベクターで輪郭抽出されます。
d026_6
▲輪郭が(上記設定により比較的ベース線に忠実に)ベクターに変換されました。

d026_7
▲線の太さにばらつきがありますが、次で修正します。

3

このままでは線の太さにばらつきがあるので、
ベクターレイヤーの強みを活かし、それを修正します。
3-1.
線修正のサブツール、線幅修正cs_icon00(p)dの「一定の太さにする」にし、ブラシで修正範囲を指定、線幅を均等にします。
その上でさらに各種サブツールで適宜修正を必要に応じて行います。
d026_8
▲修正範囲をブラシ状に塗ることによって指定。
 ↓
 均等の線幅に修正。

応用として、結び目を見越したベース線を描き一連の変換後に内部を加筆したり、網目を作画したりできます。
d026_9
▲応用例:網目の作画にも。

この他にも、例えば断面が平べったい紐ならベース線作画時に「ペン」のカリグラフィを使ってみたり、
紐が曲がるときの厚みの変形を表現するため、一連の変換後に各種ツールで微調整したり等もできますし、
線状の対象でなくても抽出可能ですので、他の用途でも何かと使い出はありますね。
d026_a
▲例:カリグラフィで描いて変換。

今回の輪郭抽出は、ラスター形式であっても選択範囲の機能を駆使すればそれなりに可能ですが、やはり後から線幅等の修正がしやすいベクターで作業した方が便利かと思います。

asobi_pic

講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成3/3

前回【講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成2/3】の続きで最終回です。
カスタムシェイプを作成し登録、それを利用して模様を敷き詰め数字や文字にくっつかないようにフチドリ分を削ります。
そして最終的に文字フォントをシェイプに変換し、魔法陣全体のシェイプを一体化します。

8

数字や文字の背景部分の太めのリング(模様リングと呼称します)に、
任意の模様のカスタムシェイプを自作して入れます。
8-1.
まずカスタムシェイプの作成と登録の方法を。
カスタムシェイプ元絵用にカンバスを新規作成(大き目にしたほうが後述の形の崩れは少なくなります)することにし、
そこに元となる模様をブラシツールps_icon04(B)と消しゴムツールps_icon05(E)で適宜コピーや回転も使いながら描いていきます。
ノイズ等のフィルター機能群をいくつか駆使すれば、1ストロークも描かずともそれっぽく作れますが、この一連の講座でのPhotoshopの機能説明が多くなってしまうので、それは別な機会に触れられればと思います。

※ブラシツールps_icon04(B)(やフィルター)等ラスター系ツールを使うと、後述の選択範囲>作業用パスを作成で形が少なからず崩れます。
 一方、ペンツールps_icon06(P)をはじめとしたベクター系ツールで1アンカーポイントごと編集し像を作れば意図した形を崩さず出来ますが工数を要しますので、この絵ではそこまでの精度は必要なしと判断し見送っています。
 そのため講座のタイトルも「(ほぼ)ベクター」としています。
 1/3の冒頭にも書きましたが、Adobe Illustratorならもっと手数が少なく且つ美しく出来るかと思いますが、Photoshopでのベクター機能ではこの絵に関してはこの辺が落とし所としています(それでもかなり便利になりましたが)
d018_0
▲模様を書きました。この画像の白い部分は実際は透明です。

次に、Ctrl+レイヤーのサムネール部分をクリックし選択範囲を抽出、
さらにパスパネルに移動し下方にある「選択範囲から作業用パスを作成」ボタンをクリックで作業用パスを作ります。
この時Alt+クリックで許容値の調整も出来ますので、なるべく形の崩れない数値を探すのが良いでしょう。
d018_1
▲サムネールをクリックして選択範囲を抽出。

d018_2
▲ボタンをクリックで作業用パスを作成。

最後にパスコンポーネント選択ツールd016_icon2(A)に切り替え、右クリックでメニューを開き「カスタムシェイプを定義」で任意の名前をつけて保存します(編集>カスタムシェイプを定義でもOK)
そうするとシェイプツール群の中にあるカスタムシェイプツールps_icon07(U)のオプションバー内のカスタムシェイプピッカーに追加されます。
d018_3
▲ここに追加。

8-2.
カスタムシェイプツールps_icon07(U)で[8-1]で作成したカスタムシェイプを選び、模様リング部分(↓下図の緑のベタのあたり)に見栄えが良いように散りばめていきます。
後からリング状に削るので、はみ出ても構いません。
d018_4
▲見栄え良く適当に配置(分かりやすいように模様リングは緑にしています)

9

この模様の不要な部分を切り抜いていきます。
その際には模様リング、数字、文字にくっつかないように隙間を設けて切り抜きます。
9-1.
まず模様リングから。
模様のリング状以外の部分を消すために、円形のシェイプを2つ(模様リングの外側と内側の円)を用意します。
[4-1.]の図で示したレイヤー「シェイプa1」のリングの内側と「シェイプa2」の外側のシェイプを利用します。
d016_8
▲[4-1.]の図。

d018_5
▲分かりやすいように赤と青のカラーを設定しています。

まずそれぞれのレイヤーをコピーし、不要なシェイプ(a1の外側とa2の内側の円シェイプ)をパスコンポーネント選択ツールd016_icon2(A)で選択→Deleteキーで削除(削除した時点でリングではなくなりそれぞれ↓下図のようにベタが広がります)し、
このままの大きさで切り抜いてはリングと模様が接してしまうので、隙間ができるように残った円シェイプa1は縮小、a2は拡大し(ここでは直径6px程度)します。
d018_6
▲不要なシェイプを削除し、それぞれ縮小拡大。

パスコンポーネント選択ツールd016_icon2(A)のまま、まず模様リングの外側の円シェイプになる部分(a1)を選択し、オプションバーの「パスの操作」の「前面のシェイプで削除」から「シェイプ範囲を交差」に変更した後Ctrl+Cでコピー、
模様のカスタムシェイプを散りばめたレイヤーにペーストします。
d018_7
▲「パスの操作」を変更すると、ベタの範囲がこのように変わります。

d018_8
▲「パスの操作」>「シェイプ範囲を交差」後コピペするとこのように円の外側が消えます。

次は内側の円シェイプ(a2)を「シェイプの結合」から「前面のシェイプで削除」に変更した後、コピーペーストします。
d018_9
▲a2の「パスの操作」を変更すると、今度はベタの範囲がこのように変わります。

d018_a
▲「パスの操作」>「前面のシェイプで削除」後コピペすると今度はこのように円の内側が消え、必要な部分の模様のみベタが乗っている形になりました。

ここで念のためバックアップとしてレイヤーのコピーをとっておき、
次にパスコンポーネント選択ツールd016_icon2(A)のカーソルをカンバスの端から端までドラッグしシェイプ全体を選択、オプションバーの「パスの操作」で「シェイプコンポーネントの結合」をし一体化されたシェイプにします。
※結合を行うと属性パネルでのサイズの再設定等は出来なくなる(「ライブシェイプ」から「標準のシェイプ」になる)ので、念のためバックアップをとりました。
d018_b
▲「パスの操作」>「シェイプコンポーネントの結合」

d018_c
▲リング状に切り抜かれ且つ一体化された模様のシェイプになりました。

9-2.
次に数字と文字まわりの切り抜きをパスで作り、それも合わせて一体化します。
まず数字と文字の選択範囲を抽出するために、文字レイヤーを全てコピーしレイヤー>レイヤーを結合(Ctrl+E)等で結合、[8-1.]同様Ctrl+レイヤーのサムネール部分をクリックし選択範囲を作成します。
レイヤーをコピー→結合しなくても文字レイヤーを一つ一つ追加選択していけば出来ますが、こちらの方が早いかと思います。
d018_d
▲数字と文字のみの選択範囲を作成(見やすいように他は消しています)

この選択範囲からこれも[8-1.]と同様に作業用パスを作成しますが、数字文字との隙間を開けるために、選択範囲>選択範囲を変更>拡張で選択範囲を太らせます(ここでは3pxにしています)
d018_e
▲選択範囲を拡張。

この選択範囲を元に、これも[8-1.]と同様にパスパネルに移動し下方にある「選択範囲から作業用パスを作成」ボタンをクリックで作業用パス作り(パスコンポーネント選択ツールd016_icon2(A)のまま)Ctrl+Cでパスをコピーし[9-1.]の最終段階の一体化された模様シェイプのレイヤーにCtrl+Vでペーストします(ここも模様シェイプのレイヤーはバックアップをとっておいたほうが良いでしょう)
そしてその作業パスが選択されている状態で、オプションバーの「パスの操作」で「前面のシェイプで削除」をし切り抜きます。
d018_f
▲作業パスを模様シェイプのレイヤーにペースト。

d018_g
▲「パスの操作」>「前面のシェイプで削除」で切り抜き。

最後にこれも[9-1.]の最後と同じように、バックアップをとった上で、
パスコンポーネント選択ツールd016_icon2(A)のカーソルをカンバスの端から端までドラッグしシェイプ全体を選択、オプションバーの「パスの操作」で「シェイプコンポーネントの結合」をし一体化されたシェイプにしておきます。
d018_h
▲リング状および数字文字の形(隙間付き)に切り抜かれ、且つ一体化された模様のシェイプになりました。

10

全3回に及んだ今回の魔法陣作成の最後に、
文字をシェイプに変換し最終的に全てのシェイプを結合し全体を一体化します。
文字フォントのまま拡縮してもそれなりに見えますが(ただし像の拡縮ではなくフォントサイズの変更なので、後述の「シェイプに変換」よりはバランスの変化が大きいかと)、何よりこの文字フォントのインストールされていないパソコンだと書体が変わったりと不都合が出るのでフォントから像にしておきます。
(あまり詳しくはありませんが印刷の入校時も、文字フォントとしては残さずパス化(アウトライン化?)しているんじゃないかと思います)
それとまたバックアップの話ですがここでも、パス化すると文字の打ち直しは出来なくなるので、作業途中ファイル(もしくは同ファイル内の別レイヤー)としてバックアップはとっておいたほうが良いでしょう。
10-1.
各文字のレイヤーを選択し(複数選択も可)右クリックでメニューを開き「シェイプに変換」(若しくは書式>シェイプに変換)します。
このようにフォントから直接だと選択範囲を作業パスにするよりは高精度でパス化できますが、それでも位置が微妙にズレてしまいます(この辺りも「(ほぼ)ベクター」の所以です)
※[5-3.]でも触れましたが、文字パネルで「太字」を使用しているとこの「シェイプに変換」はグレーアウトしていて選択できません。
d018_k
▲右クリックでコンテキストメニューを開き「シェイプに変換」

全ての文字フォントを変換したら、まず[9-2.]で作った模様のシェイプ以外のレイヤーを複数選択しレイヤー>レイヤーを結合(Ctrl+E)等で結合し、そのレイヤーのシェイプをパスコンポーネント選択ツールd016_icon2(A)で全選択→オプションバーの「パスの操作」>「パスコンポーネントを結合」します。
d018_i
▲まずこちらだけパスコンポーネントを結合(見やすいように模様シェイプは消しています)

そしてそれと模様シェイプのレイヤーを結合し、同様の手順で「パスコンポーネントを結合」し一体化は完了です。
一度に全体を結合しなかった訳は、模様シェイプはすでにパスコンポーネントを結合しているので「標準のシェイプ」、それ以外は属性パネルで再編集が可能な「ライブシェイプ」だったので、そのまま結合すると像がおかしくなってしまうためです。
d018_j
▲パスだけ表示するとこんな感じです。

全3回に渡りましたが、この魔方陣を完成させるために利用する機能も多く、結果かなり長々と情報が分散してしまったようにも思えます。
開始から完成までの流れを追うのではなく、各機能説明のみを抜き出して書いたほうが分かりやすかったかも知れません。
その辺り今後さらに構成を考えますので、またお付き合い願えればと思います。

asobi_pic

講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成2/3

前回【講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成1/3】の続き。
前回は全2回のつもりで1/2としていましたが、思いの外ボリュームが有り3回になります。失礼しました。

使用文字フォントについて
この魔方陣では小塚明朝を使用していますが、これはAdobeから正規に入手(ソフトのバンドル等)したものであれば、編集可能のフォント埋め込みが許可されているフォントです。

5

パスに沿わせてテキストを入れていきます。
1月(英語の略称付き)から12月まで1周するデザインにします。
5-1.
まずは沿わせたいパスを用意しますが、すでに幾つか正円のシェイプがあるのでそれを利用します。
中心から2番めのリングの外側のパスを利用することにします。
d017_0
▲このリングのこのパス。

上記のリングのレイヤーを選択し、文字ツールd016_icon3(T)を選び、オプションバーで「テキストの中央揃え」にしてから、そのパスの任意の場所にカーソルを持っていき下図のようにカーソルが変化したらクリックし文字「1」を入力します。
小塚明朝だとリングにくっついてしまいますがそれは次で調整します。配置も後で移動しますので今は適当な場所でOKです。
d017_1
▲パスに沿わす時の文字ツールのカーソル。円形に限らず沿わせられます。

d017_2
▲文字ツールのオプションバーの「テキストの中央揃え」にして「1」を入力。

5-2.
リングに近すぎる文字を、文字パネル(無ければウィンドウ>文字で表示)の「ベースラインシフトを設定」を調整して離します。
デフォルトは0pxですが、プラスの値を入れて上に移動させます(マイナスなら下)
※ちなみに文字パネル内に「太字」ボタンがありますが、これを利用すると次回触れる文字を「シェイプに変換」が不可になるので今回は使いません。
 太い文字が欲しい時は素の状態で太いデザインのフォントを選びます。シェイプに変換しないなら使っても問題ありません。
d017_3
▲文字パネルの「ベースラインシフトを設定」を利用し「1」をリングから離しました。

5-3.
「1」を最上部センターに移動するため、パスコンポーネント選択ツールd016_icon2(A)で「1」を選びドラッグで最上部に持っていきます。この時グリッドをリングのセンターになるようにしておけば水平垂直(結果90°単位)にはスナップします。
d017_4
▲「1」を最上部センターへ。

6

「1」を元に残りの「2」から「12」までを作っていき、
それをリングに沿って配置します。
6-1.
「1」のレイヤーを11個複製し、それぞれテキストを書きかえて「12」までの12個のレイヤーにします。
d017_5
▲12個のレイヤー。

6-2.
まず1つ、「2」をリングに沿って移動させていきます。
パスコンポーネント選択ツールd016_icon2(A)に切り替え、まず対象のレイヤーを選択し、続いてパスパネル(無ければウィンドウ>パスで表示)でパスを選択、
その状態でCtrl+T(自由変形)のオプションバーの「回転」に「30」(時計回りに30°)と入力しEnterキーで変形を確定します(Shift+ドラッグで15°刻みになるでそれを利用してもOK)※12個で1周(360°)するので、360/12=30。
ここでパスコンポーネント選択ツールやパスを選択しないと、自由変形のセンターとリングのセンターがズレてしまいリングに沿った回転が出来ません。
d017_6
▲パスを選択し、自由変形のオプションバーの「回転」(見やすいように他の数字のレイヤーは非表示にしています)

残り数字もそれぞれの回転数、「3」は60°「4」は90°…と30°ずつ回転角度を増やしていきます。
d017_7
▲12個の数字が定位置なりました。

6-3.
同じ要領で、各月の英語の略称を配置していきます。
まず1月の「Jan.」を最上段センターに作成し、15°弱回転させ「1」と「2」の間に置きます。
15°「弱」としたのは「1」の方に寄らせたいためですが、各月の先頭のアルファベットの形によって数字との空き具合が違うので、後から各個調整します。
そして「Jan.」を複製し2月以降を作り、30°回転で数字の間に配置した後、さらに回転や文字パネルの文字間を調節するパラメータでバランスを取ります。
文字間を調節するパラメータには「カーニング」「トラッキング」「ツメ」とありますが、今回はそれっぽくなればどれを利用しても良しとします(機会を持てれば詳しく触れようと思います)
d017_8
▲略称も配置しバランスもとりました。

7

パスに沿わせる配置の最後として、
一番内側の目盛り状の飾りを入れていきます。
7-1.
実はこれも単なる文字フォント「■」の繰り返しです。
[5]と同じ要領で今度は一番中心のリングの内側のパスを利用します。
d017_9
▲このパス。

パスに沿わせて「■」を入力、文字パネルの「水平比率」で縦長にし「ベースラインシフトを設定」でリングとの距離を調整し、
それを連続コピー&ペーストで1周させ、同じく文字パネルで文字間を調節します。
図形できっちり作っているわけではないので、バランスが甘い部分もありますが今回の用途ではこれで良しとしています。
d017_a
▲目盛り状の飾りが配置されました。

最後に数字(と略称)の背景部分に模様を入れますが、それは【講座/Photoshopのシェイプ等ベクターで魔法陣作成3/3】に続きます。

asobi_pic

講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成1/3

【イラスト01_キャラクター】バックにある魔法陣の作り方。
キャラクターの絵は既出の通りCLIP STUDIO PAINTで描いていますが、魔法陣はPhotoshopで↓のようなシェイプをはじめとしたベクターデータで図案を作成し、拡縮しても劣化しないようにしています。
※注意:文字のフチドリ等一部は選択範囲→パス化を利用しており美しく無いかもしれません。
 Adobe Illustratorならもっと手数が少なく且つ美しく出来るかと思いますが、Photoshopでの方法を説明します。
最終的にこの図案に対し変形やレイヤー効果を適用し仕上げています。
d016_0

以下の作業はPhotoshop CC 2014で行っていますので、
今回に限ったことではありませんが、バージョンが違うと出来ない機能もあると予想されます。
特にシェイプ関係は、CS6やCCでそれなりに便利機能が増えたのでそれが多いかもしれません。
(「ストローク(線)」の調整や属性パネルによって大きさや角丸の再指定が出来たりと、一部Illustrator的な感じになりました)

1

適当な寸法(今回はキャラ絵と同じで作業しています)でカンバスを新規作成し、楕円形ツールd016_icon0で任意の位置と大きさの正円のシェイプで作ります。
1-1.
Shift+ドラッグで縦横比1:1の固定で作れますが、カンバスをクリックして作成ダイアログを開くか、適当にドラッグして楕円をつくり後から属性パネルまたはオプションバーでW(横、Width)とH(縦、Hight)を同値にしても良いです。
ちなみに私はWidth=ウィドス、Hight=ハイトと呼んでいます。
d016_1
▲正円のシェイプを作成。見やすくするために「塗り」のカラーを適宜設定しています。

d016_2
▲シェイプの属性パネル。表示されていない場合はアプリケーションメニューのウィンドウ>属性で表示。
 サイズや配置の他に、長方形のシェイプ(パスでも)なら角丸のRの指定もできます。

2

シェイプをカンバスの上下左右センターに移動させます。
大きさの指定とは違い属性パネルのXY座標指定ではやりにくいので、移動ツールd016_icon1のオプションバーの項目を利用します。
2-1.
Ctrl+Aでカンバスすべてを範囲選択した状態で、
動かしたいシェイプのレイヤーが選択されていることを確認し、オプションバーの「垂直方向中央揃え」と「水平方向中央揃え」ボタンを押します。
d016_3

d016_4
▲正円のシェイプの位置がカンバスのセンターになりました。

3

シェイプの複製や操作をし、リング状にします。
これが魔法陣の一番外側の円になります。
3-1.
シェイプレイヤーを複製します。
元をシェイプa、複製をシェイプbとし、属性パネル(orオプションバー)を使いシェイプbをaより少し小さめの大きさに(ここでは直径-14px)します。
正確なピクセル値が欲しかったのでこのように入力していますが、Ctrl+Tで自由変形でもいいです(ドラッグしてアバウトに変更や、そのオプションバーによってパーセンテージで変更ができます)
変形の後、[2]の要領でセンターに移動します。
d016_5

3-2.
シェイプbをパスコンポーネント選択ツールd016_icon2(A)で選択し、Ctrl+Cでコピーし(シェイプbレイヤーが邪魔になるので非表示にして)シェイプaレイヤーを選択し、そこにCtrl+Vで貼り付けます。
このときのシェイプレイヤー内のシェイプの重なり関係は、aが背面でbが前面になっています。
※ラスターレイヤー(通常のレイヤー)と違いベクターレイヤーはそれ内のシェイプやパスに前面背面関係があります。
d016_6
▲同一シェイプレイヤー内では別々のカラーは持てないので、貼り付けた時点でbはaのカラーになります。

3-3.
シェイプbが選択されている状態のまま、オプションバー若しくは属性パネルの「パスの操作」の「前面シェイプを削除」を選び切り抜きます(aをbの像でマスクしたような形になります)
d016_7
▲シェイプaがシェイプbの形に切り抜きされ、リング状になりました。
 ※この状態でもaとbは別々のシェイプです。bを選択して移動すると切り抜きも移動し三日月のような形にも出来ます。
 「パスの操作」の「シェイプコンポーネントを結合」することによって、シェイプからパスになりはしますが一体化できます(複雑な形を作るときは何度かこの結合と合成を繰り返していきます。今回は比較的単純なので次回触れる模様部分以外では利用しません)

4

作成したリングの内側にさらにリングを作っていき、
幾つかの大きさの異なる円で構成された(同心円)図形にしていきます。
4-1.
[3-3.]で非表示にしたシェイプbのレイヤーを表示し、それを縮小し前述の要領で小さいリングをつくります(細かい大きさにこだわらないなら、既にあるリングのフォルダをコピーし自由変形させて作っても構いません)
これを適宜繰り返し、以下の様な形に仕上げます。
d016_8
▲大きさの異なる同心円のリングとそのレイヤー構成。

次に文字を入れていきます。【講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成2/3】に続きます。

asobi_pic

講座/ドット絵05_キャラクターアニメーション2/2

【講座/ドット絵05_キャラクターアニメーション1/2】のつづき

4

次に、まだアンチエイリアスは入れずに「ハイライトやカゲ色」を入れていきます(←これを「仮絵2」と呼ぶことにします)
合わせてラインの色も、明るい面のラインは明るめにといった感じで、それぞれのカラーに合わせて塗り分けていきます。
※今回の絵は最終的にラインを意識的に残しますが、そうでない場合はこの段階でラインをカラーと馴染ませます。
前回と同じ要領でまずは1パターン(2番コマ)のみ、それを元に残りを仕上げます。
d014_2_0
▲仮絵→仮絵2。まずは[1]同様2番コマのみ。

d014_2_1
▲8つのコマの仮絵2。クリックでラフ画および仮絵との比較アニメーションGIFのファイルに移動します。

5

最後にアンチエイリアスを入れていきます(アンチを入れる=アンチエイジング=ジャギ消し)
※この「ジャギ消し」という用語、私はゲーム業界に入ったばかりの時「アンチを入れる」より先に知りましたが、どの程度一般的なんでしょうか。
[4]でつくったハイライトやカゲ色と、その元となった面やラインの色の間に中間調のドットを置きガタガタ感をならしていきます。
ジャギ消しのコツに関しては、別の機会が設けられればそちらでもうちょっと詳しく書きます。
d014_3_0
▲仮絵2→完成。例によってまずは2番コマのみ先行。

この段階で地面に落ちる影も入れました。
今回は各コマごとにそのポーズに合わせた影を入れてますが、楕円形等の汎用性のある影パーツを別につくりそれと重ねあわせ、容量と工数を節約することもまま有りますね。
d014_3_1
▲8つのコマが完成。クリックで今までの行程の比較アニメーションGIFのファイルに移動します。

こういったアニメーションがある絵は、ドット絵に限ったことではありませんが、1コマ分のみ完成させてしまうのではなく、ラフ画や仮絵等それぞれでアニメを組んで(=いわゆるラッシュ)再生しつつ調整するのが、クオリティ的にも工数短縮的にも良い結果になると思います。
そちらの業界経験はありませんが、アニメの制作現場もこんな感じではないでしょうか。
むむむ、段々当たり前のことを連々と書いている気がしてきました。
d014_4_0
▲前述の[5]と同じものですが、クリックで今までの行程の比較アニメーションGIFのファイルに移動します。

asobi_pic