ぬんびりぶろぐ

アイロンビーズ/スマートフォン/Webサービス/開発などについて書いてるブログです。ゆっくりしていってね。

PSDからiOSのソースコードを生成してくれるMacアプリ「Replia」

 

f:id:nunchaku:20150516171502p:plain

Repliaというアプリのアイコンと、サンプルPSDを描きました!

デザイナーにも開発者にもうれしいアプリなので、使い方を解説します

 

Repliaとは

RepliaはPhotoshopのデザインからiOSのソースコードを生成してくれるアプリです

まずは30秒の使い方動画をみてください!魔法みたい 

 

Repliaで書きだしたプロジェクトファイルをSimulatorで見るとこんな感じ!

f:id:nunchaku:20150516154441p:plain

あっという間にSimulaterで見られるかたちに整えてくれるのはスゴイ…スゴイよ…

 

ざっくりしたアプリ使用の流れは

  • Repliaでpsdを読み込む
  • Xcodeのプロジェクトファイルに書き出し

です 

 

セットアップ方法

Repliaを使うにはAdobeのPhotoshopで設定が必要です
 フォトエディター | Adobe Photoshop CC無償体験版ダウンロード

 

公式ページのガイド:Guide - Replia

 

Photoshopの設定

Photoshopの[環境設定]→[プラグイン]を選択する

f:id:nunchaku:20150516155856p:plain

 

  • サーバーの名前とパスワードを設定
  • Generatorを有効にする と リモート接続を有効にする にチェックを入れる

※このサーバーというのは、自分で特別に用意する必要はありません

f:id:nunchaku:20150516155554p:plain

右上の [OK]を押してPhotoshopをいったん終了する

(Photoshopを再起動しないと設定変更が有効にならないため)

 

Repliaでpsdを読み込む

PhotoshopでPSDを開く

 サンプルとして使用できるpsdはRepliaで配布されています

 Replia(画面下のサンプルファイルの Sample PSD file)

 

Repliaを起動する

 さきほどPhotoshopで設定したサーバーの名前を選択して、パスワードを入力する

 ※このとき、Photoshopで読み込みたいPSDが開いていないと先に進まないので注意

f:id:nunchaku:20150516160655p:plain

f:id:nunchaku:20150516160739p:plain

[OK]を押す

 

f:id:nunchaku:20150516161005p:plain

読み込めました!

 

Xcodeのプロジェクトファイルに書き出し

f:id:nunchaku:20150516161216p:plain

右上の[Export]を押します

f:id:nunchaku:20150516161612p:plain

こんなかんじで書き出せました!

 

Xcodeで開いて、画像を見ると、ちゃんと3サイズつくってくれてるという!!!!うわあああああああああ神

f:id:nunchaku:20150516170214p:plain

 

余談

最初、iPhone6のSimulatorで見たとき、右下のネコさんが横にひろがってしまうのですが、仕様です(教えていただきました)

Repliaでオブジェクトを選んで、右側のLayoutで調整するとなおせます

f:id:nunchaku:20150516162322p:plain

 

まとめ

いま、アプリのデザインをするのはSketchやInDesign、illustratorなどを使っているかもなのですが、Photoshopは使える人が多い印象があります

こういった方法でプロジェクトを進めることができるという手段のひとつとして有効だと感じました 

 

ちなみに、サンプルPSDのイラストは、イラストレーターのパスで描いたものをPhotoshopでシェイプレイヤーとして貼り付けて調整しました

かわいくて使いやすいモチーフを描いたので、ぜひ見てみてください:D 

Replia

Replia

  • Hirogram
  • 開発ツール
  • ¥2,900

追記:まとめがとってもわかりやすいので追記します!(2015/05/26)

togetter.com