Webデザイナーのスキルアップに役立つ便利なチートシートのまとめ
Post on:2014年8月21日
先月は「Web制作時に備えておくと便利なチートシートのまとめ」でデベロッパ向けのチートシートを紹介しました、今回はデザイナー向けのチートシートをまとめました。
Photoshopの各バージョンに対応したショートカット、ブラシやペンツールの使い方、初期設定をはじめ、デザインの要素と原則、カラーセオリー、タイポグラフィ、グリッドシステム、レスポンシブなど、デザインの現場で役立つものばかりです。

Adobe Photoshop Keyboard Shortcuts
Photoshop 5-7, CS1-4, CCまで、Win/Mac用のキーボードショートカットがそれぞれPDFでダウンロードできます。
また、ショートカットがない便利な操作にショートカットを割り当てたショートカットファイルもダウンロードできます(チートシートでは「c」がついています)。

Adobe Creative Suite Toolbar Shortcut Wallpapers
Photoshop, Illustrator, InDesignなど、Adobe製品のツールバーのショートカットをまとめた壁紙。デスクトップ用8サイズ、iPad用が用意されています。

こちらはIllustrator版

Photoshopのブラシツールの使い方をまとめたチートシート。Photoshop CS6 Brush Guide(PDF)もあります。

Illustrator, InDesign, Photoshopのペンツールの使い方をまとめたチートシート。

Photoshop CCを快適に使うための初期設定をまとめたチートシート。
以前の記事も参考に:Photoshopでの作業のパフォーマンスを向上させる最適な環境設定

デザインを構成する重要な要素を一枚にまとめたチートシート。デザインのさまざまな新しいトレンドが生まれても、これ無しでは成り立ちません。

上の「Elements of Design」の同シリーズで、こちらはデザインの原則(コントラスト、整列、繰り返し、近接)をまとめたもの。

同一色相、隣接色相、類似色相などの配色形式やカラータイプなど、カラーセオリーをまとめたチートシート。

各カラーがもつ視覚的・心理的な効果をまとめたチートシート。レッド、イエロー、ブルー、オレンジ、グリーン、パープルといった多くのブランドで使用されているカラーの心理学の力を知ることができます。

タイプフェイス、スタイル、構造など、タイポグラフィの基本がまとめられています。

A Brief Introduction to Typography
タイポグラフィの歴史、人気の書体ベスト100、メジャーな書体トップ10など、タイポグラフィに関する情報がまとめられています。

セリフフォントとサンセリフフォントのそれぞれの特徴、Webと紙での使い方、代表的な書体などがまとめられています。

グリッドシステムの各名称と役割、3カラム、4カラム、マルチカラムなどそれぞれの利点を解説。

Responsive Web Design Cheat Sheet
レスポンシブ用にデスクトップ、スマホ、タブレットなどの各デバイスのサイズをまとめたチートシート。

バナーなどのオンライン広告のデザインを比較したチートシート。ボーダーの有りと無し、スタティックとアニメーション、アグリーとセクシー、ボタンと下線テキスト、矩形と別の形など。

デザインの基本原則からPhotoshopの実践的なテクニックまで学べる無料のeBook
最後はチートシートではなくPDFのeBookですが、デザインの基本原則をはじめ、Photoshopを使った実践的なさまざまなテクニックが学べます。
sponsors