【初心者向け】iLoveIMGの使い方（ヘッダー画像の作成、その２）
こんにちは。いかがお過ごしですか。
今回は無料画像編集ツール「iLoveIMG」でヘッダー画像を作成する方法をご紹介いたします。
ヘッダー画像を自分で作れると、ブログなどで自分ならではのトップページが設置できるので集客に大変有利です。
ヘッダー画像を作成してくれる業者さんはたくさんありますが、費用は約４０００円以上、納期も１週刊くらいかかります。
また、業者さんにお願いするとちょっとした変更でもお金がかかってしまいます。
是非とも自身で作成したいものです。
ヘッダー画像の作成
今回は２回目になります。前回よりもちょっと複雑なヘッダー画像を作成してみます。
完成はこんな画像です。
「iLoveIMG」は何ができるのかわかりずらいですが、ちょっとした画像編集は難なくできます。
Webなのでネットがつながる環境がないと使えませんが、いちいちアプリを立ち上げる必要はないのでさっと編集できて大変便利です。
「iLoveIMG」日本語版のURLです。
[blogcard url=”https://www.iloveimg.com/ja”]
「iLoveIMG」の始め方は私の以前のブログをご参照ください。
[blogcard url=”https://yumiinc.net/2019/02/01/ilicrop/”]
「iLoveIMG」は画像を作成途中で保存して、後日保存した画像から続きの編集ができないのがちょっと欠点です。
素材の取集
まずは今回使用する画像の素材を集めます。
今回はこんな感じです。
素材のサイズはバラバラですが、「iLoveIMG」で調整していきます。
私はPhotoACとiLLustACいう有料サイトを使用していますが、このサイトは無料で１日に５点まで無料で素材をダウンロードをできます。
結構いけてる素材がありますので、アクセスしてみてください。
[blogcard url=”https://www.photo-ac.com/”]
[blogcard url=”https://www.ac-illust.com/”]
背景画像の切り抜き
まずは背景画像の設定です。
「iLoveIMG」日本語版へアクセスしてください。
上段、右から２番目の「画像の切り抜き」を選択してください。
背景になる画像を読み込みます。
右側のトリミングオプションで切り抜くサイズを指定します。
今回は [幅1920] [高さ600] を指定しました。
位置を決めて、右下の青い「画像の切り抜き」ボタンを押して画像を切り抜きます。
切り抜いたら自動的に圧縮されてダウンロードされます。
（デフォルトではPCの「ダウンロードフォルダー」へダウンロードされます）
ダウンロードされたファイルを解凍して、名前を変更しておいください。
小画像のサイズ合わせ
次に、画像ヘッダー内で使用する小画像のサイズ合わせをします。
ダウンロードしたままですと、微妙に大きさが異なりヘッダー画像で統一感がなくなります。
上段、左から２番目の「画像のサイズ変更」を選択してください。
画面が開いたならば、青い「画像を選択」ボタンで画像を選択してください。
画像は一度に複数選択できます。
MacならばShiftキー、WindowsならばCtrlキーを押しながら選択すると複数選択できます。
選択して、「開く」を押します。
するとこんな感じです。
右側の「サイズ変更オプション」でサイズ合わせをします。
「ピクセルで」タグを選びます。
幅640px高さ480pxを入力します。
横縦比を維持のチェックを外します。
右側の青い「画像サイズの変更」を押します。
自動的に圧縮されてダウンロードされます。
（デフォルトではPCの「ダウンロードフォルダー」へダウンロードされます）
ダウンロードされたファイルを解凍して、名前を変更しておいください。
ヘッダー画像の作成
小画像の読み込み
部品が揃ったので、いよいよヘッダー画像の作成を行います。
中段、左から２番目の「写真エディター」を選択してください。
青い「画像の選択」を押します。
「背景画像の切り抜きで作成した画像を選択します。
次に、右側の黒い「開く」ボタンで「小画像のサイズ合わせ」で作成した画像を選択します。
画面上では一度に複数選択できますが、実際に挿入されるのは最初に選択した画像だけです。
繰り返して、今回使用する画像を全部選択してください。
選択したら四隅の○アイコンで適当に画像のサイズを調整して下記の画像のように適当な場所へ移動します。
文字の挿入
次に、文字の挿入を行います。
画面上部の「テキスト」ボタンを押します。
「＋」テキストの追加を押します。
「Double Click Hear」という文字列が挿入されますのでダブルクリックします。
文字入力モードになるので、文字を修正します。
「誰でもおうちで本格フレンチ」を入れます。
もう一回「＋」テキストの追加を押します。
今度は「フレンチ簡単レシピ集！」を入れます。
入力し終わったら、画像の適当な位置をクリックして、文字入力モードを終了します。
四隅の○で大きさと位置を調整します。
今回は左端に置きます。
また、文字列中央上の○で文字を斜めにします。
下記のように調整します。斜め文字は微妙な角度合わせが必要ですががんばりましょう。
イラスト窓の設置
最後に左上のイラストを目立たせるために、バックグランドで小さな窓を設置します。
画面上部の「形」ボタンを押します。
「四角形」ボタンを押します。
画像に四角形が配置されます。
四隅の○で大きさを調整します。
また、「＋」カーソルで位置も調整します。
右上の緑の「適用」ボタンを押します。
次に色を変更するため、左上の歯車マークを押します。
上部のメニューが変わり、「影」「カラー」「アウトライン」等のかから選択「カラー」を選択します。
色のアイコンを選択します。今回は肌色を選択します。
四角形の色が変わります。
あとはこの四角形の位置合わせをします。
今回はイラストが四角形の中に完全に入らないので、調整の必要はありません。
図形が重なった場合は歯車の左横の四角形が重なっているアイコンをりどちらかを上にする場合は、下記の重なり機能でどちらかを上にするか調整できあｍす。
こんな感じになります。
以上でほぼ作成は終了です。
最後に右下の「保存」ボタンを押して、画像をダウンロードしてくだい。
まとめ
無料画像編集ツール「iLoveIMG」を使用して、ブログやSNSで使用するヘッダー画像を作成しました。
ヘッダー画像は大変重要です。
ユーザは、ヘッダー画像が貧弱ですと内容も貧弱では？と直観して帰ってしまいます。
せっかく訪問してくれたユーザを引き留めるために、内容にふさわしいヘッダーを設置する必要があります。
ブログやSNSは時間の経過とともに、目的や内容が変化します。ヘッダー画像を自作できると、変化に合わせて画像が変更できます。
是非とも自作にチャレンジしてみてください。
ここまでお読みいただきありがとうございました。
