チップの日常

管理人チップの日常の出来事や気になる事を綴るブログ

画像編集フリーソフト「GIMP」を使って「続きを読む」ボタンを作成しました|ボタンの作成方法

 スポンサード リンク

 先日、「続きを読む」ボタンを作り直しました。

 画像編集のフリーソフト「GIMP」を使って結構簡単にできたので、作成方法を書いていこうと思います。

 はてなブログでの「続きを読む」画像の設置方法は下の記事で書いたのでそちらを参考にしていただけると幸いです。



 「GIMP」は無料で使える画像編集ソフトとして有名で、かなり優秀です。

 インストール方法は「GIMP インストール」とかでググれば簡単に見つかると思います。

ボタン作成方法

f:id:chipsforest:20151118183010p:plain:w500

 まずは「ファイル」→「新規画像」を選択すると画像のサイズ選択画面が出ます。

 今回は200×50で作成しました。


f:id:chipsforest:20151118183030p:plain:w300

 画面左のツールボックスにある左上(赤丸の部分)をクリック。


f:id:chipsforest:20151118183051p:plain:w500

 次に画像の白い部分を右クリック「選択」→「すべて選択」をクリック。

 もう一度白い部分を右クリック「選択」→「角を丸める」をクリック。


f:id:chipsforest:20151118183332p:plain:w300

 ↑「半径(%)」の数値を大きくするほど角が丸くなっていきます。

 今回は90%にしました。


f:id:chipsforest:20151118183415p:plain:w300

 ↑左のツールボックスの赤で囲った部分をクリックして、背景画像の色を選択します。

 自分の好きな色に設定して「OK」を選択。


f:id:chipsforest:20151118183551p:plain:w500

 選択した範囲内で右クリックして「編集」→「描画色で塗りつぶす」を選択。


f:id:chipsforest:20151118183612p:plain:w500

 背景完成です。


 次に文字を入れていきます。


f:id:chipsforest:20151118183704p:plain:w300

 左のツールボックス内の「A」(赤で囲った部分)を選択。

 文字を書きたい部分でドラッグして範囲選択します。


f:id:chipsforest:20151118183722p:plain:w300

 左のツールバーの下の部分で文字の色やサイズ等を選択可能です。

 今回はフォント「MS Gothic」、サイズ「26」、色「白」、文字間の幅「3.0」にしました。


f:id:chipsforest:20151118183743p:plain:w300

 ↑テキストボックス内に文字を書くと選択した部分に表示されます。

 あとは位置を調整していきます。

 これでとりあえず完成。

画像の保存方法

f:id:chipsforest:20151118183802p:plain:w500

 作業が途中だったり、今後修正する可能性があるときは「ファイル」→「名前を付けて保存」。

 「名前を付けて保存」で保存するとGIMP用のファイルになるので、普通の画像ファイル(PNGやJPG等)としては使えません。

 画像として使用したい場合は「ファイル」→「名前を付けてエクスポート」から保存できます。

もう一つ画像を作る

f:id:chipsforest:20151118172916p:plain:w200

 ↑先程作った画像だけを「続きを読む」ボタンとして設定すると、このボタンにカーソルを持っていったときにこうなります。

 ちょっと不自然。

 ということで、カーソルが置かれた後も自然な感じになるように細工していきます。

f:id:chipsforest:20151118183844p:plain:w500

 「色」→「明るさ-コントラスト」を選択。

f:id:chipsforest:20151118183902p:plain:w300

 明るさを75程度にして「OK」を選択。

 これで「名前を付けてエクスポート」で保存します。

 GIMPでの作業はこれで終了です。


 「続きを読む」部分に最初に作った画像、カーソルが乗った時に後に作った画像を貼れば完成です。

f:id:chipsforest:20151118173642p:plain:w200

 これで前よりはカーソルが乗った時の不自然さがなくなったかと思います。

まとめ

 説明長々と書いてしまいましたが、今回の画像なら10分程度の作業で完成すると思います。

 あと、今回は背景色と文字を入れただけの簡単な画像を作成しただけなんですが、GIMPはもっと手の込んだ画像も作れるのでかなり便利なフリーソフトです。

 機会がればGIMPの他の機能とかも紹介出来たらなと思っています。

 ではでは^^

広告を非表示にする

PAGE TOP