onthehead blog

Twitter Icons vol.01

onthehead — Sun, 21 Aug 2011 13:10:29 +0000

フォロワーの方には迷惑な話なのですが、2010年の12月あたりから頻繁にツイッターのアイコンを変更しています。調子が良いときは、つぶやきごとに変えることもあります。ごめんなさい…

よく「サル」って言われますが、実際は「人類進化論」のノルキアさんです。サルではなくヒトです。で、そのアイコンのストックが増えてたので、途中経過をまとめてみました。計151個
どんだけ無駄な時間費やしてるんだよ！というツッコミをされそうですが、元々大した絵ではないので基本、5分以内に描くようにしています。（たまーに20分くらいかかったり…）

うねうねしたアイコンが一部の方に好評だったのでgifアニメにしたり…

頻度は落ちると思いますが、迷惑省みず今後もバシバシ変えていきますので、よろしくお願いいたします！

人類進化論

onthehead — Wed, 25 May 2011 07:14:53 +0000

結局進化してない人類進化論。中の人はロシア人男性。名前はノルキア。2児の父。嫁さんとは別居中。

第一段階: 全身タイツ

第二段階: パーカ

第三段階: ワンショルダー

チューブトップ

トップレス

全裸

モヘ

iPhone 4 Illustration

onthehead — Tue, 17 May 2011 08:25:19 +0000

三階ラボで公開した iPhone 4 のベクターデータです。開発者さんがデモやサンプルとして使用することを目的に描きました。

印刷用のデータは現物とほぼ同じサイズで作成し、ウェブ用のデータは各ライン・各パーツをピクセル単位で微調整し、最適化してあります。

作成フロー

iPhone 4 の大きめな写真を元に大枠を描く （トレース。Illustratorの醍醐味！）
iPhone 4 の実物を定規で測りながらサイズ調整をする （地味！）
角丸具合を調整する（ここ大事！プロダクトの枠を描くとき、効果では表現できない絶妙な角丸なので、Illustratorの角丸効果は使用せず手作業でアンカーポイントを調整します）
iPhone 4 のディスプレイの画面解像度に合せ、mm単位で実寸サイズに調整する （意外と面倒！）
CMYKで色を調整して、印刷用データの完成 （ここまで2時間！）
ディスプレイ部分の縦横ピクセル数を640px 960pxに変更しウェブ用に最適化する （計算苦手！）
ラインやオブジェクトの数値を0.5pxか1px単位で調整していく （これ面倒！けど重要！これやらないとボケ〜とした絵になります）
RGBで色を調整する （ぼくの場合はHSB）
50%サイズのデータも用意する （親切！ディスプレイ部分の縦横ピクセル数を640px 960pxだとウェブで使うには大きすぎる…）
サイズを50%にしたことによって、ボケボケになってしまったラインやオブジェクトの数値をもう一度0.5pxか1px単位で調整していく （この辺で飽きてくる）
一気に書き出す （はぁ…）

といった流れでした。

アウトラインデータ自体は必要最小限に抑え、アピアランス機能を多用し、見た目を再現してあります。（グラデーションメッシュは使っていません）

iPhone 4 のアウトラインとアピアランス

Illustratorの「アピアランス」は使い方次第では有効な機能です。ひとつのアウトラインに対し、塗りや線を複数もたせ、それぞれに「効果」を適応することができます。

例えば「ホームボタン」。

iPhone 4 のホームボタンのアピアランス

実際は矩形のアウトラインデータ1つだけです。それに4つの塗りと線を追加し、「パスのオフセット」や「楕円形」を適応させて表現しています。（ちなみにボディ部分は7つの塗りと線で構成されています）

ぼくがグラデーションメッシュ使ったりアウトラインデータを増やしたりせずアピアランスにこだわるのは、「色や形状を後々簡単に変更できる」からです。
※アウトラインを増やしすぎると後々サイズの調整が大変だったり、グラデーションメッシュだとちょっとした色の変更が面倒だったりします。

もし興味を持っていただけましたら、ぜひ三階ラボからベクターデータをダウンロードしてみてください！

ダウンロードしに行く

ワンタン犬ワンたん

onthehead — Tue, 17 May 2011 05:17:40 +0000

ワンタンとどんぶりでセットの犬。ワンたん U・ω・U
薄い皮膚に覆われていて、頭の具がちょっとだけ透けています…

ワンたんと岡持小屋

もぐもぐエンターテイメント系Twitterクライアント「MogSnap」というiPhoneアプリでアップしたカップワンタンの写真から生まれたキャラクターです。

経緯

MogSnap にカップワンタンの写真をアップ （貧相な食事…）
@awayuki さんが「ワンたん…」とだけつぶやく （そんだけ…？）
ワンたんを絵にする （結構手抜き）
プロダクトデザイナーの @parabo_hiro さんが3Dにしてくれる （うれしい！）
@parabo_hiro さんがおっぱいジェネレータでぷるんぷるんさせてくれる （おっぱいって…）
@awayuki さんが粘土で作ってくれる （うれしい！岡持まで…）
岡持も絵にする

といった流れです。

ぷるんぷるんするワンたん動画。

そして出前していただいたワンたんの現物。岡持を添えて。

粘土のワンたん

こちらからお願いしてもいないのに、ノリで作っていただいて感謝です！こういう流れは素敵だなーとしみじみ感じたできごとでした。
@awayuki さん @parabo_hiro さん、ありがとうございました！

ワンタン関係のイメージキャラクターで採用してくれないかなあ。。。

FatBird.colors

onthehead — Tue, 17 May 2011 05:16:53 +0000

Mac のチャットソフト Adium のアイコン用に描いたキャラクターです。本家のアイコンがあまりにもアレだったので、ちょっと太らせ、愛嬌のある感じに仕上げてみました。

毎度のことですが、このキャラクターもグラデーションメッシュを使用せずに作りました。7色用意しなければならなかったので、陰影を別パーツにし、ベースの色味を変えるだけで対応できようにしました。

Fatbird colors green

Fatbird colors indigo

Fatbird colors blue

Fatbird colors red

Fatbird colors purple

Fatbird colors gray

Fatbird colors black

Fatbird colors animation

ダウンロードしに行く

ブログはじめました

onthehead — Mon, 16 May 2011 02:03:33 +0000

こんにちは。
いままでの静的なページだと更新するのが億劫になってしまうので、思い切ってブログにしました。
ぼくが描いた絵や、きになったものをアップしていきますので、今後ともよろしくお願いいたします！

推奨閲覧環境

ウェブブラウザ: Google Chrome, Safari 4 以上, FireFox 3 以上, Internet Explorer 8 以上
モニタサイズ: 1024 × 768 pixel以上

制作環境

CMS: WordPress
WordPress プラグイン: コメント部分にDISQUS
WordPress テーマ: オリジナル
ソフトウェア環境: Mac OS X 10.6.7, Espresso, CSS Edit, Illustrator, Photoshop

参考にさせていただいたサイト

ページ下部、上部へのボタンを切り替える: jQueryでページの所定位置まで来たら要素表示 via could
スムーズにページ内移動させる: jQueryでスムーズスクロールプラグイン – Develo.org
WordPressの前後ページへのナビゲーションが残念なのを修正する: Another HTML-lintで100点を目指せ – Dazzling World2