PhotoshopでWeb用素材を作っている時のイライラ…

任意のピクセル単位で移動させたい！

たとえばグローバルナビを作っているとき、メニューを区切るセパレータ画像を、任意のピクセル指定であと「105px 右に移動させたい(複製したい)…」とき、どうしますか？

Ctrl+J でレイヤー複製して、グリッド表示させて目測で移動？それでもいいですね！

or , 複製して カーソルキーで10px移動を10回して、1px移動を5回してもいいですね！解決！

・・・数が多かったり微調整が入るとブチ切れボンバー＋ほんまに合ってるかどうか不安(・ω・)

Illustratorは「移動」ダイアログでピクセル(サイズ)指定の複製ができる

イラレちゃんなら、オブジェクトを選んで
Enterを押すだけでダイアログが出てきて任意の数値で移動、あるいはコピーが出来ます。

超ラクチンですね！

Photoshop(CS5)の場合、少なくとも移動ダイアログなどはなく…

複製したいレイヤーを選ぶ→レイヤーを複製→選択したまま→自由変形(Ctrl+T)にする

などをすれば、上部オプション部分に数値入力での移動が可能になります。

しかし、とにかくめんどくさい上に基準点のデフォルトがオブジェクトの中央になっており、

表示されているピクセルが小数になっていることが多く、ブチ切れます。

 

そこで、こんなスクリプトを作った。

（正確には人様のスクリプトを切り貼りしていじっただけですごめんなさいごめんなさい）

たとえば、上記画像で赤いセパレータ(雑すぎるｗ)を右に90px複製したい場合、

レイヤーを選択してショートカットでスクリプトを呼び出すと上記のダイアログが出る。

水平　に90、垂直に0を入力、「複製する」にチェックをいれて「移動」を押すと

わお！

地味にすばらしいかもしれん…能率アップのヨカーン(｀･ω･´)

 

残念なところ

・複数選択のレイヤーをまとめて移動したりできれば最高だけれど、残念ながらレイヤーは１つしか選べません。そもそもリファレンスが少なくて、みなさん行き当たりばったりで試行錯誤をされているようですね。

・自分が使えればいいやと思ったので、とても人様におみせするような代物ではない…下記参考リンクをご覧の上、各自作成してみてください。Javascript書ければ改造はカンタンですよ！こんなものでもどうしても欲しい人はご相談くださいｗ

・そもそも需要がないの？ｗ　グリッドとかガイドとかを駆使すればそもそもピクセル単位で移動する必要がない・・・こともないですね、使い分けましょう！

 

 

参考にさせていただいたサイト

PhotoshopでのWeb制作効率を向上させる「JSX」とは | Stocker.jp / diary

↑こちらのスクリプトを改編して作成させていただきました。ありがとうございます。

Adobe Photoshop CS5自動化作戦

1ft-seabass.jp.MEMO – PhotoShopの自動処理スクリプト JSXを作成するときの参考リンクをまとめておく