ウェブデザイナーの勉強にいい!デザインの基本原則からPhotoshopの実践的なテクニックまで学べる無料のeBook -Pixel Perfect Precision 3
Post on:2014年2月26日
デザイナーさん・ディレクターさんをはじめ、ウェブデザインに携わる全ての人に必携です!
デザインの基本原則をはじめ、Photoshopを使った実践的なさまざまなテクニックが学べるeBookを紹介します。無料なのに市販の書籍に負けない、いや人によってはそれ以上の価値ある内容がぎっしり詰まってます。

当ブログでもお馴染みのPixel Perfect Precisionの第3版が、昨日リリースされました(パチパチパチパチ)
内容も大きくバージョンアップし、ページ数も165ページから214ページへと大増量。
デザインにおける、配置の基本原則、可読性を考慮したテキスト、カラーマネジメントなどをはじめ、ファイルの効率的な管理方法、Photoshopでのウェブに最適な初期設定、レイヤー管理、Illustratorのウェブで使える実践的なテクニックなど、満載の内容になっています。
テキストは英語ですが、キャプチャ付きなので、デザインの知識が多少あれば充分に理解できると思います。
ダウンロードはページのちょい下。
PDF版、iBook版が用意されています。

本当は全ページを紹介したい勢いですが、全214ページの中からごく一部だけ紹介します。
ページの基本構成は、左がダメな例、右が良い例です。

まずは、表紙。

第3版では、モバイルファーストが中心となっています。

スマフォでのアクセシビリティ、タップが確保できるサイズがNice!

アニメーションは意味のある動きを取り入れましょう。

カラースキームは論理的に設計を。

ボタンにテキストを配置する際に注意する点。

ユーザーに分かりやすい明快なコンテンツをデザイン。

ボタンにはボタンらしい適切なスタイルを。

アウトプットのためのスタイルガイドを作りましょう。

Photoshopの実際の操作テクニックも満載です。

グリッドを設計するための便利Tips。

Photoshopをもっと便利にする機能拡張の紹介も。

Illustratorとの連携で気をつけるべき点。

Photoshopでの作業効率をアップするレイヤー管理方法。

書き出しのテクニックも充実しています。

次のプロジェクトで使いたくなるようなデザインテクニックも満載!
サークル状のラインにグロウを加えてみたり、

インナーグロウでノイズを加えたりはいかが?

しかも、今回は付録付き!
sponsors