IMG_5361__復元_-03

ゲーム『LINEポコパン』のスプラッシュ画面をトレースしてみました


ゲームアプリ『LINEポコパン』のスプラッシュ画面をUIトレースしてみました。

なぜこんな意味わからないことしているかというと、あの時感じたコンプレックスや劣等感を払拭するため。



そう  『サイバーのUIDAインターン


あれから1カ月半も経過してしまってますが(笑)
▼このnoteに詳しく書き記しています〜


どんなコンプレックス劣等感かというと
他の参加者の作品に比べて圧倒的に自分の作品のグラフィックが弱いこと

・複雑なイラストを描いたことがなかったので、
 イラストをそもそもかけないと思い込んでいたし、苦手意識もあった
・イラレを素早く操作することができなかった


▶︎早速、克服するしかない・・・出来ることから始めよう・・・!
▶︎ゲームUIのインターンで、他の参加者もイラストを描いていたので、トレースする題材はゲーム&イラスト付き&複雑&でも頑張れば描けそうな画面にしよう
▶︎探す・・・・
▶︎LINE ポコパン!!!!

こういう流れで始めたわけですが、時間があるときにちょこちょこ進めてたら時間がかかってしまいました・・・・



トレースしたものと、参考画像はそれぞれこちらです!
(細かいところ見ないで〜、、、笑)


ここで、自己流かもしれませんが、イラレでどのようにトレースをしたか書いていきます!


〜 手 順 〜

①トレースしたい参考画像をアートボードに配置してロックをかける

②ペンツールで上から輪郭をなぞる


<ポイント>

✔️全部の絵の輪郭を一度になぞるんじやなくて、例えば『うさぎ』だけなど、各オブジェクトの階層構造を意識して少しずつ輪郭をなぞり、パーツを作っていく

※ 全て一度になぞってしまうとレイヤーの階層がぐゃぐゃになります
※ 階層構造とは「一番背面には空があって、その上に原っぱがあって・・・」みたいなことです!


✔️階層構造を意識して、背面のオブジェクトから制作するか、前面のオブジェクトから制作するか考える
(私は前面のパーツ『キャラクターやテキストなど』から制作しました〜)

※どちらもメリットデメリットあるので、どこの階層から攻めていくかは好みな気がします・・・?(下の表参照)


パーツを全てなぞり終わったら、全て選択して
パスの連結(command +J)
▶︎ライブペイントの作成
(command +shift +X )

ライブペイントツールで色塗り

全て完成したら細かい部分を修正して完成!



めちゃくちゃざっくりこんな感じです・・・笑
調べながら手探りでやってみたので、これが正解かは分からないですが、何かあれば何でも聞いてください!


Q.  パスで書いた線が然るべき範囲からはみ出てしまって、上手く整えるにはどうすれば良い?(下のような写真の状態)

A.  ツールバーのオブジェクト▶︎アピアランスの分割をすると、書いた線の輪郭がアンカーポイントで囲われて調整しやすくなります!


そしてそして、細かいところなど完璧にはトレースできてないですが、自分の自信にちょっと繋がった&達成感がすごい!ので、おすすめです(笑)


〜 おわり〜



P.S. ウサギのリボンが一番やばい・・・・もっとこうした方が良かったとかありますか(泣き顔)



この記事が気に入ったらサポートをしてみませんか?