試験公開中

このエントリーをはてなブックマークに追加

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

KADOKAWA/アスキー・メディアワークス

2,700円+税

プロの時短ノウハウを集めたPhotoshop解説書『神速Photoshop』に、待望の[Webデザイン編]が登場!

関連サイト

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

内容紹介

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

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

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

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

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

書誌情報

  • 著者: イシジマミキ, 庄崎大祐, 鈴置奈津女, 鴇崎亘, 橋本和宏, ハマダナヲミ, 細川富代
  • 発行日: (紙書籍版発行日: 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」で手間なく作成
Home 書籍一覧 神速Photoshop [Webデザイン編] CC対応 ▲ ページトップへ戻る