2015年12月15日

ナレッジ

①FireworksからPhotoshopへの移行する際に最低限やっておきたい設定まとめ

UI designer

こんにちは、デザイナーの佐々木です。

皆さんデザインツールは何を使っていますか?
アイスリーデザインではこれまで主なデザインツールとしてFireworksを使い続けてきました。
2013年5月のFireworks開発終了の発表以来、他ツールへの移行を考えてはいましたが、使い慣れたツールからなかなか離れられず早2年が経とうとしています。しかし、この度Fireworksで行っていた作業をPhotoshopへ移行することになりました。

Photoshopは使いづらい?

Fireworksを長く使っているとPhotoshopが使いづらい、とどうしても感じてしまいます。
初期設定のままでは確かに使いづらく特徴的な機能も覚えなければなりません。

Photoshopはそもそもwebに特化したツールではないので、初期設定からカスタムしてwebデザインに最適化していきます。使用感はFireworksとは全く別物なので、慣れる他ないですが、なるべくFireworksでできたことがスムーズできると良いですね。
ということで下準備として実際に行ったPhotoshopの設定をまとめてみました。

まずは環境設定から

まずはPhotoshopの環境設定からwebデザインに最適化していきます。
はじめに単位をpxにしておきましょう。Fireworksではあまり気にすることのなかった少数点のpxなどもPhotoshopでは考えなければいけません。
メニュー -> 環境設定 から設定します。

スクリーンショット-2015-03-09-18.58.22.jpg

ガイドの設定はお好みですが、こちらも単位がpxになっていることを確認しましょう。

スクリーンショット-2015-04-09-11.11.13.jpg

また、グリッド数と分割数を同じ数字に設定すると1pxずつ線が引かれます(例 : 10px/10)。
こうするとガイドを引くときに小数点になることが無くなります。
線のスタイルは破線か点線にしておくと見えづらさがある程度解消されます。
「一般」から「ベクトルツールと変形をピクセルグリッドにスナップ」にもチェックをいれましょう。

スクリーンショット-2015-04-09-11.26.15.jpg
Web制作の入門サイト – Adobe Pinch In

本家Adobeが公開している、Photoshopをwebデザインで活用するためのチュートリアルです。
Webデザインをする際の環境設定の方法が詳しく書かれています。

プラグイン

環境設定が整ったら便利なプラグインを入れましょう。全て無料で利用できます。

guide.jpg
GuideGuide Griddify QuickGuide

ガイド系は試しに3つほど入れてみました。
GuideGuideでは、設定したガイドを保存しておくことができるので、よく使うグリッドの設定を保存しておくと便利です。

Layrs Control2
Layrs Control2

複数レイヤーのリネーム機能や、不要なレイヤーの削除、スマートオブジェクト⇄ラスタライズの変換を行ってくれます。長く作業をしているといつの間にか空のレイヤーが出来ていたりしますが、このプラグインでまとめて削除することができます。
ある程度作業が進んだら、レイヤーを整理しておきましょう。

prisma
Prisma

シェイプやテキストの色をグループ化して管理できます。
同じ色の要素をまとめておけば、修正を入れたい場合など一発置換ができ便利です。

スウォッチ

style_color_introduction.png
Color – Style – Google design guidelines

GoogleのMaterial Designからもスウォッチが配布されています。
http://www.materialui.co/colorsが有名ですが、これを入れておけば困ることはないでしょう。

color-swatches-gradients

iOS 8 Color Swatches & gradients

iOS8で使用されているカラーとグラデーションのスウォッチです。
グラデーションがスウォッチとして登録されていると便利です。使用頻度の高い基本的なグラデーションセットを保存して、そこから微調整をすると良いと思います。

eye.png
整列・分布/ パスファインダー

Photoshopでの面倒な「整列・分布」「パスファインダー」の機能がパネルにまとまったプラグイン。Fireworksと同じような使用感が再現できます。
配布元のサイトでは他にも様々便利なエクステンションが公開されています。

ショートカットキー

Fireworksでは直感的に操作できた部分もPhotoshopでは難しく感じると思います。
キーボートショートカットも積極的に使っていきましょう。

(Windowsをお使いの方はcommandをctrlに置き換えてください。)

基本のショートカットキー

ツールパレット

V 移動ツール
A パス選択ツール
T 文字ツール
U 長方形ツール
I スポイトツール

Shift + ツール選択キーで隠れているツールを選択できます。
楕円形ツールを選択する場合は Shift + U を3回繰り返すことで選択できます。

よく使うショートカット

⌘ + A
全選択

⌘ + D
選択範囲を解除

⌘ + R
定規を表示

⌘ + : (コロン)
ガイドを表示

⌘ + T
自由変形

⌘ + enter
テキスト入力モードから抜ける。

Spaceキー
手のひらツールに切り替え。

⌘ + 0
全s体表示

⌘ + 1
100%で表示

ショートカットキーを追加しよう

Photoshopでの作業に慣れてきたら新しいショートカットを追加しましょう。
とりあえず私が追加したショートカットはこちら

⌘ + shift + E
スマートオブジェクトに変換

Fireworksではボタンのグラデーションなどを変更したい時に⌘ + shift + option + V でコピーした属性をペーストすることができました。
Photoshopでこれに変わるショートカットキーを追加しましょう。

⌘ + shift + option + C
レイヤースタイルをコピー

⌘ + shift + option + V
レイヤースタイルをペースト

⌘ + shift + option + X
レイヤースタイルを消す

さらに便利なツール

avocode.png
avocode

Photoshop移行への決め手となったツール
β版の時点から話題になっていましたが、先日正式リリースされたようです。
試用期間として一部機能が無料で利用できます。
avocodeのプラグインを追加することでpsdデータをavocodeのページで招待したユーザーのみに公開できます(閲覧者も登録が必要です)。デザインレビューの場面でかなり活躍するのではないでしょうか。リビジョンの機能もあり、Gitのように使うことができます。
また、有料プランでは画像のスライスやテキストのコピーなどがAvocodeのインターフェース上で行えるようで、マークアップの作業効率を上げる機能が含まれています。

以上、FireworksからPhotoshopへの移行する際に最低限やっておきたい設定をまとめてみました。photoshopはもともとwebに特化したアプリではないので、初期の設定が重要です。上手く使いこなせれば、Fireworksより効率的に作業ができると思います。

2015-12-15
FireworksからPhotoshopへの移行する際に最低限覚えておきたい操作方法まとめ こんにちは、デザイナーの佐

参考:

 

UI designer

Yuma Sasaki

西東京にある美大を卒業後、i3DESIGNに入社。meetsource.comやin-Pocketなど、i3DESIGNでwebサービスやアプリUI、自社プロダクトのデザインをしています。

関連する記事

おすすめの記事

Recruit

アイスリーデザインでは

一緒に働くメンバーを募集しています

採用情報はこちら矢印