目次
FireworksからPhotoshopへの移行する際に最低限覚えておきたい操作方法まとめ
こんにちは、デザイナーの佐々木です。
FireworksからPhotoshopへの移行ということで、前回は各種設定についてまとめました。
Fireworksで基本的に行っていた操作、頻度の高い操作の中で、Photoshopでは使用感が異なる部分について取り上げていきます。
レイヤーを直接触りたい。
Photoshopが使いづらいと感じる一番の点はこれではないでしょうか。Fireworksでは選択ツールで直接選択が可能でしたが、Photoshopの初期設定では選択中のレイヤーだけしか選択できません。多くの人がphotoshopを敬遠する理由にもなっていると思うのですが、これは簡単に解決できます。
移動ツールを選択して、「自動選択」と「バウンティングボックスを表示」にチェックを入れ、「レイヤー」を選択しておきましょう。これでレイヤー関係なくオブジェクトを選択できるようになります。
スマートオブジェクトってなに？
Fireworksのシンボル機能のようなもので、スマートオブジェクト化されたファイルは劣化させることなく変形ができます。またファイル内で使用している全てのコピーを一括編集することができます。illustratorのファイルもこのスマートオブジェクトファイルとして埋め込むことができ、サムネイルをクリックすればillustratorからファイルを更新することができます。
Photoshopではこの機能を上手く利用して、修正作業に強いファイルを作っていきましょう。
シェイプってなに？
シェイプツールはPhotoshopでボタンなどを作成する際に使用します。
ラスタデータではないので、変形で劣化することはありません。illustratorのようにパスをいじることもできますし、パスファインダーで変形も可能です。
シェイプは、パスコンポーネント選択ツールで選択し、「属性」ウィンドウで角丸などの編集を行うことができます。
文字エリアを変形すると比率が変わってしまう。
Fireworksではテキストエリアは文字量が増えれば自動でサイズが変わりましたが、Photoshopでは最初に作成したサイズより文字量が多くなった場合表示できず隠れてしまいます。
移動ツールでテキストエリアを変更しようとすると文字の比率ごとサイズが変わってしまうので、初めて使った時はびっくりするのですが、Shift + T でテキストツールを選択してから、サイズを変更すれば、文字の比率を変えずに伸縮させることができます。
移動ツールでの文字のサイズ変更は、必ずしも文字サイズをpxで表現する必要が無い際には使い勝手が良いです。画像の中に含まれる文字などはこの方法でサイズ変更するのも良いでしょう。
マスクについて
Fireworkでのマスク方法は切り抜きたい形のオブジェクトを上に重ねてマスクを作成しましたが、Photoshopでは逆になります。切り抜きたい形のオブジェクトをレイヤー下に持っていき、上のレイヤーとの境界を option + クリック で一発でマスクがかけられます。
ドロップシャドウ、グラデーションなどはどこから設定できる？
ドロップシャドウやグラデーション、光彩などのエフェクトはレイヤーパネルから変更したいシェイプを右クリックして「レイヤー効果」から設定をすることができます。
スタイルの中で気をつけたいのが、「包括光源」です。この「包括光源」にチェックが入っているオブジェクトは、ファイル内で全てのレイヤー効果の角度が統一されます。
個別に角度を設定したい場合が多いと思うので、基本的にチェックは外して問題ないでしょう。
整列
整列やパスファインダーは上部パネルから行えるのですが、手順が多く、webカンプ作成では頻繁に使用するので不便です。
プラグインを使って常に表示させておけばFireworksと同じように使用できるのでおすすめです。
http://graphicartsunit.tumblr.com/post/93204520899/cc2014
オブジェクトの位置やマージンが知りたい
オブジェクトを選択した状態で⌘キーを押すとガイドが表示されます。押したままカーソルを移動すれば重なったオブジェクトの距離などを知ることができます。
座標情報やオブジェクトのサイズを知りたい時は、オブジェクトを選択して⌘ + Tで上部パネルに情報が表示されます。
リンクされたスマートオブジェクト機能
Photoshopではヘッダーやナビゲーションなどの共通要素をテンプレートとして外部ファイル化し、参照することで効率的にデザインの修正などが行えます。ページ数の多いサイトでは100枚超のファイル数になりますが、そこでネックになるのが共通要素に変更があった場合です。100枚超の全てのデータを編集し直すのはあまりに非効率ですが、Photoshopなら１つのファイルを編集するだけで全てに適用できます。Fireworksのシンボルの機能を拡張したようなイメージでしょうか。
2014年1月のアップデートから強化されたこの機能によってファイルサイズが軽減されるようになったので、PCへの負荷という点で改善されています。Fireworksでたくさんのファイルを開く必要もなくなります。
参考：
http://www.adobe.com/jp/jos/pinchin/howto/photoshop-more-expressive/smart-object.html
以上、FireworksからPhotoshopへの移行する際に最低限覚えておきたい操作をまとめてみました。この他にも沢山あるとは思うのですが、これくらい覚えておくとスムーズに制作ができるのではないでしょうか。他にあれば、また追記していきたいと思います。
