Banco Japon de Mesa Verde
最近の主な話題-iPhone-FPS-デジタル一眼-PC自作-Mac-PS3-グルメ-ファッション-etc.-
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[タグ未指定]

人気blogランキング
[iPhone 4] マスク/シャドウの作例2を手直し&オーバーレイの用途
 参考:[iPhone 4] ハイレゾアイコンとマスク/シャドウのまとめ

 上記エントリで試作した作例2を少々手直し。立体効果を加えてみました。ただそれだけ。
 加えて、オーバーレイの使い道についても紹介。
 (iPhone 4、要Jailbreak、WinterBoard用)


■作例2
AppIconMask@2x.png
AppIconMask@2x.png
AppIconShadow@2x.png
AppIconShadow@2x.png
AppIconOverlay@2x.png
AppIconShadow@2x.png
(※このオーバーレイは完全透明の画像。マスクとシャドウで自動整形するだけなら不要ですが、SDアイコンしか持たないアプリをCFBundleIdentifier内のHDアイコンで置換する場合、OSデフォルトのオーバーレイが適用されてしまうため、回避するために入れておく必要があります、詳細は前掲エントリの追記参照)
適用結果2
適用結果2
(GangstarとChuck Norrisのみ専用のHDアイコンを作成、その他は全てマスクとシャドウを自動適用)

スポンサーサイト

テーマ:iPhone - ジャンル:携帯電話・PHS


人気blogランキング
コメント
この記事へのコメント
はじめまして!
Renと申します。
ブログ楽しく読ませていただいております。

メールでと思ったのですがアドわからないので
こちらの記事に書かせていただきました。
記事の内容ちがいで申し訳ありません。

iphoneの天気ウィジットなどで、ブログを読ませていただき勉強させていただいてるのですが、
どうしてもわからないことがあり
もしご存じでしたら教えていただきたいのです。

こちらMacthemes

http://macthemes.net/forum/viewtopic.php?id=16788623&action=new

で紹介されているWeatherWidget.theme

http://www.zepto-angstrom.co.uk/WeatherWidget/WeatherWidget.theme.zip

このWeatherWidget.themeというのを使用したくDLし、
WinterBoadで適用しましたところ、
最初はMoscowの気温や天気の状態で表示されると思っていたのですが、
最初から動いていない状態でLoadingと表示され
天気アイコンが?のマークになっており更新されない状態です。
私の状態は3GS ios4.0ですが合わないとゆうことなのでしょうか?

もしios4.0で使えるのでしたら、
地名、気温、お天気アイコンを自分の住んでいる地域の情報に表示させ使用してみたいです。

bancojapon様のブログを参考に、PrivateにあるconfigureMe.jsを弄ったり色々しましたが、
なにぶん知識がなく、なかなかうまくいきません。

もしよろしければ、自分の地域(札幌)で表示する方法を教えていただけないでしょうか?
どうぞよろしくお願いします。
2010/10/15 (Fri) 13:47:18 | URL | Ren #-[ 編集]
そのウィジェットについて
こんにちは
すみませんが、3GSが手元にないため結果は保証できません

このウィジェット、zipに入ったオリジナルは2年前と少々古いですね

まず表示が?で更新されない件は
Wallpaper.htmlの11行目と12行目の間に
以下の3行を挿入すれば直るかと思います
background-image:url("/private/var/mobile/Library/SpringBoard/HomeBackground.jpg");
background-size: 320px 480px;
background-repeat:no-repeat;
ユーザー壁紙が背後に表示されます(壁紙変更適用は要respring)
リンク先のスレッドは最近まで書き込みが続いているようです
スレッドを読み進めるor検索すればこれ以外のもっと適した
解決方法が載っているかもしれませんので探してみて下さい

都市はconfigureMe.jsの6行目にある都市名を変更します
例えば札幌なら "Sapporo, Japan" です
(都市名はaccuweather.comで探せます)
うちのiPhone 4だとこんな感じに表示されます
http://blog-imgs-45.fc2.com/e/v/h/evh5150/10101501.jpg

ところで
私が2年前や最近モディファイ版をアップしたウィジェットもそうですが
巷の多くのウィジェットはほぼ同様のソースを改変しつつ使っているので
どうしてもうまくいかなければ他の(なるべく新しい)ウィジェットを使ってみるのも手です
使えるアイコンセットやcssのバリエーションは大体似通っています
2010/10/16 (Sat) 11:45:56 | URL | bancojapon #mQop/nM.[ 編集]
ありがとうございます!
bancojapon様
返信していただきありがとうございます。わざわざ検証して、ご親切に詳しく解説していただけるなんて感激です!私は急な仕事が入りiphone弄れないでいる状態です。仕事が片付き次第早速試させていただきます。
優しくしてくださいまして本当にありがとうございました!
2010/10/17 (Sun) 21:29:27 | URL | Ren #-[ 編集]
初めまして。
bancojaponさんのブログを参考にしながら自分自身でも作成してみようとしているのですが、

PhotoshopでAppIconMask@2x.png等を自作して適応させてみると元アイコンが透けて見えている状態で
うまく反映されない状態になってしまいます。
透けた四角いアイコンにAppIconShadow@2x.pngが透けてのっかってるかんじです。

何か私の作成に問題があったりAppIconMask@2x.png等に特殊な保存方法があるようでしたらご教授していただけると助かります。

マスクは色作成で一番白いのと黒いのを使用して作成し、
Webおよびデバイス用に保存で作成しています。
他のものもすべてWebおよびデバイス用に保存で作成しました。

com.apple.mobileicons.frameworkへは、AppIconMaskとAppIconOverlayとAppIconShadowの@2x含めた6個、
com.apple.springboardへは、透過したIconDarkeningOverlay@2x・WallpaperIconDockShadow@2x・WallpaperIconShadow@2xの3個を入れています。

お時間のあるときに出来たらお願いいたします。
2010/12/29 (Wed) 23:16:21 | URL | Ciel #eqP7eH0Y[ 編集]
こんにちは
文章だけだと状況が掴み辛いのでもし見当違いだったらごめんなさい

いずれにしても段階を追って試してみるのがよいのではと思います
まずはAppIconMask@2x.png、これが重要かと
白黒のグラデーションでマスクするとして、ちゃんと
完全に元アイコンを消したい部分→黒(#000000)で塗りつぶされているか
完全に元アイコンを見せたい部分→白(#FFFFFF)で塗りつぶされているか
中間部分(もし必要な場合)は→RGB同値のグレー(#xxxxxx)か

さて、画像と保存方法どちらかに問題がある場合、切り分ける方法は幾つかあります

その1
 1.私が上のエントリに掲載したAppIconMask@2x.pngを使ってみる
 2.検証済み画像なのでマスクは成功(白い部分だけオリジナルが見える)
 3.この画像をPhotoshopで開きCielさんが再度保存し直す
 4.保存し直したAppIconMask@2x.pngを使ってみる
 5.マスク成功すれば保存方法は正常
 6.ということはAppIconMask@2x.pngの作成方法に問題が?

その2
 1.今度は新規にAppIconMask@2x.pngを作ってテストしてみる
 2.マスクの描き方が正しいか試すため例えばこんな感じ
   画像の上半分を真っ白(#FFFFFF)で塗りつぶす
   画像の下半分を真っ黒(#000000)で塗りつぶす
 3.この画像を適用してみると(保存方法は正しいとわかっているので)
   オリジナルアイコンの上半分は完全に見えている
   オリジナルアイコンの下半分は全く見えない
 4.といった表示になるはずです

もしAppIconShadow@2x.pngも同時に置換していれば、オリジナルアイコン上半分のエリア以外はそれが見えているはずです
ここまで正常にできることがわかれば、後はマスクとシャドウの形状を好みに合わせて作るだけということになります

ところで、文章を見る限りでは保存方法に問題はないと思います
私も「Webおよびデバイス用に保存」(多分PNG-24デフォルト)で保存しており、特別なことはしていません
2010/12/30 (Thu) 09:44:24 | URL | bancojapon #mQop/nM.[ 編集]
丁寧なご回答ありがとうございます♪
あれから自身でも再度挑戦し、こちらの方法も参考にしてやりましたが、どうも保存方法にもんだいがあるようです^^;
PhotoshopでWebおよびデバイス用に保存」(多分PNG-24デフォルト)で保存してもだめだった画像を
illustratorで不透明マスクの「クリッピングの適用」をした状態で保存するとできました。
Photoshop単体で全て作業を行えると非常に楽でいいんですけど
Photoshop自体も初心者なので多分私の手順が間違ってるのでしょうね><
2010/12/30 (Thu) 20:41:38 | URL | Ciel #eqP7eH0Y[ 編集]
一部追記・訂正あり
確かにそれだと二度手間になってしまいますね
Photoshopでも利用するクリッピングマスク等マスクの原理はまさにAppIconMask@2x.pngと同様で
塗られている色のグレースケール256階調を評価して不透明度を適用するものです
Illustratorで書き出したときとPhotoshopで書き出したときのPNGオプション設定に何か違いが生じてしまっているのかもしれません

一応書いておきますね
Photoshopの「Webおよびデバイス用に保存」で保存したときのオプションは
プリセットで「PNG-24」を選択したデフォルトの状態(下記)です
(プリセットを選択後他は何も変更していない状態)
 「透明部分」にチェックあり
 「マット」は自動的に無効になっている
 「インターレース」はチェックなし
 「sRGBに変換」にチェックあり
 保存ダイアログで設定欄は「初期設定」

以下追記訂正です
AppIconMask@2x.pngの場合「透明部分」チェックなしにした方が確実なようです
同じような完全不透明な画像を作っても上記チェックありの場合、PhotoshopがAlpha有無を勝手に判断してチャンクのカラータイプを2にしたり6にしたりと、結果が安定しないのを防ぐためです(常に2にする)
AppIconMask@2x.pngはカラータイプ6だと認識されない(適用されない)ようです
逆にAppIconShadow@2x.pngで透過部分を作りたければ上記チェックが必須です
記事にも追記しておきました
2010/12/31 (Fri) 00:53:38 | URL | bancojapon #mQop/nM.[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2005-2011 Banco Japon de Mesa Verde all rights reserved.
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。