PhotoShopCS5をドット絵ツール化
2011.01.18
遅まきながら、AdobeCS5にアップグレードをしました。さて、私がドット絵を描くときはPhotoshop7.0に付属していたWEB画像制作特化なImageReady(FireWorksみたいなのです)を使用しているんですが、古いソフトなのでいつか新バージョンのWindowsで動作しなくなるんではないかとビクビクしてました。幸いWindows7でも動作しているんですが、新バージョンのPhotoshopが出るたびにまずはドット絵ツールとしての適正を調べています。
ドット絵ツールとして有名なEDGEの有料版のEDGE2も持っているのですが、やはりPhotoshopライクな使い方をしたいんです。まあ、EDGEに慣れれば、そっちがよくなるんでしょうけど。
で、今回のPhotoshopCS5はドット絵ツールとしての適正がかなり高くなっています。
Adobeがそんなの意識しているわけないので、勝手にそういう使い方をしようとしているわけですがw
CS4までは、なにか問題があって(わすれちゃいましたが……)ドット絵ツール化は断念してたんですが、CS5では解決されたようです。(CS4での機能はちゃんと見てなかったので、実はCS4でも解決されていたのかも?)
さらに↓の記事で紹介されている「Adobe Configurator」を使用することで、使いやすさが飛躍的にアップしました。
ASCII.jp:自分だけのPhotoshopが作れる!超便利な新機能
http://ascii.jp/elem/000/000/194/194587/
このツールは、Photoshopの機能から自分が使いたいものを独自のツールパネルにまとめることができるというものです。自作のアクションやスクリプトもボタンとして配置できるので、ドット絵ツール化関係なしに利用したいツールです。バージョンが1と2があって、1はCS4用、2はCS5とInDesignにも対応しているようです。ちなみに1はわからないですけど、2は日本語で使えるようになっています。
そんなわけで、ドット絵ツールとして必要な機能を見ていくと。
○ピクセル単位での描画
これは「鉛筆ツール」や□描いたりするときに「アンチエイリアス」をオフにすれば解決。
ブラシも独自にドットがハッキリしたブラシを「ブラシ定義」でどんどん追加していけばいいので問題なし。
諸々の単位表示も「Pixel単位」に設定してしまえばOK。
このへんは元々問題ないところでした。
○左右反転、90度単位での回転機能
キャラクターのアニメパターンを作るときなんかによく使いますねぇ。
「編集>変形」にありますんで、ショートカットキーを割り振っておけば便利です。
これも前から。
○1ピクセルごとの上下左右スクロール(ラップアラウンド)
たしかCS4ではこれがうまくできなかったんじゃないかな?覚えてないけど。
この機能もよく使いますねぇ。パーツの一部をちょっと微調整でズラしたりとか。
「フィルター>その他>スクロール」でできるようになっています。
「ラップアラウンド」は画像をスクロールさせて画面の端に行くと逆側からでてきてループするようにできます。
私の場合はこれを「アクション」を4つ使って、上下左右に各1ピクセルずつスクロールするように設定して、ショートカットキーで操作できるようにしています。
今後は斜めとかも設定してもいいかなぁ?
○グリッド表示&スナップ
これもPhotoshopのはちょっと使いにくいんですよねぇ。
グリッドの幅の設定は「編集>環境設定>ガイド・グリッド・スライス」で、グリッドを表示するには「表示>表示・非表示>グリッド」で、スナップ(吸着)させるには「表示>スナップ」という具合。
グリッドの幅の設定をしに行くのがちょっと遠いなぁ。というところです。まあショートカットキーを割り振れば解決しますが。
○パレット管理
これはもう時代的にフルカラーで問題ないので、不要ですねぇ。
スウォッチにガンガンと好きな色を設定できるので、自分用のカラーをいくらでも用意できます。
○アニメーション
Photoshopでのアニメーション機能はレイヤーアニメーションになるので、EDGEみたいにキャンバス内の場所を矩形で登録していくようなことができないので、ここはEDGEを使いたいところですが、私の場合はアニメーションを作る場合はそのパターンだけ切り取って、アニメーション作成用の新ドキュメントでレイヤーわけして作業していたりします。単純なものならいいですが、ちょっと複雑なものはきびしいかもしれないですけど、できなくはないです。まあ、EDGEなんかのアニメ機能の方がやっぱ便利でうらやましいところですけどね。
○実寸プレビュー
1つの画面では拡大して作業しながら、もうひとつのクローン・プレビュー画面で等倍表示が見られる機能も重要です。
ここが一番ネックでいいエクステンションがないか、探したんですけど、よくわからず、結局「ウィンドウ>ナビゲーター」で妥協しました。
等倍表示ではないんですが、ないよりはマシ。
○画像の出力
ドット絵向きの画像形式として、普通にPNGやGIFでの保存は「ファイル>Web及びデバイス用に保存」で行えるので、透過色設定含めて問題ないです。もちろんαチャンネル付きのPNGも書き出せます。
以上のようなことが、CS5ではすべて可能になったので、晴れて十分な機能を備えたドット絵ツールにも使用できるようになりました。
機能は十分。あとはどう使いやすくするかということで、先に紹介した。「Adobe Configurator」がでてくるわけです。
色々なところに散らばっているドット絵制作に便利な機能を1つのパネルにまとめていきます。
私の場合は「標準のツールパネルからドット絵描画によく使う機能をまとめたもの」と「反転や回転・スクロールなどの変形・調整機能をまとめたもの」、「グリッドの設定や表示・スナップ、パターン定義&塗りつぶし、WEB用保存をまとめたもの」の3つのパネルを作ってみました。
実際は反転や回転・スクロールについてはショートカットキーに割り振って使うのに慣れているので、パネルでの操作はしないと思いますが。
↓こんなかんじですね。ドット絵ツールっぽいパネルになったんじゃないでしょうか?

↓で、作業画面全体はこんなかんじです。ほぼ理想的なドット絵ツール?になっている気がします。

こうして、PhotoshopCS5はドット絵ツールとして帰ってきてくれました><
ドット絵が描ける機能+Photoshopのフィルタや画像補正や3Dなどの画像ソフトとしての最高機能を使えるわけですから、最強のドット絵ツールの1つとして問題ないはずです!
と、熱く書いてみましたが、いまのPCだとPhotoshopCS5はやっぱりちょっともっさりするので、しばらくは今まで通りにImageReady7.0でドット絵作業をしていくと思います。
そのPCを新調したら、乗り換えていこうかなぁ。
★2011/6/15に続き記事を公開しました。
PhotoShopCS5をドット絵ツール化 その2
- 関連記事
-
-
エフェクト作成ツールまとめ 2011/06/06
-
マインドマップのすすめ 2011/02/03
-
FlashCS5のパーティクルシステム?を試してみる。 2011/01/18
-
PhotoShopCS5をドット絵ツール化 2011/01/18
-
エフェクト作成ツール 2010/04/22
-
この記事へのコメント
そんさん
コメントありがとうございます。
「新規ウィンドウ」、前に別のバージョンで使ってみて、なにか不都合があった気がしてたんですが、CS6で試してみたら、バッチリ理想通りのものでした。さっそく導入していきます。
教えていただいてありがとうございます!
コメントありがとうございます。
「新規ウィンドウ」、前に別のバージョンで使ってみて、なにか不都合があった気がしてたんですが、CS6で試してみたら、バッチリ理想通りのものでした。さっそく導入していきます。
教えていただいてありがとうございます!
トラックバック
URL :
- そん - 2013年05月07日 22:23:03 [編集]
画像を編集すると同時に全ウィンドウに反映されるのでプレビューとして機能します。
複数のウィンドウのそれぞれ違った倍率で表示したり
グリッドを表示する・しないもので分けられるなど
通常のプレビューより便利かなーと思います。