Tonttuとは

TonttuはWebDeveloperのための、CSS Sprites作成ツールです。
簡単に画像を配置、移動でき、最終的にCSS Sprites(png画像)とhtml・cssファイルを書き出すことが出来ます。
また、配置した画像の状態はプロジェクトファイル(.ttd)として保存することが出来るので、
それを読み込むことで、次回の起動時も前と同じ状態から始めることが可能です。

キャプチャ画像

Tonttu.air (ver1.0) ファイルのダウンロード

Tontoo
  • ・2009.06.18 Ver1.0 Released.

デモ1(基本的な操作)

  • ・ファイルの読み込み
  • ・画像のポジションをセット
  • ・エクスポート
  • ・プロジェクトファイルの書き出し

デモ2(ソート)

  • ・ファイルの読み込み(ドラッグ＆ドロップ)
  • ・ソート1 (Sort direction:col ⇒ Sort type:IMAGEBASE ⇒ padding:0)
  • ・ソート2 (Sort direction:row ⇒ Sort type:IMAGEBASE ⇒ padding:30)
  • ・ソート3 (Sort direction:col ⇒ Sort type:POSITIONBASE ⇒ padding:100)
  • ・ソート4 (Sort direction:row ⇒ Sort type:POSITIONBASE ⇒ padding:150)

使い方

ファイルを開く

画像ファイル(gif,jpeg,png)、もしくは拡張子.ttdのプロジェクトファイルを、2通りの方法で開くことが出来ます。

  • 1.メインメニューから [ File ⇒ Open ] でファイルを指定
  • 2.ドラッグ&ドロップでファイルを読み込み

画像の移動

Adobe PhotoshopやFireworksのようなツールと同じようイメージで画像の操作をすることが可能です。

  • ・マウスドラッグで画像を移動することが出来ます。
  • ・画像はShiftを押しながらクリックすることで、複数選択することも可能です。
  • ・選択した画像は、矢印キーを使うことで1px単位で移動させることが出来ます。
  • ・Shiftと矢印キーで10px単位で移動させることも可能です。
  • ・画像を選択した時に現れるテキストフィールドより、画像の位置をセットすることが出来ます。

画像のステータスの変更

画像毎にCSSのbackground-repeatプロパティをセットすることが出来ます。デフォルトは"no-repeat"です。 プロパティは、画像を選択した後プルダウンメニューをセットすることで変更することが出来ます。 セットしたプロパティはそのまま画像に反映されます。

画像の複製

Altとマウスドラッグで、選択した画像をその場で複製することが可能です。

画像の削除

選択した画像を、Deleteボタンで削除することが出きます。

画像のソート

ソートメニューより画像のソートが可能です。

  • ・SORT DIRECTION を選択することで、画像をソートしていく方向を設定できます。
  • ・SORT TYPE を選択することで、画像のソート方法（画像ごとに余白を空けて配置する方法と、何px毎に画像を配置していく方法）を選ぶことが出来ます。
  • ・SORT DIRECTIONとSORT TYPEをセットした後、Offset値をセットしOKを押すと、それに合わせて画像がソートされます。

フィールドの設定

画像を配置しているフィールドのサイズを変更が可能です。フィールドのサイズはそのまま書き出す画像のサイズになります。
また、書き出す画像の背景色を指定することが出来るので、Optpixなどのツールで減色するときにも便利です。

  • ・フィールドのサイズは、一番左上のテキストフィールドよりセットすることが出来ます。
  • ・フィールドの外枠から、マウスドラッグでフィールドサイズを変更することも出来ます。
  • ・背景色は、Backgroundのチェックボックスにチェックを入れて、カラーチャートより色を選択することでセットされます。

データのエクスポート

全体のキャプチャ画像(png),CSSファイル,HTMLファイルをエクスポートすることが出来ます。

  • ・メインメニュー[ File ⇒ Export ]、もしくはステージにあるExportボタンより書き出しが可能です。

プロジェクトデータの保存

様々な画像を読み込んだ状態を、プロジェクトファイル(.ttd)として保存することが出来ます。

  • ・メインメニュー[ File ⇒ Save ]でプロジェクトファイルの保存が可能です。

ショートカット

Ctrl+S
プロジェクトファイルの保存
Ctrl+shift+S
CSS Sprites,css,htmlファイルの書き出し
Ctrl+A
配置した画像を全て選択
Ctrl+Z
Undo
Ctrl+Y
Redo
Delete
選択した画像の削除
Alt
押しながら画像をドラッグで、画像の複製

Contact