投稿画面の顔であるアイキャッチ画像、上手に作って綺麗に表示させたい。WordPress開設時には誰もが思う事ですね。長くサイト運営している先駆者たちは知識と技能を持っていますが、初心者や中級者には難解なところがあります。まずWordPressはWEBデザイナーの知識が必要になります。
WEBデザイナー…？話が難しくなって来た。いやアイキャッチ画像の簡単に真似出来る説明です。デザイナーの為のセミナーではありませんから。
制作にはAdobe Photoshopで説明してあります。画像処理ソフトであれば同じ機能が用意されている筈ですので、そちらは割愛させて頂きました。
アイキャッチ画像を作る
普段通りアイキャッチ画像にしたい画像をリサイズします。
当サイトの画像サイズはこうです。
幅768px、縦512px、解像度96pxです。
サイズが大きかったり解像度が大きかったりすると、容量が大きくなるのはご承知だと思いますが、反対に小さかったり、72pxより解像度が低かったりすると見た目が悪くなります。
Webが72dpiと言う訳はディスプレイの解像度に依存すると言うことです。72dpiでも96dpiでも変化はありません。大きくしても鮮明になる訳では無いのですね。72dpiでも大丈夫です。ただ気分的に96pxにしているだけです。
アイキャッチ画像のマスクを作る
アイキャッチ画像の場合はホバーエフェクトで、画像が見切れてしまうことがありテキストなどの配置に気を使います。見切り範囲が分かると配置が楽ですよね。
新規にレイヤーの作成をします。ピンクか水色の淡い色が良いでしょう。768px*512pxのレイヤーを作ります。
次に長方形ツールを使い塗りは赤・紺どちらでもOKです。576px*417pxの枠を作成します。※長方形ツールを選択、画面ウィンド上でダブルクイックするとサイズ指定できます。
中央に配置します。中央に配置できたら一度画像を統合します。統合したレイヤーをレイヤーパレットに複製します。
上段に複製レイヤーが出来たら、下段の背景のレイヤーは削除してします。何故背景レイヤーを削除するかと言うとこの後切り抜きで透明に出来ないからです。
長方形ツールで作った赤・紺のアイテムを自動選択ツールで選択削除してしまいます。透明な窓が出来ました。
レイヤーパレットから不透明度スライダーを使って25％まで透明度を下げます。
保存はPNGです。768px*512px、解像度96dpiのマスクレイヤーが出来ました。
アイキャッチ画像とマスクをレイヤー別に呼び込みます。
まずアイキャッチ画像を呼び込みます。次にマスクレイヤーを呼び込みます。マスクレイヤーがアクティブ上でしたらアイキャッチ画像だけです。
別々のウィンドになった筈です。マスクレイヤーのレイヤーパレットに「レイヤーを複製」があります。
ドキュメントでメイン画像に複製レイヤーを呼び込みます。マスクのレイヤーは最後に削除するので画像の統合はしないで下さい。このまま作業を続けます。
「レイヤーを複製」したマスクレイヤーはコピーです。終了時には保存して保管して下さい。
テキストツールを使ってマスク見切り内に文字の配置をします。ロゴや他の画像があればここで「レイヤーを複製」を使って挿入していきます。挿入する画像は縮小しても保存しなければ何度でもリサイズ出来ますよ。リサイズしたアイテムを「レイヤーを複製」を使って挿入していきます。
出来上がったら、マスクのレイヤーを削除して画像を統合、別名保存でjpeg名前を付けて保存で終了です。
サムネイル画像の設定サイズを見直してみよう
サムネイル画像(アイキャッチ画像)サイズは初期値150になっています。表示サイズを大きい値に変更します。
設定➔メディア➔サムネイルのサイズ
こうすることにより、ぼやけることなく綺麗にサムネイル画像を表示させることが出来るようになります。若干ですが。
バナー広告を参考にして真似よう
冒頭にWEBデザイナーの知識が必要になります。と言いました。アイキャッチ画像も単に写真やイラストを配置して文字を入れればお仕舞いでは、味気ないですよね。ちょっと工夫したいです。
WEBデザインを勉強するのが最良の方法ですが、もっと簡単に初心者は覚えたいです。そんな楽な方法があるの？…。
私は広告系グラフィックを扱うのですが、WEBデザイナーも基本的には同じです。見た目とキャッチコピーが主眼です。WEBデザイナーの方はSEOやHTML・CSSの知識も必要なのですが、WordPress初心者には難易度が高いですね。そこでWEBデザイナーのデザインを拝借しましょう。
WEBデザイナーの方のバナー広告のギャラリーサイトです。
https://bannnner.com
画像の使い方、文字の見易さ、色使いなど参考になると思います。バナー広告とアイキャッチ画像とはちょっと似通っていますよね。広告と表紙の違いですが、制約のあるバナー広告よりはアイキャッチ画像の方が制約の幅が広いでしょう。どう感じてどう活かすかは貴方の感性にお任せしますが、見て真似して試行錯誤するのは勉強になりますよ。
もしAdobe CCをお持ちであれば、Illustratorで作成することをお勧めします。
その訳はIllustratorは描画するタイプのドローソフトと呼ばれ、ベクターファイルですので、無限に拡大できる複雑なグラフ状の形式で構成されているためです。ベクターファイルは拡大・縮小時に解像度が低下しません。従って制作時の自由度が格段に違います。寸法通りに仕上げ、希望のファイル形式に変換することが出来ます。壁紙やイラスト入りの作品には最適です。日本語形式の縦組みも出来ます。
デザイナー御用達のAdobe Creative Cloud
これから長くブログを続けたいとお思いでしたら、失敗ないプロ御用達のAdobe CCを検討して下さい。ブログだけで無く、就職や副業にもお役に立つことでしょう。ウェブサイトバナー広告、何処でも目に入ります。時代の花形職業ですね。求人などWEBデザイナー多いですね。
サイト装飾にあると重宝「Adobe CC」
Adobe（アドビ）マスター講座 アプリケーション込みです。
公式サイトから購入するより37,780円も安くなります。講座があるので独学でも学べますね。
Adobeマスター講座
安く導入する方法として、ご紹介してきましたが残念ですが、当サイトでの ASP は2024/08/23で終了しました。
ご愛顧有り難うございました。
再開されるようでしたら当サイトで再度紹介したいと思います。
なお、デジハリONLINEプロモーションは引き続き運営されていますので、直接お問い合わせ下さい。
いずれ欲しくなるアプリですが、更新時大事な注意点があります。一度目を通しておいて下さい。
デジハリONLINE Adobeマスター講座
https://online.dhw.co.jp/course/adobe/
カテゴリーはMacになっていますが、Windowsでも同じです。
つい最近までこのような反則級[…]
終わりに
今回はAdobe Photoshopを使ったアイキャッチ画像の作り方を説明しました。
グラフィックデザインに経験無い方でも、工夫次第で真似出来たと思います。少しづつでも一緒にレベルアップしていきましょう。
お疲れ様でした。どうかお役立てください。最後まで読んでくれてありがとうございました。
