Web素材の作り方(丸1)

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

Web素材の作り方(丸1)

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

GIMP2でWeb素材を作ります

今回から、GIMP2を使って、Web素材を作っていきます。

実際に作ってみた方が、覚えも早いと思うので、良かったらトライしてみてください。そんな難しいものは作らないので、大丈夫ですよ。

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

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


作成するWeb素材アイコンのサンプル

はじめて作る人もいらっしゃると思うので、初回は簡単に作成できるWeb素材にしてみました。完成すると、次のようになります。

無料Web素材アイコン1(Indigo)

色:Indigo
(サイズ:15×15)

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


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

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

1:新規ファイルの作成

(01)

「道具箱」の上にあるメニューの「ファイル」をクリックし、「新規」を選択します。([ファイル]-[新規])

ファイルをクリックし新規を選択

(02)

「新規画像を作成」が、表示されます。ご面倒でしょうけれど、幅と高さを入力します。

どちらも「15」を入力し、[OK]ボタンをクリックしましょう。

幅と高さを入力しOKボタンをクリック

この「幅と高さ」と言うのは、画像の横の長さと、縦の長さです。一般的にピクセル単位で指定します。

2:表示サイズの変更

(03)

表示サイズが小さいので、800%にします。

表示サイズを800%にする

Webの世界は、ピクセルという単位をよく使います。10ピクセルがどの程度の長さか覚えておくと、CSSをいじるときも便利です。感覚をつかんでおきましょう。

3:新規レイヤーの作成

(04)

新規レイヤーを作成します。まず、レイヤーパネルが表示されていることを確認してください。(取り消し履歴が表示されている場合は、レイヤータブをクリックしましょう)

左下にある[新規レイヤー作成]ボタンを、クリックします。

新規レイヤー作成ボタンをクリック

ポップアップウィンドウで「新規レイヤー作成」が表示されたら、特に変更する箇所はないので、[OK]ボタンをクリックしておいてください。

4:円形の作成

(05)

道具箱の「楕円選択」ツールを、クリックします。

道具箱の楕円選択をクリック

(06)

左上あたりから、適当に右下へドラッグして、円を描きます。

左上あたりから右下へドラッグして円を描く

(07)

道具箱の下に、「楕円選択」として、楕円選択の設定ができる場所があります。

ここの楕円の「大きさ」が、「13」と「13」(13×13)になっていることを確認してください。

適当にやったので、大抵なっていないと思います。どちらにも「13」を入力してください。

楕円の大きさ13を入力

(08)

道具箱の「塗りつぶし」ツールを、クリックし、更に下にある黒い所(前景色と言います)をクリックします。

道具箱の塗りつぶしをクリック

前景色(描画色)と背景色については、別途ご説明いたします。(忘れなければ)

5:円形に色を付ける

(09)

「描画色を変更」が表示されます。

縦にこう色がずらずらっとしている所があるのは分かりますか?(赤→ピンク→青→水色→緑→黄→橙色)

この中で、あなたが好きな色を、適当にクリックしてみてください。(特になければ何でも構いません)

適当な色をクリック

慣れるためにも、何回か適当にクリックしてみましょう。

(10)

左隣の四角い所の色が、クリックするごとに変わっていることに気が付いたかしら?

適当なところで、今度は四角い方で色を選びましょう。「現在」のところに選択した色が表示されます。

色が決まったら、[OK]ボタンをクリックしましょう。

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

右側を見ると分かりますが、HSV/RGBや、HTMLの色コードで選択することもできます。

(11)

円の中に、色を流し込みます。円の中で、クリックしましょう。

円の中でクリック

6:影を付ける

(12)

画像の上のメニューの右端に、「フィルタ」があるのは分かるかしら?

この「フィルタ」をクリックし、「光と影」をクリックし、さらに「Drop Shadow」をクリックします。([フィルタ]-[光と影]-[Drop Shadow])

フィルタをクリックし光と影をクリックしDrop Shadowをクリック

(13)

「Script-Fu: Drop Shadow」が表示されます。

各項目を、次のように設定して、[OK]ボタンをクリックします。

  • オフセット Xを、「2」
  • オフセット Yを、「2」
  • ぼかし半径を、「0」
  • 色を、「適当な灰色」
オフセット、ぼかし半径、不透明度を設定して、OKボタンをクリック

「オフセット」は、影を、X方向(右)と、Y方向(下)に、対象物からどれだけズラすか?を指定します。

「ぼかし半径」は、着地した影からどれだけぼかしを入れるか?を指定します。

「色」は、色部分をクリックすれば選択できます。

(13)

次のような感じになります。オフセット Yは、「1」でも良かったかもしれませんね。

Web素材アイコン作成結果

表示サイズを大きくしたり、小さくしたりして、本来のサイズでどのように見えるかチェックしながら作成してみてください。

7:保存

(14)

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

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

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

(15)

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

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

ファイルタイプは、とりあえずXCFにしておいてください。画像ファイル形式については、後日書きます。

前の記事へ
次の記事へ

次回予告

お疲れさまでした。次回は、無料Web素材の利用規約について書いています。Web素材を利用する前にご覧ください。


関連記事

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

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

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

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

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

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

No title

めちゃくちゃ丁寧で、分かりやすいです!!

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/171-6fc86ca4
 | トップページ | 

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