「try! Swift」2日目のセッション "Live Design:🎙🎨" （日本語タイトル：ライブデザイニング）で、Sketchを使ってサクサクとアイコンをつくっていく過程を見て、
Sketch使いやすそう。買おう。 #tryswiftconf
— Tsutsumi Shuichi (@shu223) 2016年3月3日
と思い *1、さっそくダウンロードして同じ手順をなぞってみることにしました。
Sketch - Professional Digital Design for Mac
ちなみに購入する気満々だったのでこういうタイトルにしたものの、Free Trialで30日間は無料で使えるようです。
@niwatako さんの聞き起こし記事を参考に手順をなぞっていきます。
（※杞憂だとは思いますが、「こんなのは単なるツールのオペレーションであってデザインとは言わない！」みたいな話はご容赦ください。。）
新規プロジェクト（？）作成
iOS App Iconというテンプレートがあるが、使わない。普通に [File] > [New] する。
アイコン外枠の矩形をつくる
- 左上の+ボタン（Insert） > [Shape] > [Rectangle]、もしくはRボタン押下で矩形描画。
- Shift押しながらドラッグすると正方形になる。
- 1024x1024にする（iOSのアイコンサイズ）
- 色をつける
角丸の線を引く
- 白い矩形の背景をつくる
- 細長い矩形の線（LineではなくあくまでRectangle）を引く
- 線を角丸にする
- 線をコピペする
青空をつくる
- 矩形を作成
- Fill の欄でグラデーションのアイコンを選択
- 薄い方の色、濃い方の色を選ぶ
ビルをつくる
- 矩形をたくさんつくる
- 左ペインからビル矩形のレイヤーを全部選択する
- 右クリック > [Group Selection] （グループ化）
- 全部選択した状態で、いっぺんにプロパティ（ここでは色）を変えられる
雲をつくる
- たくさん楕円を書く
- 楕円は +ボタン（Insert）> [Shape] > [Oval] か oボタン
- Shiftを押しながら複数の楕円を選択して [Union] （結合）
- グラデーションさせる（アルファの値を変える）
- レイヤーをビルより後ろに持っていく
地球とか
（ちょっと飽きてきたので）巻きでいきます。。
- 細長い矩形の線を4つ
- OvalをShift押しながら作成（正円になる）
- Lボタンで直線を描画（縦線・横線）
- 次にVボタンで曲線を描画
- アンカーポイントを置くときにドラッグするとベジェ曲線のハンドルが出て曲線にできる
- Sketch.appのパスについて解説するよ。【基本編】 – Sketch.app Advent Calendar 2013 | creative tweet.
- なかなか難しい・・・画面を拡大してやるとやりやすかった
- コピペ ＆ 回転（[右クリック] > [Transform]）で計4つつくる
下の何か
- これまでつくってきたものを全部グループ化しておく
- 下に長方形を作成
- 横方向にグラデーション（グラデーションの◯をドラッグすると向きを変えられる）
（セッションのときから思ってたけど、これは何なんだろう・・・？）
エクスポート
- 全レイヤー（グループ）をグループにまとめてiconと命名する
- [File] > [New from Template] > [iOS App Icon] でテンプレート作成
- 先ほどのiconグループを貼り付ける
- 大きさ、位置を調整
- 左ペインの下の方に "Mask" というレイヤー（？）があるので削除する（角丸不要なので）
- 選択して、右下の Export ボタンを押す
出来上がり
所感
イラレが食わず嫌いだったのかはわかりませんが、ものすごく簡単でした。アプリのアイコンデザインを自分でやることはあんまりないかもしれないとは思うのですが（重要すぎるのでやはりここはプロに任せたい）、プレゼン資料等の図を作成するのに良さそう、と思いました。
とりあえず30日はタダですし、本日のセッションみてやってみようかなと思った方、ぜひお試しください！
使った操作リスト
- 矩形（角丸）作成・・・R
- 楕円作成・・・O
- 線・・・L
- 曲線・・・V
- 塗りつぶし
- グラデーション
- グループ化
- 一括色変更
- 結合
*1:かつて Adobe の Illustlator を買ったものの、何となく難しそうで結局使ったことがない
