ご依頼についてお問い合わせPhotoShopCS5をドット絵ツール化2011.01.18遅まきながら、AdobeCS5にアップグレードをしました。私がドット絵を描くときはPhotoshop7.0に付属していたWEB画像制作特化なImageReady(FireWorksみたいなのです)を使用しているんですが、古いソフトなのでいつか新バージョンのWindowsで動作しなくなるんではないかとビクビクしてました。Windows7でも動作しているんですが、新バージョンのPhotoshopが出るたびにまずはドット絵ツールとしての適正を調べています。ドット絵ツールとして有名なEDGEの有料版のEDGE2も持っているのですが、やはりPhotoshopライクな使い方をしたいんです。EDGEに慣れれば、そっちがよくなるんでしょうけど。今回のPhotoshopCS5はドット絵ツールとしての適正がかなり高くなっています。Adobeがそんなの意識しているわけないので、勝手にそういう使い方をしようとしているわけですがwCS4までは、なにか問題があって(わすれちゃいましたが......)ドット絵ツール化は断念してたんですが、CS5では解決されたようです。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ではすべて可能になったので、晴れて十分な機能を備えたドット絵ツールにも使用できるようになりました。あとはどう使いやすくするかということで、先に紹介した。Configurator」がでてくるわけです。色々なところに散らばっているドット絵制作に便利な機能を1つのパネルにまとめていきます。私の場合は「標準のツールパネルからドット絵描画によく使う機能をまとめたもの」と「反転や回転・スクロールなどの変形・調整機能をまとめたもの」、「グリッドの設定や表示・スナップ、パターン定義&塗りつぶし、WEB用保存をまとめたもの」の3つのパネルを作ってみました。実際は反転や回転・スクロールについてはショートカットキーに割り振って使うのに慣れているので、パネルでの操作はしないと思いますが。↓こんなかんじですね。ドット絵ツールっぽいパネルになったんじゃないでしょうか?↓で、作業画面全体はこんなかんじです。理想的なドット絵ツール?になっている気がします。して、PhotoshopCS5はドット絵ツールとして帰ってきてくれました><ドット絵が描ける機能+Photoshopのフィルタや画像補正や3Dなどの画像ソフトとしての最高機能を使えるわけですから、最強のドット絵ツールの1つとして問題ないはずです!と、熱く書いてみましたが、いまのPCだとPhotoshopCS5はやっぱりちょっともっさりするので、しばらくは今まで通りにImageReady7.0でドット絵作業をしていくと思います。そのPCを新調したら、乗り換えていこうかなぁ。★2011/6/15に続き記事を公開しました。その2Tweet関連記事エフェクト作成ツールまとめ2011/06/06マインドマップのすすめ2011/02/03FlashCS5のパーティクルシステム?を試してみる。[編集]プレビューは「ウィンドウ」→「アレンジ」→「(ファイル名)の新規ウィンドウ」ではどうでしょうか?画像を編集すると同時に全ウィンドウに反映されるのでプレビューとして機能します。複数のウィンドウのそれぞれ違った倍率で表示したりグリッドを表示する・しないもので分けられるなど通常のプレビューより便利かなーと思います。[編集]そんさんコメントありがとうございます。「新規ウィンドウ」、前に別のバージョンで使ってみて、なにか不都合があった気がしてたんですが、CS6で試してみたら、バッチリ理想通りのものでした。NEXT≫プロフィール管理人:ぴぽフリーのグラフィックデザイナーという傍ら、「ゲームを作りたいなぁ♪」と奮闘中です!ぴぽやブログは2018年9月に新サイトに移行しました。HiRoadminSEO対策:ウディタRPGツクール画像素材ゲームゲーム制作無料エフェクトドット絵PNG。