Webデザインの知恵袋

選択に応じた移動ツール
「ドロップ時に変形」のチェックを外す

Webモードで新規ファイル作成するとアートボード
1つの画面の中にいくつかのサイズの作業領域がつくれるようになった
アートボードをグループ解除

カンバス

▼名称
メニューバー（上部）
オプションバー（上部下段）
ツールパネル（左側）
パネル（右側）
ドック（右側内側）
ドキュメントウィンドウ（中央）
ワークスペース（作業領域）
ステータスバー（下側）

ツールパネルの表示変更
左上の矢印クリックすれば1列表示・2列表示を切り替えることができる

パネルを畳む
右上の矢印をクリックする

タブをドラッグすると独立させることができる

▼パネルを処置設定に戻す
「ウィンドウ」→「ワークスペース」→「初期設定をリセット」
オプションバー右側のアイコンから「初期設定をリセット」選ぶこともできる

▼拡大・縮小・表示位置

・ズームツールでクリックする
・拡大したいところを長押しする
・「Alt」キーを押すと縮小モードに変更
・ズームツールをダブルクリックで100％表示に戻す
・手のひらツールをダブルクリックするとワークスペースぴったりに調整
・ドラッグで拡大表示もできる（スクラブズーム）
・オプションバーの「スクラブズーム」のチェックを外すと通常ズームに変更
・画面左下ステータスバーで表示倍率変更もできる
・オプションバーでマイナスの虫眼鏡を選択すれば縮小に固定できる
・手のひらツールで表示位置を変更
・「ウィンドウ」→「ナビゲーター」からスライダーで表示位置変更できる
・他のツール使用時は「Space」キー押すと一時的に手のひらツールに切り替え

▼ブラシツール

▼操作履歴
ヒストリーパネル
「ウィンドウ」→「ヒストリー」

作業工程を戻ったり進めたりすることができる

履歴が残せる数を変更する
「編集」→「環境設定」→「パフォーマンス」
パソコンのメモリを使うので大きすぎない数値にすること

「ファイル」→「復帰」ですべての作業を行う前に戻る

▼描画色と背景色
色の初期設定にもどすボタン

「消しゴムツール」→描画したものを消す

▼選択範囲の作成・解除

▼楕円形ツール
「Alt」押しながらドラッグすると中心から選択できる
さらに「Shift」押しながらだと正円の選択範囲ができる
さらに途中で「Space」押すと一旦移動できる

「イメージ」→「色調補正」→「色相・彩度」

▼自動選択ツール
許容値32
アンチエイリアスにチェックあり
隣接にチェックあり

クリックしたところと同じ色（もしくは近い色）を自動で選択してくれる
許容値→どのくらいの幅で選択するか
アンチエイリアス→境界のぼかし
隣接→クリックした所と隣り合っているところだけ選択

「Shift」キーでプラスで選択範囲を追加できる

▼クイック選択ツール
直径20px
なぞるようにドラッグして選択する
はみ出たところは「Alt」押しながらで選択解除

完璧主義にならなくても大丈夫。境界線のところにアンチエイリアス（ぼかし）がかかるから。

▼色調補正（おいしいサラダへ）
「なげなわツール」はフリーハンドで選択範囲をつくることができる
├「Shift」キー押しながらで選択範囲追加できる
└「Alt」キー押しながらでドラッグで囲むと選択範囲の削除ができる

クイックマスク
選択範囲のところとそうでないところを色分け表示してくれる
クイックマスク状態でブラシツール選ぶ
はみ出たら描画色を入れ替えて塗り直す
ダブルクリックすると「クイックマスクオプション」開く

「イメージ」→「色調補正」→「カラーバランス」

▼ペンツールを使った選択範囲の作成
ペンツールの「パス」
「Ctrl」キー押すと一時的にダイレクト選択ツール（パス選択ツール）
「Alt」キー押すとアンカーポイントの切り替えツールへ
中心点をポンッとクリックしてから次の地点でパス描く

パスパネルをダブルクリックでパスを保存
選択範囲を作成→パスで作ったところを選択範囲にする

▼自然な彩度に調整する
ちょっとだけ自然な感じに色味を調整

▼補正の種類
◆レベル補正
└「イメージ」→「色調補正」→「レベル補正」
◆自動トーン補正
└「イメージ」→「自動トーン補正」
◆自動コントラスト
└「イメージ」→「自動コントラスト」
◆トーンカーブ
└「イメージ」→「色調補正」→「トーンカーブ」
白いスポイトを選択し、画像の白い部分を「白点」としてセットする
黒いスポイトも同様
◆明るさ・コントラスト
└「イメージ」→「色調補正」→「明るさ・コントラスト」

▼アンシャープマスク
→量100にするとより鮮明なくっきりした画像へ

▼スナップショット
履歴を一時的に保存できる
写真を何度か補正して比較したいとき
普通は履歴が上書きされるので
→ドキュメントを閉じるとスナップショットやヒストリーは消える

▼覆い焼きツール・焼き込みツール
一部分だけ明るくしたりする

▼画像を白黒へ
「イメージ」→「色調補正」→「白黒」
カスタム選ぶと着色できる

▼ものさしツール
画像の傾きを修正する
「イメージ」→「画像の回転」
ものさしツールを使った状態で「画像の回転」を選ぶと自動で角度が入力されている

▼トリミング作業
1、切り抜きツールは、Enterキーorダブルクリックで切る抜き確定
2、長方形ツールで範囲を選択肢、「イメージ」→「切り抜き」でトリミング

▼レイヤー
「背景レイヤー」と「通常レイヤー」を使う
・「すべてをロック」を選択するとレイヤー固定
・「レイヤーの自動選択」をオフにすると対象を掴まなくても移動できる
・「レイヤーの自動選択」をオンにすると対象を掴まないと移動できない
└クリックした対象のレイヤーに自動的に切り替わる

通常レイヤーは透明なレイヤーなので、消しゴムを使ったときは透明な背景がでる

ダブルクリックすれば背景レイヤーを通常レイヤーに変換できる

▼別ファイルから複製
レイヤーを選択してコピーし、別ファイルでペースト（選んでるレイヤーの上に複製される）

「編集」→「自由変形」

「Shift」キー押しながら角をドラッグすると比率できる
そのまま移動もできる
Enterキーで変形の確定する

▼コピースタンプツール
「Alt」キー押しながらクリックでサンプリング

工程に合わせて複製を残しておいてからコピースタンプツールする

モード：通常
不透明度：100％
→これやらないとちゃんと消せない

▼レイヤーの複製
複製したいレイヤーを新規レイヤー作成ボタンにドラッグ＆ドロップすると複製できる

▼レタッチツール
補正をするツールの総称

【1】スポット修復ブラシツール
小さめの雲や小石
ドラッグしたところの周りのデータをサンプリングしてスタンプしてくれる
→ドラッグしたところを消してくれる

【2】パッチツール
大きめの雲
ドラッグで囲んで雲のない近いところへドラッグ＆ドロップすると消える

▼新規調整レイヤー
色調補正パネルは全部「新規調整レイヤー」の作成になる

【1】色相・彩度
「レイヤー」→「新規調整レイヤー」→「色相・彩度」
下のレイヤーのみに適用する
→全体ではなくレイヤーだけに適用（あとからいくらでも変更できる）
属性パネルが開くのでそこで色相などを調整する

【2】トーンカーブ
【3】レンズフィルタ

▼画像のサイズ調整
「イメージ」→「画像解像度」

▼カラーモード
WEBなどモニターでみるもの　→　RGBモード
印刷物など紙でみるもの　→　CMYKモード

「イメージ」→「モード」から変更できる

▼多角形選択ツール
ランプを1つだけ消す
多角形ツールで始点のところに終点を合わせるか、ダブルクリックをすることで選択範囲つくれる

▼塗りつぶし
「編集」→「塗りつぶし」
内容は「コンテンツに応じる」
→周りのデータに合わせてデータを塗りつぶしてくれる
「Ctrl」+「D」で選択範囲を消せばきれいさっぱり消せる

▼コンテンツに応じた移動ツール
もともとあった場所は自動で塗りつぶしてくれて、対象は移動してくれる

▼アルファチャンネル
選択範囲を保存するもの
チャンネルパネル→「選択範囲をチャンネルとして保存」→アルファチャンネルというものが追加される
or
「選択範囲」→「選択範囲を保存」

選択範囲を白、選択範囲外を黒に塗り分けて保存してくれる

背景レイヤーは透明な背景ではないから切り抜くことができない
背景レイヤーを通常レイヤーに変換
ロックのアイコンがなくなるのを確認する（消しゴムで消すと透明になる状態）

「選択範囲」→「選択範囲を読み込む」
チャンネルを先ほど保存したアルファチャンネルに設定してOK押す

選択範囲を反転させる
「Delete」キー
選択範囲を解除する

▼オブジェクトから選択範囲をつくる
「Ctrl」キーを押しながらレイヤーのサムネイルをクリックする
チャンネルパネルで保存しておく

選択範囲を読み込む方法
→チャンネルパネルから「Ctrl」キー押しながらサムネイルをクリックする

▼Vanishing Point
新規レイヤー作成
「フィルタ」→「Vanishing Point」
壁面を選択
ロゴマークファイル開いてコピーする
再びVanishing Point開いてペーストする

▼描画モード
合成したロゴを壁になじませる
選んでるレイヤーと下にあるレイヤーをどう掛け合わせるか

メニューが3段ある
1、暗さを強調
2、明るさを強調
3、暗さと明るさをうまくなじませる

不透明度の調整（90％）
ぼかしでさらに壁に馴染ませる
└「フィルタ」→「ぼかし」→「ぼかし（ガウス）」

「表示レイヤーを結合」する→全部まとめて1個にする
「Alt」キーを押したまま「表示レイヤーを結合」→元々のレイヤー残したまま結合した1個を作成する

「フィルタ」→「フィルタギャラリー」
「スマートフィルター用に変換」してから「フィルターギャラリー」にて加工すると後から簡単に変更できる

▼描画系ツール
長方形ツール（長方形選択ツールと間違えない）
シェイプレイヤーのサムネをダブルクリックすると色変更できる（オプションバー、属性パネルからも可）

選択解除→レイヤーパネルの何も無い所クリック or 「Ctrl」キー押しながらクリック

歯車アイコンからサイズを指定した上で描画できる

▼パス選択ツール
これでクリックすると色や線などの設定ができる

▼ラインツール
線というより◯pxの高さをもった長方形という認識で。
「Shift」キー押しながらドラックすると、水平線・垂直線・斜め45度線が引ける

▼カスタムシェイプツール
オプションからさらに追加できる
「シェイプを初期化」で最初の少ない状態へ戻せる

▼グループレイヤー
イラストレイヤーのような透明なフィルム（レイヤー）があれば便利だな
└オブジェクトを一塊にしてまとめておく
└パワポのグループ化みたいなもん

「Shift」キー押しながらレイヤークリックすると間のレイヤーもすべて選べる
「Ctrl」キー押しながらレイヤークリックすると個別のレイヤーを1つずつ選べる

グループレイヤーごと複製する
ドラッグして「新規のレイヤーを作成」にドロップする

移動ツール使うとグループ内のオブジェクトがまとめて移動できる

▼ラスタライズ
カスタムシェイプで書いたものをフィルタかけたり補正加工したいときは「ラスタライズ」使う
塗りつぶされたピクセルに変える

「レイヤー」→「ラスタライズ」→「シェイプ（複数選択してるなら「レイヤー」）」
→サムネにシェイプを表すマーク（右下）がなくなる

▼レイヤースタイル
「レイヤー」→「レイヤースタイル」→「ベベルとエンボス」
ベベル（隆起した状態）とエンボス（押し込んだ状態）
→ロゴなどが立体感が生まれる

レイヤースタイルで変更したらfxというマークが付く

カラーオーバーレイ　→　ラスタライズしたレイヤーの塗り直しなどができちゃう
境界線　→　枠線塗れる
光彩外側　→　後光さす（通常モード、不透明度、スポイトも使える）
ドロップシャドウ　→　影をつける（光が当たる角度、

レイヤーパネルの下に「fx」というマークがある
クリックすると「レイヤースタイル」が開く

複数スタイルつけることもできる
レイヤースタイルダイアログからチェックつけて選べる
レイヤースタイルをコピーもできる

▼レイヤーのグルーピング
「レイヤーのリンク」ボタン

▼整列アイコン
レイヤーをリンクしていなくても整列できる
どれを基準にするかは選択したレイヤーになる

ラインのレイヤーを選択肢、「Ctrl」+「A」で全体選択、さらに整列つかうとドキュメントに対して並べることができる

▼グラデーションツール
カラーバーの部分ダブルクリックするとグラデーションエディター開く
よく使うグラデーションに名前をつけて保存する→「新規グラデーション」押すと登録される

「Shift」キー押しながらドラッグかけるとまっすぐに描ける

▼レイヤーマスク
「レイヤー」→「レイヤーマスク」→「選択範囲外をマスク」
切り抜きしているわけじゃない
レイヤーマスクサムネイル
移動ツールで動かせる
鎖を外せばそれぞれのサムネで移動できる

「レイヤー」→「レイヤーマスク」→「すべての領域を隠す」

「Alt」キー押しながらレイヤーをクリックすると表示変わる

▼イラレからの読み込み
コピペしたら◯ボタン

▼単位・定規
「環境設定」→「単位・定規」で単位はピクセル、文字はポイントにする

「表示」→「定規」
左上をドラッグドロップすると基準点を移動できる

▼ガイド・グリッド

定規のところからドラッグ操作で目安の線を引ける
定規の部分までドラッグすれば片付けられる

「移動ツール」にてガイドの移動ができる
「表示」→「ガイドをロック」のチェックを外さないと移動できない
「表示」→「ガイドを消去」
「表示」→「新規ガイド」で作成もできる
「表示」→「表示・非表示」→「ガイド」
「表示」→「表示・非表示」→「グリッド」

「環境設定」→「ガイド・グリッド・スライス」にて細かく色など指定

▼テキスト入力
テキストツールの場合は、「Space」キー押したら空白が入るので手のひらツール使えない

「ウィンドウ」→「文字」でも文字パネル表示
オプションバーの「文字パネルと段落パネルの切り替え」でも表示できる

文字レイヤーのサムネをダブルクリックすれば選択できる

カーニング → 日本語の場合は小文字の余白を詰める
1,000ptで1文字分（200ptなら1/5文字分）

fx「光彩（外側）」サイズとスプレッドを調整すると読みやすくなる

▼段落
禁則処理 → 文頭に句読点がこないように処理してくれる

▼テキストをラスタライズ
データを他人に渡した時、相手方がフォントを入れてない時うまく表示できないことがある
それを防ぐためにテキストをラスタライズしてピクセル化してしまう

レイヤーを選択 → 「書式」→「テキストレイヤーをラスタライズ」（Tの文字は消えて文字編集はできなくなる）

テキストにはフィルタを適用できない
もしフィルタかけたければラスタライズすればいい（ぼかしやドロップシャドウなど）

▼ショートカットキー
「Ctrl」+「+」で拡大、「Ctrl」+「-」で縮小
「Ctrl」+「z」で一個前へ戻る、「Ctrl」+「Shift」+「z」で一個先へ進む
「Chrl」+「q」でPhotoshop修了（Quit）
「Ctr」+「o」でファイルを開く（Open）
「Ctr」+「d」で選択範囲の解除（Delete）
「Ctrl」+「Shift」+「s」で別名で保存（Save）
「[」でブラシが細く、「]」でブラシが太く
「Ctrl」+「A」ですべて選択（All）
「Ctrl」+「T」で自由変形（Translate）
「Ctrl」+「Shift」+「I」で選択範囲を反転
「Ctrl」+「N」で新規ファイル作成
「Ctrl」+「R」で定規（Ruler）
「Ctrl」+「0（ゼロ）」で100％表示 ≒ ズームツールのダブルクリックと同じ
「Ctrl」+「;」でガイドの表示・非表示を切り替え
「Ctrl」+「@」でグリッドの表示・非表示を切り替え
「Alt」+「左右のキー」で文字間調整

Webデザインの知恵袋

Webデザイン周りについての気付きやメモを綴ります。

Adobe Photoshop CCの基本操作TIPS

Adobe Illustrator CCの基本操作TIPS