Photoshop の基本的なこと

CATEGORY: Usage

2014年1月1日

Photoshop の基本的なことに関する個人的なメモ。

環境設定

環境設定ダイアログ：Ctrl + K (Command + K)

単位・定規

「定規」と「文字」を pixel に設定

ガイド・グリッド・スライス

「グリッド」の例: カラー：カスタム（#CCCCCC）
スタイル：点線
グリッド線：「値（グリッドの間隔の値）」：100、「単位」：pixel、
分割数（１つのグリッド内の分割線の数）：20
必要に応じて、このオプションの単位を変更。「％」を選択すると、画像を均等に分割するグリッドを作成できる。例えば、「％」で 25 を指定すると、画像を縦と横に 4 分割するグリッドが作成される。

ショートカットの変更

「１段階戻る」のデフォルトは Ctrl + Alt + Z (Command + Option + Z)
これを「Ctrl + Z (Command + Z)」に変更する場合

「編集」→「キーボードショートカット…」
「編集」の左横の▲をクリックして変更（使用するショートカットキーを押す）

一段進むは Ctrl + Shift + Z

ショートカット

新規作成：Ctrl + N (Command + N)
自由変形（Transform）：Ctrl + T (Command + T)
選択の解除：Ctrl + D (Command + D)
全てを選択：Ctrl + A (Command + A)
別名で保存：Ctrl + Shift + S (Command + Shift + S)
Web 用に保存：Ctrl + Alt + Shift + S (Command + Option + Shift + S)
閉じる：Ctrl + W (Command + W)
全てを閉じる：Alt + Ctrl + W (Option + Command + W)

画像解像度（サイズ）：Ctrl + Alt + I (Command + Option + I)

定規（ルーラー）の表示：Ctrl + R (Command + R)

ズームイン：Ctrl + + (Command + +)
ズームアウト：Ctrl + – (Command + -)
100% 表示： Ctrl + 1 (Command + 1)
画面サイズに合わせる：Ctrl + 0 (Command + 0)

描画色で塗りつぶす：Alt + Back Space (Option + Delete)
背景色で塗りつぶす：Ctrl + Back Space (Command + Delete)

現在選択しているレイヤーの１つ上のレイヤーを選択：Alt + ] (Option + ])
現在選択しているレイヤーの１つ下のレイヤーを選択：Alt + [ (Option + [)
現在選択しているレイヤーの１つ上に移動：Ctrl + ] (Command + ])
現在選択しているレイヤーの１つ下に移動：Ctrl + [ (Command + [)

レイヤーの複製：Ctrl + J (Command + J)

描画色と背景色を初期設定に戻す（Default）：D キー（日本語入力オフ）

ツール類（日本語入力オフ）

移動ツール：V キー
テキストツール：T キー
図形ツール：U キー
長方（楕円）形選択ツール：M キー
クイック選択（自動選択）ツール：W キー
パスコンポーネント選択ツール（黒矢印）、パス選択ツール（白矢印）：A キー
グラデーションツール：G キー
ブラシ、鉛筆ツール：B キー
ズームツール：Z キー

矢印キーでの移動：1px
Shift + 矢印キーでの移動：10px

復帰：F12

基本次項

パネルの開閉
パネルのタブの部分をダブルクリック

新規作成

新規作成（Ctrl + N / Command + N)
プリセット：Web を選択

描画色と背景色を初期設定に戻す

D キー（日本語入力オフ）
描画色は「黒」、背景色が「白」になる

復帰

メニューの「ファイル」→「復帰」（F12）を選択すると、ファイルを保存した直後の状態に戻る

レイヤーの自動選択

移動ツール（V キー）を選択した際に、メニューにある「自動選択」にチェックを入れる

ファイル間でのコピー・ペースト

二つファイルを開いた状態で、「ウインドウ」→「アレンジ」→「並べて表示」で並べて表示させる。（表示を戻すには「ウインドウ」→「アレンジ」→「すべてをタブに統合」を選択）

コピーしたいオブジェクト（複数選択可能）を目的のファイルのウィンドウへドラッグ
または、コピーしたいレイヤー（複数選択可能）を目的のファイルのウィンドウへドラッグ

カンバスサイズが全く同じであれば、Shift を押しながらオブジェクトをドラッグすると、全く同じ位置にコピー可能。

スマートオブジェクト

ビットマップ画像を変形したり、フィルターをかけたりすると画質が劣化していき、特に何度も変形したりフィルタをかけると一気に画質が落ちてしまう。

これを防ぐためには「スマートオブジェクト」機能を使う。

レイヤーを選択して右クリックで「スマートオブジェクトに変換」を選択する。

図形

グリッドの表示
「表示」→「表示・非表示」→「グリッド」

図形ツールのショートカット：U（日本語入力オフ）
移動ツールのショートカット：V（日本語入力オフ）
長方（楕円）形選択ツール：M（日本語入力オフ）
パスコンポーネント選択ツール（黒矢印）のショートカット：A（日本語入力オフ）

サイズを指定して長方形を作成

長方形ツールを選択して、カンバスの適当な位置（または配置したい位置）でクリックして数値を入力

サイズを指定して長方形を変形

自由変形（Transform）のショートカット：Ctrl + T (Command + T)

移動ツールで変形したい長方形をクリックして選択
Ctrl + T (Command + T)
画面上部のオプションバーの W と H に値を指定（単位を変更するには右クリック）
2回 Enter を押す

拡大・縮小

ハンドルを斜め方向にドラッグする
Shift を押しながらドラッグすると縦横比を維持したまま拡大・縮小ができる。
Alt（Command)を押しながらドラッグすると中心から拡大・縮小できる。
Shift + Alt（Command)を押しながらドラッグすると中心から縦横比を維持したまま拡大・縮小ができる。

縦横比を維持したまま拡大・縮小

前述の「Shift を押しながらドラッグする」方法の他に、「Ctrl + T (Command + T) 」で自由変形モードにしてオプションバーの「W」と「H」の間の鎖のアイコン（縦横比を固定）をクリックして、「W」か「H」のどちらかに値を入力すると縦横比を維持したまま拡大・縮小することができる。（単位は % のほかにピクセル等を指定可能）

位置を指定して長方形を移動

移動ツールで変形したい長方形をクリックして選択
Ctrl + T (Command + T)
画面上部のオプションバーの左端の「基準点の位置」を左上に変更
画面上部のオプションバーの X と Y に値を指定

定規（ルーラー）の表示のショートカット：Ctrl + R (Command + R)

ライブシェイプの属性を使う

ライブシェイプの属性で「高さ、幅、位置、境界線、色、角丸」等を設定できる

移動ツール（V）で図形を選択
パスコンポーネント選択ツール（A）でその図形を選択
ライブシェイプの属性が表示されるので必要な値を入力して指定

選択したレイヤーをカンバスの中心に移動

選択したレイヤー（長方形やテキストなど）をカンバスの中心に移動する方法

移動ツール（V）でレイヤーを選択
Ctrl + A (Command + A)でカンバス全体を選択
オプションバーの「垂直方向中央揃え」と「水平方向中央揃え」をクリック
Ctrl + D (Command + D)で選択を解除

すでに作成した図形の色の変更

レイヤーパネルのサムネイルをダブルクリック

図形ツールで作成した色をスポイトツールで別の色に変更

レイヤーパネルのサムネイルをダブルクリックして、スポイトで色を採取

図形の複製

移動ツール（V）で Alt (Option) キーを押しながら図形をドラッグする

四角形から三角形を作る

長方形ツールで四角形を作成し、その対角線を元に三角形を作成する方法

長方形ツールで四角形を作成
パス選択ツール（A キー：白矢印）を選択
作成した長方形の１つのアンカーポイントをクリック（選択したアンカーポイントが黒になる）
Delete キーを押すと選択したアンカーポイントが削除され、三角形になる

円で行えば半円が作成できる。

選択

複数のオブジェクトが重なって選択しずらい場合、選択したくないオブジェクトのレイヤーをロックしておくと、ドラッグで選択する際に、それらのオブジェクトは選択されない。

選択範囲の変更

選択ツールで選択状態にする
Alt（Option）キーを押しながら、余分な部分を選択ツールで囲むとその部分が選択範囲から削除される
選択ツールは「長方形選択ツール」や「楕円選択ツール」を組み合わせて使用することができる

縮小

選択した状態で、メニューの「選択範囲」→「選択範囲を変更」→「縮小」を選択
縮小量を指定する

特定の色を元に選択範囲を作成

「選択範囲」→「色域指定」

文字

テキストツールのショートカット：T（日本語入力オフ）
文字入力の確定：Ctrl + Enter (Command + Enter)
全ての文字の選択：テキストツールで文字の部分をトリプルクリック

行送りの設定

行送り：文字のベースラインと次の行の文字のベースラインの間隔（行間ではない）
最低でもフォントサイズより大きくしないと行と行が重なってしまう。（line-height に近い？）

テキストツールをドラッグしてテキストボックスを作成
文字を入力（複数行）
文字を選択
文字パネルの「行送り」の値を指定。
文字パネルの「行送り」の値（入力エリア）にカーソルを置いて上下の矢印キーで微調整が可能

文字間の調整

テキストツールで調整したい場所をクリック
Alt キー（Option キー）を押しながら、左右の矢印キーを押すと「20」ずつ詰めたり開けたりできる

また「選択した文字にツメを設定」で自動的に文字の間隔を詰めることも可能。（20%ぐらいが Web の場合の目安）

テキストツールの特性

テキストツールでテキストを新規作成する際「最後に選択したテキストレイヤーの属性（フォントファミリー、サイズなど）を引き継ぐ」という特性がある。

すでに、いくつかのテキストレイヤーを作成している場合、同じ属性のテキストを作成する際は、この特性を利用して、テキストツールを選択後、同じ属性のテキストレイヤーを一度選択することで、同じ属性を使用することができる。

レイヤー

基本設定

パネルオプション

レイヤーパネルの「レイヤーオプション」ボタンをクリック
「パネルオプション…」を選択
「サムネイルの内容」では「レイヤー範囲のみを表示」にしておくと、ビットマップレイヤーの内容が見やすくなる

レイヤー名に「コピー」をつけないようにする

複製されたレイヤー名の最後に「コピー」や「コピー2」を付けないようにする方法

レイヤーパネルの「レイヤーオプション」ボタンをクリック
「パネルオプション…」を選択
一番下の「コピーしたレイヤーとグループに[コピー]を追加」のチェックを外す

レイヤーのショートカット

現在選択しているレイヤーの１つ上のレイヤーを選択：Alt + ] (Option + ])
現在選択しているレイヤーの１つ下のレイヤーを選択：Alt + [ (Option + [)

現在選択しているレイヤーを１つ上に移動：Ctrl + ] (Command + ])
現在選択しているレイヤーを１つ下に移動：Ctrl + [ (Command + [)

新規レイヤーの作成

新規レイヤーは、その直前に選択していたレイヤーの１つ上に作成される
通常のレイヤーの作成：レイヤーパネルの下の「ファイル」のアイコンをクリック
塗りつぶし（グラデーション）・調整レイヤーの作成：レイヤーパネルの下の「ボールのような丸」のアイコンをクリック

グラデーションレイヤーの作成

「ボールのような丸」のアイコンをクリック
「グラデーション…」を選択
「グラデーションで塗りつぶし」ダイアログの「グラデーション」の右のプルダウンで種類を選択（必要であれば）
「スタイル」や「角度」、方向などを設定（必要であれば）
「グラデーション」の右のプルダウン部分をクリック
下のカラー分岐点で色を設定
必要であれば上のカラー分岐点で不透明度を設定
Enter を2回押す

テクスチャの作成例

パネル下の「ファイル」のアイコンをクリックして新規レイヤーを作成
ツールの下のほうにある「背景色」を目的の色に設定
作成したレイヤーを背景色で塗りつぶす：Ctrl + Back Space (Command + Delete)
メニューの「フィルタ」→「描画」→「ファイバ」を選択
「変化」や「強さ」を設定
Enter を押す
その状態でキーボードの「5」を押すと「不透明度」が50% になる

レイヤーの複製
ショートカット：Ctrl + J (Command + J)

調整レイヤーの作成

写真などの色相・彩度、明るさ、レベルなどを調整する際に利用するレイヤー。

色相・彩度を調整する例

調整する写真などのレイヤーを選択
メニューの「レイヤー」→「新規調整レイヤー」→「色相・彩度」を選択
「新規レイヤー」ダイアログで「下のレイヤーを使用してクリッピングマスクを作成」にチェックを入れる（後述「クリッピングマスク」参照）
「属性パネル」が表示されるので、彩度や明度を調整する

クリッピングマスク

特定のレイヤーのみに効果を適用する場合に使用する。前述の場合、「下のレイヤーを使用してクリッピングマスクを作成」にチェックを入れないと効果はそのレイヤー以下の全てのレイヤーに効果が適用される。

レイヤースタイル

レイヤースタイルダイアログの表示

レイヤーパネルで目的のレイヤーを選択
下にある「fx」をクリック
目的の効果を選択

ドロップシャドウ

角度：標準では120度（左斜め上から右下方向）。最近のWEBでは90度が使われることが多い。
距離：ドロップシャドウをつける対象からドロップシャドウまでの距離
サイズ：ドロップシャドウの大きさ（おおきいほどぼやけて見える）
スプレッド：「サイズ」の範囲内でどれぐらいドロップシャドウを広げるか

境界線

「内側」を選択 → 外側を選択するとその分サイズが大きくなってしまう。

★ Photoshop には１つのレイヤーに同じレイヤースタイルを複数適用することができないので、複数の境界線を作成する場合、「ドロップシャドウ」や「光彩（外側・内側）」などを使って擬似的に境界線を作成する。

「ドロップシャドウ」の場合：「スプレッド」を100% にし、「距離（0にする等）」や「不透明度（100%にする等）」を調整。
「光彩（外側・内側）」の場合：「不透明度」、「範囲」を100% にするなど調整。

グラデーションオーバーレイ

描画モード：
Illustrator などのファイルを Photoshop で使用する場合、Illustrator で設定した線や影などを見えるようにするには「乗算」に設定する

レイヤースタイルを使いまわす

一度作ったレイヤースタイルを他のレイヤーにも適用する方法

1. レイヤースタイルのコピー

作成した（使用したい）レイヤー名の上で右クリック
「レイヤースタイルをコピー」を選択
適用するレイヤー名の上で右クリック
「レイヤースタイルをペースト」を選択

2. レイヤースタイルの複製

作成した（使用したい）レイヤーの「fx アイコン」を Alt (Option)キーを押しながら、適用するレイヤーにドラッグ

3. 新規スタイルとして登録

登録したいレイヤーの「fx アイコン」をダブルクリック
右側にある「新規スタイル」をクリック
「新規スタイル」ダイアログが開くのでわかりやすい名前を入力
スタイルパネルに登録される

整列

レイヤー同士の整列

移動ツール（V）で複数のレイヤーを選択すると、オプションバーの整列アイコンが使用可能になるので、それらを使って整列させる。

例「右揃え」：選択したレイヤーの中で一番右端の部分に他のレイヤーの右端を揃える機能

カンバスに整列

Photoshop には、「カンバスに整列」という機能はないのが「選択したレイヤーをカンバスの中心に移動」と同じ方法で可能。

移動ツール（V）でレイヤーを選択して「Ctrl + A (Command + A)」でカンバス全体を選択
オプションバーの「右端揃え」や「水平方向中央揃え」などを実行
Ctrl + D (Command + D)で選択を解除

２つのレイヤーを重ねる

テキストレイヤー（文字）と長方形レイヤー（シェイプ）の中央を揃える例（ボタンの文字など）

移動ツール（V）でドラッグして２つのレイヤーを選択
オプションバーの「垂直方向中央揃え」をクリック
オプションバーの「水平方向中央揃え」

２つの同じ大きさのシェープなどを重ねる方法（上と同じ）

移動ツール（V）で２つのレイヤーを選択（ドラッグまたはShift)
オプションバーの「垂直方向中央揃え」と「水平方向中央揃え」をクリック

図形を基準として、文字レイヤーを中央に揃える

Ctrl（Command）キーを押しながら図形のレイヤーパネルのサムネイルをクリック（図形が選択状態になる）
この状態で文字レイヤーをクリック
オプションバーの「垂直方向中央揃え」と「水平方向中央揃え」をクリック
Ctrl + D (Command + D)で選択を解除

図形（オブジェクト）を基準として、他のレイヤーを揃える

「図形を基準として、文字レイヤーを中央に揃える」とほぼ同じ。

Ctrl（Command）キーを押しながら、基準とする図形（オブジェクト）のレイヤーパネルのサムネイルをクリック（図形が選択状態になる）。または、基準とする範囲を選択ツール（Mキー）で選択状態にする。
この状態で揃えるレイヤーをクリック
オプションバーの「垂直方向中央揃え」や「水平方向中央揃え」などをクリック
Ctrl + D (Command + D)で選択を解除

塗りつぶし

描画色や背景色で塗りつぶす方法

塗りつぶすレイヤー（背景など）を選択して、ツールの下のほうにある「描画色」「背景色」を設定しておく。

描画色で塗りつぶす：Alt + Back Space (Option + Delete)
背景色で塗りつぶす：Ctrl + Back Space (Command + Delete)

描画色と背景色を初期設定（描画色「黒」、背景色が「白」）に戻すには「D キー」

選択範囲を塗りつぶす方法

ペンツール等で選択範囲を作成
レイヤー → 新規塗りつぶしレイヤー → べた塗りを実行
新規レイヤーダイアログが表示されるので、OK。
カラーピッカーが表示されるので色を指定

枠線

一番上のレイヤーに黒い枠線を追加する例。

レイヤーパネルで一番上のレイヤーをクリックして選択し、「新規レイヤーを作成」をクリック
新しく追加されたレイヤーを選択
長方形選択ツール（M）にして、Ctrl（Command）+ A
カンバス上で右クリックして「境界線を描く…」を選択
「境界線」ダイアログが開くので、色や太さ、位置を指定

ズームインとズームアウト

ズームイン：Ctrl + + (Command + +)
ズームアウト：Ctrl + – (Command + -)
100% 表示： Ctrl + 1 (Command + 1)
画面サイズに合わせる：Ctrl + 0 (Command + 0)

「+, -, 1, 0」はテンキーでないと機能しない場合がある

写真の枠の作成

枠を付ける写真のレイヤーを選択
「レイヤースタイルを追加（fx）」をクリックして「境界線…」を選択
サイズ：1px
位置：内側
カラー：#CCC
を指定して境界線のレイヤースタイルを適用
枠を付ける写真のレイヤーを選択したままで
「レイヤースタイルを追加（fx）」をクリックして「光彩（内側）…」を選択
描画モード：通常
不透明度：100%
カラー：#FFF
チョーク：100%
サイズ：8px
範囲：100%
を指定して光彩（内側）のレイヤースタイルを適用

写真の両端がめくれたように見える影をつける

レイヤーパネルで「背景レイヤー」を選択
長方形ツールを選択して、カンバス上でクリックし、写真と同じ大きさの長方形（色は黒）を作成（写真の下に長方形ができる。そうでなければレイヤーの順番を入れ替え）
移動ツール（V）で両方のレイヤーを選択（ドラッグまたはShift)
オプションバーの「垂直方向中央揃え」と「水平方向中央揃え」をクリック（写真と長方形が重なる）
レイヤーパネルで長方形を選択し右クリックして「スマートオブジェクトに変換」を選択
長方形が選択された状態でメニューの「フィルタ」→「ぼかし」→「ぼかし（ガウス）」を選択し「半径」に「2」と入力して Enterキーを押して確定
そのまま Ctrl + T を押すと「変形をプレビュー中は…」と表示されるので Enter を押す
オプションバーの右端に出た「自由変形モードとワープモードの切り替え」をクリック
「ワープモード」になり12個の点が表示される
右下と左下の点を少しだけ下にドラッグしてEnter を押す
「長方形」レイヤーが選択された状態で、キーボードの数字の「3」キーを押すと、レイヤーが薄く表示される
うまくいかない場合、日本語入力をオフにしてもう一度3キーを押してみるか、レイヤーパネルの「不透明度」の右に「30」と入力して不透明度を調整

写真の真ん中を膨らませたような影をつける

レイヤーパネルで「背景レイヤー」を選択
「楕円形ツール」を選択（色は黒）
カンバス上でクリックし、「幅」に写真の幅、「高さ」に「20（大きさにより調整）」と入力し楕円形を作成
レイヤーパネル上で「楕円形」のレイヤー名を右クリックし「スマートオブジェクトに変換」を選択
メニューの「フィルター＞ぼかし＞ぼかし (ガウス)…」を選択を選択
「半径」を「2」pixelにし、Enterキーを押して確定
移動ツール（V）で、ドラッグして「楕円形」と「写真」レイヤーを選択し、オプションバーの「下端揃え」と「水平方向中央揃え」をクリックして重ねる
「楕円形」のレイヤーを選択しわずかに下に移動（↓キーを7回押す）
そのまま「楕円形」レイヤーが選択された状態で、キーボードの数字の「3」キーを押すと、レイヤーが薄く表示される。
もしうまくいかない場合、日本語入力をオフにしてもう一度3キーを押してみるか、レイヤーパネルの「不透明度」の右に「30」と入力して不透明度を調整

写真に選択範囲を作成

写真の特定の部分を切り取って使う場合の選択範囲の作成の例

写真を開き、クイック選択ツール（W）を選択
オプションバーの「直径」を調整
選択する部分をジグザグにドラッグ
オプションバーの「境界線を調整」をクリック
ダイアログの「表示」の右の ▼ をクリックして「黒地」を選択
（選択範囲に含まれていない部分が黒く表示される。写真により適切なものを選ぶ）
ダイアログを開いたまま（見ずらければ移動する）オプションバーの「直径」を調整
「白く見えている部分」をドラッグして余計な部分を取り除く
もしドラッグし過ぎて必要な部分まで取り除いた場合は「Alt（Option）キー」を押しながらドラッグすると復元できる
終了したら Enter キーを押すと選択範囲が作成される
メニューの「選択範囲」→「選択範囲を保存…」を選択して名前を付けて保存
画像を Phothoshop 形式（.psd）で保存

選択範囲を保存しておけば、解像度を変更などして選択範囲が消えてもメニュー「選択範囲」→「選択範囲を読み込む…」で選択範囲を復元できる。その際表示されるダイアログで「チャンネル」名が選択範囲を保存して時に付けた名前であることを確認する。

参考：http://stocker.jp/book/web-design/chapter5.php

Illustrator のデータのペースト

イラストレーターのデータをコピーして、Photoshop にペーストする場合、「ペースト」ダイアログでは「スマートオブジェクト」を選択する。

また、ペースト直後は「自由変形モード」になっているので Enter キーを押して確定するか、オプションバーの丸印をクリック。

背景用パターンの例

写真などの上に白い点で作ったパターンを入れる例。

背景となる写真を開いておく
Ctrl + N で新規作成
プリセットを「Web」、幅を「4」、高さを「4」、カンバスカラーを「透明」に指定
Ctrl + + でズームインして最大に表示する（最大は3200%）
Dキー、Xキーを押して「描画色」を「白」にする
鉛筆ツールを選択
オプションバーの左のほうの ▼ をクリックして「直径」を「1px」、「硬さ」を「100%」に指定
オプションバーの「不透明度」が「100%」になっていることを確認
カンバスの一番右下の部分（X:3、Y:3）をクリックして 1px の点を作成
「ウィンドウ」→「情報」を選択して情報パネルを表示
情報パネルを見ながら「X:1、Y:1」と表示される位置でクリックして 1px の点を作成
「編集」→「パターンを定義」を選択
2箇所が白くなっていることを確認して Enter キーをクリック
このパターン用ファイルは不要なので閉じる（保存しなくてよい）
背景となる写真のファイルに戻る
背景写真のレイヤーを選択して、レイヤーパネルの下の白いボールのようなアイコンをクリックし、「パターン」を選択
「パターンで塗りつぶし」ダイアログが表示され、作成したパターンで塗りつぶされているはずなので Enter をクリック（もし違うパターンが表示されている場合は、 ▼ をクリックして作成したパターンを選択）
移動ツール（Vキー）にして、3（半角）を押すと、パターンのレイヤーの不透明度が30%になる

写真をグラデーションで部分的に透明に

背景となる画像を配置。
グラデーションをかける画像をそのレイヤーの上に配置。
グラデーションをかける画像のレイヤーを選択した（アクティブな）状態で、レイヤーマスクを追加。
Dキーを押す（描画色を黒、背景色を白にする）
レイヤーマスクが選択された状態で、グラデーションツールを選択（Gキー）。
オプションバーでグラデーションの形状を選択（リニア）
グラデーションツールでグラデーションをかける画像の上をドラッグ
反対側にグラデーションがかかってしまう場合はオプションバーの「逆方向」にチェックを入れてみる

★レイヤーマスクの白く塗られている部分が見えている部分で、黒く塗られている部分が隠れている部分。

両端をグラデーションで透明に

背景となる画像を配置。
グラデーションをかける画像をそのレイヤーの上に配置。
グラデーションをかける画像のレイヤーを選択した（アクティブな）状態で、レイヤーマスクを追加。
レイヤーマスクが選択された状態で、グラデーションツールを選択。
オプションバーでグラデーションの形状を選択（リニア）
グラデーションサンプルをクリックして「グラデーションエディタ」を開く
プリセットからベースとなるもの（黒、白）を選択
両側が透明になるようにグラデーションを設定（して保存）
グラデーションツールでグラデーションをかける画像の上をドラッグ

周囲をぼかす

ぼかす画像の選択範囲を作成（長方形・楕円選択ツール、なげなわツール等）
選択範囲 → 選択範囲を変更 → 境界をぼかす
ぼかしの半径を入力
選択範囲をコピーして貼り付ける

スライス・デザインカンプからの書き出し

作成したデザインカンプを別名で保存（Ctrl + Shift + S）しておくと、スライスの作業での変更などの影響を受けなくて済む。

スライスを「Web 用に保存する」際には、「選択したスライス」、「すべてのユーザー定義スライス」、「全てのスライス（自動スライスを含む）」がある。

自動スライスの不要な線が表示される場合

自動スライスを隠すには、スライス選択ツール（スライスツールではない）を選択し、オプションバーの「自動スライスを隠す」をクリックする。

背景画像（写真）の書き出し

レイヤーパネルで、背景画像（写真）のレイヤーの目の部分を Alt キー（Optionキー）を押しながらクリック
背景画像（写真）のレイヤーだけが表示された状態になる
メニューの「イメージ」→「トリミング」を選択
「トリミング」ダイアログで「透明ピクセル」にチェックが入っており、「上端」「下端」「左端」「右端」にそれぞれチェックが入っていることを確認し、Enter をクリック
必要に応じて背景（べた塗りのレイヤー）をクリックして表示させる
Web 用に保存する

個別にスライスして書き出し

スライスツールでドラッグして書き出したい画像を選択する（ドラッグした範囲がユーザー定義スライスとなる）
スライスを編集する場合は、スライス選択ツールで作成済みのスライスをクリックしてアクティブにし、自由変形と同じ操作で８つのハンドルをドラッグして任意の形に変更する
Web 用に保存する際に「保存」をクリックした後「最適化ファイルを別名で保存」ダイアログの下のほうで「フォーマット」を「画像のみ」、「スライス」を「選択したスライス」を選択する
スライスを削除するには、右クリックして「スライスを削除」を選択
スライスを編集する（名前などをつけたりする）には右クリックで「スライスを編集」をクリック

レイヤーからスライスを作成

レイヤーパネルから、スライスにしたいレイヤーを選択（複数選択可能）
メニューの「レイヤー」→「レイヤーに基づく新規スライス」を選択
上記を必要なだけ繰り返す
Web 用に保存する

複数のレイヤーを１つのスライスにまとめる

画像を別々のパーツで作成してある場合やテキストと画像を１つのスライスにまとめるには、Ctrl キーを押しながらそれらを選択して、レイヤーパネルの右上のオプションをクリックして「スマートオブジェクトに変換」を選択すると、1つのレイヤーにまとめることができる。

スライスに名前を付ける

スライス選択ツールを選択し、名前を付けたいスライスをダブルクリック
「スライスオプション」ダイアログが表示されるので、「名前」を入力する

複数のスライスを異なる形式で書き出す

複数のスライスを作成して、書き出す際に例えば JPEG と PNG など異なる形式で書き出したい場合。

「Web 用に保存する」際に右上のドロップダウンリスト（プリセット）に表示されている形式が全てのスライスに適用される。
このドロップダウンリストの形式が、希望する形式でない場合は、全体をドラッグして選択し、希望する形式を選択する。
その後、特定のスライスを選択して、それぞれ希望する形式を選択して保存する

白黒のダミーの背景画像の作成

マークアップする時に位置調整をする際に、背景に完成状態の画像が表示されていると、位置あわせが楽になる。

デザインカンプの .psd ファイルの一番上のレイヤーを選択
レイヤーパネル下の白と黒のボールのアイコンをクリックし「白黒…」を選択
Web 用に保存（プリセットは PNG-24 を選択）

この画像を body 要素の background に指定する。

body {
  background: url(images/bg_dummy.png) top center;
}

Web Design Leaves