WEBデザインを今から始める人のためのPhotoshop3つの基礎知識

Photoshopでできること

WEBデザインや写真撮影に興味があるけれどPhotoshopのことはよくわからない。これから勉強を始めようとする人は参考書を買ったり、WEBで使い方を検索すると思います。

Photoshopの使い方を覚える前、ファイルを作る・開く時点で知っておかないと大変なことになることがあります。操作・デザインの前にまずは重要な3つことを覚えておくとトラブルを回避できます。

今回のポイント

  1. 画像の新規作成
  2. 解像度
  3. RBGとCMYKのカラーの選択

この3つです。ここを押さえずにPhotoshopの勉強を初めてしまうと必ず痛い目に合いますから絶対に覚えてきましょう。まずはPhotoshopとはなんぞや?ということから始めます。

Photoshopはデザインのことなら何でもできるソフト

Photoshopでできること

Adobeが出しているアプリケーションでWEBデザイン・写真加工・DTPデザイン(印刷物)とおおまかに3つの用途があります。DTPは基本的にはIllustratorを使うのですが、一部デザインをPhotoshopで行うことがほとんどで、結局デザイナーという仕事をする人はWEBでも印刷でもPhotoshopを扱わないと成り立ちません。

最近は「パワポ資料から1つ上にいきたい」ということでPhotoshopを使い資料を作るビジネスパーソンもいます。

もしあなたがデザインの世界や写真の業界を希望しているのであれば、今すぐにでもPhotoshopを購入し操作になれておくことをおすすめします。

昔は非常に高価なアプリケーションで分割払いで購入したりしていましたが、現在新規で購入する人のほとんどは月額制 / 年額制で購入でき、その敷居は下がっています。

私は常に最新のPhotoshopが使用できるAdobe Creative Cloudをおすすめします。

写真だけの専門でいく人はPhotoshopとLightroom2つ使えるフォトグラフィプラン、WEBデザインを含めるならばアドビのデザインに関わるほぼ全てのアプリケーションが使えるコンプリートプランとなります。

Photoshopの操作説明は多くのサイトで紹介されていますが、そもそも何ができるのか?ということに触れているものは少ないのでまとめていきます。

画像の新規作成・加工

Photoshop=画像加工というのは誰もが知っていると思います。それに加え新規で画像を加工することができます。馴染みに深いJPEGやPNGなどの画像も一から作り出すことが可能です。

Photoshopの新規ファイルの設定

Photohsopを立ち上げて「ファイル」>「新規」を選ぶとどのような画像を作成するかが表示されます。

  • 横幅、高さを決める
  • 単位を決める(WEBならピクセル、印刷はmm)
  • 解像度を決める(WEBは72 pixel/inch、印刷は300pixel / inch)
  • カラーモード(WEBはRGB、印刷はCMYK)

WEBと印刷では新規ファイルを作るときの初期設定が異なります。注意しなければならないのは解像度だけはあとから変更できないと思ったほうがよいということです。

解像度という概念

解像度という概念

デザインをやっていないとめったに耳にしないと思いますが、WEBデザインや写真をやっているといやでもお付き合いすることになります。

WEBの72px / inchは「72px dots per inch」の略でdpiと呼ばれていて、1インチあたりの1ドット(点)の密度を表しています。widowsのモニタの基準は72〜96dpiであったことから、WEBデザイン業界では72dpiを基準に画像ファイルを作成します。

このdpiがの数値が高いほど、より細かく描写ができ画像が鮮明になります。最近のスマホやMacのRetinaディスプレイが綺麗なのはdpiが高いからです。一般的なwindosのモニタの72dpiに比べ、iPhone6は400dpiなので、単純計算で4倍以上細かく表示できます。

WEBデザインの現場では「Retina対応」という呼び方で72dpiですが倍の解像度でデザインし、それを半分に縮小させる形でスマホでもキレイに表示できる画像ファイルを作ることががあります。(500×500 72pxのサイズを1000×1000 72pxで作成し、HTML上で500×500で表示させることで実質144dpiにする)

モニタの解像度を高くするとアイコンなどが小さくなってしまうのは、dpiが高いせいので少しの面積でアイコンを表示できてしまうためです。

印刷になると基準は300dpiになります。新聞入稿など画質の良くないものは100dpi前後で作ることもありますが、dpiは少ない数値から高い数値に変更すると著しく画像が劣化するのでよっぽどのことがない限り300dpi以上でファイルを作ります。逆に高いdpiから小さいdpiに変更しても画質は劣化しません。

WEBとDTPの両方をこなすデザイナーがWEBの設定で印刷物をデザインしてしまい、最初から作り直すというケースも珍しくありません。

RGBとCMYKというカラーの概念

RGBとCMYK

RGB(レッド グリーン ブルー)とCYMK (シアン イエロー マゼンダ キープレート(黒))という意味です。

この2つの違いは加法混色と減法混色という色の作り方の違いです。

加法混色は色々な光を1箇所に集めると白の近づくように、「色を重ねると白くなる」という色の作り方です。

逆に減法混色は絵の具のように「色を重ねると黒くなる」という色の作り方になります。一般の方に馴染みがあるのは減法混色になります。シアンとかマゼンダのインクはインクジェットプリンターでもよく目にすると思います。

WEBはRGB、印刷はCYMKでファイルを作る

パソコンのモニタは光によって作られるのでRGBの3色、印刷はインクによって色を作るのでCMYKの4色に設定します。

この設定はあとから変更しても大丈夫ですが、RGBとCMYKで表現できる色の幅が違うので、途中で設定を変更すると色味が変わってしまいます。新規ファイルを作成する段階でどちらかを選ぶか決めるべきです。

写真はRGBとCMYKの両方を使う

RGBをCYMKに変換する

デジタル一眼レフで撮影したJPEGやRAW画像はRGBになります。ファイルをPhotoshopで開くと最初からその設定で表示されます。モニタやiPadなどで楽しむ分にはそのままで問題ありません。

問題は印刷に出すときです。カメラのキタムラやネットのプリントサービスに出すときはそのままのRGBのままで大丈夫です。しかし仕事用としてプロの印刷所に入稿するときはPhotoshopでCMYKに変更する必要があります。

もちろん印刷データを作るときに写真を使う場合、PhotoshopでRGBをCMYKに変更してPSD(Photoshop用の保存データ)ファイルとして保存し、Illustratorで読み込みます。これを忘れると印刷したときにドエライことになります。

この3点だけをまず覚えてください。そこからがWEBデザイナーとして、フォトショッパーとしてのスタートです。

コメントを残す

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサーリンク

0
23
0
1
2
0
Photoshopでできること

この記事が役に立ったらいいねをしよう!

Facebookで最新情報をお届けします。

関連記事

同じカテゴリーで読まれている記事