Web・デザインスクールホームページ作成講座レッスンノート 印刷とウェブでは色空間が違う

印刷とウェブでは色空間が違う

ホームページ作成講座のレッスンノート

レッスンノートって?レッスンノートって?

本日の体験レッスンお疲れ様でした。

並行してillustratorの授業も受けられているということと、ウェブかグラフィックデザインかはっきりとまだどちらがいいとは言えない状況とのことで、まず印刷とウェブでは色空間が違うというお話をしました。
それから、さらっと色の調整方法をやりました。
そして、ウェブ制作をする上でやっておいたほうがいい、photoshopの設定のお話をしました。
最後、画像の切り抜きの操作を実際にやってもらいました。

体験、ということで、すべてをさらっとやった感じになりましたが、本来はその日ごとにやることを決め、順序だてて説明していきます。

・色の基礎

CMYKとRGB…印刷で使うのはCMYK(シアン・マゼンダ・イエロー・黒)です。
黒100%だけではきれいな黒には印刷上なりません。CMYの数値もそれぞれ足してあげましょう。こちらは絵の具をイメージしていただければ、と思います。色を足すほど黒に近づきます。

一方、RGB(レッド・グリーン・ブルー)は光の3原色と呼ばれるもので、ウェブで使われる色空間です。こちらは色を足すほど白くなっていきます。

・色の選択
図形を描いたあと、上に「塗り」と「ストローク」というクリックすると色を選択するものがあります。「塗り」は中全体、「ストローク」は枠線です。(ここは授業でお話できませんでした。。)
クリックすると出てくるのがカラーパレットです。ここから色を選択できます。
そこからさらに、カラーピッカーというものをクリックすると、細かい色の設定が出来る画面になります。
この辺は後ほどしっかりやります。

ひとまず説明したことは、ウェブはCSSなどのプログラムで色指定をするため、#000000(これは黒)といったような色指定方法を使います。
はじめの2桁はレッド、次の2桁はグリーン、最後の2桁がブルー、を16進数で表したものです。16進数とは0から9に加えて、a~fを加えた16で一つ位が上がるものです。

・画像の切り抜き
ダウンロードした画像はmacの場合、photoshopのアイコンにそのままドラッグするか、control+クリック(右クリック)で「このアプリケーションで開く」→photoshopを選択で開きます。
新しいウィンドウはcontrol+Nで開きます。新しいウィンドウを開くと、最初の設定をする画面が出てきます。ウェブならプリセットのところでwebを選択しましょう。
そうすると横800px✕縦600px、解像度72px/inchといった設定になります。解像度はウェブの場合は72ですが、印刷の場合は300及び350が適切な数値です。
また横幅も現在はウェブでは960が主流です。

画像を開いたら、色々な選択ツールがありますが、今日使ったのは「クイック選択ツール」でした。このツールを使い、ドラッグをしていくと選択範囲が広がっていきます。選択したいところの上をなぞるようにドラッグするのがコツです。
選択範囲ができたら、それを保存します。画像サイズを適当な数値にし、また選択範囲を読み込みます。この状態でコピーします。
新しいウィンドウを開いてペーストすると、選択した範囲だけがペーストされます。

…これだけの内容をざっと説明させて頂きました。。
実際にやってもらったのは今回は切り抜きだけでしたが、パソコンを用意して頂き、少しでも多く実際にご自分で操作することで、だんだん覚えていくはずです。

今日やったところでわからなかった部分など、気軽にご質問してください。
ババっと進めてしまったので、わかりづらいところも多々あったかと思いますが、次回以降はしっかり順序だててすすめるので、もう一度今日やった部分も詳しく説明する機会があると思います。

なお、参考書籍としてご紹介したのは、庄崎大祐著 「プロになるためのwebデザイン入門講座」でした。
このレッスンノートを書いたコーチ

元・グラフィックデザイナー。ゼロ~大手企業サイト制作で培ったコツまで

誰でもできる!Web教室
シバタダイスケ (ホームページ作成)

新宿・吉祥寺・三鷹・中野・高円寺・阿佐ケ谷・荻窪・西荻窪・武蔵境・東小金井・武蔵小金...

レッスンノート ページ先頭へ

ホームページ作成情報

サイタのホームページ作成講師がブログを通して、ホームページ作成情報を発信。更新情報のチェックはこちらから!

twitter

ホームページ作成の先生

@HomepageCyta