Winterboardでアイコンを弄ろうとすると、アイコンマスクによってアイコンの形を変更するくらいしかできません。

そんなアイコンも、以前はリアルな画像が用意されていました。
その画像を入れ替えることで、個性を出していた方も少なくありません。

Anemoneでは、このアイコンをいろいろ弄ることができます。

構成内容

アイコンは、テーマファイル内のAnemoneEffectsフォルダーに画像を配置します。
各画像ファイルは以下の通りです。

Overlays

アイコンよりも手前に配置される画像です。

Underlays

アイコンよりも奥に配置される画像です。
ホーム画面以外で表示されます。（下部の補足を参照願います）

Shadows

アイコンの影となる画像です。
アイコンよりも大きな画像でないと、隠れてしまいます。

作ってみた

やっと作ることができました。
WinterboardからAnemoneに切り替えた理由の１つがここにあります。
このアイディアを形にしようと思った頃には、Winterboardではできなくなっていたため、お蔵入りになってしまったのです。
当時作っていたファイルを捨て、アイディアを基に１から作ってみました。

実際に画像を入れ替えて適用させたスクリーンショットです。
雰囲気が伝わるように、壁紙を木目にしてみました。

元々のアイディアは、アイコンの大きさで完結するものでした。
3.5インチでは、アイコン同士の間隔もそれほど広くなかったため、影をアイコンよりも大きくするくらいしかできませんでした。
試行錯誤しているうちに、Winterboardでできなくなってしまったのです。

今では、5.5インチのiPhoneでかなり大きな画像を利用できます。
そのため、影となる画像を思ったよりも大きくすることができました。
そうなると、アイコン画像内で何とか作ろうとしていた「WANTED」の張り紙を、影の画像に作ることができるのです。
さらに、アイコンをトリミングする必要もなくなったのです。
おまけに、「WANTED」の文字を大きく斜めにしても、カレンダーアイコンの日付を邪魔することなく表現できました。

アイコンの上下で違う画像が配置されるため、位置合わせに苦労しましたが、上手くできたかと思います。

今回のサンプルテーマ用に、木目の壁紙を用意したのですが、標準だとアイコンラベルが白くなってしまいます。
そのため、 WANTED張り紙の色を少し濃くしたのですが、やはりアイコンラベルは黒が良いということで、アイコンラベルの色もAnemoneのテーマで変更するようにしました。

このページを作成中にバージョンアップがあり、アイコンラベルの影におけるバグも修正したとのこと。

しかし、スクリーンショットでも分かるのですが、黒い影が出ています。
よく見てみると、小さな白い影の向こうに、大きな黒い影が広がっている感じです。
指定してある白い影は何とか確認できますので、バグ修正はされているのでしょうね。
ということは、この黒い影はiOS標準の影だと思われますので、できればそこまでフックして欲しいものですね。
バージョンアップに期待しましょう。


このサンプルテーマはこちら
　ー＞　boke_a_iconeffects.zip

補足

今回作ったものは、以前から作りたかった「WANTED」ですが、大画面時代の恩恵やレイヤーにより、「WANTED」の文字をアイコンの上下で挟み込むという作りにしました。
やっとできた〜！！と思ったのですが、しばらくして写真をメールしようとした時、影とセットじゃないと成立しないことに気づきました。
いや、気づいてはいたので、「思い知らされた」という感じでしょうか。

共有ボタンをタップすると出てくる画面です。

分かってはいましたが、このように並ばれると、やはり、アイコンの大きさの中で完結すべきだったかもしれません。

ここで、「one more thing」があります。
アイコンの横からほんの少しだけ見えるものがあります。

今回のサンプルの中には、試したままの Underlays画像が入っています。
ダウンロードした方は確認して欲しいのですが、６色リンゴの画像なのです。
そのリンゴの左端がほんのちょっと出ている状態です。
さらによく見ると、右端にも出ています。
もし、Underlays がこのような振る舞いをするのなら、「枠」くらいしかアイディアが浮かびません。
しかし、画像サイズは Overlays と同じなので、わからなくなってしまいます。

そう思いながらも、何とかならないか考えてこのページを作っているのですが、１つ試したいネタを思いつきました。
Underlays は、「outside of SpringBoard」となっているのがずっと引っかかっていたのです。
先ほどの「共有」なのですが、「共有はoutside of SpringBoard なのでは？」と思ったのです。
そこで、メッセージアプリアイコンの中身をくり抜いた画像で試してみました。
ホーム画面では、このようになります。

そして、共有の画面では・・・

出ましたっ！！
リンゴちゃん！！
「nearby」だけに、アイコンの後ろにピッタリ張り付いております。
この Underlays を使ったサンプルが思いつかない・・・