Hatena::ブログ(Diary)

ちらしの裏的な何か このページをアンテナに追加 RSSフィード

2009 | 12 |
2010 | 01 | 02 | 03 | 05 | 06 | 07 | 10 | 11 |
2011 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2012 | 01 | 02 | 03 | 04 | 05 |

2012.02.17

twitterで流行りの「箱ドットアイコン」を作ってみた

| twitterで流行りの「箱ドットアイコン」を作ってみたを含むブックマーク

 なんか一回更新止めちゃうと次書く時の敷居がすごい上がるっていうか、まだ冒頭なのにどうやって書こうかなーとか考えちゃってるんだけど、まあそんなことはどうでもいい。ところでこのブログはどこに向かってるの。いや、漫画とかラノベについて書きたいことはいくつかあるんだけど、どうもモチベーションが。ああ、そういえばさっき「いい文章」を書くには、みたいな記事をホッテントリ経由で見たんだけど、うるせえブログの文章なんざ書きたいように書きゃあいいんだよ!って思いました。そんなわけで今日はドット絵について。


 で、箱ドットアイコンです。なんかついったーですごい流行ってるらしい。

日々是遊戯:なんだこれかわいい! Twitterで増殖中の「箱ドット」アイコンたち - ねとらぼ

 極度のめんどくさがりなので、あんまりこういうのには普段乗っからないんだけど、ちょうどお絵かきしたい気分だったのと、アイコンに変化持たせたいなーと思ってたこともあって作ってみることに。ちなみに俺はドット絵を描くのは初めてです。なので、このエントリは、素人がこういうこと考えながらこういう手順で作りましたーというものになります。でも、そういうのって意外と需要あると思うんですよね。だってほら、作り方の解説とかしてるサイトって既に上手い人が書いてる場合が多いので、初歩的なところは分かってるものと思われて省かれてたりしますから。

 というのはさっき考えた理由で、実際はただ、折角作ったアイコンを多くの人に見てもらいたかっただけです。いや、今くらいのフォロワー数だとブログに載せたほうが普通にたくさんの人に見てもらえるので。というか、ちゃんと書いてなかったけど、去年の4月に消したアカウントこの前また取りなおしました。これ(@cirno6gwa)です。べっ、べつにフォローしてほしくてリンク貼ったわけです、はい。


 で、ここからやっと手順の話。だから前置きが長いって。それで、俺は以下のページを参考にしながら作りました。丁寧に書かれているので、そのページ見るだけで誰でも作れると思います。このエントリの意義とは!

箱ドット□ : (仮)

 まずそのページから素体を落としてきます*1。修正されたのがあるみたいなんですが、俺は修正されてないほう使いました。修正版はjpegだったので。んで、使ったソフトはEDGE、これもそのページにリンク貼ってあります。saiでも出来るらしいんだけど、紹介されてるの使ったほうが分かりやすいかなーと思って。で、DLしたEDGEで素体を開いて、6倍に拡大してカラーパレットとポジションっての開いてこんな感じ。(クリックで拡大します)

f:id:cirno6gwa:20120217182133p:image:w300


 それで今回作るのは緋鍵龍彦さんの「すずのシリーズ」の双子のおねーちゃんです。えーと、このブログのプロフィールのところにいる子。前から俺のこと知ってる方はそこか読書メーターかついったーか、まあどっかしらで見たことあると思います。大好きなんですよ。いいですよね、足こき。ただ、そのはてなのアイコンの画像だと服が真っ黒で描いてもあんまり面白くないので、制服のほうで作ることに。このへんを参考にしながら。かわいい。

f:id:cirno6gwa:20120217231157j:image:w160


 まずは髪から塗っていきます。パレットで適当に色作って(あとでまとめて変更できるので)、その色の薄いのと濃いので3色くらい用意。脳内で大体のイメージ作ったら、下書きとかせずにどんどん塗っていきます。まあでもこの辺は人によるとは思いますけど。俺はドット絵に限らず、絵はほとんど下書きとかせずにがんがん描いてく人なので。で、あとから修正する。今回はレイヤーも重ねずそのまま塗ってます。ここまででこんな感じ。

f:id:cirno6gwa:20120217182134p:image:w300

 ちなみにこの段階ではペンタブ使って描いてます。すごい描きにくい。途中で、あれ?ドット絵ってマウスのほうが描きやすいんじゃ……と思ってマウスに変えたら一気に捗った。普段ドット絵を描いてる方の解説だとそんな初歩的なことは説明されてないので、やっぱり素人目線のこういう文章にも意味はあると思いました(白目


 そんな感じで、そのまま髪以外も塗っていきます。まだ修正とかはしない。とりあえず全部塗る。たしかこの途中くらいからマウスに変えたんだと思う。レイヤー重ねてないし、ペンタブでずれまくってしまったので、比較のために横に元の素体を持ってきました。色は髪以外も大体3つずつくらい作ってます。

f:id:cirno6gwa:20120217182135p:image:w300


 で、とりあえず全部塗ったのでこの辺から修正かけていきます。明らかに髪がおかしいので、そこから。こんな感じ。

f:id:cirno6gwa:20120217182136p:image:w300


 髪の形を直したので、ついでに色も修正します。ちょっと青みがかり過ぎてたかなーと思ったので、もっと単純な灰色っぽく。んで、さっき色はまとめて変更できるって書いたんですけど、これはパレット上の一回使った色を変更すると、それで塗った部分も全部その色に変更されます。さらに他の部分も色修正したり、細かいところを塗ったりしてこんな感じ。

f:id:cirno6gwa:20120217182137p:image:w300


 んでまあ、これでベースはできちゃったので、あとは脳内のイメージに近づけるようにさらに細かいところを描いていくだけです。たぶん一番時間使うのはこの辺りの作業だけど、一番楽しいのもこの辺だと思う。あと、髪の形修正したときに前髪完全に無くしちゃったんだけど、それだと微妙にこれじゃない感があったので、もう一回付け足しました。これでほぼ完成。

f:id:cirno6gwa:20120217182555p:image:w300


 最後に全体の色のバランスを整えます。ここでは元絵の色は無視。いやまあ最初から割りと無視してるんだけど、とにかく見栄えだけ考える。例えばリボンの色は主張しすぎてるので、もっとおとなしい色にしたり。そして微調整。えーと、どこ直したんだっけ。たしか瞳のハイライトと、ちょっとおでこ広くしすぎたんでそこと、あと髪のかかり方とか、その辺だったか。細かいところ気にしだしたらキリないんで、この辺で自分を納得させて完成ということにします。というか最後の2枚は拡大させないと、ほとんど違いわからないですね。結構描き足してるんだけど。

f:id:cirno6gwa:20120217182556p:image:w300

 これをgifで保存して、giamで透過。いや、別に透過はさせなくてもいいんだけど。ちなみに透過させるときは背景と同じ色を絵の中に使ってると、そこも透過されてしまうので注意。ついったーにあっぷろーどしたものがこちらになります。48×48はちょうどそのサイズなのできれいです。


 こんな感じです。つーか書き出してみるとえらい単純ですね。思った以上に別に書くことなかった。書くことなかったわりには、普段使わない画像をいっぱい貼ったので疲れました。たまに画像貼るときはamazlet使うので。

 まあ素人の俺でもこのくらいのものは作れたし、わりと簡単なので箱ドットアイコンどうですか。というか、流行ってるらしいので作ってみたけどフォロー数少なすぎてTLに箱ドットアイコン全然いませんでした。いませんでした。あとこのエントリ見返してみると、無駄な手順踏みすぎててあんま人の参考にはならなそうだなーとか思いました。まあドット絵以外でも大体こんな感じで描いてるし、楽しかったのでいいのですけど。

 あとなんか書くことあったっけ。まあいいか。というわけで、みなさん簡単なので箱ドットアイコン作りましょう!上のほうで貼ったページがすごい参考になりますよ!

*1:追記:今見たら記事削除されてますね。まあ修正素体のほうは残ってるみたいなので適当にぐぐってください。てへぺろ☆(・ω<)