Maxim Cramer
デザインと開発のバックブランドを持ち、人を観察し、技術が本当に役立つように改善することに情熱を持っています。
私たちはコードを書くことが好きです。しかし、App Storeで注目されるためにはコーディングだけでなく、他の素養も必要になります。この講演では、アプリの申請時に必要となるアプリアイコンとスクリーンショットをSketchを使って作成するデモをその場で行います。コーディングからアプリ申請まで、自分一人でうまくやる方法を説明します。
今日使うものはSketchを使います。とても今人気です。Adobeと比べて安価です。ベクターベースなのでIllustratorに近いです。でもWebデザイン、Appデザインに向いています。
最初、AppIconを作ります。iOSの新しいアイコンです。
良い例です。シェイプで出来上がっていて、簡単に作ることが出来ます。
テンプレートにアイコンが有りますがエクスポートの時だけ使いますよ
普通のキャンバスでやっていきます。
Rが矩形のショートカット。描画はShiftを押してドラッグすると必ず正方形になる
1024(iOSのアイコンサイズ)を設定、ベースカラーの設定など
太さ、端を丸にを変えましょう
オブジェクトはコピーできます。
背景はグラデーションを設定可能です。
長方形をたくさん作ります
レイヤーをグルーピングします
プロパティを全部同時に変えられます
雲を "O" キーで丸によって描きます。Shiftを押さなければ楕円になります。
Shiftを押しながら雲を選択してUnionさせる。一つの雲にします。
グラデーションを掛けます。
レイヤーの順序を変えて雲を建物の後ろに持っていく
タイトルも
地球
塗りつぶさずに線で行きます。中は、”V”キーでベクタを書けます。
縦線をコピーして回転させて横にも
あとは曲線
コピー、回転、反転で作っていきます。
表紙が出来上がりました。これを全部グループ化します。
大きな長方形、丸みを調整
グラデーション
出来上がり
グループにまとめてアイコンと命名
テンプレートに貼り付ける
少し大きくするのでドラッグして小さくする。
縦横均等に縮小したい。Scaleでサイズを調整してはめ込んでいく。
角丸にしているマスクを取ります。
iOSが勝手にやってくれるので丸くマスキングする必要はない
全部選択して、右下のExport
出来上がり
ScreenShot
Xcodeからシミュレーターを実行
Command + S でスクリーンショットが保存されます。
これをSketchに入れる方法がありますが、デバイスの画像のテンプレートがある
この人は昔から作ってる。いろんなデバイスがある
iPhone 6 を開いて、コピー、アートボードに貼り付ける
タイトルを付けます
Export
以上です。
QA
作る絵が決まっていたが、普段はどのようにしていますか?手で書いたものを手でなぞるとかですか?
実際どのようにアイコンを作るのか、スケッチかPCか?時と場合に違うと思う。私はスケッチを書いてアイディアを得ることが多いです。PCで描くことも。シンプルにしていきたいと思っていて、こういうものを作りたいなと思うものを何処かから見つけてきて、
トレースすることも可能です。
右下のExprot時に倍率と、その接尾語?を指定できるので@2xや@3xも自動出力できる
iOS 9 GUI for Sketch https://t.co/xbT6xD9Q5Q #tryswiftconf
— カメキチ (@kamekiti) 2016年3月3日
完全にイラレより簡単だ。#tryswiftconf
— toshi0383 (@toshi0383) 2016年3月3日
プロのSketch使いの技を目の当たりにした #tryswiftconf
— ぎぎにゃん (@giginet) 2016年3月3日
Sketchはエクスポート機能すばらしい #tryswiftconf
— akio (@akio0911) 2016年3月3日
「LiveDesigning アプリのアイコンをsketchで作ってみよう! ☆短い動画付き #tryswiftconf」をトゥギャりました。 https://t.co/NKWGbKlXU6
— トゥギャッター開発まとめ (@tg__dev) 2016年3月3日
気に入った記事は はてなブックマーク
はてなブックマークアプリiOS開発チームから来ました! はてなブックマークにはSwift特集があります! 良い記事を見逃さないように、ご利用ください! http://b.hatena.ne.jp/hotentry/it/Swift
そして良いまとめ記事があったらはてなブックマークでブックマークしましょう! try! Swift の記事で盛り上がると嬉しいです!