デザイン講座その6 GIMPの使い方 ヘッダー編

デザイン講座その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の使い方 サイドバー目次編■

 

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

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

 

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

 

なぜ私の生徒はこうも実績をあげ続けているのか
その答えは日本一の教科書にあります

 
 
 
 

りょうたろうにコメントする

サブコンテンツ

このページの先頭へ