神速Photoshop [Webデザイン編]　CC対応

関連サイト

本書の関連ページが用意されています。

• Web Professional Books

内容紹介

ヘッダーのデザインをいまさら変更してって、いったい何ページあると思っているの! (怒)」
「似たようなボタン、たしか前にも作ったんだけどな……(泣)」

本当はもっとクリエイティブなことに時間を割きたいのに、いつも手間のかかる「作業」にばかり時間を取られてしまう。Webデザインの仕事をしていると、こんな場面に遭遇することがよくあります。

なるべく余計な時間を短縮して、Webデザインに集中するためのテクニックをまとめたのが、『神速Photoshop[Webデザイン編]』です。

Webデザインを効率よく進めるための基本設定から、すばやいスライス方法、カンプの効率的な作成方法、ボタンやバナーのバリエーションをラクに作る方法など、7人の“Photoshop使いが自身の経験から編み出した89本の時短テクニックを集めました。

※本書は、Photoshop CC(14.2)を基準に執筆しています。以前のバージョンでは利用できない機能も含まれています。

書誌情報

• 著者: イシジマミキ, 庄崎大祐, 鈴置奈津女, 鴇崎亘, 橋本和宏, ハマダナヲミ, 細川富代
• 発行日: 2015-10-31 (紙書籍版発行日: 2014-03-26)
• 最終更新日: 2015-10-31
• バージョン: 1.0.0
• ページ数: 272ページ(PDF版換算)
• 対応フォーマット: PDF
• 出版社: KADOKAWA/アスキー・メディアワークス

対象読者

デザイナー、ディレクター

著者について

イシジマミキ

グラフィックデザインを中心にWeb、DTPと幅広くデザインを行う傍ら、講演や書籍執筆なども手がける。2013年にザ・マーズナレッジ株式会社設立。これまでに培ったグラフィックデザインワークやフリーランスの実績を元により実践的な技術を教え、企業の即戦力な人材を育てている。デザインワークで使うツールやワークフロー、デザイン自体の考え方に関する著書を持つ。

庄崎大祐

東京の下北沢に暮らすWebデザイナー。渋谷で「社会人のためのWebデザインスクール」の主催と講師を勤めながら、「プロになるためのWebデザイン入門講座」などの書籍やWebデザイナーのためのブログの執筆をしている。

鈴置奈津女

デザイナー/アートディレクター。大学卒業後、ヤフー株式会社勤務。子ども向けサービスや広告管理ツール、Yahoo!ニュースなどを担当。デザインから実装までの幅広い経験を活かして、ディレクションをおこなっている。デザイナーユニット「.3」としても活動。

鴇崎亘

日本大学理工学部建築学科卒業。2004年からフリーランスのデザイナーとして活動。Web制作を中心に印刷物のデザイン、制作なども行う。

橋本和宏

1988年生まれ。大学で情報デザインを学んだ後、2010年に面白法人カヤックに入社。Webサービスやキャンペーンサイトのデザインをはじめ、iOS・Android等、様々なデバイスのインターフェイスデザインを経験。現在は、新規サービスの立ち上げを専門に、グローバルに活躍できるデザイナーを目指して活動している。

ハマダナヲミ

大学で映像、グラフィックデザインを学んだ後Web制作会社勤務を経て2010年よりフリーランス。企業サイトからスマートフォン向けアプリ、紙媒体等のデザイン＆アートディレクションを行う。タイポグラフィ好きのためのイベント「文字飲み」を東京と福岡中心に不定期に開催。

細川富代

「バニレートデザイン事務所（http://vanillate.com）」にて「かわいくて、ちょっとクールなWebサイト」をテーマに、Webデザインを中心にフリーランスで制作活動を行っている。Web制作にかかわる情報、ツール、アプリケーションを利用した考え方や活用方法などを展開するブログ「バニデザノート（http://vanidesign.blog.fc2.com）」を運営。

目次

はじめに

目次

Chapter01 設定の神速テクニック

• 001.〝速い〟デザインのための5つの「環境設定」
• 002.使い慣れた環境を再現して作業を効率化
• 003.ドキュメントプリセットをカスタマイズして新規作成をすばやく
• 004.キーボードショートカットの追加・変更・削除で効率アップ
• 005.複数マシンで同じ環境を再現する「設定を同期」
• 006.WebとDTPの両方でPhotoshopを使用する
• 007.文字パネルをカスタマイズして書体を選びやすく
• 008.レイヤーパネルを使いやすくして作業効率をアップ
• 009.Bridgeを使いやすく
• 010.PSD納品チェックリスト

Chapter02 ファイル操作の神速テクニック

• 011.「レイヤーに基づく新規スライス」でパーツをすばやくスライスする
• 012.同サイズのナビゲーションをサクっとスライスする
• 013.複数のレイヤーを個別のファイルに一発で出力
• 014.画像アセットの生成機能で画像パーツを自動で書き出す
• 015.面倒な画像の書き出しは「Cut&Slice me」ですばやく済ませる
• 016.サイズ違いのバナーは1枚のPSDにまとめて制作
• 017.Fireworksで作成したデータをPhotoshopに確実に引き継ぐ
• 018.Dreamweaverで画像をサクっと配置する
• 019.「ビッグドキュメント」でデバイス枠有り無しのデザインを管理
• 020.カンバスの高さを直感的に引き伸ばす
• 021.ファーストビューの高さの説明をすばやく作成する
• 022.スライス画像をまとめて選んで一気にWeb用に保存する
• 023.HTMLページからPhotoshopで編集可能なデータを作成する

Chapter03 画像作成の神速テクニック

• 024.ブラシと描画モードの変更でコラージュを手早く仕上げる
• 025.「光沢輪郭」で金属らしい質感をすばやく表現
• 026.アイコンはカスタムシェイプに保存してすばやく使い回す
• 027.属性パネルを使ってシェイプを後から変形する
• 028.スキャンしたロゴをクイックマスクモードでサッと透過処理
• 029.ショートカットだけで色を変更できるグラデーションボタン
• 030.レイヤーのスマートオブジェクト化で直しやすいボタンを作る
• 031.カラートーンパターンを作って色の決定をスムーズに
• 032.よく使う色はスウォッチに登録してすばやくアクセス
• 033.変数機能で都道府県別バナーをまとめて作る
• 034.ロゴをスマートオブジェクトで配置して修正にすばやく対応
• 035.エッジがにじんでいるシェイプを設定1つでくっきり表示
• 036.ショートカットを駆使してギザギザやバッジをすばやく作る
• 037.他のアプリやWebページからすばやく色を取得
• 038.CSSからカラーを抽出して一発でスウォッチ登録
• 039.共通パーツをリンク配置して修正にスピード対応

Chapter04 画像補正の神速テクニック

• 040.「ディテールを保持」で劣化を抑えて画像を拡大
• 041.「コンテンツに応じて拡大・縮小」で横長のヘッダーに写真を合わせる
• 042.グラスの写り込みを「パペットワープ」で自然に見せる
• 043.スマホ写真を「レンズフィルター」と「トーンカーブ」でパッと味のある写真に
• 044.「HDRトーン」と「Camera Rawフィルター」でHDR風画像をサクっと作る
• 045.レイヤーの境界をぼかしてぼけの強い写真をパッとなじませる
• 046.手ブレ写真を「ぶれの軽減」でサクっと修正
• 047.目的のサイズに合わせた画像を「切り抜き」でサクっと作る
• 048.ワンランク上の仕上げがパッとできるパワーアップしたスマートシャープ
• 049.「Camera Rawフィルター」でレイヤーをシンプルに保って非破壊編集
• 050.トーンカーブを保存して同じ補正を使い回す
• 051.「ラバーバンド」を併用して写真のパス切りをラクラクこなす
• 052.写真に映り込んだ人物は「画像のスタック」で一発で除去する
• 053.「遠近法ワープ」で自然なパースにすばやく調整

Chapter05 文字組/レイアウトの神速テクニック

• 054.シェイプを活用して回り込みができるテキストボックス
• 055.アクションを使ってよく使うフォントをすばやく適用
• 056.小さな文字を手早く鮮明に表示
• 057.Typekitで大量の欧文フォントを自由に使いこなす
• 058.文字スタイル・段落スタイルパネルで見出しのスタイルを一気に統一
• 059.文字スタイルを登録して多言語サイトをすばやく制作
• 060.「校正設定」で色覚障がいをすばやくシミュレーション
• 061.デザインベースとなる作業範囲を計算無しですばやく描く
• 062.ドラッグ&ドロップでオブジェクトを同じ位置にコピー
• 063.長方形をサクサクコピーしてテーブルをすばやく組む
• 064.縦横比やサイズが異なる画像をレイアウトにスパッと合わせる
• 065.アタリ画像をクリッピングマスクでササッと差し替える
• 066.自由変形ツールで長いページでもオブジェクトをすばやく移動

Chapter06 レイヤーの神速テクニック

• 067.似たような効果を組み合わせてレイヤースタイルを重ねがけする
• 068.「レイヤーを分離」で目的のレイヤーのみをすばやく表示
• 069.レイヤースタイルを設定したショートカットキーですばやく操作
• 070.描画モードをショートカットで瞬時に変更する
• 071.レンズフィルターを活用してキレイなグラデーションをすばやく作る
• 072.編集可能なグラデーションで色をサクっと変更
• 073.スマートフィルターでやり直しできる効果を適用
• 074.非表示レイヤーや空白のレイヤーをパッと削除
• 075.レイヤーの位置だけロックしてレイヤー効果をすばやく適用
• 076.ロック中のレイヤーをショートカットですばやく選択
• 077.レイヤー効果を登録してボタン画像をすばやく量産

Chapter07 プラグイン、エクステンションの神速テクニック

• 078.「CSS Hat」でコードを出力してスマホサイト制作を効率化
• 079.「GuideGuide」で正確なガイドをパッとひく
• 080.「Tych Panel 2」でタイル状のレイアウトを自動生成
• 081.「Subttle Patters」でテクスチャーパターンをすばやく適用
• 082.Bridgeでファイルのリネームを自動化
• 083.Bridgeのレーティングでファイルをすばやく探す
• 084.スマホアプリの動くモックアップをカンプから手軽に作成
• 085.「pixel Dropr」でよく使うアイコンやボタンをすばやく配置
• 086.「Specctr」でスタイルガイドを手早く作成
• 087.パースペクティブなグラフィックをワンクリックで自動作成
• 088.「Renamy」でレイヤー名を一括変更
• 089.アイコンWebフォントを「Glifo」で手間なく作成