UNITED BLOG

名古屋で活動するWEB系学生チームUNITEDのブログです。

Sketchでアプリのアイコンをトレースしてみた

こんにちは〜まだまだ先だと思っていたブログがついに回ってきました・・!らんです!
私はUNITED内で一応デザイナー側の人間なので、デザインに関する記事を書きたいと思います。

今回取り上げるのは、「Sketch3」について!
最近買ったは良いけれど、なかなか使う機会がなかったのでこれを機にアプリのアイコンをトレースしてみました。

Sketch3って?

Mac向けのデザインツールです。
Adobeイラレ・フォトショより動作が軽く、またページ管理や書き出しが非常に容易にでき、最近のフラット・マテリアルデザインに向いているツールだと言われています。

無料体験版も容易されているので、気になった方は一度試してみると良いかもしれません!
製品版も$99と、手が出せるお値段。(Sketch4からは年間$99に変更になる予定・・・)
学割もあるので、学生の方は是非学割で!!半額です!

ダウンロードはこちら↓

Sketch - Professional Digital Design for Mac

トレースするアイコンを決める

今回は、Iconsfeed - iOS icons galleryから選びました。
最近UNITEDのミーティングで、グラデーションを使ったサイトが綺麗!という話題が出たので、グラデーションが綺麗なアイコンを探すことに。

そして今回選んだのがこちら、Videoramaというアプリのアイコンです。

f:id:united-nagoya:20160723130708p:plain

選んだ理由

  • グラデーションが綺麗
  • よくあるロングシャドウ
  • シンボルがシンプルで取り掛かりやすい

トレースしてみる

まずは、「iOS App Icon」からテンプレをコピーしてきました。

f:id:united-nagoya:20160723131342p:plain

並べてみる。

そしてスポイトで色を取りグラデーションを作り、ペンツールでVもなぞってみました。
若干のズレは甘くみてくださいね・・

f:id:united-nagoya:20160723132045p:plain

おお・・それっぽい・・(?)
ただやっぱりロングシャドウの有無はかなりでかいと感じる。

f:id:united-nagoya:20160723131818p:plain

ロングシャドウをつけてみました。
なんとなくペッタリ感が?

と、ここでVの裏にうっすらと影があるのを発見しました。
なるほど、Vを若干手前に出すことでシャドウが生きてくるのですね。

f:id:united-nagoya:20160723132724p:plain

ということでうっすら影をつけてみた。
ちょっと立体感が出ていい感じに!!

グラデーションのポイント

1.色は同系色で、少し離れた色を使うと綺麗(っぽい)

f:id:united-nagoya:20160723134500p:plain

色は全部色相だけ変えてみました。

上3つは、同系色で少し離れた色で作ってみたもの。(左上がトレースしたやつ)
なんとなく綺麗に見える。

左下は同系色でグラデーションにしたもの。Webによくあるボタンみたい?
変ではないけど、全然面白くないし綺麗じゃない。

右下は紫-黄色の補色でグラデーションにしたもの。ナシですね!!!

2.少し短いグラデーションにする

日本語がちょっと変ですけど、図でみるとこんな感じです。

f:id:united-nagoya:20160723134954p:plain

この丸ー丸がグラデーションの範囲です。
比較するとこんな感じ。

f:id:united-nagoya:20160723135159p:plain

左が少し短いVerで、右が端から端までVer。
このほんとに微妙な違いですが、私は左のほうが色がはっきり見えて好きです。
まあこの辺は好みの問題かな〜とも思いますが;;

ロングシャドウのポイント

1.シャドウにもグラデーションをかけると良いかも

f:id:united-nagoya:20160723140241p:plain

右は、グラデーションがかかってないロングシャドウ。
よく見かけますが、今回はこれでは少し重い感じ。背景がグラデーションだからかな?
パキッとしたデザインの時は、右のシャドウでもマッチしそうです。

2.シャドウをつけるものを手前に出す

先ほど、Vにうっすら影が入っている!といったやつです。

f:id:united-nagoya:20160723131818p:plain

左の見本には影が入っているので、若干立体感が生まれてます。

反省点

  • ペンツールでVをなぞったからか、若干形が違う。図形ツール駆使してみても良かったかも・・
  • 内側のロングシャドウがイマイチ綺麗にならなかった!!
  • 記事中の画像がサイズばらばら。笑 ごめんなさい・・・

とまあ幾つか反省点もあるのですが、結構楽しくやれたのでまたやってみよーと思います!
ちなみに作業時間は制作だけで1時間半くらいかな?
今後は1時間目安で!やってみようと思いまーす😚!

らん