Web素材の作り方(矢印1)

ブログが作りたい!GIMPで画像編集 > Web素材の作り方(矢印1)

Web素材の作り方(矢印1)

GIMP2 無料Web素材の作り方(アイコン 矢印1)

GIMP2でWeb素材を作ります

GIMP2を使って、Web素材を作ります。今回は、小さい矢印のアイコンを作成してみましょう。作業では、GIMP2の次の機能を使います。

  • パスツール
  • グラデーション

次の順番で、お話は進みます。

GIMPの導入(インストール)手順については、記事「GIMP2の導入手順」が参考になります。


作成するWeb素材矢印のサンプル

今回は、パスツールを使うので、不慣れな人はちょっと苦戦するかもしれません。完成すると、次のようになります。

無料Web素材矢印1(indianred)

色:Indian Red
(サイズ:15×15)

また、「無料Web素材」にて、色違いで配布しています。良かったら「無料Web素材 矢印(1)」のページもご覧ください。


Web素材の作り方(アイコン 矢印1)

それでは、はじめましょう。GIMP2を起ち上げてください。

(01)~(04)までは、記事「Web素材の作り方(アイコン1)」と一緒なので、次の文字だけの手順で分からない場合は、お手数ですが該当ページへ飛んで作業して戻ってきてください。

  • (01)ファイルの新規作成をクリックする。([ファイル]-[新規])
  • (02)サイズを15×15に設定する。
  • (03)表示サイズが小さいので、800%にする。
  • (04)新規レイヤーを作成する。

4:矢印の作成

(05)

道具箱の「パスツール」を、クリックします。

道具箱のパスツールをクリック

「パスツール」は、自由に形状を作成したい(描きたい)ときなどに使用します。

(06)

はじめに、矢印らしき形状になるように、点を7個打ちます。

適当に矢印っぽく7回クリックしてください。(矢印っぽくなくてもいいんですが、あとで直すのが面倒になります)

矢印っぽく7回クリック

(07)

そして、矢印のお尻が開いたままなので、閉じてあげなければいけません。

[ctrl]ボタンを押しながら、前述(06)で一番最初に打った点をクリックします。これで閉じた矢印ができます。

ctrlボタンを押しながらクリック

(08)

次に、各点の位置を調整します。

各点は、ドラッグすると、移動させることができます。適当に動かして、矢印らしく微調整してください。

各点をドラッグ

(09)

各点は調整できたかしら?各点の調整が終わったら、パスを選択範囲に変更します。

上部メニューの「選択」にて、「パスから」を選択(クリック)してください。

これで、パスで描いた形状が選択範囲として指定されます。

選択にてパスからをクリック

5:矢印を着色する

(10)

道具箱の「塗りつぶし」ツールをクリックし、さらに黒い箇所(前景色)をクリックします。

塗りつぶしをクリックし前景色をクリック

(11)

今回は、前回使用した色を使ってみます。右下部にあるパレットは、最近使用した12色です。

好きな色をクリックし、[OK]ボタンをクリックしてください。

色をクリックしOKボタンをクリック

(12)

選択範囲内をクリックし、色を流し込んでください。

選択範囲内をクリック

うまく着色できたかしら?GIMPでは、このようにパスツールで形状を自由に描き、パスを選択範囲にすることで、色をぬることが出来るわけです。

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

(13)

次は、矢印にグラデーションをかけてみましょう。

道具箱の「グラデーション」ツールを、クリックしてください。

グラデーションをクリック

(14)

グラデーションをかけます。

色を濃くしたい側から、色を薄くしたい側へドラッグします。

色を濃くしたい側から色を薄くしたい側へドラッグ

うまくいかなかった場合は、再度チャレンジしてみれば、やり直すことができます。何度か試してみてください。

7:保存

(15)

頃合(ころあい)の良いところで、保存しましょう。

画像の上部メニュー「ファイル」をクリックし、「別名で保存」を選びます。([ファイル]-[別名で保存])

ファイルをクリックし別名で保存をクリック

(16)

ファイル名を入力し、保存先を選択し、[保存]ボタンをクリックします。(XCF形式ッス)

ファイル名を入力し保存先を選択し保存ボタンをクリック

8:各画像ファイル形式で保存

(17)

あとは、記事「GIMP2の画像ファイル保存方法」で行ったように、gifなどでも保存(エクスポート)してみてください。

前の記事へ
次の記事へ

次回予告

次回は、ここで作成した無料Web素材 矢印(1)をご紹介(配布)しています。


関連記事

画像編集ソフトGIMPに関連する記事を、一部ご紹介します。

GIMPに関するすべての記事をご覧になりたい場合は、『GIMPで画像編集(カテゴリ記事一覧)』をご利用ください。

作成日:2008/02/07 更新日:2008/02/07

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/178-5eb7b1fe
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて