はじめてのPhotoshop CC

ウェブ表示用に画像データを軽量化する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Photoshopのデータは編集用に容量が大きくなっています。Webサイトで表示できるように容量を軽量化し、すぐに表示させられる画像を作成するには「Web用に保存」を利用します。
講師:
06:49

字幕

Photoshopのデータは編集用に 容量が大きくなりがちです。 ウェブサイトで表示するように 容量を軽量化し、 すぐに表示させられる画像を 製作するのには、 Web用に保存を活用していきます。 まずはこちらの画像解像度を 見ていきましょう。 メニューのイメージから、画像解像度、 そうすると17.2Mあります。 ウェブサイトで表示させるのには 少し大きすぎますね。 こちらを軽く、ウェブで見せられるように 保存するのには、 メニューのファイルから、こちらの Web用に保存を使います。 クリックすると、このように、 保存用のウィンドウが出てきます。 まず左側、様々なツールがありますが、 Photoshopの基本的なツールと一緒です。 手のひらツール、スライス選択ツール、 ズームツール、スポイトツール、 基本的にはズームツールと 手のひらツールだけを使います。 全体を見やすくしておきますね。 手のひらツールで移動しておきましょう。 次にこちら、元画像、最適化、 2アップ、4アップ、というタブがあります。 今表示されているのは 最適化された写真です。 こんな感じですね。 元画像はこんな感じ。 二つを並べて見比べたいときは、 この2アップというのを使います。 そうすることで、上は元画像、 下がウェブ用にしたものです。 こちらに、JPEG258.8Kと 容量が書かれています。 結構軽くなりますね。 そしてこちら48秒@56.6kpbs とあります。 56.6kbpsの速度の時、 インターネットの回線の時に、 48秒ダウンロードがかかりますよ、 という目安ですね。 ちなみにここは、この左側の、 三角と、 線の入ったメニューを押すことで、 ダウンロード選択を、 ダウンロードにかかる時間を選択し、 何秒かかるかを見ることができます。 例えばすごい回線の細いところだと、 こうですね277秒、 そしてかなり速い回線の場合は、 2秒ですよ、と教えてくれます。 目安にしやすいですね。 右側には、今の画質を表示させています。 この画質は右側にある、こちらJPEGの、 この画質によって表示されてます。 例えばこれを0とすると、こちらも 0画質になり、 比べてみると、 もうちょっと大きくしていきましょう。 このようにじゃぎじゃぎが 元画像に比べて目立つようになりましたね。 逆にこの数字を100%にしていくと、 見分けがつかないぐらい、 少しここら辺の粗さが 目立つかもしれないですが。 見分けがつかないぐらいに きれいになっています。 ここで容量、画質のきれいさと、 容量を相談して、 ちょうどいいサイズを 導き出していくんですね。 プリセットなどにはいくつかあり、 GIF、そしてJPEG,PNGなどがあります。 JPEGの高と設定すると、 先ほどの60になります。 またプリセットに頼らず、こちらで自分の 書き出したいファイル形式を選び、 細かく設定していくことも可能です。 このようにPNGにすると457秒、 2メガ近く、非常に重くなっていますね。 なるべくこういった、いろんな色を使える 写真のようなものは、 JPEGで保存していったほうが 軽く済みます。 4アップをクリックするとですね、 様々な設定を同時に試すことができます。 こちら側がJPEGの時、左側 これクリックを押してから、 こちらですね。GIFにしたとき、 そしてこちらを、PNGの8に変えた時、 元画像と様々に見比べることができます。 また、書き出すときに画像サイズを ここで変更することもできます。 このように3000ピクセルだったのが、 1000ピクセルから627に変えて、 ちっちゃくしてみました。 そうすと容量もかなり変わってきていますね。 パーセント表示でも小さくできますし、 もし縮小するとき、どのような方法がいい などあればこちらから設定ができます。 この状態で完了を押すと、保存しないで、 この設定をpsdファイルに残した状態のまま、 なにもせず、ウィンドウを閉じます。 現在の設定を保存してダイアログを閉じる。 これは何もファイルを保存したり 書き出したりしないんですね。 このように何も変わりませんし、 ファイルも作られていません。 ではもう一度開いて、保存して 書き出してみましょう。 こちら書き出しWeb用保存のみには ショートカットキーがあります。 option+shift+command+S、 ウィンドウの場合は、 Alt+Shift+Ctrl+Sです。 では押してみましょう。 このように戻ってきました。 そうしたら、最終的に書き出したい 画像形式を決定します。 2アップにして、JPEGの 高画質にしておきましょう。 そうしたら、先ほど完了して そのまま閉じましたが、 これを保存のボタンを押します。 そうすると、最適化ファイルを別名で保存、 という風にウィンドウが開きます。 ここで、このように、 保存の場所を設定して、フォーマット、 画像のみ、 設定、初期設定のままで保存をすると、 ファイルを保存することができます。 Photoshopデータとは別の場所に 作成されるので注意です。 同じ場所においておきたい場合は、 保存するときに設定をしておきましょう。 このレッスンでは、こちらのWeb用に保存の 使い方を解説しました。

はじめてのPhotoshop CC

Photoshopは写真を編集するだけでなく、CG作成やウェブサイトのデザインまでできる多くの機能をもった総合画像編集ソフトです。このコースではPhotoshopの主なツールの使い方はもちろん、レイヤーやフィルター、レタッチに必要なさまざまな機能を紹介します。このコースの内容をマスターして、Photoshopをもっと気軽に使えるようになりましょう!

6時間15分 (72 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年05月20日

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

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

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