Now Loading...

スタッフブログ

戻る

当社ブログは社員での持ち回りで掲載しております。
ビジネスだけではなく、社内イベント、プライベートなことを書いておりますので予めご承知おきください。

2.5Dへの挑戦 【退化編】-ディメンションフォール-

たとえCドライブがパンクしたって、俺はこのパスを引き続けるぞ…。
自宅pcのCドラがパンクしてニコ動すらまともに見れなくなったsinです。

23回目の投稿、本日6月13日は、はやぶさの日、小さな親切運動スタートの日、鉄人の日だそうです。ノートラップランニングボレーハヤブサシュートダッ!

前回、3Dモデリングに挑戦し始めたワケなのですが、実はあれから全然進捗していないので今回のブログネタには書けないなーといった状況にあります。初代バーチャくらいの形になればいいなーとか言ってましたが、実際は顔と首までしかできていない。

まーた二次元のイラスト描いたり、羊毛いじったり、windowsのシステム復元データ?の蓄積でCドラがパンクして重いソフトが起動できなくなったりで進捗がまるでダメなので、今回は次元を落として2.5次元への挑戦です。
具体的にはアクリルフィギュアを作りました。(故に2.5次元)

アクリルフィギュア制作への道

事の発端はとある社員が「特に理由はないけどbitちゃんのアクリルフィギュア作りたい・・・作りたくない?(確認)」とアイスティーを持ってきそうな雰囲気で提案してきたことから。
※bitちゃんは仮名です

面白そうなのですぐに新規のイラストを描いて、

入稿テンプレに載せて、発注しました、が。

———————————————————————————————

■白インクにつきまして

  ご入稿いたきましたデータをチェックいたしましたところ、白インク使用の
  部分に関しまして、データが正しく作成されておりませんでした。
  白インク使用の部分は白で塗りつぶすのではなく、
  グレースケールのK100%にて作成してください。

■全ての画像ファイルが不足しております

  お手数ですが、リンクで配置されているすべての画像ファイルを
  レイアウトデータとあわせてご入稿くださいますようお願いいたします。
 
  ※イラストレーターに配置されているリンク画像は、リンク画像の名称変更(拡張子の変更含む)、
  リンク画像の保存場所移動等によりリンクが切れてしまうことがあります。
  その場合正常な出力が行えず、データチェック不完了となります。ご注意ください。
  また、ご入稿の際、仕上がりイメージ(スクリーンショット等)を同梱していただくことをおすすめ致します。
  お客様と弊社スタッフでのやりとりをよりスムーズに行える場合がございます。

———————————————————————————————

印刷会社から要修正のお知らせが。

画像ファイルの不足は、画像とまとめてzipで送った気がしたし正直原因はよくわからなかったのだけれど、
2度目の入稿では問題なかったからまぁいいとして。

問題は、白インクにつきまして、の方、
これが思ったよりなかなか曲者でした。

要は印刷の都合上、イラストの下地に白インクを敷いてから別の色を載せるという工程が発生するため
キャラクターと周りに散らばっている星の下地用の白を塗る部分(シルエット)を入稿データ内にベクター(シェイプ)として
キャラ絵の下のレイヤーに入れなければならなかったというワケです。

ここで厄介なのが、単色のシルエットにしたキャラの画像を敷くのではなく、
単色のシルエットのベクター(シェイプ)が必要であったということ。

イラストはペイントツールで描き上げたものでベクターではないため、
これをベクターに変換しなくてはならないのでした。

ので今回の本題、ベクターデータを作りましょう、
ここからちょっと講座っぽいですよ。

PhotoshopとIllustratorでキャラクターイラスト(透過png)をベクターデータに変換する力技

まずは、ラスタ(png画像)をベクターに変換する方法から(この辺は検索すると割と簡単に出てきます)

①キャラクターの画像(と背景の星画像)レイヤーを用意

②シルエットの選択範囲を作成

ctrl + shift を押しながら画像レイヤーのサムネ部分をクリックし、シルエットにしたい部分の選択範囲を作成します。

③作業パスを作成


パスウィンドウの右上にあるメニューボックスから「作業パスを作成」を選択し、許容値を入力してパスを作成します。(許容値は0.5が最低値です)

④作業パスの作成が完了しましたが…。


なんかシルエットがゆがんでいる…ガビガビしてる…。
余白を含め700*1000pxのサイズで描いたイラストだとこの方法ではシルエットが荒くなってしまいます。
では、どうやってこれを解決するかというと…。

ここから本番(力技)

①キャンバスサイズと画像を無理やり引き伸ばし

発想の転換、どうせシルエットになるなら画像の粗さを気にする必要はない、ならば。
無理やり画像とキャンバスサイズを引き延ばします。
(例では元サイズの4倍の2800*4000pxに引き伸ばしました。)
(元々大きいサイズのイラストを描けば必要のない行程)

②前例の①~④と同様の工程で作業パスを作成してみると…。

少し荒いけど先ほどと比べるとかなり精度の上がったパスが作成されました!

③パス全選択

作業パスをパス選択ツール(A)で全選択し。

④Illustrator上でペースト

Illustratorにペーストします(複合パスでペースト)
これで精度の高いシルエットのベクターが作成されましたが、
星のくりぬきやLANケーブルと体の間の空白なども塗りつぶされているので。

⑤パスファインダー(分割)で空白部分をくりぬき

ctrl + A でベクターを全選択しパスファインダーウィンドウの「分割」を選択、
分割するとベクター全てがグループ化するので、ctrl + shift + G でグループ化を解いて、

くりぬくべき部分のベクターを選択ツール(V)で選択して消していけば。

⑥シルエット完成!

これでようやくシルエットのベクターデータが完成しました。

あとは入稿データのキャラ絵サイズにシルエットベクターを縮小して入稿するのみです!
長く苦しい戦いだった……

で、完成品がこちら。

成し遂げたぜ。

今回はイラストさえ描き終われば後は楽勝だべ。
なんて甘い考えからの思わぬ落とし穴に見事はまりました。
しかしこれでまた一つよくわからない力技を身に着けることができたのも事実。
発想力って大事だなって思いました。(小並み感)

3Dモデルの制作は次回までには初代デュラルくらいにはできるといいなと思います。
でも今はまっているのはドット絵なので、もはや1次元に片足突っ込んでいる状況にあるのですが。

頑張って次元を超えていきましょう。

sin

その他の記事

記事一覧

BitStar流

Contact Us

ご不明な点や、気になったことなど、
お気軽にお問い合わせください。

お問い合わせ

Recruit

新卒採用、中途採用、エンジニア採用、
デザイナー採用を行っています。

採用情報