とろにゃんのブログ?

おきらくなとろにゃんだよ

NEW !
テーマ:

(何度も言いますがこのPhotoshop授業以前ここでPhotoshopインストールされた方対象としているため、検索で来られ方にはあまり役立たない情報ですあらかじめご了承 

 

 

きょうはWebページへアップするための画像出力の方法を説明したいと思います。

 

Webページへは

 ファイルサイズの小さいもの

というのが最も必要な条件となっております。

 

ファイルサイズが小さいながらも1つのWebページでたくさん存在すると、当然読み込みが遅くなりますよね。

だからこそ、とにかく小さいものを作る必要があるのです。

しかも、できるだけ画質を落とさず出力したいものです。

 

そこで、PhotoshopではWeb専用の出力(保存)機能が備わっています。

それを利用しようと思います。

 

さてさて、この↓のファイルを保存してもらいましょう。

 

井上とろ

 

 

このファイルはPNGの800×600の画像。

 

これをPhotoshopに読み込ませます。

 

 

 

 

メニューバーの「ファイル(F)」 → 「Web用に保存」を選択します。

 

とろにゃんのブログ?

 

 

 

次に、元の画像と、出力される画像の比較をしたいので、左上にある「2アップ」をクリックします。(そうなっていればそのままで)

 

とろにゃんのブログ?

 

 

 

ここからは人の環境によって変わってきます。

まず画質。

これは2アップにすると上下に2つの画像が表示されます。

上の画像が元のオリジナル画像。

下に表示されている画像が現在のパラメータにおける元の画像よりも画質を下げたもの。

ここで上と下との画質の劣化状況が判断できます。

とろにゃんのブログ?

 

<ブログについて‥>

ブログの画像設定において、とろにゃんのブログでは「オリジナルで表示」でアップすることにしています。

その「オリジナルで表示」で行う最大横幅が600まで対応しています。

これはブログのデザインやサイドバーの構成によってその横幅が異なります。

各自、横幅がどれだけ可能かなのかを見ておいてください。

 

とろにゃんのブログ?

 

 

まずPhotoshopでの設定をする場所は横幅の設定。

(この方法はブログでのリンクで大きく表示させることができるので、「オリジナルで表示を使わない場合はこの作業はいりません。次のファイル形式の説明に行ってください)

 

先ほど言ったように、800×600の画像で、横が200ほどオーバーしています。

それを600にします。

とろにゃんのブログ?

⇔⇔

とろにゃんのブログ?

 

緑の○の鎖がしてあると自動的に縦幅も変更されます。

これをクリックするとそれぞれ独立して変更ができます。 

しかし、それをやると形がおかしくなるばかりか、色がくすんでしますのでまずやりません。

 

 

 

次は、ファイル形式を選択します。

現在ファイルはPNGになっていて、これは極めて高画質なのですが、ファイルサイズが大きくなるのが欠点で、ファイルサイズを小さくするという当初の目的があるので、ここは圧縮率の高い「JPEG」にします。

 

とろにゃんのブログ?

 

 

この時、画質は「70」の「やや高画質」になっています(これは各人違うかも)。 

そこで、低画質や中画質などに変更して、上の元の画質と下の変更後の画質を見比べて、「これくらいの画質ならOKかなぁ」って感じで自分で許容範囲ギリギリのところまでパラメータ数値を持っていきます。

 

 

ファイルサイズはこれでかなり小さくなったと思います。

そして「保存」にするとWeb用として保存されます。


とろにゃんのブログ?

 

 

だいたいそんな感じでやっていきます。

 

 

 

ゑ?他のパラメータは?

 

‥っていうと、あまり気にしない方がいいでしょう。

 

 

他の設定項目について・・・・・

 

画像サイズの「画質」については通常「バイキュービック法」でも十分で、文字とかを含ませる場合はバイキュービック法(シャープ)とかがいいでしょうが、写真だと目が粗くなるので写真ならバイキュービックもしくはバイキュービック法(滑らか)がいいかと思いますね。

この選択は必ずしも正解ではなく、自分の目で確かめる他はないからなのです。

 

あと、メタデータについては、これはデザイン系では関係なく、カメラでの写真においての設定になります。

カメラで撮られた時にそのメタデータがファイル内に埋め込まれます。

何という機種かをファイル内のメタデータとして記されており、これを他人に知られなくなければ、「カメラ情報以外のすべて」か「なし」にするのがいいでしょう。

それから「sPGBに変換」にはチェックを入れておいてください。 

 

カメラ情報などはExif情報としてAdobe Bridge CS6(Photoshopのメニューバーから「ファイル(F)」→「Bridgeで参照」で起動させることができます)から見ることができます。

気になる方は一度見ておいてください。

(アメブロにおいて、アメーバにアップした画像はExif情報は削除されるので安心してください)

 

とろにゃんのブログ?

 

とろにゃんのブログ?

 

 

これでWeb用に変換する方法についての解説を終了します。

 

うふふ。

 

また近々、GIFアニメーションについてもやっていくつもりで、そのGIFへの出力においてもこの「Web用に保存」というものを使用します。

 

今後もこのWeb用に保存という機能を覚えておいてくださいね!

 

それじゃあ、きょうはここまで!

 

(このブログ作成時間18:05~21:51の約4時間かかりました) 

PR
同じテーマの記事

[PR]気になるキーワード