自分の環境でスプライト画像を作成したい

画像スプライト画像

概要

 状態:-  閲覧数:3,069  投稿日:2013-02-21  更新日:2013-11-13
自分の環境でスプライト画像を作成したい。しかも無料で
・検索するも「指定URLへ画像アップロードするツール」紹介ばかり


定義が広範囲過ぎる


スプライト画像はフリーダム
・スプライト画像関連で検索すると分かるが、検索結果はとってもフリーダム
・これは「スプライト」という用語の汎用性、多様性に依るところが大きいと思われる
・すなわち、何のために「スプライト画像」を作成するのか?
・その目的用途によって、知りたい内容も対策も異なることに起因している


・「CSSスプライト」を利用するために、「スプライト画像」を作成したい
・CSSスプライトベースのアニメーションで利用するために、「スプライト画像」を作成したい
・Flashで利用するために、「スプライト画像」を作成したい
・ゲームで利用するために、「スプライト画像」を作成したい

検討候補一覧

 閲覧数:806 投稿日:2013-02-21 更新日:2013-11-15

1.Firework


FireworksのCSSスプライト書き出し機能
Fireworks上で集めた画像を配置
・Fireworks CS3でも対応可か未確認


2.Stitches


・Stitches An HTML5 sprite sheet generator
このサイトではWEBサービスとして紹介されているが、スクリプトが公開されているので、実際に設置してみた
・現状では、すべての画像を縦方向にしか結合できないが、スクリプトのオプション設定を変更すれば横一列にも対応可能?
・CSSも同時作成される


3.Xprite


・ここまで本格的じゃなくても良いのだけれども
・何か凄そう
ちょっと試してみた
・CSSは作成されない


4.Sprite Generator


CSS Sprite 画像作成支援ツール「Sprite Generator」
Broken link
・実際に試した人のエントリーを探すも、見つからず
・「Sprite Generator」という名前があまりにストレート過ぎて探しにくい
・もう少し特徴的な名前のツール名の方が検索しやすいのだが…
・いつもだったらこの時点でスルーするのだが、ローカル環境でスプライト画像作成できるツールが少ないこともあり、今回は実際にダウンロードして試してみたよ

感想
・説明書読まずに触ったため、初め戸惑う。なんだこれ? と思ったよ
・右クリックで、メニュー表示。すぐに慣れる
・全体的に問題ないと思うけど、一点気になったのは、「縦整列」「横整列」が、手動並べ替え不可な点(ドラッグ&ドロップされた順序でしか結合できない)
・並べ替えられた方が便利だと思うけど、どうなんだろう?
なお、CSSは作成されないが、「config.xml」が作成されるので、調整可能?勘違い。CSSだけでなく、サンプルhtmlも同時作成される
・プロフィール見たら、「生まれ:1947年6月 64才」てなってた。スゲー

スプライト画像を結合する向き

 閲覧数:821 投稿日:2013-02-21 更新日:2013-11-13

画像を結合する向き


・「CSS Sprite」には複数の実現方法がある
・画像の結合方向は縦方向でも横方向でも(その両方でも)構わない
・方法によっては、縦方向に結合させておく必要がある




類似度ページランキング
順位 ページタイトル抜粋
1 自分の環境でスプライト画像を作成したい 100
2 画像ライセンスについて調査した結果、分かったこと 42
3 イラスト作成無料講座 41
4 画像補正プライベート運用ルール 35
5 リストタグではない、リスト内画像の縦位置調整 34
6 画像編集系ソフトウェアの分類。ラスタ、ベクタだけではなく 34
7 ディスプレイ比較の重要性/画像が重要な意味を占めるサイトで、何か違うなと感じたら 34
8 マウスオーバーで画像変更スクリプト 33
9 「親要素越え」✕「横幅Max状態での画像スライダー」を検討 33
10 画像の上にテキスト表示 33
11 画面幅に応じて取得ディレクトリパスを変更したい 33
12 テキストのアウトライン化 / 書式 - アウトラインを作成 33
13 デスクトップにChromeのショートカットを作成 33
14 perspectiveのベンダープレフィックスを自動付与したい 32
15 イラスト素材 32
16 「使用できるソケットを待機しています」はクライアント側の問題? 32
17 親要素の背景色を、CSSで打ち消したい 32
18 背景斜め灰色白ストライプ線 31
19 画像背景色を透明化するオンラインサービス 31
20 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない 30
2026/8/29 12:02 更新
週間人気ページランキング / 8-22 → 8-28
順位 ページタイトル抜粋 アクセス数
1 Design 0 13
2 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
3 CopyTabTitleUrl | Chrome 拡張機能 3
3 RGBの種類 / ビットカラー | RGB(色) 3
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
4 絶対パス | HTML 2
4 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 | Google Chrome(ブラウザ) 2
4 Chromeブラウザは、ユーザーという単位で情報管理している(Cookieを使用する場面もあるが、必ずしもCookieだけに頼っているわけではない) | Google Chrome(ブラウザ) 2
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2
4 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 2
4 IrfanView | ソフトウェア 2
4 RGB → HSL 変換式 / 約分対応 2
5 「Google Chrome」で「This browser does not support WebGL」と表示される場合は、ハードウェアアクセラレーションに不具合がある可能性があるため、設定画面よりハードウェアアクセラレーションを一旦無効にしてみる | Google Chrome(ブラウザ) 1
5 XnViewMP | XnView MP 系(ソフトウェア) 1
5 原因判明 → 親要素には高さが必要 1
5 V2.0.4 「レスポンシブサイト」✕「スマホサイズレイアウト」崩れるときー 1
5 SeaMonkey 2.7.2 1
5 ダウンロード 1
5 色変換(色) カテゴリー 1
5 Illustrator CS2 でファイル名に「更新済み」を追加しない | Illustrator CS2(Illustrator) 1
2026/8/29 5:05 更新