Web素材の作り方(ウサギさん)

ブログが作りたい!GIMPで画像編集 > Web素材の作り方(ウサギさん)

Web素材の作り方(ウサギさん)

GIMP2 Web素材の作り方(アイコン ウサギさん)

GIMP2でWeb素材を作ります

前回の記事「GIMP2 パスの使い方」で、だいぶ曲線を描くことにも慣れてきたと思うので、今回は、パスを使ってウサギさんを描いてみようと思います。

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

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


作成するWeb素材のサンプル(ウサギさん)

完成すると、次のようになります・・・ウサギに見えないかしらん?

無料Web素材うさぎ(peachpuff)

色:peachpuff
(サイズ:30×30)

また、「無料Web素材」にて、色違いで配布しています。良かったら「無料Web素材 ウサギさん」のページもご覧ください。


Web素材の作り方(ウサギさん)

それでは、ウサギさんを作成します。

1:新規ファイルの作成

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

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

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

2:ウサギさんの外観を描く

(05)

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

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

(06)

はじめに、ウサギさんらしき形状になるように、点を9個打ちます。

  • クリック
  • 右(ちょっと上)にドラッグ
  • クリック
  • 右にドラッグ
  • クリック
  • 右(ちょっと下)にドラッグ
  • クリック
  • 左下にドラッグ
  • 左上にドラッグ
ウサギっぽく9回クリック

(07)

次に、ウサギさんの顔が開いたままなので、閉じてあげなければいけません。

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

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

(08)

各点、ハンドルを適当に動かして、ウサギさんらしくなるように調整しましょう。

各点・ハンドルをドラッグ

3:パス線を範囲選択にする

(09)

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

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

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

4:ウサギさんを着色する

(10)

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

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

(11)

私は前回使用した色を使います。(お好きな色で構いませんよ)

右下部にあるパレットの適当な色をクリックし、[OK]ボタンをクリックします。

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

(12)

選択範囲内をクリックし、色を流し込みます。

選択範囲内をクリック

5:目を作成する

(13)

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

(14)

道具箱の「楕円」を、クリックします。

楕円をクリック

(15)

「楕円」を描いて、適当な色で塗りつぶします。

楕円を描いて適当な色で塗りつぶす

もうそろそろ、こまごまと書かなくても出来るかと思うのだけれど・・・大丈夫かしら?

(16)

レイヤーを複製します。

レイヤーを複製

レイヤー複製の方法が不明な場合は、記事「レイヤーを使いまくる」が参考になります。

(17)

「道具箱」の「移動」ツールをクリックします。

移動をクリック

(18)

「目」を、ドラッグします。

目をドラッグ

6:口(くち)を作成する

(19)

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

(20)

「口」を、描きます。

  • クリック
  • クリック
  • 左にドラッグ
  • Ctrl + クリック
口を描く

(21)

[選択]-[パスから]にして、塗りつぶしてください。

パスから範囲選択し塗りつぶし

いかがでしょうか?かわいいうさぎさんが、描けたでしょうか?何度か試したり、付け加えたりすれば良くなっていくものと思います。いろいろ試してみてください。

7:保存

(22)

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

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

(23)

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

前の記事へ
次の記事へ

次回予告

次回は、ここで作成したウサギさんのアイコンをご紹介(配布)しています。


関連記事

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

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

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

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

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

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

No title

分かりやすい解説ありがとうございます。
解説書を見ても分からなかったのが、あっさりと理解できました。

GIMP!GIMP!GIMP!

なるほどさん、こんにちは。
コメントありがとうございます!(・∀・)/

お役に立てたようで何よりです。
こりゃ、もっけの幸いです。

また、遊びに来てねーん。ヾ(*´∀`*)ノ

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/181-351e6eae
 | トップページ | 

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