アイキャッチ画像

『初心者用講座』ブログのアイキャッチ画像の作り方

アイキャッチ画像
 
疑問アイコン
アイキャッチ画像に文字を入れたいんですけど、どうやったらいいんですか?

という人のための講座になっています。

今回の解説には「CLIP STUDIO」を使用しています。illustrator、Photoshopや、無料アプリでもレイヤーが使えるものなら同じようにできると思います。

レイヤーとは→画像の「層」。複数の層に分けて色を塗ったりできます。
 
スポンサーリンク

『初心者用講座』ブログのアイキャッチ画像の作り方

当ブログの画像は「O-DAN」「PAKUTASO」より使用させていただいています。

  • O-DANは種類がとても豊富で使いやすい。ほぼイメージ通りの写真がある。
  • PAKUTASOはモデルさんが可愛くて、つい使ってみたくなる。背景なども多い。明るい感じ。

今回はO-DANの画像を使用して説明します。

 

画像を保存し、明るくする

O-DANから画像を選び保存をします。

私は加工後に名前を変更するので、そのままの名前で一旦保存しています。
画像を保存するファイルがあると分かりやすいです。
スマホでもファイルわけすることは可能です。

画像

今回は上の画像を保存してみました。

ちょっと暗いので明るくします。

上のバーの編集→色調補正→明るさ・コントラストで明るさが変えられます。
ついでに画像解像度を変更で横幅を「980px」に変更しています。
そこまで鮮明なものはいらないと思うので解像度は「72」にしています。
※1200px以上の高画質がGoogleでは推奨されてるようです。

明るさ変更

 

スポンサーリンク

文字を入れる

(新規)レイヤーを増やして文字を入れます。

レイヤーは画像の上に持ってきます。

CLIP STUDIOの場合は、新規レイヤーを作らなくても文字レイヤーが自動に作成されます。

文字入れ

左端にある「」という文字を選択すると文字が入力できます。

ツールプロパティにて、フォントファミリー(文字の形)を選び、文字サイズを変更していきます。

装飾や中央揃えなどの設定もここで行います。

テキストの色はメインカラー・サブカラー・任意の色が選べます。

上記の写真ではHGSゴシックの中央揃え、サブカラーの白を選択しています。
 

文字を装飾していく

白だけだと見えにくいので、白文字に色ふちを付けていきます。

自動選択で「文字レイヤー」の文字がない部分をクリックすると、(画像でいうと、ペンあたりをクリックします。)下の画像のように、文字の枠が選択されます。

「の」などの丸の中は選択されないので、ctrl(選択+になる)を押しながら選択を増やします。

選択画像

選択後、上のバーの選択範囲→選択範囲を反転で反転していきます。

反転後、選択範囲の選択範囲の拡張で枠の大きさをきめていきます。

選択範囲

選択範囲が反転できたら新規レイヤーを文字レイヤーの下に作り、塗りつぶしていきます。

私はめんどくさいので、グラデーションツールでメインカラーとサブカラーを同色にして、塗りつぶしてます。
そうすると、白の枠に設定した色で縁取られます。
(下の画像の枠の太さは3.0mmに設定しています。色は黒色に設定しています。)

塗りつぶし

枠はグラデーションにすることもできますし、範囲で「境界をぼかす」にすれば枠線をぼかすことが出来ます。↓こんな感じにぼかせます。

参考記事

今回は、女帝のカードの解釈です。 女帝のカードはタロットカードの大アルカナ、数字の3番のカードになります。 女帝は女性性を表していて、やわらかい雰囲気で包んでくれそうです。 女帝が出たときの相手の気持ち・恋愛・仕事の意味を正位置・逆位置と[…]

タロットカード女帝のカードの意味アイキャッチ画像

出来たらjpgへ拡張子を変更し、保存をします。

(レイヤーはjpgでは保存できません。)

(「jpg」は保存時フォルダの下に選択が出てきます。)

「枠レイヤー」をコピーして文字より位置を下にさげると、影のようになります。
(レイヤーの不透明度を下げると作りやすいです。)
色々足して、アイキャッチ画像は出来上がりです♪

アイキャッチ画像

カラーペンが置いてある画像だったので、ペンで書いたような装飾も加えてみました。

私のブログは「かわいい感じ」にしたいので、上のようにしました。

あなたのブログに合った装飾を加えるのがいいと思います。

文字が見えなくなることもあるので、出来るだけ外枠ぎりぎりにしない方がいいです。
中側に文字をいれるようにし、余裕をもたせるのが見栄えが良くなるコツです。
補足…テキストの「フチ」を☑チェックすると、簡易的なフチがとれます。フチのサイズも変更することが可能です。0.01サイズ~1.00サイズまでが選べます。

 

スポンサーリンク

『初心者用講座』ブログのアイキャッチ画像の作り方・まとめ

いかがだったでしょうか?

halu
Halu
あれ!?これ私のアイキャッチ画像と一緒!自分のブログかと思った!

という風に、フリー画像を使っていると他のサイトと被る確率が高いです。

アレンジした方が、「自分のブログ!」という感じが出ます。

最近では、フォント文字が多いので、自分で文字を書いてみるのも味がでていいかもしれません。

ぜひ、アイキャッチ画像を自分好みにアレンジしてみてくださいね。

人気記事 【話題の本】メモの魔力で抽象化してみる【例をあげて解説】

人気記事 看護師5年目で転職したその後は?良かったこと・悪かったこと

アイキャッチ画像
最新情報をチェックしよう!