PhotoshopでWebデザイン

ピクセルディメンションと解像度について

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
デザインの前に基本的なピクセルディメンションと解像度について理解します。
講師:
03:15

字幕

まず、画像とモニターについての基礎をみていきたいと思います。ピクセルディメンションという言葉と解像度という言葉の意味を抑えていきましょう。画像はピクセルという色の粒で構成されています。ちょっと見ていきましょう。拡大します。こんな感じに粒粒で構成されています。この粒のことをピクセルというふうに呼びます。今、この例の画像は「200px×200px」のサイズで構成されています。「200×200」の様に書き表します。先に横方向がきます。ピクセルディメンションは単純に横に何ピクセル縦に何ピクセルという話です。今度は、解像度を見ていきましょう。これはモニター側の話です。解像度は一般的に300dpi の様に書き表されます。この dpi という単位はDots Per Inch の略で1 インチ、大体 3 センチぐらいの中にいくつのドット、いくつのピクセルを表示できるのかを表しています。要するに、スクリーンがどれぐらい細かく画像を表示できるのかという話です。デザインをする際は、それ程考える必要はありません、というのも誰かどのスクリーンで自分の作ったWeb サイトを見てくれるのか分からないからです。全く同じサイズのすくルーンでも表示できるピクセルの数が違います。 ただ、自分の作ったデザインの見え方が変わってくるのでこの例を元に感覚を掴んでいきたいと思います。今、ここに全く同じサイズ15インチのノートパソコンがあるとします。全く同じWeb サイトを表示しています。見え方がは変わっています。右側の「1024×768」の低解像度のモニターではこんなに Web サイトが大きく表示されています。逆に、左側の「1680×1050」の高解像度のモニターでは小さく映っていますよね。ここで重要なのは実際の画像のサイズは変わっていないということです。サイズという言葉はちょっと分かり難いと思います。実際の画像のピクセルディメンションは変わっていません。400×400 の画像は今でも 400×400 です。どちらもスクリーンの上でも同じです。例えば、ここに200×200 のまるがあります。このまるは「1024×768」のピクセルディメンションの中ではこんなに場所を取っています。しかし、「1440×900」のピクセルディメンションの中では割と小さく映っています。「1600×1200」の際、大きいサイズのピクセルディメンションの中ではこんなに小さく映っています。この感覚掴めましたでしょうか。 クラスの後半ではちょっと特殊なRetina ディスプレイについてもカバーしていきたいと思います。

PhotoshopでWebデザイン

このコースではウェブデザイナーの方を対象に、Photoshopを使ってWebグラフィックやワイヤーフレーム、サイトのモックアップを作成する方法を学習します。具体的には最大効率化するためのカスタムWebワークスペースの作成やカラーリング方法、グラフィクスを最適化する方法を学びます。

4時間27分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年04月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。