デザイン講座その6

 

 

GIMPでヘッダー画像を作りましょう!

ヘッダー画像はブログの
第一印象として大きな意味を持ちます。

しっかりあなたのブログの
イメージに沿ったヘッダー画像を作りましょう。

本記事では、
画像加工ソフトGIMPで

【ヘッダー画像作成方法】

について、お話しします。

 

 

では、動画の復習です。
今までの集大成ですね

やることは同じなので今までの
復習も兼ねてやっていきましょう!

 

ヘッダー画像の必要性

ヘッダー画像と言うのは
第一印象として残ります。

人間も第一印象はかなり大事ですよね。
サイト(ブログ)も同じです。

人間性があり、面白みがあり、
信頼性・独自性が高い第一印象なら

ユーザーさんも訪れた際
絶対目に止まります。

ここは手を抜いてはいけませんよ!!
しっかり作っていきましょうね。

 

今回作るのは、
ソネットブログのテンプレート。

“ベーシック”用です。
故にでかいです 笑

あなたのブログの
ヘッダーサイズで作ってくださいね。

 

手順その1 サイズ設定

左上のメニューから

 

【ファイル】

  ↓

【新しい画像】

 

を選択。
サイズを設定します。

 

a

 

今回は、

900×500

です。
デカすぎです 笑

 

手順その2 レイヤー設定

いつもと同様、

背景レイヤーを消して、
新規レイヤーを立ち上げます。

わからない人は
デザイン講座その4を御覧ください。

 

→ デザイン講座その4 バナーボタンを作ろう

 

手順その3 ヘッダー本体を作る

今回は角を丸めません。

さっそく【グラーデーション】
かけていきましょう。

 

グラーデーションをかける

こちらもいつも通りですね。
まず色を設定して下さい。

 

動画では、

描画色を濃いオレンジ、
背景色を薄いオレンジ

に設定しています。

 

【グラーデーション】を選んで
お好みのグラーデーションをかけて行きましょう。

【螺旋】にしたら
こんな感じになりますよ。

 

b

 

 

手順その4 文字を入れていく

【ツールボックス】の【テキスト】で
テキストを打っていきます。

細かい設定などは省きます。

デザイン講座をこの記事まで
見られた方は分かりますね( ̄∀ ̄*)

テキストを入れたら
こんな感じになります。

 

c

 

テキストにグラーデーションをしていく

字にもグラーデーションを
つけていきましょう!

まず、

テキストのレイヤーの上で右クリックを押し
【不透明部分を選択範囲に】を選択。

そしたら手順その3同様
グラーデーションをかけていきます。

お好みの色で
グラーデーションして下さい。

 

動画では、

“主婦への一歩!”を【緑】と【白】に。

“新米ママ”と“脱却ブログ”を
【ピンク】と【白】に設定しています。

 

グラーデーションをかけると
こんな感じになります。

 

e

 

・・・う~ん。

ちょっと背景色とカブってます。
見辛いですよね(^▽^;)

ですので、
テキストにフチを付けましょう!

フチの付け方は
デザイン講座その5を参考にして下さい。

 

→ デザイン講座その5 GIMPでサイドバーの目次を作ろう

 

白のフチをつけると
こんな感じでちょっと見やすくなります。

 

f

 

 

ここまでできたら、

フチのレイヤーとテキストのレイヤーを
くっつけてしまいましょう!

上のレイヤーで右クリックを押し、
【下のレイヤーと統合】を選択です。

 

i2

 

これでレイヤーがスッキリしました。

 

テキストにシャドウをつける

ここからさらにです!
白い影をつけていきましょう。

先ほどと同じように
レイヤーの上で右クリック。

【不透明部分を選択範囲に】を押し、
テキストを選択範囲に設定します。

そしたら、左上のメニューの

 

【フィルター】

   ↓

【照明投影】

   ↓

【ドロップシャドウ】

 

の順で選択。

【色】の部分を白に変更して
【OK】を押します。

 

g

 

 

もちろん全部のテキストに
シャドウをかけて下さいね。

全部かけるとこんな感じになります。

 

 

j

 

わ・・・分かりづらいかな?
まぁいいでしょう 笑

では最後、
イラストを入れていきます!

 

手順その5 画像を入れていく

イラストのDL方法、GIMPへの入れ方は
デザイン講座その5と同様ですので

そちらを参考にしてくださいね。

 

デザイン講座その5と違い今回は、
2種類、3画像いれていきます。

【主婦】の画像と

111592

 

【炎】の画像です。

 

137168

 

こちらの画像を組み合わせて
主婦の目がメラメラ燃えて

「やってやるぞぉ~!!」

みたいな画像にします。
組み合わせてこんな感じにしましょう!

 

k

 

 

 

いい感じですね♪

訪問者さんがパッと見で
ブログのテーマをイメージしやすいですよね!

これもしっかり
pngデータで出力しといて下さい。

左上メニューの

 

【ファイル】

   ↓

【名前をつけてエクスポート】

 

ですよ!

 

 

では次の
デザイン講座その7で最後です。

今まで作った画像を
ソネットブログにはっていきましょう!

 

記事のまとめ

■デザイン講座その5 GIMPの使い方 サイドバー目次編■

 

○基本的なテクニックをマスターしよう

○センスを磨き、独自性を出そう

 

以上、
ガンガンやっていきましょう!

 

創る気になったら受け取ってください、無料ですので