
★新URL:http://20kaido.com/
★新RSS:http://20kaido.com/index.rdf
いままでFC2ブログで5年間、お世話になりました。感謝です。
移転先でもよろしくお願いいたします!
二十歳街道まっしぐら(FC2ブログ時代)人気記事TOP50まとめ
こんなこともできる!GIMPのチュートリアル13個まとめ
GimpでWeb2.0風バッジを簡単作成!
-------------------------Gimp特集-------------------------
過去記事:Gimpで飛び出す写真を作ろう!(初心者向け)
過去記事:GimpでWeb2.0風-反射ロゴを作ろう!
----------------------------------------------------------
☆ GimpでWeb2.0風バッジを作ろう! ☆
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-==-=-=-=-=-=-=
【目次】(クリックすると、各ステップへ移動します。)
■ステップ1:Gfigオブジェクトの作成
■ステップ2:バッジを描く
■ステップ3:バッジにグラデーションをつける
■ステップ4:バッジに縁をつける
■ステップ5:バッジに影をつける
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-==-=-=-=-=-=-=
完成画像:

■ステップ1:Gfigオブジェクトの作成
1.Gimp起動 → 新規作成
2.[フィルタ] → [下塗り] → [Gfig]
参考画像:

2.Gifオブジェクトを作成します。
参考画像:

3.星型のツールをダブルクリックして、点の数を決めます。
20~30くらいがちょうど良いかと思います^^
参考画像:

4.描きます。
参考画像:

5.参考画像を参考に、ギザギザの大きさを調節します。
参考画像:

6.こんな感じになればOKです!
参考画像:

■ステップ2:バッジを描く
1.さきほどの、Gfigオブジェクトのところで、[使用]を 選択 にして、[描画]ボタンを押します。
参考画像:

2.こんな感じに、点線で描かれます。
参考画像:

3.これで、バッヂのかたどりは完成です。
これに色を塗っていきます。
■ステップ3:バッジにグラデーションをつける
1.バッジのかたどりが完成したので、色を塗りましょう。
2.グラデーションツールを使用します。
参考画像:

3.グラデーションを自分で作成します。
左端と右端の色を指定するだけでOK
参考画像:

※
~ グラデーションのコツ ~
1.左端の色を決める。
2.右端の色は、左端の色を少しだけ明るくしたもの(or暗くしたもの)を使用。
3.キレイなグラデーションになります☆
4.グラデーションが完成したら、保存します。
参考画像:

5.グラデーションを適用します。
参考画像:

こんな感じになりましたら、オッケーです^^

■ステップ4:バッジに縁をつける
1.さきほどの状態から、右クリック → [選択] → [縁取り]
をします。
参考画像:

縁は 4~7pxくらいが良いと思います。
2.このように、縁だけが選択されます。
参考画像:

3.塗りつぶしツールで、縁にしたい色を選択します。
参考画像:

4.縁のところで右クリック → [編集] → [描画色で塗りつぶし] ます。
参考画像:

こんな感じになったら、オーケーでーす^^

■ステップ5:バッジに影をつける
影をつけて、ちょっと立体感を出しましょう!
1.[色で選択ツール] で 背景の白い部分を選択します。
参考画像:

2.右クリック → [選択] → [反転] をします。
こうすることで、バッヂ全体を囲むことができます。
参考画像:

こんな感じ
↓

3.右クリック → [Script-Fu] → [影] → [影付け] をします。
参考画像:

どんな影をつけるか設定します。
オフセットが大きいほど、元画像から影がはみ出ます。
ぼかしを大きくすると、ぼんやりした影が作れます。
参考画像:

以上で、バッヂの完成です^^

GimpでWeb2.0風-反射ロゴを作ろう!
まとめることにしました。
過去記事:【Gimp特集】Gimpで飛び出す写真を作ろう!(初心者向け)
=======================================================
【目次】(クリックすると、各ステップへ飛びます。)
ステップ1:文字を書く
ステップ2:反転させる
ステップ3:アルファ(透過)をかける
=======================================================
今回は、Gimpで反射する画像を作るものです!
よくロゴとかで見かけますよね、
水面か氷かなにかわかんないけど 無駄に反射してるやつ。
けっこう手軽に作れます☆

-----------------------------------------------
完成画像
↓

-----------------------------------------------
☆ GimpでWeb2.0反射ロゴを作成 ☆
※かなり詳しく書いてるので、ダラダラしてます。
※Gimpに慣れている人は、適度に飛ばしてゆくといいと思います。
****************
文字色:#AAFF00
背景色:#000000
**************** でやります。
ステップ1:文字を書く
1.Gimpを起動。
2.新規作成。サイズはお好みで^^
3.そして、まずは反射させたい文字を書きます。
参考画像:

[T]ってやつで テキスト入力です。
色やフォント、サイズも ここで決めてしまいましょう!
4.文字を書いて、適当な場所へ移動させます。
真ん中より ちょい上においておくと なにかと便利です。
参考画像:

現在、このような感じになっていれば OKです!!

ステップ2:反転させる
1.では、文字を書いたレイヤーを複製しましょう。
参考画像:

2.見た目は何も変化ありませんが、レイヤーが二つに増えています。
参考画像:

レイヤー名は各自分かりやすく変更しておいてください。
変更しなくても、分かるって方は そのままでOKです☆
3.移動ツールで、文字を下へ移動させます。
参考画像:

4.次に、選択ツールで、移動させた文字だけを囲みます。
移動させた文字全体を囲んでください。
参考画像:

5.鏡像反転ツールで、垂直に反転させます。
参考画像:

ここまでの作業でこんな感じになっていればOKでーす^^

ステップ3:アルファ(透過)をかける
このままじゃ、反射したっぽくないので、透明度を加えて見ます。
1.まず、背景レイヤーを見えなくしておきましょう。
参考画像:

こんな感じになります。

2.塗りつぶしツールで反転した文字を、背景色で塗りつぶします。
今回の場合だと、背景色は#000000(黒)なので、
黒に塗りつぶします!
参考画像:

3.グラデーションツールで、グラデーションをかけます。
ここでは、文字色(今回は#AAFF00)→透明でグラデーションします。
参考画像:

このとき、ちょっとコツがあります。
グラデーションの不透明度を50くらいにして、
グラデーションをかける開始位置を、上の文字の下部から下の文字の下部へかけるといい感じになります☆
参考画像:

これで、反射の完成です!
背景色を見えるようにしましょう。
参考画像:

こんな具合になっていればOKじゃないでしょうか^^

これで色んな文字や画像などを反射させまくれますね^^;
Gimpで飛び出す写真を作ろう!(初心者向け)
Photoshopも顔負けの画像作成ソフト「Gimp」を
使って、飛び出す写真を作ろうというものです。
----------------------------------------
☆ Gimpで飛び出す写真を簡単作成 ☆
まず、完成画像からです。

※Gimpは既にインストールされているものとします。
※長々と描いていますが、慣れたら10分くらいで作れます。
----------------------------------------
☆= 前準備 =☆
1.まず、飛び出させたい画像をどこかから持ってきます。
今回は、こちらの画像を使います。
元画像:

↑
一番上の座ってるものを使用します。
2.では、Gimpを起動します。
3.飛び出させたい画像を開きます。
[ファイル] → [開く]
参考画像:

ローサを選びます。

4.ローサの画像を読み込んだら、
[表示] → [レイヤー境界の表示] のチェックをはずしましょう。(はずしたほうが、分かりやすい。)
参考画像:

5.次に、[ダイアログ] → [レイヤー] を選択し、レイヤーを表示させます。
参考画像:

そして、新規レイヤーを追加します!
参考画像:

↑
名前を「フレーム」にしておきます!
------------------------------
☆= 写真フレームを作る =☆
いよいよ作成です!
まずは、写真のフレームを作ります。
慣れたら 1分で終わります。
1.まず、「フレーム」レイヤーを選択します。
ツールの左上の「矩形領域を選択する」を使います。
ローサの画像の上に、写真フレームを描きます。
(だいたいでOK)
参考画像:(新規ウィンドウ表示)

2.囲んだら、右クリック → 「編集」 → [白で塗りつぶし]をします。
(※これが写真フレームの色となります!)
参考画像:

3.ここまでの作業で、以下のような画像が作成されます。
参考画像:

4.同様の作業で、先ほど描いた白い四角の中に、
四角を作ります。
参考画像:(新規ウィンドウ表示)

5.そして、今度は、その囲んだ部分を「切り取り」ます。
右クリック → [編集] → [切り取り]
参考画像:

6.これで、写真フレームが完成しました!!
参考画像:

------------------------------------
☆= 写真フレームを立体感あふれるものに =☆
ここで、写真フレームを傾けることをします。
ここは かなり大事な部分です。
遠近感が伝わるようにしたいです^^
1.まず「フレーム」レイヤーが選択されていることを確認してください!
2.次に、「遠近法」というのを使います。
「遠近法」を選択し、画像をグリグリします。
遠近感でたなぁー ってところで、「変換変換」をクリック。
参考画像:(新規ウィンドウ表示)

<補足説明>
拡大縮小ツールや、移動ツールを使うのも手です。
参考画像:

3.こんな感じに仕上がれば、一応OKです。
参考画像:(あんまり遠近感ないけど^^)

--------------------------------------
☆= 縁取り =☆
要るところだけを、縁取りします。
ベジエ曲線になれていないと、少々とまどうかもしれませんが、慣れたら3分くらいでいけますよ^^
※縁取りをキレイに行うと、完成画像の見栄えがかなりよくなります!
1.まず、[拡大ツール]で、画像を拡大します!
だいたい、細かい線が見える程度まで拡大します。
参考画像:

2.[パスツール]を使って、地道に、縁取りしていきます。
縁取る部分は、写真フレームと写真フレームから飛び出たローサです。
参考画像:

3.縁取ったら、すかさず [パスから選択領域を作成する]をクリックします!
参考画像:

4.こんな感じになっていればOKです。
Ctrlを押しながら[拡大ツール]を使うと、縮小します。
参考画像:

ここを乗り切れば、あとはスグに完成!
---------------------------------------
☆= 要らない部分を黒で一気に塗りつぶす =☆
縁取った部分だけが要るので、その他の部分を塗りつぶす作業です。
縁取りがキレイにできていれば、
このあとの作業は楽楽です♪
1.まず、[矩形領域を選択するツール]を使い、
右クリック → 選択 → 反転 で選択範囲を変更します。
(これで、塗りつぶす部分を選択したことになります。)
参考画像:(新規ウィンドウ表示)

2.こんな感じになれば成功です。
参考画像:

3.右クリック → [編集] → [黒に塗りつぶす] をクリック。すると、要る部分だけが残るはずです。
参考画像:

4.こんな感じになっていれば大成功です!
参考画像:

-------------------------------------
☆= 要らない部分カットして完成 =☆
もうほぼ完成です!
しかし、よく見ると、
写真フレームがローサの上にかぶさって、
まったく飛び出した感がありません。
そこで、要らないフレームの部分をカットします。
1.「フレーム」レイヤーの不透明度を変更します。
(こうすることで、削除したい部分が分かりやすくなる)
2.[パスツール] を使って、切り取る部分を選択。
3.そして、切り取ります!!(詳しい流れは、参考画像で)
参考画像:(新規ウィンドウ表示)

4.上記の作業を繰り返すと、飛び出す画像が完成します!
参考画像:

------------------------------------
長々と書きましたが、
実際30分もあれば、作れると思いますー^^
Gimpで作れるなんて スゴいすー^^
Photoshop,Fireworksでも ほぼ同様の操作で作成可能です☆