こんにちは、デザイナーの佐々木です。
皆さんデザインツールは何を使っていますか？
アイスリーデザインではこれまで主なデザインツールとしてFireworksを使い続けてきました。
2013年5月のFireworks開発終了の発表以来、他ツールへの移行を考えてはいましたが、使い慣れたツールからなかなか離れられず早２年が経とうとしています。しかし、この度Fireworksで行っていた作業をPhotoshopへ移行することになりました。
目次
Photoshopは使いづらい？
Fireworksを長く使っているとPhotoshopが使いづらい、とどうしても感じてしまいます。
初期設定のままでは確かに使いづらく特徴的な機能も覚えなければなりません。
Photoshopはそもそもwebに特化したツールではないので、初期設定からカスタムしてwebデザインに最適化していきます。使用感はFireworksとは全く別物なので、慣れる他ないですが、なるべくFireworksでできたことがスムーズできると良いですね。
ということで下準備として実際に行ったPhotoshopの設定をまとめてみました。
まずは環境設定から
まずはPhotoshopの環境設定からwebデザインに最適化していきます。
はじめに単位をpxにしておきましょう。Fireworksではあまり気にすることのなかった少数点のpxなどもPhotoshopでは考えなければいけません。
メニュー -> 環境設定 から設定します。
ガイドの設定はお好みですが、こちらも単位がpxになっていることを確認しましょう。
また、グリッド数と分割数を同じ数字に設定すると1pxずつ線が引かれます（例 : 10px/10）。
こうするとガイドを引くときに小数点になることが無くなります。
線のスタイルは破線か点線にしておくと見えづらさがある程度解消されます。
「一般」から「ベクトルツールと変形をピクセルグリッドにスナップ」にもチェックをいれましょう。
本家Adobeが公開している、Photoshopをwebデザインで活用するためのチュートリアルです。
Webデザインをする際の環境設定の方法が詳しく書かれています。
プラグイン
環境設定が整ったら便利なプラグインを入れましょう。全て無料で利用できます。
GuideGuide / Griddify / QuickGuide
ガイド系は試しに３つほど入れてみました。
GuideGuideでは、設定したガイドを保存しておくことができるので、よく使うグリッドの設定を保存しておくと便利です。
複数レイヤーのリネーム機能や、不要なレイヤーの削除、スマートオブジェクト⇄ラスタライズの変換を行ってくれます。長く作業をしているといつの間にか空のレイヤーが出来ていたりしますが、このプラグインでまとめて削除することができます。
ある程度作業が進んだら、レイヤーを整理しておきましょう。
シェイプやテキストの色をグループ化して管理できます。
同じ色の要素をまとめておけば、修正を入れたい場合など一発置換ができ便利です。
スウォッチ
Color – Style – Google design guidelines
GoogleのMaterial Designからもスウォッチが配布されています。
http://www.materialui.co/colorsが有名ですが、これを入れておけば困ることはないでしょう。
iOS 8 Color Swatches & gradients
iOS8で使用されているカラーとグラデーションのスウォッチです。
グラデーションがスウォッチとして登録されていると便利です。使用頻度の高い基本的なグラデーションセットを保存して、そこから微調整をすると良いと思います。
Photoshopでの面倒な「整列・分布」「パスファインダー」の機能がパネルにまとまったプラグイン。Fireworksと同じような使用感が再現できます。
配布元のサイトでは他にも様々便利なエクステンションが公開されています。
ショートカットキー
Fireworksでは直感的に操作できた部分もPhotoshopでは難しく感じると思います。
キーボートショートカットも積極的に使っていきましょう。
(Windowsをお使いの方はcommandをctrlに置き換えてください。)
基本のショートカットキー
ツールパレット
V 移動ツール
A パス選択ツール
T 文字ツール
U 長方形ツール
I スポイトツール
Shift + ツール選択キーで隠れているツールを選択できます。
楕円形ツールを選択する場合は Shift + U を３回繰り返すことで選択できます。
よく使うショートカット
⌘ + A
全選択
⌘ + D
選択範囲を解除
⌘ + R
定規を表示
⌘ + : (コロン)
ガイドを表示
⌘ + T
自由変形
⌘ + enter
テキスト入力モードから抜ける。
Spaceキー
手のひらツールに切り替え。
⌘ + 0
全ｓ体表示
⌘ + 1
100%で表示
ショートカットキーを追加しよう
Photoshopでの作業に慣れてきたら新しいショートカットを追加しましょう。
とりあえず私が追加したショートカットはこちら
⌘ + shift + E
スマートオブジェクトに変換
Fireworksではボタンのグラデーションなどを変更したい時に⌘ + shift + option + V でコピーした属性をペーストすることができました。
Photoshopでこれに変わるショートカットキーを追加しましょう。
⌘ + shift + option + C
レイヤースタイルをコピー
⌘ + shift + option + V
レイヤースタイルをペースト
⌘ + shift + option + X
レイヤースタイルを消す
さらに便利なツール
Photoshop移行への決め手となったツール
β版の時点から話題になっていましたが、先日正式リリースされたようです。
試用期間として一部機能が無料で利用できます。
avocodeのプラグインを追加することでpsdデータをavocodeのページで招待したユーザーのみに公開できます（閲覧者も登録が必要です）。デザインレビューの場面でかなり活躍するのではないでしょうか。リビジョンの機能もあり、Gitのように使うことができます。
また、有料プランでは画像のスライスやテキストのコピーなどがAvocodeのインターフェース上で行えるようで、マークアップの作業効率を上げる機能が含まれています。
以上、FireworksからPhotoshopへの移行する際に最低限やっておきたい設定をまとめてみました。photoshopはもともとwebに特化したアプリではないので、初期の設定が重要です。上手く使いこなせれば、Fireworksより効率的に作業ができると思います。
参考：
