Photoshop:WEBページ用の画像の出力

Photoshop:WEBページ用の画像の出力

Photoshop:WEBページ用の画像の出力

私はAdobeのPhotoshopCS5を使っています

WEBサイトの制作にイメージ画像(imgタグ)の掲載は必須です。なので画像を編集するソフトは必ず必要ですよね。

フリーソフトでもいろいろな画像編集ソフトが出回っていますが、私はAdobeのPhotoshopを使っています(まだPhotoshopCS5です)。

PhotoshopCS5
PhotoshopCS5の画面

WEB用に使うのは簡単

Photoshopは非常に豊富な機能が搭載されていて、その機能を全て網羅するのは容易な事ではありません。

ですが、ことWEBサイトの画像を設置する事に関しては本当に必要な事だけ覚えれば、非常に簡単なのです。

何でもまずは基本的な事からですので、本記事は「初心者の方向け」となりますが、本当に基本となる操作をご紹介していきたいと思います。

Photoshopを使っていない人も是非

仮にPhotoshopを使っていない人であれば、代わりに別のソフトを使っているのでしょうし、一通りの事はお分かりだと思います。

その様な人はあらためて本記事の様にホームページへの画像の掲載の仕方をおさらいする必要は無いかも知れませんね。
でもまあせっかくの機会ですから、よかったら見ていって下さい。

画像出力の基本の流れ

「この様な時はこのような操作」
「こんな事をしたいならこういう風に」
今回はこの様に項目ごとの操作説明ではなく、ホームページ上にイメージ画像を掲載する実際の手順のまま・画像出力の流れにスポットを当てて紹介します。

写真など元画像を利用する場合

まずは元々ある画像をWEBページ内に掲載する場合です。Photoshopのソフトは開いておきましょうね。

【基本】

まずは元となる写真をパソコンの中に準備しておく事ですね。スマホ写真でもパソコンの方にメールなどで転送するなどして準備をしましょう。
出力の流れ

1-1.画像をソフト内に読み込みます。
1-2.画像サイズを適切なサイズに変更します。
2.Photoshop形式ファイル(拡張子.psd)で別名を付けて保存します。
3.WEB用画像(拡張子.jpgや.png、.gifなど)にその名前で保存します。
4.htmlタグ上でイメージタグを設置します。

これで終了です、これだけです。これをイメージ画像1枚ごとに繰り返せば良いのです。

オリジナル画像を作成する場合

この場合は元となる画像自体が存在しないので、一から作る事になります。
1-1と1-2だけが上と違います。

出力の流れ

1-1.作成予定サイズで背景パネルを用意
1-2.画像を作成します
2.Photoshop形式ファイル(拡張子.psd)で別名を付けて保存します。
3.WEB用画像(拡張子.jpgや.png、.gifなど)にその名前で保存します。
4.htmlタグ上でイメージタグを設置します。

これで終了となります。元画像を使う場合も一から作る場合も2から4までの手順は同じですね。

元画像の上に装飾をしたり文字を載せるなどする加工作業は、上記2通りの手順をミックスしたものになりますが、手順はほとんど変わりません。

具体的な操作

1-1.画像をソフト内に読み込みます。

背景(グレー)のところでダブルクリックすると、ファイルを開く窓が開きます。指定の画像を探してOKを押します。

開いた各ウィンドウ内で場所を探す操作などは、通常のパソコンフォルダと同じ感覚で進められます。

1-2.画像サイズを適切なサイズに変更します。

画像の見出し(画像名が表示されている見出しバーの部分)を右クリックするとメニューが出ます。その中から「画像解像度」をクリック

「画像解像度」をクリック

画像解像度のウィンドウがでますので、WEBページで表示させたい幅(px)の数値に変更してOKをクリックします。

サイズは縦横同じ比率で縮小(拡大)されます(縦横比は変えれます)。

サイズ変更

これで目的のサイズに変更できました。

サイズ変更

2.Photoshop形式ファイル(拡張子.psd)で別名を付けて保存します。

上部横並びメニューの左端「ファイル」→「別名保存」をクリックします。

別名を付けて保存

別名で保存のウィンドウがでますので、保存する場所を指定して、ファイル形式を「Photoshop(PSD,PDD)」に変更します。

続けて「ファイル名」のところで任意の名前を付けて「保存」をクリックします。

psd形式で保存
元画像をpsd形式で保存

これで元画像の保存は終了です。

3.WEB用画像(ここでは.jpg)に保存します。

「ファイル」→「WEBおよびデバイス用に保存」をクリックします。

WEBおよびデバイス用に保存

右上にある下向き▼ボックスが「jpeg」である事を確認して下の「保存」をクリックします。

WEBおよびデバイス用に保存画面

保存するフォルダを指定して「保存」をクリックします。

この時名前の変更の必要はありません。psd形式で保存した名前と同じ名前のままになります。

最適化ファイルを別名で保存

これで画像をWEB用に出力しました。

手順3の「WEBおよびデバイス用に保存」は、初回に「jpg」で保存したら2回目からは同じjpgになっていますし、画像の保存先も前回と同じところが表示されるので2回目からは簡単です。

慣れたら工夫しましょう

どのような加工編集であっても基本は同じ流れです。

上の方で写真1枚ごとに繰り返すと述べましたが、WEBページ上で写真を5枚使うのであれば5か所にimgタグが入る訳ですから、慣れたら前もってその5枚を連番にしてimgタグを打っておいていいと思います。

あとは5枚WEB用に画像を出力すれば5か所に入る訳ですからね。

先に画像を全て出力しててもOK

場所が決まっていない場合は先に5枚画像を出力して、後からimgタグを任意の位置に書いても良いと思います。

その場合後から写真を入れ替えたりするとファイル名の連番がそのまま上から順に並ばないかも知れませんが、問題はありません。

拡張子.psdファイルについて

psd形式ファイル

先ほどの手順2で説明をしたように、imgタグとして表示する最終的な画像とは別に、どのような画像であってもpsd形式の元画像を保存します。

そのWEBサイト内で仮に100枚の画像をPhotoshopを通して掲載したのであれば、100枚のpsd形式ファイルもできる事になります。

WEB用に出力した画像は統合されたデータですが、psd形式は作業中のファイル構成をそのまま維持して保存するので、次回の更新が非常にやりやすいのです。

psdファイルを確認してみよう

画像の上に文字を載せていた場合、画像レイヤーと文字レイヤーとが別々に存在しています。

後からその文字テキストを変更したり、文字の場所を移動させるのに便利ですよね。WEB用に出力した画像はこのようなレイヤー層は存在せず、単に1枚画像のみの状態になっています。

ですので私の場合は「img」など最終的に使う画像を入れるフォルダとは別に、「素材集」というpsdファイルだけを入れるフォルダを作っています。

画像名にルールを付けて管理しやすく

画像名にルールは無いので自分の好きなように付けて良いと思いますが、私は「ページ名+番号」というルールを付けています。

画像名はどのようにつけても画像の中身やSEOに関係したりはしません(Altタグは別ですが)

例:トップページの画像の場合

top_img1.jpg
top_img2.jpg
top_img3.jpg
など

特別に違う画像なりイラストを入れたりする場合は違う名前にする場合もありますが、「top_」の部分は変更しません。

どんどん画像が溜まっていくといざ目的の画像を探すときに迷います。ですが例えばTOPページの画像であればそのフォルダ内の「top_」の欄を最初から探せばいいので効率的です。

ですので画像名にはルールを設けておき、後から管理がしやすいようにしておくべきです。

WEBページ用のイメージ画像出力はいかがでしたか。

まずは基本中の基本をご紹介しました。これでイメージ写真等の画像をそのまま掲載する事は難しくないはずです。

自身のポートフォリオを作る際に何回もやる事になりますので、慣れておきましょうね。

この記事をシェアする

一押し人気コーナー紹介

HTMLカテゴリの関連記事