Photoshop初心者がWEBデザインをするときのあれこれ

Pocket

以前、「Web制作におけるIllustratorを使うメリットと効率化の話」という記事を書いたのですが、今回はPhotoshop編です。

■環境設定

まずは環境設定(「command」 + 「K」 )を開き、WEB用に設定していきます。

ピクセルの設定

「環境設定」>「単位・定規」
「定規」と「文字」の単位を「pixel」に変更します。

ガイドの設定

「環境設定」 > 「ガイド・グリッド・スライス」
「グリッド」の単位を100px 20分割に変更します。

この設定をしておくと、グリッド表示(「command」 + 「@」 )にした状態でのオブジェクト移動(← →)が5px刻みになります。
(10pxごとにしたい場合は10px 10分割にすればOK)

■Photoshop初心者あるある問題

長方形ツールをつかうときににじむ…

CS6より古いバージョンの場合、px単位で描画しないとにじんでしまうことがあります。
「長方形ツール」を選択している状態で、「エッジを整列」にチェックを入っているかチェックしてみましょう。

オブジェクトの移動・選択がしづらい…

「移動ツール」を選択している状態で、「自動選択」にチェックし、「レイヤー」を選択しておくと、カンバスウィンドウでもオブジェクトが自由に選択できるようになります。

「command」 + 「z」で戻らない

Photoshopの一段階より前に戻るのショートカットは「command」 + 「option」 + 「z」です。
ショートカットの編集から「command」 + 「z」に変更しておくと便利です。

「command」+「C」でレイヤーをコピーできない

「command」+「J」で現在選択しているレイヤーの上にレイヤーをコピーすることができます。
ちなみに、現在選択しているレイヤーの上に新規でレイヤーを作成したいときは「command」+「Alt」+「J」になります。

テキスト編集しようとすると、新規でテキストレイヤーができる

テキストを編集するときは「テキストツール(T)」に変更してからテキストをクリックする必要があります。
Fireworksのように、ダブルクリックでテキスト編集ができるようにしてほしいです。

カンバスの中央にオブジェクトを配置したい

移動ツール(v)→ 全選択(「ctrl」 + 「A」) した後に、 「垂直方向中央揃え」と「水平方向中央揃え」でカンバスの上下中央に配置できます。

ガイドを数値で設定して引きたい

「表示」→「新規ガイド」から「方向」と「位置」を入力すると原点を基準としてガイドを引くことができます。

■覚えておくと便利なショートカット

●100%表示
「option」 + 「0」

●カーニング(+−20)
「option」 + 「←」or「→」

●altドラックでコピー
「command」+「ctrl」+「C」

●複製
「option」+ ドラック

●レイヤーを選択
「option」+「[」or 「]」 で一つ上もしくは一つ下のレイヤーを選択

●選択したレイヤーの移動
「command」+「[」 or 「]」

■レイヤー関連の便利機能

PhotoshopはFireworksと違い、レイヤーをきれいにすることがとても重要になってきます。
レイヤー周りで便利な機能をいくつかピックアップしてみました。

レイヤーで絞り込み検索できる

レイヤー名だけでなく、属性、スタイルなどで検索できます。

レイヤーカラーを設定できる

■便利な拡張機能

LayerCraft
retinaディスプレイ用に高解像度な画像を書き出したい場合に便利なエクステンションです。
すごく便利なのですが、CC2014までしか対応していないのが残念なところ…。

GuideGuide
マージンやカラム幅などを設定すると自動でガイドを引いてくれるエクステンションです。

Swatchy
スウォッチをフォルダで管理してくれるエクステンションです。

Prisma | Code Adventure | Simplify Workflows for Designers
オブジェクトのカラーを一括で変更したいときに便利なエクステンションです。

Ink. A Photoshop documentor plugin
romashamin/Size-Marks-PS · GitHub
オブジェクトのサイズやフォントなどの情報をドキュメント化してくれるエクステンションです。
ベクターであればInk、ビットマップやマージンの情報もほしい場合はSize Marksが便利です。

Adobe Color CC Panel : Adobe Add-ons
カラーテーマを簡単に作成・共有できるエクステンションです。
iPhoneのアプリもあるので、外で好きな配色を見つけてストックしておき、後でPhotoshopで確認することもできます。

その他のエクステンションについては公式サイトからどうぞ。
Adobe Add-ons

中の人について

matsui
大阪でwebのお仕事をしています。
ブログでは最近学んだことや、勉強会に参加したことを書いてます。