ぬんびりぶろぐ

アイロンビーズをはじめ、すきなものについて書いてるブログです。ゆっくりしていってね。

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

ドット絵ゲーム「ドロップ・ウィザード」をアイロンビーズでつくったよ

先日、ドロップ・ウィザードのキャラクターをアイロンビーズでつくって、ドロップ・ウィザードを開発しているNeutronizedさんに送りました

続きを読む

指で「ドットを打つ」快感がすごい!モノクロドット絵をつくるアプリ「PixelTweet」

f:id:nunchaku:20150306160831p:plain

「ドットを打つ」が気持ちよい体験に!

モノクロなのに新しいドット絵エディタアプリ「PixelTweet」がリリースされました 無料だよ

 

アプリのダウンロード


PixelTweet - 楽々モノクロドット絵エディタ

PixelTweet - 楽々モノクロドット絵エディタ

PixelTweet - 楽々モノクロドット絵エディタ

  • HANDSUM.INC
  • エンターテインメント
  • 無料

Android版はこちら:PixelTweet 

 

遊び方

リリース前にSNSで拡散されていた説明書がすごくわかりやすいです

 

iPhone版でさっそくあそんでみた!アイコンはドッチャン!
f:id:nunchaku:20150306160105j:plain
ゲームみたいな起動音がしてはじまりはじまり!
 
打てるドットは3種類
1回タップするとまっくろなドットが打てます
もう一度タップするとちょっと密度の減ったドットになります
さらにもう一度タップでさらに密度が減ったドット、もう一度タップで消えます
 
ドット打ってるところはこんな感じ
音がすごく良いので、↑の動画の右下のサウンドボタンを押して、音をきいてみてください!
 
エビとクリームソーダを描いてみたよ
右上でドッチャンが見ててくれるのがいとおしい
f:id:nunchaku:20150306160032j:plain
f:id:nunchaku:20150306160041j:plain
 
ふっかつのじゅもん!?
描いたドット絵をツイートして

ツイートに書いてあるURLをタップすると

f:id:nunchaku:20150306162853j:plain
こんな文字列があらわれるので、コピーしてアプリの右下のノートっぽいアイコンをタップして貼り付ける!これでアプリにドット絵が読み込まれます
f:id:nunchaku:20150306163300j:plain
ともだちのドット絵を読み込んで、ちょっと変えてツイートしてみたりすると、交換日記やリレーまんがみたいで楽しそう:D
 

アプリのキャラ「ドッチャン」をアイロンビーズでつくってみた 

f:id:nunchaku:20150306160305j:plain
f:id:nunchaku:20150306160316j:plain
f:id:nunchaku:20150306160327j:plain
f:id:nunchaku:20150306160341j:plain
f:id:nunchaku:20150306160359j:plain
かわいくてついついいっぱいつくってしまった!
これらの作品はアプリ開発者のm7kenji ▄▀▄ (@m7kenji) さんにお渡しする予定です:D
 
3/11 追記
無事に受け取っていただけました!

 
ピコピコやみつきのさわりごこちのPixelTweet、みんなも遊んでみてね!


PixelTweet - 楽々モノクロドット絵エディタ

ふせんメモをEvernoteにカンタン保存!デスクトップ付箋アプリ「MemoZou」

f:id:nunchaku:20140826001229p:plain

Evernoteをもっと気軽に使いたい!

Evernoteをもっと使いこなしたい!

という方にオススメなMacアプリがリリースされました!

 

Evernote連携Macデスクトップ付箋アプリ「MemoZou」!

MemoZou

MemoZou

  • itok
  • 仕事効率化
  • ¥300

 

MemoZouとは

Macのデスクトップに付箋のメモがぺたぺた貼付けられるアプリです

付箋メモのアプリなら今までもあった、あったんですけど、

MemoZouはちょっと違う!

 

書いたメモをEvernoteにカンタン保存!

今までメモしたはいいけど、保存するときテキストとかにコピーしてえっと ってなってました 不器用

でも!MemoZouならカンタン保存!

 

メモを書く→Evernoteへの保存
  1. ⌘キーとNキーを押して付箋メモを作成
  2. 付箋にメモを描く
  3. ⌘キーとSキーと押して保存する
  4. Evernoteにタグ「#MemoZou が付いて保存される

勝手にタグが付くので、あとから探すときはタグで検索!

 

画像も貼れるから資料収集にお役立ち

テキストだけでなく、画像を貼ることができます

画像を貼ったり、テキストをコピー&ペーストしたりが自由自在!

メモを常に最前面に表示させる設定があるのも地味に便利〜

f:id:nunchaku:20140826000616p:plain

 

上記はわたしが気に入った使い方ですが、いろいろな使い方ができるアプリです

詳しくは開発された@itok_twitさんのブログをご覧ください

 Evernote連携Macデスクトップ付箋アプリ MemoZou v1.0 を公開しました。

 

そして!

 

アイコンのデザインを担当しました!

f:id:nunchaku:20140826003829p:plain

シンプル!

Evernoteなグリーン!

このアイコンをつくらせていただく経緯は、TIME TICKETがきっかけなのですが、それはまた別のエントリーで書きたいと思います

 あなたのアプリアイコンのラフを描きます!タイムチケットを発行しました

 

すてきなアプリを開発され、そしてアイコンデザインさせてくださった

いとーけーさん、ありがとうございました!

 

そうそう、みなさまの「MemoZouのかっこいい使い方ぜひ教えてください!

なんかいろいろ使えそうですよね!

 

MemoZouのダウンロードはこちら!

MemoZou

MemoZou

  • itok
  • 仕事効率化
  • ¥300