try! Swift ライブデザイニング:🎙🎨 #tryswiftconf Day2-10

Maxim Cramer

デザインと開発のバックブランドを持ち、人を観察し、技術が本当に役立つように改善することに情熱を持っています。

私たちはコードを書くことが好きです。しかし、App Storeで注目されるためにはコーディングだけでなく、他の素養も必要になります。この講演では、アプリの申請時に必要となるアプリアイコンとスクリーンショットをSketchを使って作成するデモをその場で行います。コーディングからアプリ申請まで、自分一人でうまくやる方法を説明します。

今日使うものはSketchを使います。とても今人気です。Adobeと比べて安価です。ベクターベースなのでIllustratorに近いです。でもWebデザイン、Appデザインに向いています。

最初、AppIconを作ります。iOSの新しいアイコンです。 f:id:niwatako:20160303170459j:plain

良い例です。シェイプで出来上がっていて、簡単に作ることが出来ます。

テンプレートにアイコンが有りますがエクスポートの時だけ使いますよ f:id:niwatako:20160303170555j:plain

普通のキャンバスでやっていきます。 f:id:niwatako:20160303170630j:plain

Rが矩形のショートカット。描画はShiftを押してドラッグすると必ず正方形になる f:id:niwatako:20160303170640j:plain

1024（iOSのアイコンサイズ）を設定、ベースカラーの設定など f:id:niwatako:20160303170711j:plain

f:id:niwatako:20160303170728j:plain

f:id:niwatako:20160303170808j:plain 太さ、端を丸にを変えましょう f:id:niwatako:20160303170825j:plain

オブジェクトはコピーできます。 f:id:niwatako:20160303170836j:plain

背景はグラデーションを設定可能です。 f:id:niwatako:20160303170901j:plain f:id:niwatako:20160303170926j:plain

長方形をたくさん作ります f:id:niwatako:20160303170958j:plain f:id:niwatako:20160303171014j:plain

レイヤーをグルーピングします f:id:niwatako:20160303171025j:plain

プロパティを全部同時に変えられます f:id:niwatako:20160303171053j:plain

雲を　"O" キーで丸によって描きます。Shiftを押さなければ楕円になります。 f:id:niwatako:20160303171122j:plain f:id:niwatako:20160303171132j:plain

Shiftを押しながら雲を選択してUnionさせる。一つの雲にします。 f:id:niwatako:20160303171226j:plain グラデーションを掛けます。 f:id:niwatako:20160303171233j:plain

レイヤーの順序を変えて雲を建物の後ろに持っていく f:id:niwatako:20160303171253j:plain

タイトルも f:id:niwatako:20160303171347j:plain f:id:niwatako:20160303171410j:plain

地球 f:id:niwatako:20160303171422j:plain 塗りつぶさずに線で行きます。中は、”V”キーでベクタを書けます。 f:id:niwatako:20160303171451j:plain

縦線をコピーして回転させて横にも f:id:niwatako:20160303171516j:plain

あとは曲線 f:id:niwatako:20160303171541j:plain f:id:niwatako:20160303171558j:plain f:id:niwatako:20160303171603j:plain f:id:niwatako:20160303171616j:plain コピー、回転、反転で作っていきます。

表紙が出来上がりました。これを全部グループ化します。 f:id:niwatako:20160303171700j:plain

大きな長方形、丸みを調整 f:id:niwatako:20160303171717j:plain

グラデーション f:id:niwatako:20160303171753j:plain 　 f:id:niwatako:20160303171823j:plain

出来上がり f:id:niwatako:20160303171900j:plain

グループにまとめてアイコンと命名 f:id:niwatako:20160303171914j:plain

テンプレートに貼り付ける f:id:niwatako:20160303171949j:plain

少し大きくするのでドラッグして小さくする。

縦横均等に縮小したい。Scaleでサイズを調整してはめ込んでいく。 f:id:niwatako:20160303172049j:plain

角丸にしているマスクを取ります。 f:id:niwatako:20160303172114j:plain iOSが勝手にやってくれるので丸くマスキングする必要はない f:id:niwatako:20160303172146j:plain f:id:niwatako:20160303172152j:plain