寄付窓口はこちら

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

Maxim Cramer

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

twitter.com

私たちはコードを書くことが好きです。しかし、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

全部選択して、右下のExport f:id:niwatako:20160303172225j:plain

出来上がり f:id:niwatako:20160303172253j:plain f:id:niwatako:20160303172259j:plain

ScreenShot

Xcodeからシミュレーターを実行 f:id:niwatako:20160303172320j:plain

Command + S でスクリーンショットが保存されます。 f:id:niwatako:20160303172339j:plain

これをSketchに入れる方法がありますが、デバイスの画像のテンプレートがある f:id:niwatako:20160303172421j:plain この人は昔から作ってる。いろんなデバイスがある

iPhone 6 を開いて、コピー、アートボードに貼り付ける f:id:niwatako:20160303172507j:plain f:id:niwatako:20160303172545j:plain f:id:niwatako:20160303172637j:plain

タイトルを付けます f:id:niwatako:20160303172715j:plain

f:id:niwatako:20160303172734j:plain

Export f:id:niwatako:20160303172751j:plain

以上です。

QA

作る絵が決まっていたが、普段はどのようにしていますか?手で書いたものを手でなぞるとかですか?

実際どのようにアイコンを作るのか、スケッチかPCか?時と場合に違うと思う。私はスケッチを書いてアイディアを得ることが多いです。PCで描くことも。シンプルにしていきたいと思っていて、こういうものを作りたいなと思うものを何処かから見つけてきて、

f:id:niwatako:20160303173032j:plain f:id:niwatako:20160303173040j:plain

トレースすることも可能です。

各端末あると思いますが、Photoshopと比べて様々なサイズを扱う時にも良いのでしょうか。他のツールを使いますか?

右下のExprot時に倍率と、その接尾語?を指定できるので@2xや@3xも自動出力できる

f:id:niwatako:20160303173257j:plain

気に入った記事は はてなブックマーク

はてなブックマークアプリiOS開発チームから来ました! はてなブックマークにはSwift特集があります! 良い記事を見逃さないように、ご利用ください! http://b.hatena.ne.jp/hotentry/it/Swift

そして良いまとめ記事があったらはてなブックマークでブックマークしましょう! try! Swift の記事で盛り上がると嬉しいです!