Webサイトに使う画像サイズを揃える方法（Photoshop）
Webサイトで使用する画像を素材サイトから集めたとき、サイトによって縦横比の違うことが多く、並べたときにガタガタになってしまうことがよくあります。
また、実習１では「KUZIRA CAFE」をベースにしたWebサイト制作のため、ダウンロードした画像を「KUZIRA CAFE」で使用しているサイズに合わせておくのも良いでしょう。
画像サイズを揃える方法
画像サイズを揃える方法は、いくつかあります。
- Photoshopでカンバスサイズを設定し、それに合わせる。
- CSS「object-fit」もしくは「background-size」プロパティを使う。
CSSを使った方法はこちらのページで詳しく説明していますので、ここではPhotoshopを使った方法をお伝えしていきます。
また、Photoshopを使って画像サイズを揃える場合、以下の手順が基本的な流れとなります。
- カンバスサイズを設定する。
- 使用する画像を埋め込み、構図を決める。
- 画像として書き出す。
状況によって細かい操作方法は変わりますが、この流れを覚えておけばすぐに慣れてくると思います。
Photoshopを使って画像サイズを揃える
1.基準にする画像をPhotoshopで開く。（もしくは新規作成でカンバスサイズを指定する）
2.画像サイズによってはカンバスサイズを調整する。
※鎖アイコンをONにしておくと、縦横比をキープしたままカンバスサイズを変更できます。
3.「ファイル」→「埋め込みを配置」の順にクリック。
4.配置された画像をカンバスに合わせ、構図を決める
※上下もしくは左右のはみ出しを考慮して構図を決め、右上に表示される「○」をクリックして決定する。
5.構図が決まったら「ファイル」→「書き出し」→「書き出し形式」をクリック。
6.ファイル形式、画像サイズを確認して「書き出し」をクリック。
7.指定したフォルダに書き出されます（この時にわかりやすいファイル名に変えておくと良いでしょう）
8.この作業を繰り返し、もしくは別のサイズにして画像サイズを揃えていきます。
特にデザイン上の演出でもない限り、画像を揃えることはサイトの統一感を出すためにも必要な要素です。
画像そのものをWebサイトに設置する前に揃えておくことで、コーディングの負担が減りますが、画像が多い場合はCSSでサイズを揃える方が全体的な負担が減りますので、ケースバイケースでやりやすい方法で画像サイズを揃えていくと良いでしょう。
