ウェブデザインの基本原則からPhotoshopの実践的なテクニックまでが学べる無料のeBook -Pixel Perfect Precision

思わず、これ無料なの?!というくらいの充実した内容、そして美しいレイアウトで構成されたウェブデザインのテクニックが学べるeBookを紹介します。

ウェブデザイナーをはじめ、ディレクター・アートディレクターなどウェブデザインに携わる全ての人に役立つと思います。

PDFのキャプチャ

The ustwo™ Pixel Perfect Precision Handbook 2

Pixel Perfect Precisionはデスクトップ用のPDFやiPadなどのiBook用のフォーマットで配布されています。

PDFのキャプチャ

iBookにも対応

内容は、簡単に言うとノンデザイナーズブック(Amazonで見る)のウェブに特化した感じで、完璧な精度のピクセルにどのようにデザインするかがテーマになっています。

ページ数は全部で165ページ、配置の基本原則、可読性を考慮したテキスト、カラーマネジメントなどをはじめ、ファイルの効率的な管理方法、Photoshopでのウェブに最適な初期設定、レイヤー管理、Illustratorのウェブで使える実践的なテクニックなど、満載の内容になっています。
テキストは英語ですが、各ページキャプチャ付きなので、デザインの知識が多少あれば充分に理解できると思います。

全ページ、オススメですが、その中からいくつか紹介します。
ページ内のサンプルは基本的に、左がダメな例、右が良い例です。

PDFのキャプチャ

第1章 Pixel Perfect Principlesでは、パーフェクトなピクセルを作成するための基本原則。
P-5: 完璧な精度のピクセルでデザインするためには、まずエッジが大切。

PDFのキャプチャ

P-6: 配置の基本原則、エレメントの配置だけでなくスペースにも配慮。

PDFのキャプチャ

P-11: カラーと形状がマッチしてないとダメ。

PDFのキャプチャ

第2章 Pixel Perfect Detailsでは、ボタンやリンクなど具体的な事例を元に解説。
P-18: カラーモデル。

PDFのキャプチャ

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

PDFのキャプチャ

P-23: オブジェクトに対してテキストを配置する際の注意点。

PDFのキャプチャ

第3章 Accessibilityでは、情報にアクセスしやすいコンテンツやナビゲーション、タッチデバイスを配慮したデザイン、色のみでなく代替となる要素で情報を伝えるなど。
P-65: アクセシビリティを考慮したカラー設計。

PDFのキャプチャ

P-68: Photoshopでアクセシビリティのチェック。

PDFのキャプチャ

第4章 Photoshopでは、ウェブ制作におけるPhotoshopの作業効率をアップするさまざまなチップスを紹介。
P-73: Photoshopのウェブ制作用の設定方法。

PDFのキャプチャ

P-74: 書き出しの時の注意点。

PDFのキャプチャ

P-77: シェイプレイヤーの効率的な使い方。
この章(Photoshop Pixel Precision)は、すぐに役立つ実践的な使い方がかなり充実しています。

PDFのキャプチャ

P-115: Photoshopでレイヤー管理する時に気をつけたい名前の付け方。

PDFのキャプチャ

P-127: ファイルサイズの軽減方法。
この章(Photoshop Organisation)もすぐに使えるテクニック満載で、中級者向け。

PDFのキャプチャ

P-137: ロゴのバリエーションを簡単につくる方法。
この章(Photoshop Tips)ではちょっと面白いPhotoshopの使い方がいろいろ。

PDFのキャプチャ

P-139: ドットを使った簡単に作成できるパターンの作り方。

PDFのキャプチャ

P-140: Kulerを使ってカラースキームを設計。

PDFのキャプチャ

P-155: Illustratorも少しだけ掲載があります。

top of page

©2017 coliss