Photoshop時代のドットワーク:使ってみたら案外行けた

 さて、ここからは復活後の2017年版です。
 
 何から始めたら良いのかとあれこれ考えましたが、やはり時代の流れも考慮してPhotoshopCCを使っての
 ドットワークに関して簡単に説明することから始めたい思います。
 
 書籍版の刊行からすでに12年、OSやハードウェアの更新により長年使ってきた内製ドットツールの
 操作用コンパネが接続不可になり、現在は軽い作業は内製ツールをタブレットで使いつつ、フルカラーの
 エフェクトなどが絡んだり重い作業のドット絵などはPhotoshopCC上で一括作業する体制になりました。
 昔のPhotoshopは「これ一本でドットを全部打つのはキツイなあ」と思ってましたが、今時のCC系には
 ドット絵に必要な機能はパレット以外はほぼ揃っているので「案外大丈夫だな」と言う感触を持っています。
 (開発現場ではEDGE系やその他のツールを使う人も多くいますが、自分は内製ツールに染まりすぎてるので
 他のメジャーなドットツールは逆に馴染めずにPhotoshopに落ち着いた感じです)
 
 前置きが長くなりましたが、PhotoshopCCでのドットワークの話を始めて行きましょう。
 
作業時のちょっとしたコツ:新規ウィンドウを使う

   PhotoshopCC(説明用のキャプチャ画像はCC2017です)でのドットワークを行う際に、
  知っておくと便利なちょっとしたコツを書いておきたいと思います。
 
 
■新規ウィンドウを使ったルーペ機能の代用

 ドット絵を打つ際には、拡大しての作業用ウィンドウとは別に全体が見える確認用ウィンドウが欲しい所です。
ドットツールではルーペ機能として実装されていますが、この機能は「新規ウィンドウ」で代用可能です。
メニューの「ウィンドウ(W)→アレンジ(A)」と開いていくと一番下に「●●の新規ウィンドウ(W)」
と言う項目があるのでそれを選択します。キーボードショートカットは「Alt+F1」に設定されています。

一番下にあります
新規ウィンドウを確認用に使う

 同期した別のウィンドウが新規に開くのでそれを確認用として使います。
同期してはいるけど扱いは別ウィンドウですから、個別にウィンドウの拡大率を変更したり、
片方のウィンドウを回転表示させる事も可能です。拡大画面ばかり見て作業していると
「原寸にしたら部分的にちぐはぐな箇所が出てきてしまった」と言うこともありますから、
常に全体を確認する別ウィンドウを用意しておくのがおすすめです。

作業時のちょっとしたコツ:水滴ツールを使っての中間色作成

 先にパレットを作っていても、作業中に追加で中間色が必要になる場合があります。
ドットツールならパレット選んで欲しい諧調分をグラデ機能で作ってハイ終了ですが、
パレットの概念がないPhotoshopでは自前で中間色を用意しなければなりません。
そこで何らかの方法で中間色をひねり出す必要がある訳ですが、簡単な方法としては
水滴ツールを使って2色間をぼかすと言う物があります。

水滴ツールを使った中間色作成

 要するにSaiで言う所の「スクラッチパッド」を用意してしまおうと言う物です。

 グラデーションツールでも同じ事が出来ますが、水滴ツールの方が場所を取らず手軽に中間色を
作り出せるので個人的にはこちらを多用しています。なおレイヤー状態では「透明度の保護」
していないとエッジ周辺で背景部分を巻き込んだぼかしをするので注意が必要です。
中間色生成用の混色ウィンドウを別途用意し、そこで混ぜるのも良いとか思います。

 拾う中間色は見た目で判断してますが、もっと機械的に生成したい場合はグラデーションツールと
ポスタリゼーションを組み合わせて諧調を決め打ちしてしまう手法も考えられますね。
後は作った色を実際に使ってみて、イマイチならその色を選択して色調補正で微調整をします。

ポスタリゼーションを使う例

 ■追記■
 
  本記事公開後、「カラーウィンドウの『現在のカラー設定』を使う方法もありますよ」と言う手法を
 教えて頂きましたので追記で紹介したいと思います(椋さん、ありがとうございます)。

カラーウィンドウを使う例
作業時のちょっとしたコツ:補間について

   回転・拡大縮小などの変形をする場合、ピクセルの補間方法を選択するメニューがありますが
  補間方法によって出力結果が違うと言うことにも簡単に触れておきます。
元画像

  この元画像を異なる3つの補間方法で75%縮小し、その出力結果を並べてみましょう。


ニアレストネイバー
バイリニア
バイキュービック

   簡単に言えば「ニアレストネイバー」は使用色のみを使って変形後の画像を出力する代わりに、
  細部のディテールが失われます。「バイリニア」「バイキュービック」は細部のディテールを
  出来るだけ保持するような出力結果になりますが、その代わりに色数が増えます。よって特に理由が
  ない限りドット絵の変形には「ニアレストネイバー」を使用することになります。

変形時もニアレストネイバーを使用します


作業時のちょっとしたコツ:パレットの保持

   PhotoshopCCは単体で商業ベースのドット絵を全て作る事も十分可能ですが、時には別の
  ドットツールとの連携が必要になることもあります。そこで問題になるのがパレットの保持です。
  
   PhotoshopCCはフルカラーのレタッチツールなので、パレットを持たないRGBカラーモードで
  作業を行いますから、ファイルの書き出し時に強制的にカラーテーブルを割り当てて、
  パレットの並びなどを保持する必要がある訳です。それではこの工程を順を追って見て行きましょう。

   こちらがパレットを保持した状態の元画像です。GIF形式で保存した物をPhotoshopCCで開きます。
元画像

   作業の前に先ずはカラーテーブルの保存をしましょう。
カラーテーブルを保存

   Photoshopのカラーテーブルは「ACT形式」として保存されます。
   下準備が出来たので画像をRGBカラー化などをして実作業に入ります。
ACTファイルとして保存

   作業が完了したらメニューの「イメージ(I)→モード(M)」からインデックスカラーを選択します。
   カラーテーブルの割り当てウィンドウが開くので、「強制(E)」を開いて「カスタム」を選択して下さい。
作業後にカラーテーブルを割り当てる

事前に保存したACTファイルを読み込み、強制カラーとしてパレットを適用します。
カラーテーブル適用後、GIF形式で保存して下さい。

新規画像を他のドットツールで読み込みます(今回はEDGEを使用)。パレットが保持されています。
パレットを保持した新しい画像


作業時のちょっとしたコツ:フレームアニメーションの作成

   PhotoshopCC上でもタイムラインツールでフレームアニメーションを作成する事が出来ます。
  多少癖があるツールですが、動作確認やGIFアニメを作る場合などの用途には十分だと思います。

  タイムラインツールから「フレームアニメーションを作成」を選択して下さい。
フレームアニメーションを選択

 ループ設定はツールの左下付近にあります。アニメーションの確認をするなら「無限」が良いでしょう。
左下にループ設定項目

 あるフレームで別レイヤーを追加したい場合、追加する前にタイムラインツールのメニューから
「すべてのフレームで表示される新規レイヤー」のチェックが外れているかの確認をしておきましょう。
ここにチェックが入っていると、作成したレイヤーが全てのフレームで表示対象になってしまいます。
 (仮にそのような状況になってしまった場合は、1フレーム目を選択し対象のレイヤーを非表示にして下さい)
このチェックを外す

  アニメーションが完成したらGIFアニメとして保存してみましょう。
 「ファイル(F)→書き出し(E)→Web用に保存(従来)」を選択します。
GIFアニメの保存

  Web用の保存は豊富な設定項目があり、このように拡大状態で書き出すことも容易です。
 最近はどの端末も高解像度ですから、元画像が32×32ドット程度なら3〜4倍拡大で書き出すと
 丁度良いのではないでしょうか。(サイズ変更時には画質の項目を「ニアレストネイバー」に
 することを忘れないで下さい)
完成したGIFアニメ



 と言う訳で新規分一発目、PhotoshopCCでのドットワークの簡単な説明はこんな感じでしょうか。
欲を言えばドットツールのカラーパレット(16色×16段の256色で16バンクだとベスト)を
用意出来るプラグインがあると良いのですが、流石にニッチすぎるのか見つかりませんね。

 次回のネタもまとまったら記事にしたいと思います。

[ タイトルへ戻る ]



inserted by FC2 system