ポラロイド写真
  • osu!アバター作成方法

回り込み解除

回り込み解除

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

回り込み解除


こんにちは!

phonicたんのアバターを作って渡した時に少しチャットしたんですが
ふぉにっくたんのリア友が「osuのアバターの作り方どうやって覚えたの?」ってきいて
その友達が私のブログをはったらしいんです!!
今ではそのリア友さんも、見てくれてるとか・・


というわけでちゃんとかかなければあああああって意欲がわいたので
またまた透過編です。

透過についてはこれでラスト!!
続けて明日にでも、文字入れとか色々かきます!





今まで画像をキャラクターだけ透過する方法を2つかきました

① 【自動選択ツールをつかって透過】
http://97cent.blog.fc2.com/blog-entry-72.html
メリット:自動選択なのではやい デメリット:白フチが残って汚い

②【自由選択ツールをつかって透過】
http://97cent.blog.fc2.com/blog-entry-108.html
メリット:綺麗に透過できる デメリット:時間がかかる、細かい作業すぎてだるい 貧乏揺すりするレベル


今回書くのは、この間をとった透過方法です。
自動選択オンリーよりは綺麗で、自由選択のクソみたいに時間かかるのがなくなる

そんなかんじ!


でも、使うのは自動選択ツールです!!

この方法を使って透過した画像


背景が黒いと透過が汚いのって目立つんですが
これは多分、大丈夫だとおもいます。

でもこの方法は、自動選択で認識されるような
画像じゃないと、できません^3^

自動選択で認識されるような画像ってなに??ッテ感じの人は
自動選択で透過する編()()みたいな記事をみてくださいw


今回使用する画像は、今ステマでとってもホットな這いよれニャル子さん画像
pooooo.png


まずgimpを起動して画像を読み込ませます
次に上メニューの[レイヤー]→[透明部分]→[アルファチャンネルを追加]

そしたら自動選択ツールをクリックして
要らない部分をクリック→勝手に選択範囲が決められる(点線)→きーぼーどDelキーで要らない余白部分を削除

といった感じで削除してきます
ただし、すごい細かい髪の毛の隙間とかは、あとで自由選択で透過したほうが綺麗になるので
自動選択で消すのはやめたほうがいいでしょう

今回はニャル子さんのこのおっきい手の指の間の隙間はあとで自由選択で削除することにします。

この時点では、背景が黒いところで透過した画像を見ると
白フチが残っててとても汚い



この白フチを除く作業をこれからしていきます

gimpを起動した際にこのようなタブも一緒にでてるとおもいます

(このタブがない人は多分、上メニューの[ウィンドウ]→[最近閉じたドック]の中に入ってるのでそれをクリックで出現)

これのこの[背景]ってかかれてる部分らへんを右クリックすると
「不透明部分を選択範囲に」という項目があるのでそれをクリックします。


次に上メニューの[選択]→[選択範囲を縮小]
でタブがでてくるのですが、
これは1ピクセルで結構です。  (白フチがすごい多かったりする場合は2がいいかも)


ok をクリック

次にまた[選択]→[選択範囲を反転]→delキー
これで大体の白フチは消えました

でもよく見てみると、髪の毛の隙間とか


自動選択の時に削除されなかったのが残ってたり
今回の画像は最初に指の隙間だけ自動選択で消さないで残してたりしてたのがあるので
それを自由選択ツールを使って消していきます

自由選択ツールの使い方は以前書きました。


あとは境界線というか、周りのフチの部分だけぼかして
線をごまかす作業をしたら終わりです。

やり方はさっきの「背景」みたいにかかれてるとこ右クリ→不透明部分を選択範囲にをクリック

[選択]→[縁取り選択] でタブがでてくるので縁取り範囲1ピクセル でokを押す
その次に上メニューの[フィルタ]→[ぼかし]→[ガウシアンぼかし]でタブがでてくるので
ぼかし半径2でokをクリック

これで保存すれば

まあ多分綺麗と思われる透過画像の完成です
iPadkabe223.png




スキンを作ったりする際は、透過した画像が大量に必要なので
この透過方法が便利だとおもいます。






FC2 Management

回り込み解除

こんにちは。

突然ですが、osuはPrayオンリーで楽しみたいって人のほうが多いとおもいますが
私は、タイトル画像、スキン、アバター作りもosuの楽しみのひとつです。
というかそっちのほうがたのしいです。

自分で色々つくってosuを自分好みにカスタマイズしたい~って人のためにかいてます。
誰かに作ってもらうと嬉しいですが、イメージ通りでないこともあることでしょう。


以前にかいたアバター作成記事2つ→http://97cent.blog.fc2.com/blog-category-4.html

に追記して、応用的な何かをかきたいと思います。
ですが以前書いた2つのように詳しくはかきません..

以前の記事を理解してる人にはわかるとおもいますが、そうじゃない人には理解できないかもしれないので
以前の記事を見てから見てください。




透過

以前はPictBearで自動選択する方法を紹介しました。ほぼ一発で透過できて楽ですが
白フチが残ったりきれいに透過できなかったりしませんか?

背景が真っ黒だと透過が汚いの目立ちますよねこのように。
あとは欠点として、自動選択されるように線がきっちりつながってる画像と限られていました
aooo.png

一方この記事で紹介する透過方法で透過したもの
GOIDI1.png

これは私のやり方が少し雑だからよく見たら汚いけど最初のよりはサイズがおっきくても圧倒的に綺麗
画像もほとんど自由に選べます
少し手間がかかるんですが、慣れれば全然ですヾ(。・ω・。)ノ

やり方

まずGIMPを起動します。GIMPは前回の記事にDL先のURLはってあります

透過したい画像を読み込ませて
上メニューの[レイヤー]→[透明部分]→[アルファチャンネルを追加]
次に自由選択 をクリック


まず始点部分、例えばキャラの端っこの部分とか をクリックして
そっからキャラ周りをなぞるように、ドラッグ→クリックを繰り返しましょう


この左の斜めの線はキャプチャーするときに伸びた線なので関係ありませんが
キャラのまわりの部分にクリックとマウスドラッグで線をひきます



これはかなり雑にやったんですけど
クリック 線をドラック 曲がるとこでクリック みたいなちまちま作業ですね

今回はこんな流れでやりました

最後は始点の部分に終点をドラックしてクリックします


始点の部分を、最後クリックできたら
こんな感じで点線の選択範囲ができます



次にそのまま上メニューの[選択]→[選択範囲の反転]
で、そのあとにきーぼーどのdelキーをおせば



できました
この画像は細かくやってないので汚いですが、細かくやれば綺麗にできます。


こういう残りの要らない部分は


さっきの自動選択で選択して 今度は選択範囲の反転 はしないで 選択がおわったらdelキーで消すって作業をしていきます。


ちなみに、[選択範囲]→[選択範囲を解除]で選択範囲(点線)を解除できますよん

それであとはpng形式で保存すれば、
綺麗な透過画像の完成です!!




次はロゴのことと、画像をハートとか丸く切り取った形にしたりする方法を説明します卍


回り込み解除


綺麗に画像を透過する(応用編記事)→http://97cent.blog.fc2.com/blog-entry-108.html




こんにちは(´・◡・`)♥
あ、えっとコメント返信は次回します!
東方スキン1000DL超えありがとうございました~

今日はあらちゃんとしてみぃさんとマルチしました^ー^
最初はあらちゃんと二人でCTBやってたんですが・・・

むずかしいですねー・・のーまるしかできません
Hard以上は目がチカチカして追いつかない(´;ω;`)

そのあと二人でosuのTagモードやって、してみぃさんが帰ってきた所を召喚しました!!
主にずっとtagモードw
screenshot138.jpg

楽しかったです!この前のマルチは勝手にあすかが落ちて死ねってかんじでしたw
最近はあんまあすかとまるちしてない(´・ω・`)またのんびりやりたいー!!

あとはあらちゃんにアバターつくってもらった!!

ねねちゃん alacat198.png

ぺああばたーになりましたよおおおい (。╹◡╹。)♥
私がつくったほうに比べるとセンスが◯すぎて私女なのにセンスなさすぎてつらいです^ー^

ありがとう///
おっきい方ももらったのでプロフ画像にしてみました。




さあ本題に入ります。

以前画像の透過、リサイズの仕方を説明したので

前提は前回の記事をある程度理解できていること 前回の記事→http://97cent.blog.fc2.com/blog-entry-72.html
あとはPictBearをインストールしてあることです。

以上が大丈夫な人はご覧下さい!



今回はアバターの作り方なので前回の記事を用いて128x128の透過画像を用意してください!

今回はこれ(透過済み128x128)を使用します
si_20120318223557.png



◯透過画像にシャドウをいれる 


ただ透過した画像にロゴを合成するだけでいい方はこの段階は飛ばしてください。
こんなかんじで透過した画像にシャドウとよばれる、キャラ回りが光るフィルタを入れたい人用の説明です。

↓キャラ回りが光ってる画像の例
source_20120318223941.png

透過がきれいにいかなかった場合(白フチが残った)などこのシャドウがあるとうまく誤魔化せるので
スキンを作成するときにも応用できます。


必要なもの★
GIMP(ペイントソフト@無料)→GIMP download

Gimpのインストールが終わったら起動します。ドラッグアンドドロップしてシャドウしたい透過画像を読み込ませます。

次に上メニューの フィルタ→照明と投影→ドロップシャドウ の順で選択してくとタブがでてきます。

120318_224854.png

オフセットX&Y軸:オフセットはシャドウがかかりだす位置なので(理解できなくて良い)とりあえず0にしてください

ぼかし半径:ぼかしをどのくらいの大きさでいれるかです。画像が小さいので10~20が丁度だとおもいます

色:クリックしたら色の選択タブがでてきます。自分でシャドウの色をつくってください

不透明度:透明度です。80~95辺りは丁度いいかと。お好みでどうぞ

画像サイズの変更可のチェックを外して、全部できたらOKをおします~

これでシャドウ入りました。やり直したいとかシャドウ消したい時は上メニューの
編集→ドロップシャドウをもとに戻す で。


完成したら上メニュー ファイル→保存 で上書き保存かんりょ~
ファイルのエクスポートとかでてくる場合は無視してエクスポート押してください


完成したのがこんなん
si_20120319000255.png 元→si_20120318223557.png

はいこの段階はこれで終わりです。次は自分のユーザー名なるロゴを合成する作業!




◯ロゴを合成する


まずは合成の前にロゴを作成する所からですん(´・◡・`)♥
ロゴ作成はオンラインのサイト上でできたりソフトで作ったりできます。

ロゴ自体は自由に自分のスキルを使って作っていただいて結構~
今日は私がつくってるロゴの作り方を説明します!


◆ロゴ①


定番のサイトでつくった画像に直接ロゴを合成してくれる。一番簡単だけどフォントの種類も少なくて融通がきかないし、ヘボッちく見えるのが難点

このサイトを使用します →http://www.bannerkoubou.com/p-start/
ロゴを合成させたい画像を読み込ませたら、左の一番上[文字入れ]を選択
文字入力してフォントとかサイズとか色とか自分で選んで
画像のロゴ置きたい位置でクリックしたら自動でおきてくれます。気に入ったら保存します それで完成

上記サイトを利用した例 (ラブポップ フォント使用)
0LjNFpHv6Yqcdr0.png

これだとPictBearを使ってあとで合成する必要もなくサイト上で合成してくれますが
個人的には微妙~ 気に入ったフォントとかがある人はいいかもしれません (。╹◡╹。)~♥


◆ロゴ②

いつも私が使ってるサイトです~
ほんとはロゴ作成サイトの中でもお蔵入りサイトなのであんまり教えたくないんですけど~
困ってる人とか見て作るようになってくれたらいいなとおもったのでかきます

ロゴの例を紹介↓
yu-ca_20120319003308.png
1087496_1331259601_20120309233917_20120319003308.png
menu-back.png

サイト→http://ja.flamingtext.com/

いろんなロゴ作成ページがありますが私が主に使用してるのは2つ


例の画像の上2つで使用したロゴ作成ページは
http://ja.flamingtext.com/net-fu/dynamic.cgi?script=water-logo

下のBackのほうのロゴ作成ページは
http://ja.flamingtext.com/%E3%83%AD%E3%82%B4/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E3%83%8D%E3%82%AA%E3%83%B3

作り方は自分で色々微調整してください。フォントとか色とかサイズとかw
ただ一番下の背景 だけ 「透明」を選択します

できたら ロゴ作成→ 次のページで右クリで画像保存


つづいて合成する作業をするので PictBearを起動します。
ロゴを合成したい画像と、先程作ったロゴを読み込ませます。


めんどいので画像で説明
120319_005650.png

大まかな流れは

①の選択機能をつかい、ロゴのいらない余白部分をトリミング(左クリック押しながら伸ばす)で選択
②のトリミング機能で先程選択したいらない部分をトリミング(消す)

次に上メニューの[イメージ]→[イメージのリサイズ]でタブの設定をこうしたらOKを押す
(先に縦横比のほうにチェックいれてから 128って入力してね^^★み)
120319_005716_20120319010806.png


次にメニューの[範囲選択]→[すべて選択]でCtrl+Cキーでコピーして
ロゴ合成したい画像のタブにしてからCtrl+Vで貼付け

そしたら左サイドメニューの上から3番目(多分)の[移動]をつかってロゴをすきな位置に移動させます(左クリック長押しでマウス動かして移動できます)



あとは、上メニュー[レイヤー]→[レイヤーの統合]→[表面部分の統合] (憶測でかいたので名前違ってたらごめん
でレイヤー統合したら、[ファイル]→[名前をつけてor上書き保存]で完成ーーーー


拡張子は元々pngだとおもうけど、pngにしてネーーーー^ー^


これは超適当につくりましたけど、センス次第で可愛くなるとおもいます。角丸くするとかは希望ない限りかきませんw
si_20120319011833.png













はあ疲れました\(^o^)/
自分おつかれさま (。╹◡╹。)~♥

まあ検索してきてくれてる人の参考になればいいかなあとおもいます!
わからないとこあったら気軽にきいてください!!!!!!!



自作とか拾ってきた素材の背景に、透過画像合成したりにも応用できますね^ー^




次はリクエストされたスキン作成方法書いちゃうで^ー^!!!!!!!
ではおつかれさまでした~(´・◡・`)♥




回り込み解除

3/19
ロゴ作成&合成などその②編を書き終わり公開しました~
①が理解できたら、ぜひ見てみてください

http://97cent.blog.fc2.com/blog-entry-97.html


4/29
綺麗に画像を透過する(応用編記事)→http://97cent.blog.fc2.com/blog-entry-108.html








アクセス解析の検索ワードを見るとほんとよくosuの透過画像の作り方みたいにぐぐって
ここにくる人が多いので、すごい簡単に透過画像を作れる方法を紹介します

JTrim,GIMP,PhotoImpact,photoshop..etc...等色々画像編集ソフトもってるのですが、今までで一番単純で使いやすいのがPictBearだったので重宝してますb


あくまでosuのアバター作成方法ですが、透過画像は色々な面で需要あるとおもいます「

既存画像切り取るだけじゃ誰かと絶対かぶりますが、自分だけの自分専用の画像です

これが今日作成した自分のアバター
Jerrrr.png

嫁の一人、古明地さとりたん
これを作るまでの過程を書いていけば一番理解しやすいかな?

まず準備で PictBearをダウンロード、インスコする http://www.fenrir-inc.com/jp/pictbear/

ではφ(..)メモメモ

説明は細かいので長文ですが、作業自体はかなり単純です


▼128x128の透過画像作成!▼




◯画像選び

これかなり重要で選ぶ画像で作業効率がかわる
全然好きなキャラでいいんだけど、うちが選んだ画像はこれ

o0800064011402283462.jpg

サイズは128x128より絶対大きい画像で、一番重要なのが
透過がしやすいかどうかってことです。

透過はPictBearの自動選択機能を使用するので、要はキャラ単体がいかに自動選択で認識されやすい画像かってことです

例えば透過しずらい画像
8b885a66.jpg

こういう風にキャラと背景の境界線がぼやけてる画像は
キャラだけを自動認識してくれません

一方私が選んだ絵の方はキャラと背景の境界線がきっちりきれいになってます
きれいにわかれて無い画像は自動選択で一発透過できないので、透過できるっちゃできるけど上級者向けです

髪の一部分だけ色が薄くてしかも線が途切れてる とかもあまりよろしくない
とにかく線がきっちり描かれてる画像を選ぶ

画像選びはこれにて終了





◯自動選択機能で透過

ちゃんと透過しやすい画像を選んだらここからは慣れれば1分以内でできる作業
PictBearを起動して、選んだ画像をPictBearにドラッグアンドドロップ又は[ファイル]→[開く]で画像を選択して読み込む

初期起動の場合最初は読み込まれたらタブになってるので、☓印のとなりにある最大化マークをおして最大化します
120105_012051.png

ちなみに画像はマウスホイールで拡大したり小さくしたりできます。細かい作業をするときは拡大化したほうがいいです。
拡大化はリサイズとは別物です笑

画像を読み込んだらまずは透過します。

左のサイドメニューの自動選択を選択
120105_012256.png


背景の適当な場所をクリックしたらキャラだけ識別してくれて
転々マークがでます



そしたら右下のレイヤースペースに[背景]って書かれて青くなってるのがあるんですが
その部分を右クリして[背景からレイヤーへ]を選択

あとはキーボードのDelキーを押したら ハイwww透過完了です ☆゚-お疲れ-。(●´∀`人´∀`●) 。-さま-゚☆

でもこんなかんじで選択されなかった部分が残っちゃって一発でいかない場合もあるんです
120105_013138.png


右側の◯のほうは、もう一度自動選択で真ん中のいらない部分をクリックして選択されたら
delキーを押せばきれいに消えます

左側のほうは若干汚く残ってるしキャラから離れたとこにあるので左のツールバーの消しゴムを選択して消します



次はリサイズをして透過画像作成完了です



◯リサイズして保存

透過画像でかいのも中にはあると思います。
128x128におさまるように透過した画像をリサイズします。

まず左のサイドメニューの自動選択の二個上の[選択範囲]のアイコンをクリック
画像をトリミングして、できる限り余白部分がないように選択します。

選択できたら、上のほうにあるトリミングのアイコンをクリック
120105_014729.png

これでいらない余白部分がなくなりました
120105_013945.png


この時に例えば全身うつってる画像とか、縦がやたら長い画像を透過した場合、一部分だけアップしたいとかもあるかもしれないので(全身を128x128につめると小さくなるリスクあり)
そういう人はいらない下半身部分とかも一緒にトリミングして消しちゃってください


あとは上メニューの[イメージ]→[イメージのリサイズ]でタブがでてきます
[縦横比を固定する]に絶対にチェックをいれて、
高さ の部分だけ128~140以内の数字を入力します。そうすると自動で横の比率も保ってリサイズしてくれます。

そしてokをおしたら画像のリサイズができました。



あとは[ファイル]→[新規作成]で画像サイズを横128縦128を入力して、[背景色]は絶対[透明]を選択

次に透過&リサイズした画像のタブのほうに戻って[選択範囲]→[すべてを選択]
Ctrlキー+Cを押して画像をコピーしたあと、新規作成した透明な128x128の画像のタブに戻って
Ctrlキー+Vを押して貼り付けます。

あとは左のサイドメニューの[選択範囲]の一個上にある[移動]アイコンをクリックしたら
画像を好きな場所に移動できます。キャラが画像中央がいい人は中央に貼ったキャラを移動させたりなどなどw

このまま透過画像を使用する人、透過画像にロゴを合成するだけの人は
[レイヤー]→[イメージの統合]→[表面部分の統合]で128x128透明画像のレイヤーと透過済みキャラ画像のレイヤー2枚あるのでその2枚のレイヤーを統合してしまいます。そうしないとpng形式で保存できません


あとは[ファイル]→[名前をつけて保存]で保存します
ファイルの種類は[png]を選択してください


以上で透過画像作成方法はおわり(*´ω`*)









回り込み解除

色々記事があってごちゃごちゃしてるので
いろんな記事のまとめをここにかきます。

まず私がつくってきた画像たち
phoniiiiccccc_20120520042134.png

p285WDHTrxyOOQ7_20120520042133.png201203092340038c0_20120520042132.png

ここに書いてある記事を見れば、多分このくらいは作れると思います。
私はセンスがないので、全然可愛いのつくれませんが・・・

かなり細かくかいているつもりなので、多分誰でもつくれます。
スキンつくったり、タイトルつくったり、アバターつくったりできるとosuよりもこっちのほうが楽しくなるかも

全く画像編集についての知識が無の人は、書いてある①②みたいな順番通りに読んでいただければ
きっとわかるかと!

私もまだクソヌーブなので、それはご了承を(●・̆ ・̆●)





~画像を透過するやり方~

画像を透過とは、背景がある画像の背景を消してキャラだけにしてしまうことです。
そこから、自分の好きな背景を合成したり、透過したままつかったり!

自動選択ツールをつかって、短時間で画像を透過する
http://97cent.blog.fc2.com/blog-entry-72.html
(自動選択ツールで透過する方法はあまりオススメしません
ですが、基本的な画像編集ソフトの使い方が、こちらにかいてあります。)


自由選択ツールを使って綺麗に画像を透過する
http://97cent.blog.fc2.com/blog-entry-108.html
私が一番使う透過方法です。時間は少しかかりますがとても綺麗に透過できます。
この記事はソフトの使い方とか大分省略してるので、②をお先にどうぞ


短時間かつ、ある程度綺麗に画像を透過する
http://97cent.blog.fc2.com/blog-entry-110.html
スキンを作る際は透過画像が大量に必要なのでこの透過方法がおすすめ




~文字入れ、画像加工等~

透過は誰でもやり方はほぼ一緒ですが
こっからは、絵かくにしろ、画像加工するにしろ、自分次第で可愛いのがつくれます。
これについては、私が学んだことをかいてます。

色々やってみたい方は自分で調べてみるといいかも!

サイト上でロゴを作れるサイトを使ったロゴ合成、とドロップシャドー(キャラの周りを軽く光らせる)のやり方
http://97cent.blog.fc2.com/blog-entry-97.html

GIMPを使った可愛いロゴの作り方
http://97cent.blog.fc2.com/blog-entry-116.html



ロゴ編はぜーんぜんまだ記事かいてないです。
透過についての説明がとりあえず終わったので、これから色々とかいていきます。

書く予定の記事

画像の角を丸くする方法
GIMP(ソフト)を使って可愛いフォントでロゴを作る方法
ブラシを使ってハートとかキラキラを入れる方法
ロゴ(文字)を曲げたり斜めにしたりする方法


わからないことがあったらきいてください
なぜ書き始めたかというと

最初に少し①の記事をかいたら少し反響があって
収集がつかなくなって、どうせなら全部書いちゃおうってなったからです。

でも見てます、とか作れるようになりましたってチャットがosuできて
嬉しかったりもします(ちらちら





♥New Entry♥

♥Profile♥

MRMR@ほぷじぇり

Author:MRMR@ほぷじぇり
♥Twitter♥
https://twitter.com/MRMR615
♥osu!♥
http://osu.ppy.sh/u/1228982
♥About me♥
http://about.me/MRMR615

Sex:♀ Age:19
Location:Japan.Chiba

osu!/Minecraft/MapleStory
現在オンゲはしてません

リフレクビートにはまってます


MRMRはみるみると読みます
ツイッターは常駐してるので
よかったらフォローしてください


♥Counter♥


2012/06/15 2:19設置開始

♥Category♥

♥Twitter♥

鍵アカですが気軽に
Followしてくださいヾ(。・ω・。)ノ
趣味が合いそうな人は相互ふぉろー

♥Comment♥

♥いただきもの♥


vちぃこv様


柚季chan様

♥Link♥

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