Tootoise ブログ(仮)

iOS 用の Mastodon クライアント、Tootoise についてのあれこれを書いたり書かなかったり

アイコンについて

現在 Tootoise で使っているアイコンはすべて Adobe XD を使って作ってます。

リリース前のプロトタイプの段階ではまだアイコンのイメージが固まってなくて、web の Mastodon のアイコンを真似して作ったものになってました。

f:id:manamimic:20191130190552p:plain

リリース前のタブバーはこんな感じでした。そのまんまですね・・・。
この時点では CLIP STUDIO PAINT で作って PNG 形式で書き出したものを貼り付けてたかな?なんだかぼんやりしてるのはそのせいですね。

v1.0.0からは、Adobe XD で PDF 形式で書き出して Xcode のアセットカタログで管理してます。
PNG だとアイコン1種類ごとに解像度の違う画像を3つ用意する必要があるんですが、PDF だとグリフってやつになるみたいで 2x の画像を1つ用意すればいいんですよね。あんまりよくわかってないんですが・・・アセットカタログに Image Set を追加して Resizing の Preserve Vecter Data にチェック✓を入れればいいみたいです。

f:id:manamimic:20191130192552p:plain

ただ、この時点ではまだ Adobe XD でのアイコンの作り方が分からなくて、CLIP STUDIO PAINT で作って PNG 形式で書き出したものを Adobe XD に取り込んで、そこから PDF 形式で書き出す・・・というちょっと面倒なことをやってました。

そうやってできた v1.0.0のタブバーがこれです。

f:id:manamimic:20191130193022p:plain

プロトタイプと比べてデザインがだいぶ変わりましたが、いったん PNG 形式で書き出してるせいでちょっとギザギザしてるのが気になってました。

そして今の v1.9.0のタブバーはこんな感じです。

f:id:manamimic:20191130223022p:plain

ローカルと連合をまとめて通知の一覧表示を追加したのでアイコン自体が別のものになってますが、デザインはほとんど変わってないです。変わってないですが・・・途中のバージョン(どのバージョンだったか忘れてしまった・・・)から CLIP STUDIO PAINT で作るのをやめて Adobe XD で全部作り直しました。それをそのまま PDF 形式で書き出してます。

というわけでやっとギザギザが気にならなくなりました。やっとアプリっぽくなったかなぁという感じです。

 

 

そしてこれは没アイコンの残骸の一部。

f:id:manamimic:20191207151414p:plain