果たしてPhotoshopで上手にアイキャッチ画像は作れるのか!?
そもそもアイキャッチ画像とは何なのか?
アイキャッチ画像とは見出しとセットになった画像で読者の目を引くための大事な画像です。
アイキャッチ画像がないと(文章だけの見出しだと)、工夫を凝らした有益な情報、面白い情報、ハッピーな情報にも関わらず、読者の目に留まることなく埋もれてしまう可能性が高いです。
一方、アイキャッチ画像があると、前者に比べて劣る内容の記事であっても読者の目に留まる可能性は飛躍的に高くなります。
ということで、アイキャッチ画像はめんどくさいけどあったほうがいい、ということになりますよね。
では早速、アイキャッチ画像の作成に取り掛かっていきたいと思いますが、アイキャッチ画像の最適な画像サイズってあるのでしょうか?
アイキャッチ画像の最適な画像サイズは?
諸説ありますが、私がいま採用している画像サイズは幅1200px、高さ630pxです。
これはあくまで、WordPressのサイトを意識した画像サイズですが…。
Photoshopでアイキャッチ画像を作ってみましょう!
設定環境
- Windows10
- Adobe Photshop 7.0
まずは画像サイズを1200px、630pxにしてみましょう!
イメージ>画像解像度 を選択します。
![](https://o-kome.com/blog/wp-content/uploads/2020/04/095A6D94-BE0B-42E9-AE4D-CE9C5ED71E9B-1024x869.png)
![](https://o-kome.com/blog/wp-content/uploads/2020/04/904F7DEF-6145-4E19-93E3-07D3E6D4F297.png)
もともとも画像サイズは幅2,560px、高さ1,920pxです。
まずは幅1200pxを優先してサイズ調整していきましょう!
![](https://o-kome.com/blog/wp-content/uploads/2020/04/7C45570F-9AEA-463A-BCBE-68C889A8B6E3.png)
続いて、高さ630pxを設定していきます。
イメージ>カンバスサイズ を選択します。
![](https://o-kome.com/blog/wp-content/uploads/2020/04/5CBB6A93-6F8D-446E-B831-17567C71EC52.png)
高さ630pxを設定します。
![](https://o-kome.com/blog/wp-content/uploads/2020/04/B3F41F12-2CE3-4EFC-97F2-F91198874CD7.png)
すると、こうなりました↓
![](https://o-kome.com/blog/wp-content/uploads/2020/04/26EDBCD5-3718-4728-85BB-6EAB2AEF1F8F.png)
画像サイズが整ったところで、次は画像を編集(画像の上に文字入れ)をしていきます。
長方形ツール を選択します。
![](https://o-kome.com/blog/wp-content/uploads/2020/04/487908BB-67F1-479B-BD7E-46ED4FB969CB.png)
白色の長方形を画像の上に適当に配置し、不透明度を今回は50%で設定します。
![](https://o-kome.com/blog/wp-content/uploads/2020/04/4A730FAA-CF6C-4533-ADEE-0A1C6F44EDF8.png)
続いて、この長方形の上に文字を配置します。
![](https://o-kome.com/blog/wp-content/uploads/2020/04/F1CCBBB0-5B59-4159-85E8-5DC6A81E824A.png)
レイヤー>レイヤースタイル を選択します。
今回は、ドロップシャドウ と 光彩(外側) を設定します。
![](https://o-kome.com/blog/wp-content/uploads/2020/04/70C3E41B-239E-46B4-918A-E442FE419C96.png)
文字サイズや文字の高さ等、微調整を行います。
![](https://o-kome.com/blog/wp-content/uploads/2020/04/584FF2C0-2802-4EFF-93E3-2876E91818DC.png)
完成しました。
![](https://o-kome.com/blog/wp-content/uploads/2020/04/0A556FE8-F1E4-4EAD-B0AA-DB171D08C4D4-1024x586.png)
あとは、Web用に保存 するだけです。
![](https://o-kome.com/blog/wp-content/uploads/2020/04/62F04F72-2229-435D-829B-C14F78AA054C.png)
どうですか皆さん、上手くできましたか?
コメント