たった5分で作る彩り。ブログに貼る画像に簡単にメッセージを付ける方法。

自分のブログ記事に貼る画像にちょっとしたメッセージを入れたいと思った事はありませんか？

 

最近はいろんなブログで写真や画像を駆使した、いわゆる「アイキャッチ」と呼ばれる読者さんの目を引くための工夫が当たり前になってきています。

 

文字だらけだった記事に何か画像を貼り付けるだけでも1つ成長です。
今日はその画像にほんのひと手間でメッセージを入れるために僕がやっている方法を紹介します。

GIMP2.6を使って作るメッセージ画像

 

この記事のゴールは上のような簡単なメッセージを画像に加える事です。
GIMPはその使い方だけで専門サイトが幾つもできるほど奥が深いので、今回は画像にメッセージを付けるという目的へショートカットでお送りします。
代わりと言ってはなんですが、GIMP起動からは全ての手順をスクリーンショットで解説しますのでほぼ確実にお伝えできるはずです。

 

初見は見よう見まねになるかと思いますが、慣れれば簡単な編集は5分あればできるようになります。

 

手順
1.無料画像編集ソフト「GIMP2.6」をダウンロードする
2.編集する元素材を探す
3.GIMPを起動する
↓ここから5分ーーーーーーーーーーーーーーーーーーー
4.ベース画像をGIMPへドラッグ・アンド・ドロップする
5.ベース画像の大きさを調整する
6.レイヤーを追加する
7.新レイヤーの範囲を選択する
8.新レイヤーに帯状に色をつける
9.色の透過性を調整する
10.テキストフィールドを作る
11.メッセージを書く
12.フォントを選ぶ
13.フォントの色と大きさを調整し、センタリングする
14.保存する

では実際にやってみましょう

GIMPを既にインストールしている方は2.から。
且つ、加工したい画像もお持ちの方はGIMPを起動して4.からお読み下さい。

1.無料画像編集ソフト「GIMP2.6」をダウンロードする

GIMP – The GNU Image Manipulation Program

上記GIMPサイトからGIMP2.6をダウンロードおよびインストールします。

 

インストール手順に不安があれば下記サイトがすごく丁寧に解説してくれています。
(※何故かダウンロード先のURLが変になってるので手順のみ参照を推奨します。)
無料画像編集ソフトGIMP(ギンプ)のダウンロード手順を画像付きで紹介 – しっぴつや

2.編集する元素材を探す

エントリーの内容に沿った画像。
且つ、著作権フリーである画像を探す必要があります。
僕は大体足成で探しています。

 

写真素材 足成【フリーフォト、無料写真素材サイト】
「写真素材 足成」は、全国のアマチュアカメラマンが撮影した写真を、写真素材として無料で提供しています。個人、商用を問わず全て無料でお使い頂け、その上、煩わしいクレジットやリンクの表記、ユーザー登録は一切不要 …

 

 

3.GIMPを起動する

 

ではGIMPを起動しましょう。
画像編集は結構CPUリソースを食うので、上の画面になってしばらく待つ必要があるでしょう。

4.ベース画像をGIMPへドラッグアンドドロップする

 

GIMPを起動すると3つのフィールドが立ち上がりますが、メインで使うのはGIMPのキャラクターであるウィルバーくんがこっちを見ている真ん中のフィールドです。
まずここに編集したい画像をドラッグアンドドロップします。

 

画像がフィールドに張り付くかと思います。

5.ベース画像の大きさを調整する

元画像のサイズが大きすぎるとブログの記事からはみ出てしまうのでまずサイズを調整します。
「画像」メニューから「画像の拡大・縮小を選択」

 

 

すると画像のサイズを指定するボックスが立ち上がりますので、「幅」のピクセルを自分のブログの記事カラムの幅を超えないように調整します。

 

 

6.レイヤーを追加する

元画像の上に、編集するためのレイヤーを新しくのせます。
「レイヤー」から「レイヤーを追加」を選択。

 

 

新しいレイヤーを追加というボックスが立ち上がるので、サイズはいじらずに「透明」を選択してOK。

 

 

レイヤーって何？という疑問はわくでしょうが、ひとまず深くは考えないで下さい。

7.新しいレイヤーの範囲を選択する

新しく重ねられた部分に色をつけるため、その範囲を選択します。
左の「ツールボックス」を見てください。
左上の「矩形選択」 を使います。

 

 

選択したらメインの画面に戻り、画像の中段を横切るように範囲を選択します。

 

 

8.新しいレイヤーに帯状に色をつける

では選択した範囲に色を塗ってみましょう。
また左のツールボックスから色の指定ボタンを選びます。

 

 

描画色選択ボックスが立ち上がります。
①でクリックして色を選ぶ事ができます。
②例を再現したい方はここでカラーコード「4d4d4d」を入力してみてください。
③①や②で色を指定するとこの「現在」の選択色が変わります。

OKを押せば色の選択が確定します。

 

 

メニューボックス上でも選択色が変わったのが確認できると思います。
その後、「塗りつぶし」ボタンを選択。

 

 

真ん中の画像があるフィールドに戻り、先程から選択されて点線になっている所でクリックします。
これで選択色でベタ塗りできるはずです。

 

 

9.色の透過性を調整する

このままではベタ塗りなので、雰囲気を出すために半透明にしてみます。

 

今度は右側の「レイヤー、チャンネル、パス、アンドゥ…」というボックスを見てください。
「新規レイヤー」が選択されているのを確認し、その上の「不透明度」を100から60くらいまで動かします。

 

 

真ん中の画面で、先程塗りつぶした帯が少し透けたのが確認できれば大丈夫です。

 

 

10.テキストフィールドを作る

キャンバスが整ったところで、メッセージを書くためにテキストフィールドを作ります。
左のメニューボックスから「テキスト」を選択します。

 

 

選択したら真ん中の画面で、半透明になった帯の上でドラッグして同じくらいの大きさのフィールドを作ります。
テキストフィールドができるとともに、テキスト入力のためのボックスが出てきます。

 

11.メッセージを書く

いよいよ画竜点睛。考えたメッセージをタイプしましょう。

 

12.フォントを選ぶ

デフォルトでは物足りないので、フォントを選択してみます。
ツールボックスで「テキスト」が選択されていると下画面がテキスト装飾メニューになります。
そこで「フォント」の右のアイコンをクリックするとフォントの種類がプルダウンで選択できます。

 

13.フォントの色と大きさを調整し、センタリングする

ようやく最後の微調整です。フォントを装飾します。
さきほどフォントを選択した近くに、フォントサイズやフォント色、フォント位置を選択するメニューがあります。

 

フォントサイズを「40」、フォント色を「白」、フォント位置をセンタリングにします。
 

 

選択が完了したら真ん中の画面を見てください。
上記の手順を踏んだならば最初にお見せした画像が完成しているはずです。

 

 

14.保存する

最後に完成したファイルを保存しましょう。
「ファイル」から「名前をつけて保存」へ。

 

 

「画像の保存」というボックスが出てきます。
ここでファイル名と保存先を指定します。
保存先はデスクトップ等好きな場所を選びましょう。
ファイル名は後半に「.png」や「.jpg」とつけると画像ファイルとして保存可能です。
入力したら「保存」を押します。

 

 

.png等でレイヤーのある画像を保存した場合、「ファイルのエクスポート」というボックスが出てきます。
「可視レイヤーの結合」をチェックした状態で「エクスポート」を選択。

 

 

またまたボックスが出てきます。
下の画面のチェック状態で「保存」を実行。
これで画像ファイルが指定した場所に生成されます。
お疲れ様でした、これで完了です。

 

 

ひと手間の画像で記事はよくなると思います

例えばそれがパラグラフの要約を表現するものならばユーザにとって有益です。
そうでなくとも、メッセージをつけただけでもそれは貴方の作品であり、記事に愛着が湧くでしょう。

 

貴方がこの記事をきっかけに、いつもただ貼り付けていた画像に一工夫できるようになったとすればこの上ない幸いです。