macにInkscapeを入れて.aiや.epsを編集する。モック画面作成
引き続き開発中のゲームアプリ「いちおくまんえん」のモック作成してます。
とりあえず、メインコンテンツはある程度出来てきました。
フッターから遷移する系のサブコンテンツは、一旦メインコンテンツ間をうろうろ出来るようになってから作っていきます。
というわけで、メインコンテンツである程度仕様が分かるようにそれっぽいフリーの素材を探しては配置していってたりするわけですが、透過されてる画像がなかなか見つからないんですよね・・。
大体は.jpgファイルでweb上では表示しておいて配布はzipで、中に.psdや.epsや.aiが入ってる系。
.psdはGIMPで触れるならいいんですが、ベクター系はいいフリーソフト知らなかったんですよね。
というわけで、探してみるとInkscapeなるものが良いらしい。
Inkscapeをダウンロードしにいく。
http://inkscape.org/download/?lang=ja
(Apple X11/Xquartz 2.3.4 以上が必要です)
何か入れないとダメらしい。
調べてみるとX11は昔のMac OSにはデフォルトで入ってたらしいけどLionあたりからサポートしてない模様。
でもLounchPad内にはアイコンが存在したので起動してみると下のWebサイト飛ばされる
http://support.apple.com/kb/HT5293
Xquartz入れろ的な感じで案内してるみたいなので移動してダウンロード
http://xquartz.macosforge.org/landing/
Xquartzを入れる
Inkscapeも入れる。
何か余計なものが表示されてるのは非表示ファイルも出るように設定してるからです(゚A゚;)
Xquartzの場所を教えてあげる
しかし起動しない( ゚д゚ )クワッ!!
とりあえずInkscapeとXquartzを終了させてmacを再起動しましょう。
するとInkscape起動するとXquartzも起動して・・・
あ・・あれ?何も起きないぞ・・・と思ってたらInkscapeの画面が表示されました!
だいたい10秒以上1分未満くらいで立ち上がるので落ち着きましょう(´・ω・`)
やっとこれで.eps開けるぞ!と思ってファイルをドラッグアンドドロップしてみようとするも反応しない。
きっとそういう仕様なんでしょう。きっと!
とりあえずメニューバーのファイルからopenで対象のディレクトリに移動してみる。
しかしAll Inkscapeファイルで表示されない・・。
Allにしたら表示はされますが開こうとしたらエラーが出て読み込めませんでした('A`)
というわけで原因調査。
Ghostscriptが必要
インストールする方法を調べるとMacPortsがあれば
sudo port -v install ghostscript
で完了!素晴らしい!
入ってない場合は入れておくと色々便利です。
私の場合はgit入れる時に入れました。
こちらの記事が参考になるかと
http://morugu.hatenablog.com/entry/2013/02/06/021910
Ghostscriptのインストールが終わったらInkscapeを再起動してみましょう。
すると表示されなかった.epsなどが表示されて開けるようになっています\(^o^)/
ベクターファイル触ることもたまにあるだろうし、Inkscapeもある程度は使えるようになっとこう。
.pngに書きだそうと思ってファイルメニュー見たらそれらしいのがExport Bitmapしかない・・・。
まさかの.bmpですか・・?と思ったら普通に.pngで書き出せました!よかったよかった。
と、無事に透過PNGファイルも抜き出せるようになったので、モック作り再開。
一応、自分の部屋と、庭のミニゲームのイメージはこんな感じ
あくまでイメージ!きっとUI強い人が現れて素晴らしいデザインに変えてくれるはず!!
しかし縦の可変サイズの対応は大変そうだ・・・。
上下を単純にカットとかでいけるようになるべく作るつもりだけど、色々と画面描いてみるもののしっくりこないことが多い・・・。
iPhone4S使ってるので縦長のレイアウトってあんまり実感沸かないんですよね。
むしろ3.5インチ切り捨てられてるのか画面から見切れて押せないボタンがあったり、見れないリスト項目があったりするケースがちらほら。
そろそろiPhone4S使ってる人のほとんどが2年経つ頃っぽいのでスマホに限定してアプリ作ってるとこは縦長しかサポートしないようになるのかなー(´・ω・`)
私は来年の3月に5Sに変わる予定です。
Androidはほぼ開発用に購入したくらいでまったく使ってない・・。
一応縦長だし、縦長のレイアウト研究にAndroid優先で触るようにしようかな。