PhotoshopでWebデザイン

Web用に保存のウィンドウの使い方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Web用に保存のウィンドウの使い方をみていきます。
講師:
03:50

字幕

では、実際に Web 用に書き出しのウィンドウを使っていきたいと思います。この写真を使います。「ファイル」>「Web 用に保存...」を選択してあげます。最適化の方を開けましょうか。「元画像」はこれで「最適化」はこっちですね。写真なのでJPEG で書き出していきたいと思います。ここに「プリセット」が入っています。「低画質」とか「やや高画質」、「高画質」何を言っているんだって感じですが右側のこの画質のパーセントですね「100%~0%」のこの幅をなんかこういう言葉で表しています。「100」が「最高画質」ですね。「60」ぐらいに下がると「やや高画質」こんな感じになってます。大事なのは、ここです。いま、「やや高画質」「60%」で書き出すと「123.5K」なんですがこれを「最高画質」にしてしまうといきなり「444K」めちゃくちゃ重くなります。「1Mbps」のスピードでも「5秒」かかります。ちょっとストレスですね。この画像を表示するだけで5秒待つ必要があるというのは多分、見てる人は飽きちゃいますね。その前にこのサイズも大きいですね。Web 用の画像バナーに使うのか何だかわからないですが「1024」の幅は結構大きいです。 「600」ぐらいにしておきましょうか。ブログで使うとして「600×450」にしましょう。このサイズですね。ここに数字を入れてあげると自動的にこのプレビューでもサイズを変えてくれます。実際にちょっとクローズアップして画質を見ていきましょう。いま、「最高画質」です。「高画質」に変えます。そんなに変わらないですよね。でもファイルサイズは劇的に変わっています。最高画質が「226K」に対して「高画質」が「88K」いきなり変わってます。どんどん下げます。「やや高画質」なんか段々ジャムジャムしてきましたね。「中画質」、これだともうかなり汚い画像になっちゃいます。サイズもそんなに変わらないですね。「やや高画質」から。なので、この「やや高画質」から「高画質」このあたりが望ましいかなと思います。自分で目で見ながらですねどれぐらいのクオリティーが嫌じゃない程度なのか探してあげて書き出すといいかと思います。この「プログレッシブ」ですね「プログレッシブ」にオンをしてあげるとよくウェブサイトで少しずつ画像が表示されるのを見たことあるかと思います。なんかジャムジャムしたちょっと粗いのが先ず出てきて段々きれいになっていく様な画像もしそういう画像にしたい場合この「プログレッシブ」をオンにしてあげます。 でもいらないと思います。もし少し大きい画像で徐々に表示させないと難しいという様な場合はこの「プログレッシブ」にチェックを入れてあげます。「最適化」はもちろんして欲しいのでオンにしておきます。「カラープロファイルの埋め込み」今回はいりません。この sRGB に変換もいりません。「モニターカラー」を使ってほしいのと「カラープロファイル」なしでいきたいと思います。この状態で「完了」と「保存...」あるんですが「完了」を押してしまうとこのウィンドウが閉じるだけです。なので「保存...」を押します。「保存...」を押して「デスクトップ」等に「big_bot.jpg」として「保存」してあげます。こうすると、Web 用に小さくした最適な画質で保存できています。

PhotoshopでWebデザイン

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

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

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

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

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