Photoshopでの作業がはかどる！ウェブデザイン（特にスマフォ）用の効果的な環境設定のまとめ
Post on:2014年4月22日
sponsors
Photoshopでウェブページやスマフォページのユーザインターフェイスをデザインする時に、最も良い結果がでる最適な環境設定を紹介します。
最後の「作業のパフォーマンスを向上させる設定」はウェブデザインに限らず、Photoshopの動作がもっさりしている人は見直してみてください。
How To Set Up Photoshop For UI Design
下記は各ポイントを意訳したもので、画像は当方のPhotoshop日本語版です。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。海外の多くのブロガーからあのブログでの無断翻訳・転載の声を聞くのでご注意ください。
環境設定はiPhone用を例にしていますが、基本的なポイントは全てのウェブデザイン作業に適用できます。
新規ドキュメントの設定
まずはPhotoshopを開き、UIの仕事に備えて新規ドキュメントの準備をしましょう。
設定
Photoshopを開き → ファイル → 新規
ここではiPhoneをベースにするため、下記の値になります。
- 幅: 640 pixel
- 高さ: 1136 pixel
- 解像度: 72 pixel/inch
- カラーモード: RGBカラー
- カンバスカラー: 白（変更可）
- カラープロファイル: このドキュメントのカラーマネジメントは行わない
- ピクセル縦横比: 正方形ピクセル
基本となる新規ドキュメントの値を入力したら、せっかくなのでプリセットに登録し、いつでも使えるようにしましょう。
設定
「新規ドキュメント」のパネルから「プリセットを保存」
これでプリセットから簡単に利用できるようになります。
スナップの設定
UIのエレメントをデザインする上で重要なことの一つは、鮮明にくっきりしていること。ぼんやりとしたエッジやあいまいなグリッドは作業時間を無駄にしてしまいます。
Photoshopですべてのピクセルがくっきりするよう、スナップの正しい設定を適用しておきます。
設定
表示 → スナップをチェック
表示 → スナップ先の全てをチェック
スナップの設定はこれで終わりではありません。
次によく使用するベクターツールの設定を適用します。
設定
環境設定 → 一般内の「ベクトルツールと変形をピクセルグリッドにスナップ」をチェック
最後にもう一つ。
シェイプツールの設定も適用します。
設定
シェイプツールを選択 → エッジを整列をチェック
テキストの設定
テキストのアンチエイリアスの設定は、デザイン作業のクオリティに大きな影響を与えます。最近までPhotoshopではこのアンチエイリアスのiOS用のUIデザインに最も適した明確な答えはありませんでした。デザイナーによっては「鮮明」を好んだり、「滑らか」を好んだり。
もしPhotoshop CCを使っているなら、この問題は簡単です。Adobeは新しいアンチエイリアスを追加しました。「鮮明」や「滑らか」ではなく、「Mac」を選択するのが正しいです。もし、このバーが表示されていない場合は、ウインドウ → オプションをチェックしてください。
※CS 6には「Mac」や「Mac LCD」はありません。
Photoshopで選択するアンチエイリアスの設定は、プレビュー目的のためです。
光源の設定
iOSデバイス用のデザインをする時は、AppleのiOSヒューマンインターフェイスガイドラインに基づき、光源を90度に設定しておきましょう。
設定
レイヤー → レイヤースタイル → 包括光源
グリッドの設定
iOS用のUIを作成する最も良い方法の一つは、Retinaディスプレイをベースにデザインすることです。2pxをベースのグリッドとし、これにスナップさせることで、Retinaでも非Retinaディスプレイでも思い通りのシャープなピクセルでのデザインを可能にします。
設定
環境設定 → ガイド・グリッド・スライスから「グリッド線」を「2px」に
メニューの「表示」から「表示・非常時」でグリッドをチェックし3200%に拡大すると、個別のピクセルの境界を確認することができます。
画像を書き出す時の設定
iOS用のの画像を書き出すにはPhotoshopの「Web用に保存」をしますが、デフォルトの設定のままで使用するのは間違いです。
まず、「画質」は「バイキュービック法」を選択します。このバイキュービック法は「ニアレストネイバー法」「バイリニア法」よりも色調のグラデーションが滑らかになります。
バイキュービック法には3種類あり、滑らかなグラデーションには「ノーマルのバイキュービック法」、画像を拡大しても滑らかにするなら「滑らか」、画像を縮小してもくっきりさせるなら「シャープ」を選択します。
また、アンチエイリアスされていないエッジのある画像の鮮明な線を保持したまま保存するのであれば「ニアレストネイバー法」を使用します。このハードエッジは、アンチエイリアスより画像のために最もよく機能します。
設定
ファイル → Web用に保存
- プリセット
- PNG-24
- 透明部分
- チェックする
- インターレース
- チェックしない
- カラープロファイルの埋め込み
- チェックしない
- sRGBに変換
- チェックしない
- 画質
- バイキュービック法（上テキストを参考に最適な設定で）
Retinaディスプレイの設定
もしRetinaディスプレイのMacBook Proを使用しているなら、画面解像度は「最適(Retina)」を使用しているか確認してください。
設定
OS Xの設定、アップルマークからシステム環境設定 → ディスプレイ
カラーの設定
カラーマネージメントは非常に重要で、極めて複雑です。
Bjangoのアドバイスに基づき、iOSデザインに最適なカラーマネージメントをみてみましょう。
参考：Colour management and UI design
設定
- 編集 → カラー設定から「RGB」を「RGB モニター」に
- 「詳細オプション」の「テキストカラーブレンド部分をガンマ補正」を「オフ」に
- ドキュメントを開き、編集 → プロファイルの指定から「このドキュメントのカラーマネジメントを行わない」を「チェック」
- 表示 → 色の校正 はチェックしない
- 「Web用に保存」の時は「sRGBに変換」にチェックしない
- Photoshopでドキュメント間でコピーする時は同じカラープロファイルを持っていることを確認する
作業のパフォーマンスを向上させる設定
最後に、Photoshopがきびきび動作しないといったパフォーマンスを向上させる設定を行いましょう。設定を見直すことで、あなたのPhotoshopが快適に動作するようになります。
sponsors
