Web素材の作り方(数字1)

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

Web素材の作り方(数字1)

GIMP2 Web素材の作り方(アイコン 数字1)

GIMP2でWeb素材を作ります

今回も、Web素材を作ります。GIMP2の機能としては、新たに次の2つを使います。

  • 文字入力
  • 角丸

アイコンの中に文字を入れるのだけれども、とりあえず番号にしてみました。そして、次の順番で、お話は進みます。

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


作成するWeb素材のサンプル(数字1)

完成すると、次のようになります。

無料Web素材アイコン2(black)

色:black
(サイズ:25×25)

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


Web素材の作り方(数字1)

それでは、アイコンを作成します。

1:新規ファイルの作成

次の手順をサクサクと進めて、新規で画像ファイルを作成してください。

  • (01)ファイルの新規作成をクリックする。([ファイル]-[新規])
  • (02)サイズを25×25に設定する。
  • (03)表示サイズがあわなければ、合わせる。
  • (04)新規レイヤーを作成する。

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

2:1つ目の四角を作る

(05)

道具箱の「四角範囲選択」を、クリックしてください。

道具箱の四角範囲選択をクリック

(06)

道具箱の下に、「四角範囲選択」についての詳細設定が表示されます。

「Rounded corners(角丸)」にチェックを入れます。チェックを入れると、半径を設定できるようになります。

Rounded corners(角丸)にチェックを入れる

「Rounded corners(角丸)」の半径を大きく設定すれば、より丸くなり、小さく設定すれば、より尖った状態になります。

(07)

描画画面の方で、左上から右下にドラッグします。

左上から右下にドラッグ

(08)

しかし、1回でうまく行くとは限りません。そういう場合、何回もやらなければいけないかと言うと、そんなことはありません。

「四角範囲選択」の詳細設定にスクロールバーが付いています。これを下にスクロールさせると、「Position」と「大きさ」という入力項目があります。

四角範囲選択のPositionと大きさ

例えば、四角範囲選択を次のようにしたい場合は、以下ようになります。

Position
(位置)

右に2、下に3

大きさ

幅3、高さ1

Positionを(2, 3)、大きさを3×1
Positionを(2, 3)、大きさを3×1に設定した場合

頭で考えるより、チクチク数値をいじってみる方が分かり良いと思います。こういうものか・・・と思える程度にさわってみましょう。

(09)

Position(位置)を(0, 0)、大きさを25×25にできたかしら?

できたら、好きな色で塗りつぶしてください。

3:2つ目の四角を作る

(10)

新規レイヤーを追加してください。

(11)

「四角範囲選択」を、クリックして、さらに前景色/背景色の右上にある「双方向の矢印」をクリックします。

四角範囲選択をクリックして、双方向の矢印をクリック

この「双方向の矢印」をクリックすると、前景色と背景色が逆転します。ここでは難しく考えず、ひとつの作業として流しておいてください。

(12)

描画画面の方で、左上から右下にドラッグします。

左上から右下にドラッグ

Position
(位置)

右に2、下に2(2, 2)

大きさ

幅21、高さ21(21×21)

右に2、下に2、幅21、高さ21

(13)

できたら、好きな色で塗りつぶしてください。

4:3つ目の四角を作る

(14)

新規レイヤーを追加してください。

(15)

「四角範囲選択」を、クリックして、さらに前景色/背景色の右上にある「双方向の矢印」をクリックします。

四角範囲選択をクリックして、双方向の矢印をクリック

もう一度「双方向の矢印」をクリックすると、前景色と背景色が逆転します。(戻ります)

(16)

描画画面の方で、左上から右下にドラッグします。

左上から右下にドラッグ

Position
(位置)

右に4、下に4(4, 4)

大きさ

幅17、高さ17(17×17)

右に4、下に4、幅17、高さ17

(17)

できたら、好きな色で塗りつぶしてください。

(18)

つまり、少しずつ小さい四角を上にのせてみたというわけです。

少しずつ小さい四角を上にのせてみた

5:文字入力

(19)

「道具箱」の「文字ツール」を、クリックして、さらに前景色/背景色の右上にある「双方向の矢印」をクリックします。

文字ツールをクリック

つまり、色を交互に使っているわけです。

(20)

描画画面でクリックします。

描画画面でクリック

(21)

文字エディタが表示されるので、好きなように文字を入力します。

文字を入力

(22)

「道具箱」の下の「文字ツール」詳細設定にて、「フォント」と「大きさ」を決めます。

フォントと書いてある右隣に、フォントをメニュー表示させるボタンがあります。クリックしてメニューから好きなフォントを選択しましょう。

また、フォントサイズも描画画面を見ながら、入力しましょう。

フォントと大きさを決める

フォントやサイズが決まったら、文字エディタは[閉じる]ボタンをクリックして、閉じて構いません。

(23)

最後に、移動ツールを使って、文字をよきところに移動させましょう。

文字を移動

6:保存

(24)

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

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

(25)

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

前の記事へ
次の記事へ

次回予告

お疲れさまでした。単純なアイコンですが、けっこうステップが多かったですね。もっと簡単に作成できる方法があるのかも・・・。

次回は、ここで作成した角丸・数字入りのアイコンをご紹介(配布)しています。


関連記事

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

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

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

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

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

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

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/184-ad1cbc93
 | トップページ | 

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
ありのごとくあつまりて