特集


オンラインソフトでオリジナルスキンを作ってみよう!

「ICQ」「WindowBlinds」「Sonique」のデザインを自分好みにカスタマイズ

(00/04/04)

 オンラインソフトを使うとき、あらかじめ用意されたデザインになじめないことがときどきある。オンラインソフトの中には、ウィンドウなどのデザインを自由に変更できるスキン機能に対応しているものがあり、これらのソフトはスキンデータを読み込むことで自由にデザインをカスタマイズすることが可能だ。インターネットから既製のスキンをダウンロードするのもいいが、オリジナルスキンを自作すれば自分にフィットするデザインにすることができそうだ。

 そこで今回は、スキン対応ソフトのオリジナルスキンデータをオンラインソフトを使って作成してみたい。作成するスキンデータは、メッセンジャーソフト「ICQ」用、MP3プレイヤー「Sonique」用、Windowsの画面デザイン全体を変更する「WindowBlinds」用の3種類。スキン作成の流れは3本ともだいたい同じなので、最初に「ICQ」用のスキンデータ作成手順を画像作成を含めてできるだけ細かく紹介して、残りの2本はスキンデータ作成ソフトのみを紹介する。

■ メッセンジャーソフト「ICQ」のスキンを作ろう!

 メッセンジャーソフト「ICQ」のスキンを作ってみよう。スキン用の画像を作成する簡単な手順もあわせて紹介する。まずはグラフィックエディター「Pmacs」で背景画像とステータス表示用のアイコン画像を作成し、マウスをポイントするとアニメーション表示するボタンを「紗南ちゃん絵描きうた」で作成したのち、「ICQ Plus」で画像やアイコンの使用場所を定義するとオリジナルスキンの完成だ。

1. 好きな写真から背景画像を作ろう

 今回、背景画像とステータス表示アイコンを作成するグラフィックソフトとしてエフェクト機能が充実した「Pmacs」を使用することにした。背景画像をセピア調にしたり立体的なアイコンを作成したりと、スキン制作のようにパーツごとに様々なエフェクトを使用したいときに便利だ。

グラフィックエディター「Pmacs」

「Pmacs」  「Pmacs」は、多機能なグラフィックエディター。透過や合成の指定ができるレイヤー機能をはじめ、スキン作成に便利な丸形や四角型の立体的なボタンを作成できるほか、色調補正やノイズ除去などのエフェクト機能も備えている。フルカラー対応のため、写真画像のレタッチ作業にも向いている。また、筆の形や色の種類、画像の変形処理など、機能の大部分がプラグインで構成されており、自分の使いやすいように機能を追加・削除することができる。対応している画像形式はレイヤーも保存できる独自形式のPFFに加え、BMP、JPEG形式など。プラグインを追加すれば、さらに多くの形式の画像を扱うことが可能だ。

 まずはメインになる背景の画像を作ってみよう。スキン画像のモデルを我が家の愛猫“み~ちゃん”にお願いして、みーちゃんのデジカメ写真を使うことにした。まずはツールパレットの[Draw Bar]-[多角塗潰]を選択し、猫以外の余分な背景を白一色で塗りつぶす。背景にたくさん色を使うとコンタクトリストの文字が見づらくなってしまうので、メニューバーで[編集]-[効果]を選択し、[色彩調整]項目の中にある[セピア色]を実行して色調を単一にする。次にメニューバーの[編集]-[効果]を選択し、[テクスチャ]-[テクスチャ]で画像を少しでこぼこに加工してみた。最後にツールパレットの[Draw Bar]から[ボタン]を選択し、画像の縁にバナーのような立体感を出す。このとき[ボタン]のダイアログの中の[Translate]をチェックしていないと、画像の中を塗りつぶしてしまうので注意。背景画像が完成したらBMP形式で画像を保存する。

【著作権者】昌達(ChangTa)
【ソフト種別】シェアウェア 3,500円
【バージョン】1.04(00/03/05)

□ChangTa Web Page
http://www.asahi-net.or.jp/~gv9k-setg/

2.ステータス表示用のアイコンを作成しよう

 今度はコンタクトリストの左側にあるステータス表示アイコンを作ろう。アイコンはかなり小さいので細かな作業になる。「Pamcs」ではツールウィンドウの[Draw Bar]に[球体]という機能があり、これで簡単に立体的な丸型のアイコンを作ることができる。また、先ほど背景画像を加工するときに使った[ボタン]の機能で、四角い立体的なアイコンを作ることができ、ここでは、ネコのアイコンを作った。小さなアイコンを作成する場合、画像をズームツールでめいっぱい拡大させて塗り潰しツールや直線ツールなどを使って描こう。このとき、アイコン画像の背景の色は全て統一しなくてはならない。メニューバーで[表示]-[カラーメーカ]を選択して色を“R:255 G:0 B:255”にする。こうすればICQで表示されたときに透過させることが可能だ。

3.アニメーションGIF画像を作ろう

絵を描いた手順がそのままアニメーションになる「紗南ちゃん絵描きうた」

「紗南ちゃん絵描きうた」  「紗南ちゃん絵描きうた」は、アニメーションGIF作成ソフト。その名のとおり「絵描きうた」の感覚でアニメーションGIFを作成することができる。使い方はいたって簡単。右にある作業スペースにペンツールや矩形ツールで絵を描いていくと、作業内容がウィンドウ下部のスコアに随時記録されていく。好きに絵をぐりぐり描いてそのまま保存すれば、アニメーションGIFが完成する。また、絵を描いた軌跡をアイテムが追いかけてゆくオプションがあり、簡単なアニメを凝った感じにできる。表示できるアイテムはペン、マウスポイント、レーザーの3種類の中から選べる。なお「紗南ちゃん絵描きうた」の試用制限を解除するには、同じ作者の「Gifector」をシェアウェア登録する必要がある。

 「Pmacs」で白地に黒文字で“ICQ”と描いた47×19ピクセルの画像を作成し、「紗南ちゃん絵描きうた」で読み込む。描画色を白に設定して、“ICQ”の文字を書き順とは逆にペンツールを使って白色で塗りつぶしていく。すべて塗りつぶしたら[逆再生]と[ペン表示]にチェックを入れて、[表示]-[テスト再生]でアニメーションを確認してみよう。今回はペンで“ICQ”と書いていくアニメーションを作成した。ペンの動きをスムーズにするコツとしては、ペンツールで白色に塗りつぶしていくときに、“ICQ”の文字を書き順とは逆にペン型の修正液で消していくイメージで作業するとよい。

【著作権者】国枝 博 氏
【ソフト種別】シェアウェア 2,500円
【バージョン】1.54(99/01/15)

□プログラム
http://www.asahi-net.or.jp/~xp9h-kned/program.htm

4.「ICQ Plus」で画像を設定

好きな画像を「ICQ」のスキンとして設定できる「ICQ Plus」

「ICQ Plus」  各パーツの画像ができたら「ICQ Plus」を使って各画像をスキンに設定しよう。「ICQ Plus」は、メッセンジャーソフト「ICQ」にスキン機能を追加し、背景や各種ボタンなどのデザインを変更できるようにするソフトだ。インストールすると「ICQ」のメインメニュー内に[Plus]という項目が追加され、そこからスキンを変更したり、新規に作成したりすることができる。画像だけではなく表示されるフォントの指定や配色、ボタンの立体感をなくすフラット化などの指定も可能だ。すでにインターネット上では、数多くのスキンがスキン作家たちによって発表されており、ダウンロードして利用できる。なお、作成したスキンデータはZIP形式で圧縮することができ、新しいスキンを「ICQ Plus」にインストールするときはZIP形式のまま読み込むことが可能だ。

 スキン用に作成した画像を1つ1つ「ICQ Plus」で設定していくと大変なので、作成した画像を1つのフォルダにまとめてZIP形式で圧縮しておく。「ICQ Plus」ウィンドウで[Skins]タブの[Import]をクリックしてZIPファイルを読み込むと、画像を一括してスキンのパーツとして設定することができる。この場合、画像の名前は決まっており、背景画像なら“bkgnd.bmp”、アニメーションボタンは“icq.gif”といった具合だ。これらの名前は「ICQ Plus」内の[Edit]-[More]のリストの最初に説明されているので参考にしよう。

【著作権者】Vadim Eremeev 氏
【ソフト種別】フリーソフト
【バージョン】2.04(00/02/22)

□ICQ Plus Home Page
http://www.icqplus.org/

「ICQ」用スキンデータ

ダウンロード
(120KB)

■ 他にもあるぞ! スキン作成ソフト

 ICQでは、複数のソフトを組み合わせてオリジナルのスキンを作成してみた。スキンを作成するソフトは、メーカーがあらかじめ用意しているものや、ユーザーが独自に開発したものなどさまざま。今度はさらに、デザインの派手さが際立つMP3プレイヤー「Sonique」のスキン作成専用ソフト「Sonique Skinmaker X」と、Windowsの画面全体をカスタマイズできる「WindowBlinds」用のスキン作成ソフト「BuilderBlinds」の2本を紹介する。なお、これらは画像作成機能はもっていないため、「ICQ」のときと同様に使用する画像はあらかじめ作成しておこう。

「Sonique Skinmaker X」

「Sonique Skinmaker X」  「Sonique」は大中小3種類のモードに変形できる個性的なMP3プレイヤーで、スキンデザインの自由度がとても高いため、凝ったスキンを作成することが可能だ。スキン作成専用ソフトの「Sonique Skinmaker X」では、各モードごとにプレイヤーの画像や、プレイヤー各部分の文字色や背景色、ステータスバーの色、調節つまみの色などを選択できるほか、スキンの作者情報なども入力可能。画像の場合は使用する外部ファイルを指定し、色はRGBで設定する。スキンの構成情報は一時的にINIファイルで保存されるしくみで、INIファイルを直接テキストエディターで編集する[advanced]モードも用意されている。

 利用できる画像形式はJPEGとBMPの2種類。たとえば、グラデーションを多用している画像ならJPEG形式、色数の少ない画像ならBMP形式を利用するなど、画像の性質によって画像形式を使い分けよう。ある程度スキンが作成できたら[save]でスキンデータをSGFファイルとして保存し、[test]をクリックして新デザインの「Sonique」が起動して状態を確認しよう。なお、作成したスキンデータを「Sonique」側から指定するには、プレイヤーを最大モードにして、[setup options]-[skins]で上下ボタンで選択すればよい。

【著作権者】Vovoid Software & Multimedia
【ソフト種別】フリーソフト
【バージョン】0.44(00/01/18)

□Vovoid Software & Multimedia
http://www.vovoid.com/software.htm
□Sonique Skinmaker Xのダウンロード
http://skins.sonique.com/designer.phtml

「Sonique」用スキンデータ

ダウンロード
(272KB)

「BuilderBlinds」

「BuilderBlinds」  ソフトを起動後、まずはツールバーの[NEW]-[Slice'n'dice Wizard]で新しいスキンを作成するウィザードを立ち上げる。ここでウィザードに従って、元になるBMP画像ファイルを選択しRGBフィルターで色合いを調節する。その後ウィンドウ枠のサイズや使用するボタン画像を指定するという流れで進んでいく。ウィザードを終了すると、メインウィンドウの左ペインにボタンや著作権情報などにセクション分けされ、右ペインにセクションごとの各パーツの設定や使用する画像ファイルが一覧表示される。右ペインに表示された各パーツを選んで、さらに詳しく設定を変更することも可能だ。作成中のウィンドウデザインを確認するには、メニューバーの[Window]から[Preview Always on Top]を選択して、プレビュー画面を表示しよう。各種設定が終わったら、ツールバーの[File]-[Zip]を選択すると、スキンに使用した画像と設定ファイルが全てZIP形式で1つのファイルに圧縮される。なお「WindowBlinds」でスキンを指定するには、[Install New Skin]からZIPファイルを指定しよう。

【著作権者】Stardock Systems
【ソフト種別】フリーソフト
【バージョン】0.16.34 build 73(00/03/04)

□BuilderBlinds - the offical skin editor for Stardock WindowBlinds
http://www.builderblinds.iq.pl/

「WindowBlinds」用スキンデータ

ダウンロード
(12KB)

(勝木 麻友)


 記事中の作品は勝木 麻友氏によるものです。著作権は勝木 麻友氏に帰属します。個人利用以外の用途には使用できません。
トップページへ
特集・集中企画 INDEX


Copyright(C), 1996-2000 Impress Corporation.
編集部への連絡は mado-no-mori-info@impress.co.jp まで