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

デザイン講座その5

 

GIMPでサイドバーのバナーを作りましょう!

サイドバーはデカデカと!
目立たせたもの勝ちです(*´∇`*)

今回は目次ですが
キラーコンテンツなどもガンガン作っていきましょう!

本記事では、
画像編集ソフトGIMPで

【サイドバー目次を作る方法】

をお話しします。

 

 

では動画の復習です。

デザイン講座その4の時同様、
一緒にやっていきましょうね♪

 

サイドバー目次の目的

サイドバーは、

PCで訪問した方にとって
一番目立つ場所です。

よく、アドセンスをサイドバーに貼って
クリック率低いからあまり効果ない・・・

と考える方いますがそれは違います。

 

目立つ分“広告”と
一発で分かり避けるからですね。

 

ならば、

その目立つものを
広告にしなければいいんです。

あなたのブログの一番面白いもの
(キラーコンテンツ)

ブログ内を巡回しやすくする目次
(利便性の向上)

・・・などなど。

 

“ユーザーさんの為のみ”

 

のものにするんです。

そうすることで、直帰率などの
数値がどんどん良くなっていきますよ。

 

では、さっそくですね。
作業に入って行きましょう!

 

手順その1 サイズ設定

左上のメニューから

 

【ファイル】

  ↓

【新しい画像】

 

を選択。
画像のサイズを選択します。

 

a

 

今回は、

200×600

で進めていきます。

あなたのサイドバーのサイズを
測っておいてくださいね!

 

手順その2 レイヤー設定

こちらは前回のデザイン講座その4と
同様なので省きます。

最初からある背景レイヤーを消して、
新規レイヤーを立ち上げて下さい。

 

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

 

角を丸める

こちらも前回と同様です。

今回はサイドバーの画像なので
数値を少し下げます。

動画では【20】に設定しました。

 

手順その3 バナー本体を作る

こちらも前回と同様ですね。
まずは色を付けていきましょう。

 

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

では先に色を設定しておきましょう。
もちろんお好みで構いませんよ(^▽^;)

 

動画では、

描画色を濃い青
背景色を薄い青

に設定しました。

 

前回と違うのは、
ツールオプションの【形状】です。

形状を【線形】に選択します。

 

b

 

バナー本体の上から下にドラッグして
グラーデーションをかけましょう。

 

c

 

 

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

では早速文字を入れていきます。

テキストの設定

【ツールボックス】から
【テキスト】を選択します。

前回と同じく、

ツールオプションで
【フォント】【色】を設定します。

 

動画では、

フォントを【Meiryo UI Bold Italic】
色を【白】に設定しています。

 

“目次は”と打ったら
大きさと位置を設定します。

今回の大きさは【60】です。

 

位置は【移動】で変えて下さい。
しっかり字の上でクリックしてくださいね。

 

d

 

動画でも説明していますが、

平仮名だけ小さかったら
そこだけ大きさを変えてください。

同じ要領で、

“ここを”
(大きさ 30)

“クリック”
(大きさ 100)
(フォント Impact Condensed)

 

と入れていきましょう!
完成形はこんな感じです。

 

e

 

 

テキストに厚みをつける

このままでもいいんですが、
少しテキストを工夫しましょう。

テキストに厚みを付けていきます。

 

まずは、“目次は”の文字に
厚みを付けましょう。

 

レイヤーの“目次は”のところで右クリック。

【レイヤーの複製】を押し、
同じレイヤーをもう一つ作ります。

 

f

 

出来ましたら、

下のレイヤー(上の画像の赤丸)
の上でまた右クリック。

【不透明部分を選択】を選択します。

字が選択されましたら、
画面左上のメニュー。

 

【選択】

 ↓

【選択範囲の拡大】

 

を選択して範囲を拡大します。
動画では【2px】大きくしていますね。

 

大きくなりましたら色を塗っていきましょう。
描画色を【黒】に選択。

左上のメニューの

 

【編集】

 ↓

【描画色で塗りつぶす】

 

を選択。
拡大した範囲を塗りつぶします。

そうすると、
文字の周りが黒くフチどられるはずです。

 

g

 

これだけでもいいんですが、
今作った黒のフチを

ツールボックスの【移動】
すこし右下に動かすことによって

すこし立体的にすることが出来ます。

 

h

 

 

出来ましたでしょうか?

これと同じ事を、
“クリック”でも行います。

“クリック”は色を変えてますね。
こちらもお好みで設定してください。

 

“ここを”という文字は
少し角度を変えて可愛くしています。

ツールボックスの
【回転】を選択して回しちゃって下さい。

 

i

 

 

ここまではこんな感じです。
もうちょっとでお終いですよ!

 

j

 

 

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

最後に、

プロのイラストレーターさんが描いた
イラストを入れていきます。

今回の入れるイラストは“指”です。

指とか画像に入れると、
ユーザーさんもクリックしやすくなりますよね。

 

まずはDL!

ここで登場するのが、
デザイン講座その1で紹介した

イラストACさんです。

 

URL → http://www.ac-illust.com/

 

こちらで、

【指】とか【人差し指】とか【クリック】とか
検索して指の画像をDLします。

pngデータで保存してくださいね。

会員登録方法、DL方法は
デザイン講座1を御覧ください。

 

デザイン講座その1 必要ソフト・サイト準備

 

今回はこちらのイラストを
入れていきます。

136419

 

GIMPに取り込む

DLした画像を解凍ソフトで
解凍しましたら、

GIMPにそのままドラッグして
持ってきちゃいましょう!

 

画像がビックリするほど
大きいですよね(^▽^;)

画像のレイヤーの上で右クリック。
【レイヤーの拡大・縮小】を選択します。

 

k2

 

【幅】【高さ】を変えましょう。
【幅】だけ変えれば高さも自動に変わります。

動画では【200】で設定しています。

ちょうどいいサイズになったら
【移動】でイラストを動かします。

文字も微調整しましょう。

これで完成です!!

 

l

 

 

こちらもデザイン講座その7で
ソネットブログに貼っていきます。

pngで保存してくださいね。

出力の方法は
デザイン講座その4で解説しています。

 

記事のまとめ

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

 

○イラストレーターさんの画像を入れ、クオリティを上げよう

○テキストの見せ方を工夫しよう

 

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

 

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

 
 
 
 

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

サブコンテンツ

このページの先頭へ