MD-Blog_Web Creative

2013年5月、Webデザイン制作はFireworks一筋だった私に悲報がもたらされました。

• Adobe、Web画像ツール「Fireworks」終了へ

まー悲しみに暮れてもいられないので、これを機にPhotoshopに移行しようかなーとなんとなーく思いつつも、使い勝手のよいFireworksを使い続けていました。
しかしながら昨秋入社したMONSTER DIVEでは、Photoshop党が政権を完全に掌握。
このままでは業務はおろか、ちょっとしたお手伝いすらままならないという危機的状況下に置かれ、現在ついに本腰を入れて、FireworksからPhotoshopへ移行奮闘中です。

そこで今回は、絶賛移行中の不肖・私が「なにこれどーやんの？」とイラッとした戸惑ったPhotoshop操作とその切り抜け方についてご紹介します。
最初にお断りしておきますが、すごーーーーーく地味ーーーーーーで細かーーーーーーいことばかりですよ。予めご了承ください。

環境：CS6（注意書きのあるもの以外はCS4,5でも確認済です）
※ショートカットはMac仕様のものを記載しております。Windowsでは「command」→「Ctrl」「option」→「Alt」「return」→「Enter」として

まずは環境設定をWeb仕様に

下記URLを参考に、環境設定をはじめとする細かな設定を変更しました。

参考：初めてPhotoshopでWeb制作する前にやっておくといい設定8（CS6含む）

Photoshopのショートカットを理解する

Fireworksでよく使用していたショートカットと、Photoshopでそれに相当するショートカットを抜粋してご紹介します。※完全に主観的なものです

	Fireworks	Photoshop
選択	V,0	V ※移動ツールのショートカット
パスの選択	A,1	A
表示倍率の変更	command + 数字キー	command + プラス（+） , command + マイナス（-） 設定にないので、ズームイン／アウトを使用しています
整列	command + option + 数字キー	初期設定にはなし オプションバーから操作しています
属性のペースト	command + option + shift + V	残念ながら属性ペースト機能が存在しない模様です

初期設定になくても、「編集 > キーボードショートカット」から自分仕様のショートカットに変更することも可能です。

テキスト入力後は「command + return」で解除

すごく小さなことなんですが、コレ毎回イラッとし戸惑います。

Fireworksユーザーの方ならわかっていただけると思うのですが、Fireworksだとテキスト入力し終わったらエリア外を適当にクリックすればテキスト入力が解除（テキストが確定）されるのです。
しかしながらPhotoshopでそれをしたところで、テキスト入力からは抜け出せません。
オプションバー右端の「○」を押したり、ツールバーから他のツールを選択しても良いのですが、とりあえず抜けたいときは「command + Enter」。 これでテキストが確定され、次の操作に移ることができます。

テキストエリアの形、大きさを後から変える

例えば、テキストエリアを作ってから「あ。右に画像が入るからもっと狭くしなければ」なんてことはデザイン作業時によくあることです。
そんなときFireworksでは、テキストエリアの端を持って好きなように変形させれば、中のテキストも良きところで折り返してくれますが、Photoshopでは変形させた形に沿って、中のテキストも大胆に変形されます。つまりちっとも折り返してくれません。

これを阻止するには、最初が肝心。

文字を入力する前に、適当な大きさで構わないのでテキストボックスを作りましょう。
作成してから入力すれば、後からテキストエリアの大きさを変えても、中のテキストは変形されません。

注意）テキストツールを選択した状態での拡大縮小が必須です！

変形をpx単位で指定したい

配置した要素を拡大縮小したいとき、ひとまず「command + T」で自由変形モードにすることは知っていました。
が、20pxくらいにしたいのに単位が％。。。
果たしていまの大きさが何pxなのかもわかりません。←情報ウィンドウを見ればわかりますが

そんなときは、％表記になっている入力ボックスを右クリック。お好きな単位を選びましょう。

角丸にしたいときはコーナーエディタ

Fireworksだと、矩形を描いた後に「プロパティ > 角丸の半径」の数値をピロッと変えれば、いくらでも四角い顔をまーるくしてくれますが、Photoshopではそうはいきません。※CCでは角丸の編集機能がついたとのこと！

「ご利用は計画的に」と云わんばかりに、最初から角丸短形で描くことを半ば強制されるのです。※しかも角丸の具合も最初から決めとけやと。。

そんなときは「Corner Editor」が便利ですよ。

Corner Editor | Photoshop Scripts

角丸だけでなく角角？や額縁風も提供されている上、なんと多角形にも対応！

そして角の数値は、まるっとまとめて指定することもできれば、カンマ区切りでひと角ずつ指定することもできます。
↑コーディング時、border-radiusの値を指定するのにも便利ですね。

ただし、Corner Editorで角を処理した後にオブジェクトの大きさ（縦横の比率）を変えると、角の処理も一緒に伸び縮みしてしまいます。 大きさ等を変えたときは、再度Corner Editorから角の具合を編集し直しましょう。

スライスはCut&Slice me

以前、MD-Blogでmio.satohがご紹介していますが、いまスライスの書き出しはほぼこのプラグインで行っています。※CS6以降対応

Cut&Slice me
PhotoshopCS6用 自動スライスツールを使ってみた

無料版はpng書き出しのみのようですが、背景レイヤーも透過してくれるし、PC用、Retina用（SP・タブレット）とサイズ違い画像も自動的に書き出してくれる等、とても便利です。

ちなみにスライス系には他にもSlicyというアプリがあります。
Slicy
↑こちらのほうがメジャーかもしれません。

スライス書き出しに謎のフォルダ&謎の名称

Photoshopのスライスツールを使って画像を書き出すときに厄介なのが、「images」というフォルダが勝手に作られ、せっかく名付けたスライス名とは異なる名前で書き出されてしまうこと。
...というのも私知りませんでした。初期設定だとこうなっているということを！↓

保存する段階で良きように設定し直しましょう。
そしてその設定を保存しておけば、またいつでも使えます。

Fireworksで作成したデータをPSD形式で保存する

Fireworksでデザインしたデータを、Photoshop形式の.psdデータとして保存することも可能です。
が、せっかく作ったデータをそのまま持ってこれず、Photoshop上で破棄されてしまうこと度々。
保存時のこの設定が重要でした。

「外観を保持」にすると、デザインはそのままPhotoshop上で編集はできません。
「編集性を保持」にすれば、Photoshop上に引き継ぐことができないエフェクト等があります。

• 塗りのパターン／テクスチャ
• 線（「Photoshopライブエフェクト > 境界線」は引き継がれます）
• フィルター（カラーを調整／ぼかし／ソリッドシャドウ）

フィルターは、Photoshopライブエフェクト以外でも、ソリッドシャドウを除くシャドウ・グロー系やベベル・エンボスも「レイヤー効果」として引き継がれます。
また、Corner Editorを使えば、角丸の半径の数値もPhotoshop上で編集可能となります。

「カスタム」から個別に設定することも可能なので、その時々で編集するのも一手かもしれません。

まとめ

さて、今回ご紹介したのは、「そんなことも知らなかったの！？」というようなごくごく地味で初歩的な操作ばかりなので、Photoshopユーザーの方はきっと驚かれたことでしょう。。。
でも！　Photoshopをあまり触ってこなかった（←ここ重要）Fireworksヘビーユーザーの方々に、ちょっとでもお役に立てたならそれはもう本望です。

「絶賛移行中です！」などと言ったものの、もちろんいまでもFireworksで作業することも多いですし、これからも使っていくことでしょう。 長年愛用してきたため、とにもかくにも作業が早くできる！
バナーだったり、一人作業の小案件（スピード重視）のデザイン時には、自然とFireworksを立ち上げています。
あとインフォグラフィック的図表関係も、矢印ツールやパイ（円グラフ）ツールなんかが便利すぎて、Fireworksで作ったほうが断然効率が良いのです。
Web制作に特化したFireworksのすばらしい機能たち（ページ機能等々）を使わないなんて、やっぱりもったいない！
結局は適材適所、状況に合ったツールを使い分けて、よりよいWebデザインを探求し、生み出していきたいと思います。