MOONGIFT

オープンソース・フリーウェアを毎日紹介するブログ。日々の業務の効率化、新しいサービスのネタ探しにどうぞ。SNS、SBS、CMS、オフィス、画像編集、ユーティリティ、Firefoxアドオン、テキストエディタ、ゲーム…ジャンルは様々。

便利!CSS Spriteを作成するAIRアプリ「Tonttu」

タグ: [] [] [] [] [] [] [] [] [] []

buzz_button

CSS Spriteとは小さなアイコンなどの画像をくっつけて一つの画像として保存し、表示する際にはCSSで位置を指定して表示するという手法だ。Googleをはじめ、膨大なアクセスのあるWebサービスで活用されている手法であり、画像を読み込むコネクション数を減らすことができる。

ピクチャ 26.png
CSS Spriteを作るならぜひ使いたい

 

CSS Spriteを作成するWebサービスも存在するが、画像が追加されるたびにアップロードし直すのが面倒だった。そこでTonttuを使ってみよう。

今回紹介するフリーウェアはTonttu、Adobe AIR製のCSS Sprite作成ソフトウェアだ。

Tonttuの使い方は簡単だ。起動したらひとまとめにした画像ファイルをドロップして登録する。並べ方は縦または横と自由に選択できる。画像の隙間を空けたり、ドラッグして位置を入れ替えることも可能だ。自動で並べると隙間が空くので、より小さなサイズにしようと思ったら並べ替えが必要だろう。

ピクチャ 27.png

生成されたファイル

 

作業が完了したらExportボタン押して保存するフォルダを決定する。すると画像ファイル、CSSファイル、そしてサンプルのHTMLの3つが保存される。後は自由にWebサイトに組み込めば良いだけだ。さらにプロジェクトファイルとして現在の状況を保存しておけるので、後日画像を追加するといった際にも簡単にできる。

CSS Spriteを作成するサイトでは更新作業はあまり想定されていない。だから追加でアイコンファイルができると、それだけは別で管理される状態になってしまっていた。だがTonttuを使えばそのような心配はない。Web開発者、デザイナーともに知っておきたいソフトウェアだ。

 

Tonttu
 http://collamo.jp/Tonttu/

August 20th, 2009 Posted by admin | コメントはありません

No Comments »

No comments yet.

Leave a comment

MOONGIFTネットワーク。こちらもぜひご覧ください。
MOONGIFT
Open Service
Rails 2.0
Resident on Net
iPhone最適化
リーンソフトウェア
MarketPedia
Producing Web
Cool Coding