うごくボタン作成にかかった作業時間

14種類のボタン、幅 500px と 300pxで 5色を ImageMagick を使って作成しました。最初に Photoshop などで、ボタン画像(PNG)を15個作成しました。

次にImageMagick を使って 500px の緑色の震える画像を作るスクリプトを作成します。この画像を元にフォルダーを作成し各フォルダーに15個のうごくボタンをコピーします。

各フォルダーの色を変換するスクリプトを実行したら、ファイル名を変更するスクリプトを実行して150個の動くボタンを作成しました。

.
├── blue300
│   ├── 300blueご購入-01.gif
│   ├── 300blueクリック-01.gif
│   ├── 300blue興味-01.gif
│   ├── 300blue興味-02.gif
│   ├── 300blue今すぐ参加-01.gif
│   ├── 300blue詳細-01.gif
│   ├── 300blue申し込み-01.gif
│   ├── 300blue申し込み今すぐ-02.gif
│   ├── 300blue続き-01.gif
│   ├── 300blue注文-01.gif
│   ├── 300blue販売-01.gif
│   ├── 300blue無料プレゼント-02.gif
│   ├── 300blue無料手に入れる-02.gif
│   ├── 300blue無料請求-02.gif
│   └── 300blue無料登録-02.gif
├── blue500
│   ├── 500blueご購入-01.gif
│   ├── 500blueクリック-01.gif
│   ├── 500blue興味-01.gif
│   ├── 500blue興味-02.gif
│   ├── 500blue今すぐ参加-01.gif
│   ├── 500blue詳細-01.gif
│   ├── 500blue申し込み-01.gif
│   ├── 500blue申し込み今すぐ-02.gif
│   ├── 500blue続き-01.gif
│   ├── 500blue注文-01.gif
│   ├── 500blue販売-01.gif
│   ├── 500blue無料プレゼント-02.gif
│   ├── 500blue無料手に入れる-02.gif
│   ├── 500blue無料請求-02.gif
│   └── 500blue無料登録-02.gif
├── green300
│   ├── 300greenご購入-01.gif
│   ├── 300greenクリック-01.gif
│   ├── 300green興味-01.gif
│   ├── 300green興味-02.gif
│   ├── 300green今すぐ参加-01.gif
│   ├── 300green詳細-01.gif
│   ├── 300green申し込み-01.gif
│   ├── 300green申し込み今すぐ-02.gif
│   ├── 300green続き-01.gif
│   ├── 300green注文-01.gif
│   ├── 300green販売-01.gif
│   ├── 300green無料プレゼント-02.gif
│   ├── 300green無料手に入れる-02.gif
│   ├── 300green無料請求-02.gif
│   └── 300green無料登録-02.gif
├── green500
│   ├── 500greenクリック-01.gif
│   ├── 500green興味-01.gif
│   ├── 500green興味-02.gif
│   ├── 500green今すぐ参加-01.gif
│   ├── 500green詳細-01.gif
│   ├── 500green申し込み-01.gif
│   ├── 500green申し込み今すぐ-02.gif
│   ├── 500green続き-01.gif
│   ├── 500green注文-01.gif
│   ├── 500green無料プレゼント-02.gif
│   ├── 500green無料手に入れる-02.gif
│   ├── 500green無料請求-02.gif
│   ├── 500green無料登録-02.gif
│   ├── 500ご購入-01.gif
│   └── 500販売-01.gif
├── orange300
│   ├── 300orangeご購入-01.gif
│   ├── 300orangeクリック-01.gif
│   ├── 300orange興味-01.gif
│   ├── 300orange興味-02.gif
│   ├── 300orange今すぐ参加-01.gif
│   ├── 300orange詳細-01.gif
│   ├── 300orange申し込み-01.gif
│   ├── 300orange申し込み今すぐ-02.gif
│   ├── 300orange続き-01.gif
│   ├── 300orange注文-01.gif
│   ├── 300orange販売-01.gif
│   ├── 300orange無料プレゼント-02.gif
│   ├── 300orange無料手に入れる-02.gif
│   ├── 300orange無料請求-02.gif
│   └── 300orange無料登録-02.gif
├── orange500
│   ├── 500orangeご購入-01.gif
│   ├── 500orangeクリック-01.gif
│   ├── 500orange興味-01.gif
│   ├── 500orange興味-02.gif
│   ├── 500orange今すぐ参加-01.gif
│   ├── 500orange詳細-01.gif
│   ├── 500orange申し込み-01.gif
│   ├── 500orange申し込み今すぐ-02.gif
│   ├── 500orange続き-01.gif
│   ├── 500orange注文-01.gif
│   ├── 500orange販売-01.gif
│   ├── 500orange無料プレゼント-02.gif
│   ├── 500orange無料手に入れる-02.gif
│   ├── 500orange無料請求-02.gif
│   └── 500orange無料登録-02.gif
├── pink300
│   ├── 300pinkご購入-01.gif
│   ├── 300pinkクリック-01.gif
│   ├── 300pink興味-01.gif
│   ├── 300pink興味-02.gif
│   ├── 300pink今すぐ参加-01.gif
│   ├── 300pink詳細-01.gif
│   ├── 300pink申し込み-01.gif
│   ├── 300pink申し込み今すぐ-02.gif
│   ├── 300pink続き-01.gif
│   ├── 300pink注文-01.gif
│   ├── 300pink販売-01.gif
│   ├── 300pink無料プレゼント-02.gif
│   ├── 300pink無料手に入れる-02.gif
│   ├── 300pink無料請求-02.gif
│   └── 300pink無料登録-02.gif
├── pink500
│   ├── 500pinkご購入-01.gif
│   ├── 500pinkクリック-01.gif
│   ├── 500pink興味-01.gif
│   ├── 500pink興味-02.gif
│   ├── 500pink今すぐ参加-01.gif
│   ├── 500pink詳細-01.gif
│   ├── 500pink申し込み-01.gif
│   ├── 500pink申し込み今すぐ-02.gif
│   ├── 500pink続き-01.gif
│   ├── 500pink注文-01.gif
│   ├── 500pink販売-01.gif
│   ├── 500pink無料プレゼント-02.gif
│   ├── 500pink無料手に入れる-02.gif
│   ├── 500pink無料請求-02.gif
│   └── 500pink無料登録-02.gif
├── red300
│   ├── 300redご購入-01.gif
│   ├── 300redクリック-01.gif
│   ├── 300red興味-01.gif
│   ├── 300red興味-02.gif
│   ├── 300red今すぐ参加-01.gif
│   ├── 300red詳細-01.gif
│   ├── 300red申し込み-01.gif
│   ├── 300red申し込み今すぐ-02.gif
│   ├── 300red続き-01.gif
│   ├── 300red注文-01.gif
│   ├── 300red販売-01.gif
│   ├── 300red無料プレゼント-02.gif
│   ├── 300red無料手に入れる-02.gif
│   ├── 300red無料請求-02.gif
│   └── 300red無料登録-02.gif
├── red500
│   ├── 500redご購入-01.gif
│   ├── 500redクリック-01.gif
│   ├── 500red興味-01.gif
│   ├── 500red興味-02.gif
│   ├── 500red今すぐ参加-01.gif
│   ├── 500red詳細-01.gif
│   ├── 500red申し込み-01.gif
│   ├── 500red申し込み今すぐ-02.gif
│   ├── 500red続き-01.gif
│   ├── 500red注文-01.gif
│   ├── 500red販売-01.gif
│   ├── 500red無料プレゼント-02.gif
│   ├── 500red無料手に入れる-02.gif
│   ├── 500red無料請求-02.gif
│   └── 500red無料登録-02.gif