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

画像スプライト画像

概要

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


定義が広範囲過ぎる


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


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

検討候補一覧

 閲覧数:455 投稿日: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才」てなってた。スゲー

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

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

画像を結合する向き


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




類似度ページランキング
順位 ページタイトル抜粋
1 画像ライセンスについて調査した結果、分かったこと 42
2 イラスト作成無料講座 41
3 画像補正プライベート運用ルール 35
4 リストタグではない、リスト内画像の縦位置調整 34
5 画像編集系ソフトウェアの分類。ラスタ、ベクタだけではなく 34
6 ディスプレイ比較の重要性/画像が重要な意味を占めるサイトで、何か違うなと感じたら 34
7 画面幅に応じて取得ディレクトリパスを変更したい 33
8 マウスオーバーで画像変更スクリプト 33
9 画像の上にテキスト表示 33
10 テキストのアウトライン化 / 書式 - アウトラインを作成 33
11 「親要素越え」✕「横幅Max状態での画像スライダー」を検討 33
12 デスクトップにChromeのショートカットを作成 33
13 perspectiveのベンダープレフィックスを自動付与したい 32
14 イラスト素材 32
15 「使用できるソケットを待機しています」はクライアント側の問題? 32
16 親要素の背景色を、CSSで打ち消したい 32
17 画像背景色を透明化するオンラインサービス 31
18 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない 30
19 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい 29
20 SVGイラスト素材 29
2023/1/28 23:20 更新
週間人気ページランキング / 1-21 → 1-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 42
2 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 26
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 25
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 20
5 CSSでループ処理。一定間隔で(背景色等を)繰り返し指定する | CSS 12
5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 12
5 GIFアニメーション | 画像 12
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 12
6 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 11
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 10
7 「bgcolor」「background-color」「background」の違い | CSS 10
7 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 10
7 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 10
7 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 10
8 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
8 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 9
8 ICCプロファイル | カラーマネージメント(色) 9
8 Design 0 9
8 RGBの種類 / ビットカラー | RGB(色) 9
9 「属性」「プロパティ」「アトリビュート」の違い | CSS 8
2023/1/28 1:01 更新