Repliaというアプリのアイコンと、サンプルPSDを描きました!
デザイナーにも開発者にもうれしいアプリなので、使い方を解説します
Repliaとは
RepliaはPhotoshopのデザインからiOSのソースコードを生成してくれるアプリです
まずは30秒の使い方動画をみてください!魔法みたい
Repliaで書きだしたプロジェクトファイルをSimulatorで見るとこんな感じ!
あっという間にSimulaterで見られるかたちに整えてくれるのはスゴイ…スゴイよ…
ざっくりしたアプリ使用の流れは
- Repliaでpsdを読み込む
- Xcodeのプロジェクトファイルに書き出し
です
セットアップ方法
Repliaを使うにはAdobeのPhotoshopで設定が必要です
フォトエディター | Adobe Photoshop CC無償体験版ダウンロード
公式ページのガイド:Guide - Replia
Photoshopの設定
Photoshopの[環境設定]→[プラグイン]を選択する
- サーバーの名前とパスワードを設定
- Generatorを有効にする と リモート接続を有効にする にチェックを入れる
※このサーバーというのは、自分で特別に用意する必要はありません
右上の [OK]を押してPhotoshopをいったん終了する
(Photoshopを再起動しないと設定変更が有効にならないため)
Repliaでpsdを読み込む
PhotoshopでPSDを開く
サンプルとして使用できるpsdはRepliaで配布されています
Replia(画面下のサンプルファイルの Sample PSD file)
Repliaを起動する
さきほどPhotoshopで設定したサーバーの名前を選択して、パスワードを入力する
※このとき、Photoshopで読み込みたいPSDが開いていないと先に進まないので注意
[OK]を押す
読み込めました!
Xcodeのプロジェクトファイルに書き出し
右上の[Export]を押します
こんなかんじで書き出せました!
Xcodeで開いて、画像を見ると、ちゃんと3サイズつくってくれてるという!!!!うわあああああああああ神
余談
最初、iPhone6のSimulatorで見たとき、右下のネコさんが横にひろがってしまうのですが、仕様です(教えていただきました)
Repliaでオブジェクトを選んで、右側のLayoutで調整するとなおせます
まとめ
いま、アプリのデザインをするのはSketchやInDesign、illustratorなどを使っているかもなのですが、Photoshopは使える人が多い印象があります
こういった方法でプロジェクトを進めることができるという手段のひとつとして有効だと感じました
ちなみに、サンプルPSDのイラストは、イラストレーターのパスで描いたものをPhotoshopでシェイプレイヤーとして貼り付けて調整しました
かわいくて使いやすいモチーフを描いたので、ぜひ見てみてください:D
追記:まとめがとってもわかりやすいので追記します!(2015/05/26)