7/4(Sat)

今日の生放送

「Photoshop入門」。それが“デザイン初心者”にオススメの授業

かいせつ先輩

Photoshopは画像編集に役立つソフトだよ。すごく有名なソフトだけど、聞いたことはあっても使ったことはないという人もいるんじゃないかな。なかなか使い方を学ぶ機会もないし、手が出しにくいかもしれないね。

そこでPhotoshopの使い方を学びたい人にオススメしたい授業が、「【2017】Photoshop入門」。

本授業では、Photoshopの使い方について0から学ぶことができるよ。全く知識がない人でもPhotoshopの基礎を理解できるようになるから、はじめの1歩に役立てよう。


先生のご紹介

ダイノ サトウ  武蔵野美術大学非常勤講師、ASIFA-JAPAN会員

武蔵野美術大学非常勤講師、京都造形芸術大学非常勤講師、ASIFA-JAPAN会員、日本アニメーション学会会員。自主制作アニメーション「カエルのハコ」はアヌシー国際アニメーション映画祭2010で公式上映、「あか あお ふたりで」は 文化庁メディア芸術祭2007で、審査員会推薦作品受賞。 主な仕事に、NHK Eテレ「ミミクリーズ」、東京モーターショーGoodYearブース立体映像、映画「グスコーブドリの伝記」、東京国立博物館「東大寺大仏展」などがある。


Photoshopとは

猫田くん

先輩。初歩的なことなんすけど、そもそも、Photoshopって何スカ?

かいせつ先輩

Photoshopは、Adobeが提供している画像編集ソフトだよ。リリースされたのは1990年で、そこから改良を重ねて使い勝手が良くなったり、機能が増えたりしているんだ。写真を綺麗に編集したり、デザインパーツを作ったりするときに役立つよ。


Photoshopでできること

猫田くん

Photoshopを使うと、何ができるんスカ?

かいせつ先輩

Photoshopでは、写真の加工やデザイン・イラストの作成などができるよ。写真を立体的に加工したり、意図せず写り込んでしまったものを消したり、肌を修正したりできるんだ。グラフィックを作ったり、イラストに色をつけたりすることもできるね。

初心者には難しいソフトといわれることも多いPhotoshopだけど、千里の道も1歩から。まずは基礎から少しずつ学んでいくことが、Photohopを使いこなして写真加工やデザイン制作に役立てるポイントだよ。


 

Photoshop入門!基礎から学ぶフォトショ講座

かいせつ先輩

ここでは、授業内で先生が話してくれた、Photoshopの基本的な使い方について解説するよ!

Photoshopで画像を拡大・縮小したり、解像度を変更したりといった基本的な操作を解説しているから、Photoshopを使えるようになりたいと考えている人はチェックしてみてね!

 

スクリーンショット, 電子機器, 人, 室内 が含まれている画像

自動的に生成された説明

ダイノ先生:画面表示の話をします。「ファイル」から、「開く」。このとき慣れている方はショートカットキー「Control(Command)+O」でも開けます。今は100%、原寸で表示されています。

これをもう少し拡大してみたいとか、大きすぎて見えないときは小さくしてみたいとかあると思うんですが、そんなときはズームツールを使います。

ズームツールを選んで画像をワンクリックすると、大きくなっていきます。これをどんどん押していくと、最後はカーソルにプラスのマークがなくなります。もうこれ以上拡大できませんということです。このときは大体3200%ですね。32倍。

これを見ると、四角いブロックがいっぱいならんでいますよね。これをピクセルといいます。1つの四角が1ピクセルです。これは今横が640ピクセルなんですけど、横に640個四角が並んでいるということですね。

大きくなりすぎてしまったので、今度は縮小したい。そのときは上の縮小ボタンを押しても良いんですが、楽なのは「Alt(Option)」キーですね。押してみると、カーソルのマークがマイナスになります。

「Alt(Option)」キーを押しながら画像をクリックすると、どんどん小さくなっていきます。

モニター, 写真, 室内, コンピューター が含まれている画像

自動的に生成された説明

これを1回1回カチカチやるのは面倒くさいじゃないですか。そこで、ズームツールをダブルクリックします。すると、100%に表示が必ず戻ります。

わけがわからなくなったらとりあえずズームツールをダブルクリックすればもとに戻りますので。あとはよく使うショートカットですが、「Control(Command)」とマイナスキーを押すと、小さくなる、プラスで拡大する、というのもあります。

スクリーンショット, 人, 電子機器, 室内 が含まれている画像

自動的に生成された説明

次は手のひらツールです。これで画面を動かします。実は100%表示になっていると動かないんです。なので画像を拡大した状態で手のひらツールに変えて、ドラッグで動かしていく。下と右のスライドを動かしても動きます。

手のひらツールをダブルクリックすると、この画面にピッタリの大きさに合わせてくれます。ただ143%と微妙な数字になります。それで綺麗に見えなくなったりするので、あまりおすすめはしないですね。

受講生代表:ありがとうございます。続いて、ビットマップ画像とピクセルの説明についてお願いします。

スクリーンショット が含まれている画像

自動的に生成された説明

先生:ビットマップというのは、Photoshopで主に使われる画像のことをいいます。先ほど画像を拡大したときに、ブロックが見えたじゃないですか。あれ1個1個のことをピクセルといいましたが、ピクセルをまとめて扱っているものがビットマップと呼ばれます。

対して、Illustratorを使っている方は少し馴染みがあるかもしれませんが、ベクターデータという線で囲んだものを使うこともあります。

大体画像データはこの2つだと思ってください。Photoshopは基本的にビットマップデータを得意としています。実際今はベクターデータも普通に使えますけどね。

ビットマップデータの利点は、色調が豊富でいろんな色が出せること。そして、透明で重ねたりということに優れています。なので、写真や絵画的な描画に適しています。

ただし、1個1個のピクセルごとに色がいくつと保存されているので、非常にデータが重いです。もう1つ、拡大や縮小といった変形作業によって画質が劣化します。

対してベクターデータは、各点のデータを持っているだけなので非常に軽いです。さらに点と線の情報から1回1回コンピュータが描いているんです。数式でできているので、拡大しても縮小しても劣化しません。

たとえば名刺で使っている小さい会社のマークを広げてポスターにしても、荒れないんです。なのでマークとか文字のデータはみんなベクターデータを使います。ただ、1個1個計算しているので、データが大きくなるとめちゃくちゃ遅くなります。

ビットマップデータがどのように見えるか。画像を拡大していくと、ピクセルが見えます。このピクセルを見るとわかるとおり、色が1個1個違いますよね。これがリアルな要因になっています。

ビットマップデータのよろしくない点として、拡大すると汚くなるとお伝えしましたが、こんなふうにぼけちゃうんですよ。逆にベクターデータの方は、拡大しても一切劣化しません。

なのでビットマップデータを使う場合、拡大は基本的にNGです。縮小は問題ありません。

受講生代表:ありがとうございます。次は画像解像度とドキュメントサイズについてですね。

先生:そうですね。まずは、メニューバーの「イメージ」を押して、「画像解像度」を開いてください。寸法640×460pxという数字があります。

これはこの画像が横640個、縦460個のピクセルでできているよということです。Webは基本的にピクセルしか使いません。cmとかmmは関係ありません。

スクリーンショット が含まれている画像

自動的に生成された説明

具体的な例を見ましょう。Facebookのページカバー画像は、820×312pxlとなっています。このようにすべてピクセルで表記されています。基本的にWeb用の素材はピクセルです。

で、Photoshopに戻って画像解像度ですが、「解像度」という欄があります。これは話すと長くなるので省略しますが、デジタルカメラで写真を撮るとすべて72になるので、覚えておいてください。

スクリーンショット が含まれている画像

自動的に生成された説明

そしてデジタルカメラの大きさは、こちら。先ほど見たFacebookのカバーやプロフィール画像と比べるとこんなに違うので、これだけ縮小をかけなければいけません。

1つ困ったことがあって、Photoshopというのはピクセル数が大きければ大きいほど負荷がかかって作業が遅くなります。なので本当にこれくらい小さい画像を作るときは、1回縮小して作業をする方が効率が良いです。

スクリーンショット, 人 が含まれている画像

自動的に生成された説明

大きすぎるものを小さくするために縮小する方法を見ていきます。

「イメージ」から「画像解像度」を開きます。画像を拡大や縮小するときは、必ず「再サンプル」ボタンを押してください。そしてinchになっているところをピクセルにします。

すると寸法と同じ数字になります。ここでFacebookのアイコンと同じく、横幅を170にしましょう。そしてこの鎖のボタンがオンになっていると、横幅を変えたときに比率をそのままにして高さも自動的に変えてくれます。これでOKすると、大きさを変えられます。

拡大するとわかりますが、細かいディテールは消えてしまいます。デジタル画像は劣化しないといわれますが、変形、この場合は縮小することで画像は劣化してしまいます。一度小さくしてしまうと、元には戻りません。

スクリーンショット, 男性 が含まれている画像

自動的に生成された説明

編集では戻せます。元に戻すときは「編集」の1番上にある「画像解像度の取り消し」で、「Control(Command)+Z」を押すと、元に戻ります。もう1回押すと、やり直しで小さくなります。これはすごくよく使います。

受講生代表:ありがとうございます。次に画像解像度と印刷について、教えてください。

スクリーンショット が含まれている画像

自動的に生成された説明

 

先生:先ほどはWebの話でしたが、今度は印刷の話をします。解像度とはどういうことかというと、先ほど使用した72ppiと印刷で使う350ppiは何が違うか。

まず72ppiは、1inchの長さに72個のピクセルを並ばせるんです。350ppiは350個並んでいるので、もっとキメが細かくなります。印刷する場合にはキメを細かくしないと綺麗に見えないので、350ppiを使うということです。

Photoshopで「イメージ」の「画像解像度」を開いて、解像度が72ppiになっていることを確認します。これで印刷するとどうなるか。Photoshopの「ファイル」にある「プリント」を押しましょう。これはプリンターにつながっていなくても大丈夫です。

スクリーンショット, モニター, 室内, 人 が含まれている画像

自動的に生成された説明

こうしてみると、今640×460のサイズでもA4サイズに横幅きっちり入るくらい大きく印刷されます。一方、350ppiに変えましょう。

「画像解像度」を立ち上げて、今度は「再サンプル」ボタンを外します。そしてinchもわかりづらいのでmmにしましょう。

この状態で解像度を350ppiにします。小さくなりましたけど、寸法は変わっていません。これでOKを押しましょう。この状態でもう1回「プリント」を押します。

スクリーンショット, モニター, 室内 が含まれている画像

自動的に生成された説明

すると、このようにすごく小さくなりました。さっきまでは1inchにするために72個のピクセルで良かったものが、今は350個必要。

だから小さく印刷されてしまいます。72ppiででかく印刷できた方が良いじゃんと思うかもしれませんが、実際に印刷してみるとこれくらい変わります。

スクリーンショット が含まれている画像

自動的に生成された説明

受講生代表:全然違いますね。

先生:72ppiで印刷すると、こんなふうに汚くなっちゃいます。同じ写真の大きさで350ppiにすると3000ピクセルとかになるので、これくらい綺麗なんです。

これは300ピクセルないと、印刷しても汚いよということです。だからデジタルカメラとかの画像はどんどんでかくなるんです。

A4サイズが4093×2894pxlなので、A4の大きさで綺麗に印刷するのであれば、4000ピクセルくらい必要。だからデジカメだと余裕ですね。iPhone7のカメラでも、ギリギリいけます。
 

Q&A!みんな気になる、あの疑問に先生が回答

かいせつ先輩

ここでは、「【2017】Photoshop入門」から授業を受けた方の質問とそれに対する回答を紹介していくよ!
 

Q1:解像度固定でピクセル数増やすことはできますか?

A1:できますが、ビットマップデータでお話したとおり、ぼやけてしまいます。綺麗にはなりません。

 

Q2:ドットとピクセルの違いを教えてください。

A2:dpiとppiの違いがあります。dpiは印刷で使います。ppiは先ほど見たピクセルパーインチ。dpiはドットパーインチです。基本は同じだと思ってください。印刷のときはピクセルではなく、ドットに変えるんです。だから同じだと考えても構わないと思います。

今日の生放送

  • このエントリーをはてなブックマークに追加

まとめ記事の記事一覧