11 « 1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.» 01

◇La luna della fantasia◇  

PSPカスタムテーマやAndroidホーム画面などの制作メインなブログ。

スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
web拍手 by FC2

Posted on --/--/-- --. --:-- [edit]

スポンサー広告  /  TB: --  /  CM: --

テーマ作成講座~第三章 フォーカス編~ 

皆さんが(多分)一番難しく思っていらっしゃるフォーカス編です☆
実は…普通の64×64の画像でも全然OKなんですよww(ぇ
まぁ、折角なんで“ぼかし効果”を加えたフォーカスの作成方法をお教えします!!!><b


まずはアイコンをGIMPに読み込ませます↓↓
(装飾済みのアイコンも可☆)

WS000000_20100313233302.jpg

そしてキャンパスサイズを変更します。
メニューバー「画像」→「キャンパスサイズの変更」↓↓

WS000001_20100313233344.jpg

すると↓↓のようなボックスが開かれます。

WS000002_20100313233425.jpg

そして縦幅両方を64にして、「中央」ボタンを押して「サイズ変更」を押します↓↓

WS000003_20100313233826.jpg

「背景」右クリック→「レイヤーをキャンパスに合わせる」クリック↓↓

WS000004_20100313234004.jpg

すると、黄色の線が消えて…レイヤーがキャンパスと同じサイズになったことが分かります↓↓

WS000005_20100313234044.jpg

そして、レイヤー内で右クリック→「レイヤーを追加」クリック↓↓

WS000007_20100313234138.jpg

一番下のちょぼは「透明」にして「OK」クリック。
そして、「背景」レイヤーを右クリック→「不透明部分の選択」クリック↓↓

WS000008_20100313234231.jpg

すると↓↓なカンジになります。

WS000009_20100313234337.jpg

メニューバー「選択」→「選択範囲の拡大」クリック↓↓

WS000010_20100313234424.jpg

すると↓↓のようなボックスが開かれます↓↓

WS000011_20100313234518.jpg

↑↑のように数値は5にして下さい。
そして「新規レイヤー」を選択して好きな色で塗りつぶして下さい。
(ブラシか塗りつぶしツールを使って下さい☆)
あたしの場合…わかりやすいように赤を使います↓↓

WS000012_20100313235119.jpg

そして…選択範囲を縮小します。
メニューバー「選択」→「選択範囲を縮小」をクリック↓↓

WS000013_20100313235237.jpg

すると↓↓のようなボックスが開かれます。

WS000014_20100313235313.jpg

↑↑のように、数値は2で「OK」をクリック。
メニューバー「選択」→「選択範囲の反転」クリック↓↓

WS000015.jpg

そして、メニューバー「フィルタ」→「ぼかし」→「ガウンぼかし」クリック↓↓

WS000016_20100313235600.jpg WS000017_20100313235613.jpg

すると↓↓のようなボックスが開きます。

WS000018_20100313235711.jpg

そのまま何も変更せずに「OK」クリック。
レイヤーを掴んで移動します↓↓

WS000019_20100313235956.jpg WS000020_20100314000002.jpg
移動前(左) 移動後(右)

するとこんなカンジになります☆↓↓

WS000022_20100314000111.jpg

この時、保存するのは“フォーカスのみ”なので「背景」レイヤーは削除します↓↓
(「背景」レイヤー右クリック→「レイヤーを削除」)

WS000023_20100314000159.jpg

するとこんなカンジになります☆↓↓

WS000024_20100314000345.jpg

これで完成です☆><b
保存方法はアイコン着色編と同じですのでよろしくお願いします!!!>人<


これで作成基礎編は終了です!!><ノシ
(たまに追加とかありましょうが;;)
いやぁ…長かったですね^^;;
作成基礎編これで終わり☆ いぇあ!!!!(ぇww
…何気にテンションがポップン(六)になってますww(ぁww

次からは作成応用編!! お楽しみに!!><ノシ
web拍手 by FC2

スポンサーサイト

Posted on 2010/03/13 Sat. 23:22 [edit]

テーマ作成講座~第三章 プレビューアイコン編~ 

次はプレビュー画像の前にPSPで反映前に表示される画像です☆
もち、ある意味重要なアイコンです!!!><b
基礎的に2つの方法をご紹介しますvv^^


<画像切り取り圧縮方法>

まず、プレビューアイコンにしたい画像(16×16以上のサイズ)をGIMPに読み込ませます↓↓

WS000000_20100313222042.jpg

そしてメニューバー「画像」→「キャンパスサイズの変更」クリック↓↓

WS000001_20100313222139.jpg

すると↓↓のようなボックスが開かれます。

WS000002_20100313222210.jpg

そこで“正方形になるようなサイズ”にします。
もちろん…できるだけ大きサイズにした方が良いです。
そして「サイズ変更」を押せばOKです☆

ここでは、400の正方形にしました↓↓

WS000003_20100313222500.jpg

そして「背景」レイヤー右クリック→「レイヤーをキャンパスに合わる」をクリック↓↓

WS000004_20100313222628.jpg

これで、画像がキャンパスサイズに切り取られました☆
あとはサイズ縮小するだけです。
メニューバー「画像」→「画像の拡大・縮小」をクリック↓↓

WS000005_20100313222909.jpg

すると↓↓なボックスが開かれます。

WS000006_20100313223019.jpg

↑↑のように、サイズを16×16にします。
他の設定をいじらないように注意です;;

完成です☆↓↓

WS000007_20100313223128.jpg

なお、保存方法はアイコン着色編と同じです☆^^b


<1文字アイコン作成方法>

まずはGIMPで「ファイル」→「新しい画像」クリック↓↓

WS000000_20100313224245.jpg

すると↓↓なボックスが開かれます。

WS000001_20100313224340.jpg

↑↑サイズは100×100にして下さい。
そして「OK」をクリック↓↓

WS000002_20100313224510.jpg

↑↑を好きな色で塗りつぶします↓↓
(ブラシか塗りつぶしツールで出来ます☆)

WS000003_20100313224609.jpg

そしてをクリックし、画像内の適当な場所でクリックします↓↓

WS000005_20100313224754.jpg

表示されたボックスの空白な場所に好きな文字を入れます。
ちなみに今回は1文字です☆
(4文字は応用編にて公開予定!!><b)

「閉じる」を押すとこんなカンジになります↓↓

WS000006_20100313225050.jpg

そしてツールボックスの“テキスト”の項目をいじります↓↓

WS000007_20100313225148.jpg

今回はフォントをSans Boldにしてみました。
大きさは100にして下さい。
正方形100px=1文字100pxのキャンパスサイズです☆
↑↑は覚えておいた方が良いかと…!!><ノシ

そしてをクリック→テキストのみを画像の位置に合わせます↓↓

WS000014_20100313225842.jpg

これでレイヤー「鮫(テキスト文字)」を右クリック↓↓

WS000010_20100313230029.jpg

↑↑の「下のレイヤーと統合」をクリックすれば画像統合されます。
そしてプレビューアイコンサイズへ縮小します。
メニューバー「画像」→「画像の拡大・圧縮」クリック↓↓

WS000011_20100313230927.jpg

すると↓↓のボックスが開かれます。

WS000012_20100313231100.jpg

数値は縦幅両方とも16で他はいじらないこと。
「拡大・縮小」をクリック↓↓

WS000013_20100313231219.jpg

はい、これで無事完成です☆><b
保存方法はアイコン着色編と同じですのでよろしくお願いします!!!><ノシ

ちなみに↑↑の方法で完成したアイコンは→aaa.png
縮小しても、ちゃんと文字は見えますvv><b


次は楽しみにして下さっている方が居るフォーカス編です☆
まぁ、そんな難しく考える必要はないので!!><b
web拍手 by FC2

Posted on 2010/03/13 Sat. 23:16 [edit]

テーマ作成講座~第三章 縁付きアイコン編~ 

くしゃみ連発しながらの更新ですww(ぇ
さて、次は縁付きアイコン編☆
まぁ…参考程度にでもvv^^b


まずはアイコン着色編で作ったアイコン(テーマアイコンなら何でもOK)をGIMPに読み込ませます↓↓

WS000000_20100313215008.jpg

そしてレイヤー内右クリック→「レイヤーを追加」クリック↓↓

WS000001_20100313215109.jpg

「背景」を右クリック→「不透明部分を選択範囲に」をクリック↓↓

WS000002_20100313215202.jpg

するとこうなると思います↓↓

WS000003_20100313215242.jpg

そしたら、メニューバー「選択」→「選択範囲を拡大」クリック↓↓

WS0000000.jpg

すると↓↓なボックスが開かれます。

WS000005_20100313215518.jpg

↑↑のように数値を「2」に。
そして「OK」ボタンをクリックします。
すると、↓↓な表示になります。

WS000006_20100313215641.jpg

この状態で「新規レイヤー」を選択して色を塗りつぶします↓↓
(ブラシか塗りつぶしツールを使います☆)

WS000007_20100313220044.jpg

そして「背景」と「新規レイヤー」の位置を逆にします↓↓

WS000009_20100313220144.jpg WS000010_20100313220149.jpg
移動前(左) 移動後(右)

レイヤーを掴んで移動すればOKです☆><b
そして「背景」レイヤーを右クリック→「下のレイヤー統合」クリック↓↓

WS000011_20100313220429.jpg
※これをしないと保存できませんww

そして統合後の画面↓↓

WS000012_20100313220550.jpg

ちゃんと縁が付いてますよね??
そして保存方法はアイコン着色編と全く同じですvv
ただ、上書き保存しないように気をつけて下さいね^^;;


さぁ…次はプレビューアイコン編ですvv
と言っても、画像圧縮とか文字とかですけどww
web拍手 by FC2

Posted on 2010/03/13 Sat. 22:08 [edit]

テーマ作成講座~第三章 アイコン着色編~ 

今回はお待ちかねのアイコン着色編です☆^^
PCの調子がおかしくてつい先程までいじってましたww(ぇ
何とかなったので大丈夫かと☆><b


まず、デフォルトアイコンをGIMPに読み込ませます↓↓

WS000000_20100313204052.jpg

そしてレイヤー「背景」を右クリック。
「不透明部分を選択範囲に」をクリック↓↓

WS000001_20100313204225.jpg

すると、選択範囲がアイコンのみになると思います↓↓
(点線が選択範囲になりますvv)

WS000002_20100313204344.jpg

レイヤー内右クリック→「レイヤーを追加」をクリック↓↓

WS000003_20100313204538.jpg

新規レイヤーを選択したままブラシで着色↓↓
(塗りつぶしでもOKです☆)

WS000004_20100313204750.jpg

そして「背景レイヤー」を選択して削除します↓↓

WS000005_20100313204841.jpg WS000006_20100313204852.jpg
選択するレイヤー(左) 右クリック後に選択する項目(右)

そして、「名前を付けて保存」をします↓↓

WS000007_20100313205053.jpg

その後のボックス↓↓

WS000008_20100313205317.jpg

ここでPNGを設定します。
このまま「.png」と記入して「保存」を押します↓↓

WS000009_20100313205602.jpg

↑↑の設定で保存すればOKです☆

…何故、違うレイヤーに着色したかというと水彩絵の具を例えれば簡単かと。
下地の色と混ざってしまうので、ということです^^;;


…さて、こんなもんですがどうでしょうか??
またわからないことがあればコメント下さい☆><ノシ
もっと詳しくでも説明しますので!!^^b

次回は…ぇと、縁付きアイコンの作成です☆><b
まぁ、またもや何気に簡単なので大丈夫ですよ~vv
web拍手 by FC2

Posted on 2010/03/13 Sat. 21:23 [edit]

テーマ作成講座~第三章 プレビュー画像編~ 

ちょ…アイコン編へ入る前に説明しておかなければならないことがありましたww(ぇ
プレビュー画像の作り方です!!!><b
いゃ…忘れてた本人が威張れませんがww(そうだ②ww


まず、先程作った壁紙をGIMPに読み込ませます↓↓

WS000000_20100310013341.jpg

次にメニューバー「画像」→「画像の拡大・縮小」↓↓

WS000001_20100310013449.jpg

するとこんな画面が出てきます↓↓

WS000002_20100310013534.jpg

ここの幅「480」っていう所を「300」にします。
すると自動的に高さは「170」になってくれますvv
そして下にある「拡大縮小」をクリック↓↓

WS000003_20100310013725.jpg

無事縮小出来ました☆
そして次は保存ですが…壁紙と同じやり方ですvv
詳しくは壁紙編をご覧下さいませ!!>人<

ちなみに…ブログなどにプレビュー画像をUpしたい場合は、付け替え壁紙と同じPNG形式で保存していただければ大丈夫です☆><b


…次こそ、アイコン着色編になります!!!><
飛ばしてしまってゴメンナサイ!!!><;;
web拍手 by FC2

Posted on 2010/03/10 Wed. 01:41 [edit]

プロフィール

メインメニュー

カテゴリ

ニコ生(普段の生息地)

blogram

参加&企画

相互リンクサイト様

素敵な素材&ツールサイト様

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。