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

画像スプライト画像

概要

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


定義が広範囲過ぎる


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


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

検討候補一覧

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

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

 閲覧数:591 投稿日: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 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない 30
20 SVGイラスト素材 29
2024/11/22 20:10 更新
週間人気ページランキング / 11-15 → 11-21
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 12
1 鉄道会社毎のカラーコード | カラーコード(色) 12
2 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 10
3 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 6
3 Design 0 6
4 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 5
5 RGB ⇔ Lab | 色変換(色) 4
5 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 4
5 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 4
5 16進数カラーコード / 2進数 4
6 カラーコード / 色コード | カラーコード(色) 3
6 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 3
6 個人的によく見返すエントリーへのLinkなど | その他 3
7 RGB ⇔ XYZ / CIE RGB / sRGB(D65) / sRGB(C) / Adobe RGB / NTSC RGB 2
7 RGBの種類 / ビットカラー | RGB(色) 2
7 8ビットカラー / インデックスカラー / パレットカラー 2
7 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
2024/11/22 1:01 更新