デザイン講座その4 GIMPの使い方 バナーボタン編

デザイン講座その4

 

GIMPを使って
バナーボタンを作っていきましょう。

GIMPを初めて使う方にも
分かりやすいように動画をご用意しています。

是非、動画を見ながら
一緒にやっていきましょう!

 

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

【バナーボタンを作る方法】

についてお話しします。

 

 

では、動画の復習です。

動画を見てわからなかったら
記事を見てしっかり次に進んでくださいね。

基本的な使い方にも
慣れていきましょう。

 

バナーボタンの目的

このバナーボタンを
関連記事下に貼ります。

リンク先は、

【キラーコンテンツ】

です。

キラーコンテンツがわからない方は
こちらの記事をご覧ください。

 

手動ペナルティ対策講座その3 独自性向上計画

 

今回は

【人気記事ランキング】

という無難なものなのですが、
他のブログにはない面白いものにしてくださいね。

 

そのキラーコンテンツを
どの記事からもすぐ見れるようにします。

 

理由はもちろん、

P/S、平均セッション時間、直帰率
などを良くするためです。

 

バナーボタンはお金の匂いのしない
内部リンクだと非常に目立って効果的

・・・と、

こちらの記事でお話ししました。
この機会にもう一度確認してください。

 

 バナーボタン・テキストリンクどっちにすべき

 

では早速、
作業に入って行きましょう!

 

手順その1 サイズ設定

まずは画面左上のメニューから

 

【ファイル】

  ↓

【新しい画像】

 

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

 

A

 

今回は

500×100

で進めていきましょう。

 

手順その2 レイヤー設定

では早速ボタンを作っていくんですが、
先ず最初に、【背景】のレイヤーを消していきます。

 

B

 

 

  1. 【背景】レイヤーを選択後、右下のゴミ箱で削除
  2. 【新しいレイヤーを画像に追加】で同じサイズのレイヤーを追加します

 

角を丸める

ボタンの角を丸めていきます。
角を丸めたほうが安堵感

がありますからね。

左上のメニュー【選択】から
【角を丸める】を選択して下さい。

C

 

半径を設定します。
半径100%で180度の半円になります。

今回はボタンなので
MAX100%でいきます!

 

手順その3 ボタン部を作る

先ほど角を丸めた範囲に
色を付けていきましょう!

 

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

先に色を設定しておきましょう。

描画色を明るめの黄色。
背景色を暗い黄色に設定しておきます。

では、

【ツールボックス】から
【グラーデーション】を選択します。

 

GIMP 使い方

 

ツールオプション内のグラーデーションが
【描画色から背景色】になっていることを確認して下さい。

 

GIMP 使い方

 

このグラーデーションはいじると色々面白いので
是非一度イジってみてください 笑

そして、形状を【放射状】に設定。
中心から端にカーソルをドラッグしましょう。

 

GIMP 使い方

 

 

ボタンを立体的にする

次にこのボタンを立体的にしていきます。

左上メニューの

 

【フィルター】

  ↓

【装飾】

  ↓

【ベベルの追加】

 

の順に選択して下さい。

 

G

 

厚さはお好みで設定して下さい。
動画では【10】にしています。

【コピーで作業する】
チェックをは外しておきましょう。

【OK】を押してください。

 

H

 

あっという間に
立体的に出来ました!

 

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

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

 

テキストの設定

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

 

I

 

 

あとは字を打つだけなのですが、
その前に!

ツールオプションで【フォント】
設定しておきましょう。

 

 

 

J

 

 

動画では、

【Meiryo UI Bold Italic】

に設定しています。

 

やっとこさ色を赤にして、
字を打っていきます(^▽^;)

 

人気記事ランキング

 

と打ったらフォントサイズを
ボタンの横幅いっぱいに合わせます。

動画ではフォントサイズを
【60】に設定しました。

 

ボタンの中心に持っていく

【人気記事ランキング】という
テキストをボタンの中心に持っていきます。

【ツールボックス】から
【整列】を選択します。

K

 

この【整列】なんですが
選択方法にちょっと癖があります。

私も最初わかりませんでした(^▽^;)

 

最初に何の中心に持っていくか

を選択し次に、

何を中心に持っていくか

を選択します。

 

今回の場合、

ボタン選択後、
テキストを選択です。

 

その後ツールオプションの

【中央揃え(水平方向の)】

を選択し、
まず横方向を真ん中に持っていきます。

L2

 

縦方向も同じ方法でやっていきましょう。
連続ではできませんので注意です。

 

手順その5 文字を凹ます

このままでもいいんですが、
ちょっとおしゃれに、文字を凹ませましょう。

 

人気記事ランキングの
レイヤーの上で右クリックを押し、

 

【不透明部分を選択範囲に】

 

を選択します。
テキストが選択範囲になりましたね。

 

M2

 

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

 

【フィルター】

   ↓

【照明と投影】

   ↓

【Xach 効果】

 

を選択します。
(読み方わかりません 笑)

 

変えるのは【ハイライト色】だけです。

デフォルトだと白だと思うのですが、
薄い灰色に設定しましょう。

他はイジらないで【OK】を選択。

 

N

 

そうすると、
レイヤーが2つ増えたましたよね。

【影】【ハイライト】です。

前者の【影】をゴミ箱に捨ててしまいましょう。

 

P
これで文字が凹んでる風になりましたね!

 

o

 

これでバナーボタンは完成です。

 

手順6 .pngで出力する

さて、最後に
ブログに貼るため出力していきましょう。

左上メニューの

 

【ファイル】

  ↓

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

 

を選択。

 

下の方にある

【ファイル形式の選択】

【png画像】にしてエクスポート。

 

これで完成です!
お疲れ様でした。

 

デザイン講座その7で
実際ソネットブログに貼っていきますので

大事に保存しておいて下さいね。

 

記事のまとめ

■デザイン講座その4 GIMPの使い方 バナーボタン編■

 

○画像を作る前に寸法を測っておこう

○GIMPの基本的な使い方を覚えよう

 

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

 

 

LP-2  

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

サブコンテンツ

このページの先頭へ