Hatena::ブログ(Diary)

Over&Out その後 このページをアンテナに追加 RSSフィード Twitter

2016-03-04

Sketch買ったばかりのプログラマがアイコンデザインに挑戦してみたメモ #tryswiftconf

「try! Swift」2日目のセッション "Live Design:🎙🎨" (日本語タイトル:ライブデザイニング)で、Sketchを使ってサクサクとアイコンをつくっていく過程を見て、



と思い *1、さっそくダウンロードして同じ手順をなぞってみることにしました。


f:id:shu223:20160303231308p:image

Sketch - Professional Digital Design for Mac


ちなみに購入する気満々だったのでこういうタイトルにしたものの、Free Trialで30日間は無料で使えるようです。


@niwatako さんの聞き起こし記事を参考に手順をなぞっていきます。

(※杞憂だとは思いますが、「こんなのは単なるツールのオペレーションであってデザインとは言わない!」みたいな話はご容赦ください。。)


新規プロジェクト(?)作成

iOS App Iconというテンプレートがあるが、使わない。普通に [File] > [New] する。


アイコン外枠の矩形をつくる

  • 左上の+ボタン(Insert) > [Shape] > [Rectangle]、もしくはRボタン押下で矩形描画。
    • Shift押しながらドラッグすると正方形になる。
  • 1024x1024にする(iOSのアイコンサイズ)
  • 色をつける

f:id:shu223:20160303230052p:image:w600


角丸の線を引く

  • 白い矩形の背景をつくる
  • 細長い矩形の線(LineではなくあくまでRectangle)を引く
  • 線を角丸にする
  • 線をコピペする

f:id:shu223:20160303230143p:image:w600


青空をつくる

  • 矩形を作成
  • Fill の欄でグラデーションのアイコンを選択
  • 薄い方の色、濃い方の色を選ぶ

f:id:shu223:20160303230322p:image:w600


ビルをつくる

  • 矩形をたくさんつくる

f:id:shu223:20160303230403p:image:w600


  • 左ペインからビル矩形のレイヤーを全部選択する
  • 右クリック > [Group Selection] (グループ化)
  • 全部選択した状態で、いっぺんにプロパティ(ここでは色)を変えられる

f:id:shu223:20160303230522p:image:w600


雲をつくる

  • たくさん楕円を書く
    • 楕円は +ボタン(Insert)> [Shape] > [Oval] か oボタン

f:id:shu223:20160303230627p:image:w600


  • Shiftを押しながら複数の楕円を選択して [Union] (結合)
  • グラデーションさせる(アルファの値を変える)
  • レイヤーをビルより後ろに持っていく

f:id:shu223:20160303230651p:image:w600


地球とか

(ちょっと飽きてきたので)巻きでいきます。。


f:id:shu223:20160303230743p:image:w600


下の何か

  • これまでつくってきたものを全部グループ化しておく
  • 下に長方形を作成
  • 横方向にグラデーション(グラデーションの◯をドラッグすると向きを変えられる)

f:id:shu223:20160303230848p:image:w600


(セッションのときから思ってたけど、これは何なんだろう・・・?)


エクスポート

  • 全レイヤー(グループ)をグループにまとめてiconと命名する
  • [File] > [New from Template] > [iOS App Icon] でテンプレート作成
  • 先ほどのiconグループを貼り付ける
  • 大きさ、位置を調整

f:id:shu223:20160303230921p:image:w600


  • 左ペインの下の方に "Mask" というレイヤー(?)があるので削除する(角丸不要なので)

f:id:shu223:20160303231018p:image:w600


  • 選択して、右下の Export ボタンを押す

出来上がり

f:id:shu223:20160303231111p:image:w256


所感

イラレが食わず嫌いだったのかはわかりませんが、ものすごく簡単でした。アプリのアイコンデザインを自分でやることはあんまりないかもしれないとは思うのですが(重要すぎるのでやはりここはプロに任せたい)、プレゼン資料等の図を作成するのに良さそう、と思いました。


とりあえず30日はタダですし、本日のセッションみてやってみようかなと思った方、ぜひお試しください!


使った操作リスト

  • 矩形(角丸)作成・・・R
  • 楕円作成・・・O
  • 線・・・L
  • 曲線・・・V
  • 塗りつぶし
  • グラデーション
  • グループ化
  • 一括色変更
  • 結合

*1:かつて Adobe の Illustlator を買ったものの、何となく難しそうで結局使ったことがない

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

2009 | 08 |
2011 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2012 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2013 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2014 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2015 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 12 |
2016 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 |