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つのパネルを作ってみました。
実際は反転や回転・スクロールについてはショートカットキーに割り振って使うのに慣れているので、パネルでの操作はしないと思いますが。
↓こんなかんじですね。ドット絵ツールっぽいパネルになったんじゃないでしょうか?
dot01.jpg


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


こうして、PhotoshopCS5はドット絵ツールとして帰ってきてくれました><
ドット絵が描ける機能+Photoshopのフィルタや画像補正や3Dなどの画像ソフトとしての最高機能を使えるわけですから、最強のドット絵ツールの1つとして問題ないはずです!

と、熱く書いてみましたが、いまのPCだとPhotoshopCS5はやっぱりちょっともっさりするので、しばらくは今まで通りにImageReady7.0でドット絵作業をしていくと思います。
そのPCを新調したら、乗り換えていこうかなぁ。

★2011/6/15に続き記事を公開しました。
PhotoShopCS5をドット絵ツール化 その2


関連記事

この記事へのコメント

- そん - 2013年05月07日 22:23:03 [編集]

プレビューは「ウィンドウ」→「アレンジ」→「(ファイル名)の新規ウィンドウ」ではどうでしょうか?
画像を編集すると同時に全ウィンドウに反映されるのでプレビューとして機能します。

複数のウィンドウのそれぞれ違った倍率で表示したり
グリッドを表示する・しないもので分けられるなど
通常のプレビューより便利かなーと思います。

Re: タイトルなし - ぴぽ - 2013年05月08日 09:29:39 [編集]

そんさん

コメントありがとうございます。

「新規ウィンドウ」、前に別のバージョンで使ってみて、なにか不都合があった気がしてたんですが、CS6で試してみたら、バッチリ理想通りのものでした。さっそく導入していきます。
教えていただいてありがとうございます!

非公開にする :

トラックバック

URL :

プロフィール

ぴぽ

管理人:ぴぽ
フリーのグラフィックデザイナーという傍ら、「ゲームを作りたいなぁ♪」と奮闘中です!
Twitter

▼関連サイト
・ぴぽや - ゲーム画像素材販売 -
 有料素材の販売
・ぴぽや倉庫
 公開した素材のまとめ

・ぴぽやリンク
 素材配布サイトリンク集
・はじめてのウディタ
 ウディタお勉強wiki
・はじめてのウディタSNS
 ウディタ初心者向けSNS
・ニコニ・コモンズ
 動画素材を登録中

ご感想・ご利用報告・ご連絡

素材のご利用報告・ご感想をいただける場合はこちらにお願いします。

お仕事のご相談などはこちらをご覧ください。

作ってほしいゲーム用画像素材のご要望はこちらにどうぞ。
最新記事一覧
エフェクトアニメ シンプル迫ってくる星々 2017/03/14
junk くるくるファイアーエフェクトアニメ 2017/03/05
背景アニメ 暗黒・魔空間 12種 2017/02/12
戦闘エフェクトアニメ キス&飛び散るハート 2017/02/09
DMM同人 20%OFF販売開催中! 2017/02/05
カテゴリ
最新コメント
リンク
ウディタ公式サイト
ツクールweb
Degicaツクールストア
にほんブログ村 ゲームブログ ゲーム制作へ
にほんブログ村
ビットゲームメーカー公式(ゲーム制作ができるスマホアプリ)


リンクして頂ける場合はこちらのバナー画像をお使いください。
※バナー画像なしのリンクでも全く問題ありません。

RSS
広告

FLOWER KNIGHT GIRL オンラインゲーム
おすすめ有料素材
ねくらファンタジーマップチップ素材集
ねくらファンタジーマップチップ素材集
ねくらファンタジーマップチップ素材集エクストラダンジョン
ねくらファンタジーマップチップ素材集エクストラダンジョン
SF近未来~現代 タイルセット・マップチップ素材 著作権フリー RPGツクール、ウディタ用
SF近未来~現代 タイルセット・マップチップ素材
ファミコン風RPG基本マップ素材セット
ファミコン風RPG基本マップ素材セット
どうぶつキャラクターチップセット3
どうぶつキャラクターチップセット3
1号のバトラー素材集基礎編vol.1
1号のバトラー素材集基礎編vol.1
RPG用ザコ敵(哺乳類他)48種類セット
RPG用ザコ敵(哺乳類他)48種類セット
立ち絵素材男女
立ち絵素材男女
【立ち絵素材】現代人まとめ (女子生徒・男子生徒・一般女性・一般男性・少女)
【立ち絵素材】現代人まとめ (女子生徒・男子生徒・一般女性・一般男性・少女)
ぴぽやゲームエフェクト素材集01-斬撃- &02-属性斬撃- セット
ぴぽやゲームエフェクト素材集01-斬撃- &02-属性斬撃- セット
みにくる背景CG素材集『ファンタジー編』part01
みにくる背景CG素材集『ファンタジー編』part01
みにくる背景CG素材集『ファンタジー編』part02
みにくる背景CG素材集『ファンタジー編』part02
みにくる背景CG素材集『ファンタジー編』part03
みにくる背景CG素材集『ファンタジー編』part03
イラストアイコン素材集Vol.1
イラストアイコン素材集Vol.1
ファンタジーゲーム向けアイコン素材1
ファンタジーゲーム向けアイコン素材1
ファンタジーゲーム向けアイコン素材2
ファンタジーゲーム向けアイコン素材2
ゲーム製作用アイコン集#01
ゲーム製作用アイコン集#01
フリー素材音楽 Vol.1・2・3バンドル (MP3で289曲収録 - Vol.2/3無限ループ再生/RPGツクールにも対応)
フリー素材音楽 Vol.1・2・3バンドル (MP3で289曲収録 - Vol.2/3無限ループ再生/RPGツクールにも対応)
RPG向けフリー素材BGMデラックスパック
RPG向けフリー素材BGMデラックスパック
著作権フリーオリジナルBGM集 Vol.1 『RPG tail』
著作権フリーオリジナルBGM集 Vol.1 『RPG tail』
ドットゲーム支援音楽集 〜中世ファンタジー編 2巻〜
ドットゲーム支援音楽集(MIDI) 〜中世ファンタジー編 2巻〜
フリー素材SE Vol.ABCバンドル (効果音1865個収録)
フリー素材SE Vol.ABCバンドル (効果音1865個収録)
SMILE GAME BUILDER
3DRPG制作ソフト SMILE GAME BUILDER
SRPG Studio
シミュレーションRPG作成ソフト「SRPG Studio」
ティラノビルダー PRO
ノベルゲーム開発ソフト「ティラノビルダー PRO」