きせかえツールの作成について
1.初めに用意するもの、或いは必要なもの
(1)高性能なパソコンの方が操作が楽です。メモリは充分であること。
OSはWindowsXPでもVistaでも良い。
(2)ソフトウェアを用意する
・きせかえUIクリエータときせかえツールスタジオのソフトをダウンロードしインストールする。OSに合ったソフトをDLします。
・きせかえUIクリエーターはこちらからDL()
http://www.nttdocomo.co.jp/service/imode/make/content/kisekae_tool/tool2/index.html
・きせかえツールスタジオはこちらからDL(kisekaetoolstudio30.zip)
http://www.nttdocomo.co.jp/service/imode/make/content/kisekae_tool/tool/index.html
各ページにプロファイルが置いてあるので、必ずDLしてください。作ろうとする機種のプロファイルが必要です。
zip形式の圧縮ファイルですので、解凍用のソフトも要りますが、エクスプローラで開いてコピペでも良いかな
こんな感じでファイルを入れて下さい
DLしたソフトを解凍すると中にpdfで説明書が入っているので読んでおくこと。簡単な操作はこのサイトで説明します。
・その他のソフトはペイント系のソフト(画像修正用フォトショップ、ペイントショップ等)、画像ビューアソフト(私はIrfanViewを使用)
(3)画像を用意する(Fの携帯従来のアイコンは192x192のサイズ。OPP搭載はSH仕様で152x152)
・F06BのアイコンサイズはSHと同じ152×152に変更になりました(150で作成)。OPP導入で細かい所までSH化してしまった
・iPhone用のアイコンが欲しい場合は下記のサイトで好きなタイプを落として利用しましょう。
http://speckyboy.com/2008/07/18/35-free-icon-sets-for-your-iphone-pimp-it-up/
置かれているファイルは、透過のtgaだったりpngだったりします。サイズは60x60ピクセルや53x53ピクセルが多いので
このサイズをリサイズします。私は110x110で作りましたが、配置されている画像にはシャドーが入れてあったりするので
トリミングしたりシャドーは消してしまっています。解像度を上げるため画像が荒くなるので指先ツール等で修正します。
この作業が結構手間が掛かります(笑)サイトによっては128×128が置いてあるので、これを利用した方が画質が良い
ペイントソフトで修正したらアイコン画像だけを背景画像に配置します。配置については(4)で説明します。
配置する背景を用意しますが、新規レイヤーで480x704で作り、そこに上のアイコンを配置するのです。
配置の位置決めには注意します。アイコン配置の位置が決まったら、その画像を基準として保存しておきます。
後は各メニューページのアイコンと置き換えるだけです。このようにしてアイコンを配置した背景画像に
表示文字をテキストで書き加えて各メニューは完成です。レイヤーのまま保存しておきます。後で加工が楽です。
実際の携帯のサイズは480x960で上から80と下から176は携帯が使う領域なので、配置は計算しなくてはいけません(笑)
このサイズは無視できます。F06Bもサイズは704ですが、現在は686で作成。小さい方がファイルが小さく仕上がる
配置が決まれば、次はフォーカスアイコンを作成します。配置した画面から、背景とアイコンを192x192のサイズでコピーします。
最初は背景を含んだアイコンをコピーして、新規レイヤー192x192にペーストし、次に背景無しのアイコンと文字をコピーして
前述の新規レイヤーにペーストします(レイヤーは上に)。背景を含んだアイコンと同じ位置になるよう位置を調整します。
位置が決まれば、背景を含んだアイコンのレイヤーは削除し、背景のみコピー・ペーストします(レイヤーは最下段)
次はフォーカスを決めるのです。私の場合は半透明のアイコンを利用しているので、べた塗りのフォーカスリングは置けません。
窓を開けたものを用意し、選択アイコン画像のレイヤーにペーストします。レイヤーの順序で上になったり下になったり表示します。
この様な作業を繰り返すわけです。
これでメニュー背景画像と選択画像が完成したらレイヤーのままの画像を保存します。
次にソフトで統合し別名のjpgファイルに変更し保存します。
保存する画質は最大にしておきます。ビュアーソフトでそれを開き、上書き保存するときに圧縮を60%にしたり調整します。
メニュー背景の画像(jpg)ファイルは50-60KB程、選択アイコン画像(jpg)は5-7KB程を目安にしています。
小さくすると良いけれど、画質が荒れてくるので、これはサジ加減が必要ですね(笑)
アイコンの作成(画像のピンクの格子模様は透明部分です)
左から、56x56の透過png。次は解像度を変更110x110。次は画像を綺麗に処理。次は半透明レイヤー
半透明レイヤーをペーストし、鍵マークを鮮明にするため範囲を選択し、半透明レイヤーを切り取る
四隅のカーブも半透明レイヤーに合わせて修正。修正時は拡大して実施。
アンシャープマスクを掛ける場合もある
(ファイルの解像度は透明部分を含むと120x120サイズ)
切り取った画像の色目を調整。そのまま使う場合もある。全てロックをしてレイヤーのまま保存する。
背景に配置するときは、レイヤーを結合してペーストする場合と、別々にペーストする場合がある。
半透明レイヤーの鍵マーク部分を切り取っているので、この画像はレイヤーを結合して利用します。
背景画像を開き、上で作成した各種アイコンを配置する
作成したファイルは複数のレイヤーのまま保存します。配置が完了したらテキストを入れる
レイヤー画像を統合しjpg画像で保存した物をきせかえUIクリエータで使用します。
レイヤーを別画面にコピーして表示してみました。選択アイコンの構成
110x110がアイコンの大きさ、灰色の格子の透過色を含み192x192のサイズ。
左上からメール受信boxのテキストを含んだ画像です。右上はフォーカスのリングです。
左下は背景画像。この組み合わせたのが右下の画像で、このままレイヤー構成で保存しています。
これを結合してjpgファイルで保存した物をきせかえUIクリエータで使用。
110x110
こんな感じでフォルダ分けして保存しています。(WinXP/ProSP3)エクスプローラのフォルダアイコンは変えてあります。
画像ファイルは、ソフトに関連づけられたアイコンで表示されています。Irfanviewのアイコンです。
最高画質で保存するとファイルサイズが大きくなりすぎるので、さらに圧縮して小さくしています。
(4)画像の配置オフセットについて
図の説明 ← 座標 520 ← 12分割したエリア160x176
F09Aの解像度は480x960ドットです。表示領域は上から80ドットがアンテナ(36x36)とか電波(36x36)の表示エリアです。
40エリアに電池等を表示し、その下の40エリアはメニューの説明とかiモードはサイトアドレスが表示される領域です。
下の176エリアはソフトキー等が表示される領域です。機種によりサイズが異なります
画像解像度:F905/906=864,F03A/F09A/F01A/F01B/F04B/F06B=960,F03B/F07B/F01C/F04･05C=854
F906:80,F01A:80,F03A:176,F09A:176,F01B:156,F03B:70,F04B:156,F07B:70,F06B:176,F01C:137,F04/05C:70
スペックに書かれているステージサイズは全て480x704(作成当初は704でした→686→677とサイズダウン)
アンテナ・電池領域の背景色を変えるために単色或いは模様の画像を用意しますが、サイズの決め方は以下の通りです
画像解像度−ステージサイズ−ソフトキー領域＝背景画像サイズ(横幅は480)
フォーカス画像サイズはスペックだと192x192→160x160→150x150と変えてきています
このようにして背景にする画像と、選択状態を表示するアイコンが決定しましたので、次はきせかえUIクリエータの説明です。
最近は下画像のサイズ480×686サイズで作成していますが更にスケールダウンして677で作成
※上の(4)で説明したレイアウトは変更しています。画像は下側を基準に176+686+98=960、F01Bは下側が156
左からメニューの背景画像、2番目は、背景画像選択が容易なように色分けした画像
3番目はアイコンの配置を正確にするための定規画像
4番目は正しく配置したグラスアイコン、必要の都度コピペで利用。全てレイヤーで保存している
4番目は背景と結合した画像です
選択サイズを160×160としたので、今までは1枚の画像を修正するとき、重なり合う隣の画像も修正の必要があったが
この方法だと1枚の画像修正で済む。解像度を下げたので画像ファイルのサイズを小さく出来て、きせかえツールの
サイズも相当小さくすることが出来た(2010年)
フォーカス選択画像
最近利用している幅の狭いフォーカス枠です。右はシャドー用
