知らないと損！ウェブデザインに特化したPhotoshopの効率的な89の時短テクニック -神速 Photoshop Webデザイン編

Post on:2014年4月4日

神速デザインの5箇条

ショートカットを活用しよう
最新機能を使いこなそう
目的によってツールを使い分けよう
「直し」に強いデータを作ろう
面倒な作業は自動化しよう

「直し」に強いってのは、助かりますよね。

神速 Photoshop Webデザイン編
[Amazonでみる]
[楽天でみる]

著：: イシジマミキ、庄崎大祐、鈴置菜津女、鴇﨑亘、橋本和宏、ハマダナヲミ、細川富代
出版社：: KADOKAWA/アスキー・メディアワークス
発売日：: 2014/3/26

Amazonでは初回限定で、Mac用のキーボードショートカットがついています。数に限りがあるようなのでお早めに。

付録のMac用のキーボードショットカットシール

そんな本書の中身を紙面のキャプチャで少しだけご紹介。

本書はPhotoshop CS4, 5, 6, CCを対象に、スクールなどでは教えてくれない89の時短テクニックが、作業の種類別にまとまっています。
作業の目安となる時間、神速テクニックでの時間も掲載されているので、自分のPhotoshopのスキルがどのくらいなのかも分かると思います。

1章はウェブデザインに特化した設定。
Photoshopを使う時に絶対やっておきたい環境設定をはじめ、より便利にする設定まで、これは非常に大切な章です。

まずは、ウェブデザインのための5つの環境設定。先日XPにさよならしたので、新しいWindowsにさっそく適用しました。

よく使うレイヤーパネルや文字パネルなども、より使いやすくしましょう。

1章の最後は「PSD納品チェックリスト」。
Photoshopのバージョンごとの新機能と、それぞれのファイル読み込み時のエラーメッセージ、そしてデータの再現性などがまとめてあります。

2章以降は、いよいよ実践的なテクニック。

例えば、デザインしていて高さが足りなくなってしまった時、ひょいと1分ほどで直感的にすぐに高さを伸ばすことができます。こういうことよくありますよね。

3章は画像作成、4章は画像補正。
この金属の質感を表現するテクニックは目からウロコでした。1分でできちゃいます。

5章は文字組・レイアウト。

フォントを変更する時、通常は文字パレットで変更すると思いますが、なんとアクション使うとは！これは確かに便利！アクションにショートカットを設定すると更に便利ｗ

6章はレイヤー操作。ロックされているレイヤーを探す時、レイヤーパネルをスクロールして探すのではなく、ちょっとしたテクニックを使って瞬時にそのレイヤーを探すことができます。

神速Photoshop Webデザイン編の目次

設定の神速テクニック

“速い” Webデザインのための5つの「環境設定」

使い慣れた環境を再現して作業を効率化

ドキュメントプリセットをカスタマイズして新規作成をすばやく

キーボードショートカットの追加・変更・削除で効率アップ

複数マシンで同じ環境を再現する「設定を同期」

WebとDTPの両方でPhotoshopを使用する

文字パネルをカスタマイズして書体を選びやすく

レイヤーパネルを使いやすくして作業を効率アップ

Bridgeを使いやすく

PSD納品チェックリスト
ファイル操作の神速テクニック

「レイヤーに基づく新規スライス」でパーツをすばやくスライス

同サイズのナビゲーションをサクッとスライスする

複数レイヤーを個別のファイルに一発で出力

画像アセットの生成機能で画像パーツを自動で書き出す

面倒な画像の書き出しは「Cut&Slice Me」ですばやく済ませる

サイズ違いのバナーは1枚のPSDにまとめて制作

Fireworksで作成したデータをPhotoshopに確実に引き継ぐ

Dreamweaverで画像をサクッと配置する

「ビッグドキュメント」でデバイス枠有り無しのデザインを管理

カンバスの高さを直感的に引き伸ばす

ファーストビューの高さの説明をすばやく作成する

スライス画像をまとめて選んで一気にWeb用に保存

HTMLページからPhotoshopで編集可能なデータを作成する
画像作成の神速テクニック

ブラシと描画モードの変更でコラージュを手早く仕上げる

「光沢輪郭」で金属らしい質感をすばやく表現

アイコンはカスタムシェイプに保存してすばやく使い回す

属性パネルを使ってシェイプを後から変形する

スキャンしたロゴをクイックマスクでサッと透過処理

ショートカットだけで色を変更できるグラデーションボタン

レイヤーのスマートオブジェクト化で直しやすいボタンを作る

カラートーンパターンを作って色の決定をスムーズに

よく使う色はスウォッチに登録してすばやくアクセス

変数機能で都道府県別バナーをまとめて作る

ロゴをスマートオブジェクトで配置して修正にすばやく対応

エッジがにじんでいるシェイプを設定一つでくっきり表示

ショートカットを駆使してギザギザやバッジをすばやく作る

他のアプリやWebページからすばやく色を取得

CSSからカラーを抽出して一発でスウォッチに登録

共通パーツをリンク配置して修正にスピード対応
画像修正の神速テクニック

「ディテールを保持」で劣化を抑えて画像を拡大

「コンテンツに応じて拡大・縮小」で横長のヘッダに写真を合わせる

グラスの写り込みを「パペットワープ」で自然に見せる

スマホ写真を「レンズフィルタ」と「トーンカーブ」でパッと味のある写真に

「HDRトーン」と「Camera Rawフィルタ」でHDR風画像をサクッと作る

レイヤーの境界をぼかしてぼけの強い写真をパッとなじませる

手ブレ写真を「ぶれの軽減」でサクッと修正

目的のサイズに合わせた画像を「切り抜き」でサクッと作る

ワンランク上の仕上げがパッとできるパワーアップしたスマートシャープ

「Camera Rawフィルタ」でレイヤーをシンプルに保って非破壊編集

トーンカーブを保存して同じ補正を使い回す

「ラバーバンド」を併用して写真のパス切りをラクラクこなす

写真に映り込んだ人物は「画像のスタック」で一発除去

「遠近法ワープ」で自然なパースにすばやく調整
文字組み・レイアウトの神速テクニック

シェイプを活用して回り込みができるテキストボックス

アクションを使ってよく使うフォントをすばやく適用

小さな文字を手早く鮮明に表示

Typekitで大量の欧文フォントを自由に使いこなす

文字スタイル・段落スタイルパネルで見出しのスタイルを一気に統一

文字スタイルを登録して多言語サイトをすばやく制作

「校正設定」で色覚障がいをすばやくシミュレーション

デザインベースとなる作業範囲を計算無しですばやく描く

ドラッグ&ドロップでオブジェクトを同じ位置にコピー

長方形をサクサクコピーしてテーブルをすばやく組む

縦横比やサイズが異なる画像をレイアウトにスパッと合わせる

アタリ画像をクリッピングマスクでササッと差し替える

自由変形ツールで長いページでもオブジェクトをすばやく移動
レイヤーの神速テクニック

似たような効果を組み合わせてレイヤースタイルを重ねがけする

「レイヤーを分離」で目的のレイヤーのみをすばやく表示

レイヤースタイルを設定したショートカットキーですばやく操作

描画モードをショートカットで瞬時に変える

レンズフィルタを活用してキレイなグラデーションをすばやく作る

編集可能なグラデーションで色をサクッと変更

スマートフィルタでやり直しできる効果をすばやく適用

非表示レイヤーや空白レイヤーをパッと削除

レイヤーの位置だけロックしてレイヤー効果をすばやく適用

ロック中のレイヤーをショートカットですばやく選択

レイヤー効果を登録してボタン画像をすばやく量産
プラグイン・エクステンションの神速テクニック

「CSS Hat」でコードを出力してスマフォサイト制作を効率化

「GuideGuide」で正確なガイドをパッとひく

「Type Panel 2」でタイル状のレイアウトを自動生成

「Subtle Patterns」でテクスチャパターンをすばやく適用

Bridgeでファイルのリネームを自動化

Bridgeのレーティングでファイルをすばやく探す

スマフォアプリの動くモックアップをカンプから手軽に作成

「pixel Fropr」でよく使うアイコンやボタンをすばやく配置

「Specctr」でスタイルガイドを手早く作成

パースペクティブなグラフィックをワンクリックで自動生成

「Renamy」でレイヤー名を一括変更

アイコンWebフォントを「Glifo」で手間なく作成