記事のアイキャッチ画像について

2019年8月30日

今回は、本ブログ記事のアイキャッチ画像および記事内吹き出し画像について、記載していきます。

上記のような画像です。

画像素材について

画像素材については、無料イラスト素材サイトである「イラストAC」さんから、「IWAYUU」さんの画像を使用させていただいています。

「IWAYUU」さんはデフォルメの可愛い女の子の画像素材を多く作成されておりますが、「IWAYUU」さん自身、ソーシャルゲームにイラストを提供されているようで、ソーシャルゲームプランナーをテーマにした本ブログに雰囲気がとてもマッチしていたため、使用させていただいています。

イラストACさんのリンクはこちら

素材の加工について

ダウンロードした画像素材については、そのまま使用せずに無料でダウンロードできる画像編集ソフト「GIMP」を使い

• サイズ変更
• （場合により）反転

の処理を入れています。

「GIMP」のダウンロードはこちら

サイズ変更について

ダウンロードした画像は大きさが「1600*1200」、サイズが「10MB」弱もあるので、このまま使用すると容量が大きくなってしまいます。
読み込み時間にも支障が出そうです。
そのため、適切なサイズに変更する必要があります。

サイズ変更の手順

ダウンロードした画像をGIMPで開き、画面左の編集ツール選択ウィンドウから「拡大・縮小」ツールを選択します

その後、画像をクリックすると、「拡大・縮小」ウィンドウが出現します。

ウィンドウの「幅」を「150」に設定し、「拡大・縮小」ボタンを押します。
「高さ」については、「幅」の数値を設定してボタンを押すことで自動で調整されます。

上記サイズ変更しただけでは、空白が多い画像になってしまうので、画像を右クリックし、「画像」→「キャンパスをレイヤーに合わせる」を選択して実行します。

これで、サイズの変更が完了しました。
サイズも「200KB」ほどに減っています。

あとは「ファイル」→「エクスポート」を行うことで、アイキャッチ画像、吹き出し画像として使用できます。

画像反転について

アイキャッチ画像や吹き出しについては、記事や吹き出しの左に画像が設置される仕組みになっています。

そのため、使用する画像の女の子が何も無い左側に注目している場合は不自然なので、画像に左右反転の処理を入れて右に注目させる必要があります。

画像反転の手順

画像のサイズ変更まで完了した状態で画像を右クリックし、「画像」→「変形」→「水平反転」を選択します。

上記を行うことで、画像の左右反転が完了します。
その後はエクスポートすることで、アイキャッチ画像、吹き出し画像として選択できます。

以上となります。