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

Photoshopを毎日使うウェブ制作者はぜひ目を通してほしい、Photoshopを自分の手足のように使えるようにするノウハウ、同じ結果でも遙かに時間が短縮されるテクニックが満載のオススメ本を紹介します。

同サイズの画像をスライスするのに5分かかっていたのが1分で! 10px以下の小さな文字を鮮明にするのに10分以上かかっていたのが5分でよりキレイに! など実用的な技が満載です。

本のキャプチャ

「神速 Photoshop Webデザイン編」ではウェブデザインの現場でPhotoshopを使う時に役立つ情報が満載!
Webデザインに特化したPhotoshopの環境設定方法から、すばやいスライス、効率的なカンプの作成、デザインのバリエーションを楽につくるなど、実践的なテクニックや便利なツール、そしていざという時の「直し」に強いデータをつくる方法など、デザイナーの時間を大幅に短縮します。

神速デザインの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章は文字組・レイアウト。

誌面のキャプチャ

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

誌面のキャプチャ

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

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

  1. 設定の神速テクニック
    “速い” Webデザインのための5つの「環境設定」
    使い慣れた環境を再現して作業を効率化
    ドキュメントプリセットをカスタマイズして新規作成をすばやく
    キーボードショートカットの追加・変更・削除で効率アップ
    複数マシンで同じ環境を再現する「設定を同期」
    WebとDTPの両方でPhotoshopを使用する
    文字パネルをカスタマイズして書体を選びやすく
    レイヤーパネルを使いやすくして作業を効率アップ
    Bridgeを使いやすく
    PSD納品チェックリスト
  2. ファイル操作の神速テクニック
    「レイヤーに基づく新規スライス」でパーツをすばやくスライス
    同サイズのナビゲーションをサクッとスライスする
    複数レイヤーを個別のファイルに一発で出力
    画像アセットの生成機能で画像パーツを自動で書き出す
    面倒な画像の書き出しは「Cut&Slice Me」ですばやく済ませる
    サイズ違いのバナーは1枚のPSDにまとめて制作
    Fireworksで作成したデータをPhotoshopに確実に引き継ぐ
    Dreamweaverで画像をサクッと配置する
    「ビッグドキュメント」でデバイス枠有り無しのデザインを管理
    カンバスの高さを直感的に引き伸ばす
    ファーストビューの高さの説明をすばやく作成する
    スライス画像をまとめて選んで一気にWeb用に保存
    HTMLページからPhotoshopで編集可能なデータを作成する
  3. 画像作成の神速テクニック
    ブラシと描画モードの変更でコラージュを手早く仕上げる
    「光沢輪郭」で金属らしい質感をすばやく表現
    アイコンはカスタムシェイプに保存してすばやく使い回す
    属性パネルを使ってシェイプを後から変形する
    スキャンしたロゴをクイックマスクでサッと透過処理
    ショートカットだけで色を変更できるグラデーションボタン
    レイヤーのスマートオブジェクト化で直しやすいボタンを作る
    カラートーンパターンを作って色の決定をスムーズに
    よく使う色はスウォッチに登録してすばやくアクセス
    変数機能で都道府県別バナーをまとめて作る
    ロゴをスマートオブジェクトで配置して修正にすばやく対応
    エッジがにじんでいるシェイプを設定一つでくっきり表示
    ショートカットを駆使してギザギザやバッジをすばやく作る
    他のアプリやWebページからすばやく色を取得
    CSSからカラーを抽出して一発でスウォッチに登録
    共通パーツをリンク配置して修正にスピード対応
  4. 画像修正の神速テクニック
    「ディテールを保持」で劣化を抑えて画像を拡大
    「コンテンツに応じて拡大・縮小」で横長のヘッダに写真を合わせる
    グラスの写り込みを「パペットワープ」で自然に見せる
    スマホ写真を「レンズフィルタ」と「トーンカーブ」でパッと味のある写真に
    「HDRトーン」と「Camera Rawフィルタ」でHDR風画像をサクッと作る
    レイヤーの境界をぼかしてぼけの強い写真をパッとなじませる
    手ブレ写真を「ぶれの軽減」でサクッと修正
    目的のサイズに合わせた画像を「切り抜き」でサクッと作る
    ワンランク上の仕上げがパッとできるパワーアップしたスマートシャープ
    「Camera Rawフィルタ」でレイヤーをシンプルに保って非破壊編集
    トーンカーブを保存して同じ補正を使い回す
    「ラバーバンド」を併用して写真のパス切りをラクラクこなす
    写真に映り込んだ人物は「画像のスタック」で一発除去
    「遠近法ワープ」で自然なパースにすばやく調整
  5. 文字組み・レイアウトの神速テクニック
    シェイプを活用して回り込みができるテキストボックス
    アクションを使ってよく使うフォントをすばやく適用
    小さな文字を手早く鮮明に表示
    Typekitで大量の欧文フォントを自由に使いこなす
    文字スタイル・段落スタイルパネルで見出しのスタイルを一気に統一
    文字スタイルを登録して多言語サイトをすばやく制作
    「校正設定」で色覚障がいをすばやくシミュレーション
    デザインベースとなる作業範囲を計算無しですばやく描く
    ドラッグ&ドロップでオブジェクトを同じ位置にコピー
    長方形をサクサクコピーしてテーブルをすばやく組む
    縦横比やサイズが異なる画像をレイアウトにスパッと合わせる
    アタリ画像をクリッピングマスクでササッと差し替える
    自由変形ツールで長いページでもオブジェクトをすばやく移動
  6. レイヤーの神速テクニック
    似たような効果を組み合わせてレイヤースタイルを重ねがけする
    「レイヤーを分離」で目的のレイヤーのみをすばやく表示
    レイヤースタイルを設定したショートカットキーですばやく操作
    描画モードをショートカットで瞬時に変える
    レンズフィルタを活用してキレイなグラデーションをすばやく作る
    編集可能なグラデーションで色をサクッと変更
    スマートフィルタでやり直しできる効果をすばやく適用
    非表示レイヤーや空白レイヤーをパッと削除
    レイヤーの位置だけロックしてレイヤー効果をすばやく適用
    ロック中のレイヤーをショートカットですばやく選択
    レイヤー効果を登録してボタン画像をすばやく量産
  7. プラグイン・エクステンションの神速テクニック
    「CSS Hat」でコードを出力してスマフォサイト制作を効率化
    「GuideGuide」で正確なガイドをパッとひく
    「Type Panel 2」でタイル状のレイアウトを自動生成
    「Subtle Patterns」でテクスチャパターンをすばやく適用
    Bridgeでファイルのリネームを自動化
    Bridgeのレーティングでファイルをすばやく探す
    スマフォアプリの動くモックアップをカンプから手軽に作成
    「pixel Fropr」でよく使うアイコンやボタンをすばやく配置
    「Specctr」でスタイルガイドを手早く作成
    パースペクティブなグラフィックをワンクリックで自動生成
    「Renamy」でレイヤー名を一括変更
    アイコンWebフォントを「Glifo」で手間なく作成

時間をかければよいものができるとは限りません。特に同じ結果が得られるのであれば、より短時間ですませ、残りの時間はクリエイティブに使うのがよりよい仕事につながります。
Photoshopを使うウェブ制作者は、ぜひ書店で目を通してみてください。

本のキャプチャ

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

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

献本の御礼

最後に、献本いただいた担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

sponsors

top of page

©2018 coliss