• ベストアンサー

CSS SPRITEを使う為の画像を作りたい

CSS初心者です。 最近、CSS SPRITEを使ってHTTPリクエストを軽減するという ページを見まして、CSSの方は理解は出来たのですが、画像の 作り方がぐぐって調べたのですが、どうもわかりません。 座標が出るグラフィックソフトを使う、という所まではわかった のですが、具体的にはどれを使えばよいのでしょうか? 今、PCには、photoshop、illustratorは入ってます。 具体的な作り方が載ってるページなど教えて頂ければ幸いです。 宜しくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

図をピクセル単位で編集できるソフトがあれば問題ないので、とりあえずはphotoshop、illustratorで十分でしょう。 「CSS Sprite Generator」というバラバラの画像を一枚にまとめてくれるものもあるみたいだけど… http://spritegen.website-performance.org/ ひとまず参考になりそうなのは http://gihyo.jp/design/serial/01/ss-design/0010 http://www.designwalker.com/2008/02/css-sprite.html ↑じゃなくて、ソフト上でどうやって作ったらいいのかわからないと言うのであれば、Web関連ではなく、ソフトの操作テクニックを解説してくれているサイトを探すのが良いでしょう。 「photoshop」、「illustrator」、「テクニック」などのキーを組み合わせて検索すれば沢山みつかると思います。

ken555555
質問者

お礼

返事ありがとうございます。 photoshopは知ってましたが、illustratorでピクセル単位で出来るんですかっ。 すいません、それを知らないぐらいの素人です(;´▽`A`` Generatorのページは知ってましたが、これかなり余白が空きますよね? これがちょっと嫌でピクセル単位でphotoshop以外とかで 出来るソフトと使い方が書いてるページを探してたんです。 でも、その「テクニック」のキーワードの検索をしたことがなかったの でしてみたいと思います。ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • CSS SPRITEについて教えて下さい。

    CSS初心者です。 CSS SPRITEという方法でサイトを軽く出来ると聞いてやっているのですが、その中でちょっと気になったのですが、座標ってxもyもマイナスになるんですが、 background-position: -55px -66px; y座標は下になるからマイナスなのは合ってると思うんですが x座標はプラスじゃない? とふと疑問に思ったので教えて頂きたいです。 また私はフォトショップの「情報」でこの座標を見て座標を決めているんですが、「もしいい方法が他にある!」て言う方がおられたら教えて下さい。 お願いします。

    • ベストアンサー
    • HTML
  • Webデザインで使うグラフィックソフトてどれを使えばいいですか?

    Webデザイン初心者です。 Webのアイコンやボタンなどの画像を作ろうと思ってるのですが、 どのグラフィックソフトが最適なのでしょうか? 今、photoshop、illustrator、ImageReadyが手元にあります。 一応、自分的にぐぐって調べてみたのですがFireWorksが良いとか 書いてましたが一番いいのはそれなのでしょうか?? 自分的にはCSS SPRITE用の画像や、ロールオーバー用の画像を 作りたいのですが。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • CSS3を深く学びたい

    ウェブデザインをしているのですが、制作環境が変わったため、Illustrator、Photoshopが使えなくなりました。仕方ないので写真の加工は無料のもの、それ以外はできるだけCSS3で、できるだけこれまでと遜色のないグラフィックをつくりたいと思っています。 CSS3 スタンダード・デザインガイド【改訂第2版】 この本を購入してみようと思っているのですが、他によい本やサイトをご存知の方がおられましたら、教えていただけますか。よろしくお願いします。

    • 締切済み
    • CSS
  • CSSの分割とウェブサイトの表示速度 (SEO)

    . よく、【(1)HTTPのリクエストを抑えるために、複数のCSSファイルはひとつにまとめる】ということが言われますが、一方で、【(2)表示速度のためにCSSを分割する】ということが推奨されることもあります。 この2つが一見矛盾する感じで少々混乱しております。 ここで、例えば、ホームページ・記事ページ・製品ページの、3つのページが存在するウェブサイトを仮定するとします。 【質問A】 そこで、(1)については、ある一つのページにおいては、もしCSSを複数呼び出している場合には、できるだけその複数のCSSファイルをまとめた方がHTTPのリクエストが少なくなるのでよい。 そして、(2)については、各ページにおいては、ページごとにCSSファイルを分けていた方がそのページでは使わない無駄なCSSコードを読み込ませなくて済むのでよい。 ということなのでしょうか? 【質問B】 そうすると、全てのCSSファイルを一つにまとめてしまうのではなく、例えば上の3つのページに共通するCSSをcommon.css 、それぞれのページに特有なCSSをindex.css、article.css、product.css といった感じで読み込ませるようにすることは、(1)(2)の両方をある程度両立させる方法といえますでしょうか? 【質問C】 質問Bの内容を具体的に実現するには、HTMLのヘッダー部分をテンプレートパートにして、まずcommon.cssについては<head>に<link>で記述しておき、index.css、article.css、product.css についてはその下に条件分岐で記述して各ページで該当のCSSを読み込ませるという方法で問題ございませんでしょうか。 .

    • ベストアンサー
    • CSS
  • PhotoshopまたはIllustratorで画像を敷き詰めて並べるには?

    PhotoshopまたはIllustratorを使って画像(6枚)を隙間無く敷き詰めるにはどうやればいいですか? ■ ■ ■ ■ ■ ■ これを ■■■ ■■■ と隣り同士の画像がくっつく様にキレイに並べたいと思っています。 Photoshopは5.5、Illustratorは9.0を使っています。 初心者なのでなるべく簡単な方法が良いです。 どなたか宜しくお願い致します。

  • [ブログ]CSSで画像の回り込み解除をしたい

    libedoorで画像中心のブログを作りました。 以前は、画像の下にテキストが流れていたんですが、デザインを変更したところ、テキストが画像の右側に来るようになってしまいました。 色々見て回り、CSSをいじってためしてみたのですが(初心者です)全く解決せず、どこをどうすれば良いのかこんがらがってしまいました。 ちなみに以前(画像の下にテキストが流れていた時に)下記の記述で、回り込みが解除されていたのかと思い、追加してみましたが、ただ足せば良いと言うものじゃないんですね。 HTMLの方もいじらなくてはいけないんじゃないかと思いつつ、どこをいじれば良いのかさっぱり分からず・・・知恵お貸し頂けたら幸いです。 ---------------------------------------- #content:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; } ---------------------------------------- CSSで、と書きましたが、画像の回り込みを解除できれば、HTMLでも構いません。 理解しないままで、まとまらず分かりにくい質問かと思いますが、どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • lightbox風なもののCSSの使い方

    http://www.e-magine.ro/web-dev-and-design/36/moodalbox/ ↑のサイトのlightbox風の機能を使って、HTMLファイルをページ遷移なしで読み込もうとしています。読み込むページと読み込まれるページは違うフォルダにあり、それぞれに違うCSSを適用しているのですが、どうやっても読み込まれるページで画像が取得できません。外部CSS内のbackgroundやHTML内のimgも表示されません。その他の配置に関するCSSはちゃんと適用されているので、なぜ画像だけが取得できないのかが理解できません。 読み込まれるページのCSSを読み込むページのheadで読み込んでみたり、読み込まれるページのHTMLに直接CSSを書いてみたりもしましたが、変化がありませんでした。CSSはおろか画像やリンクなどすべてを全ページで相対指定しているので、そういうところに差異が出たのかなと疑っています。 そこで、こういう風なツールを使った時、読み込まれるCSSは読み込むページと読み込まれるページのどちらで読み込むべきなんでしょうか。また、ページ遷移していない以上、読みこまれるページの相対指定も読み込むページからの指定とするべきなんでしょうか。よろしくお願いします。

  • 画像をPhotoshopで切り抜きIllustratorに貼り付け

    PhotoshopCS3、IllustratorCS3を使用しています。 PhotoshopとIllustratorは初心者です。 画像をPhotoshopで切り抜き→Illustratorに貼り付けがしたいのです。 しかし、Photoshopで切り抜いた画像をIllustratorに貼付けまたは配置すると、切り抜いた画像+四角の枠(バウンディングboxみたいな物)が一緒に配置されてしまいます。この枠をなくして、切り抜いた画像そのままの境界線のままIllustratorに貼り付けをしたいのですが方法がわかりません。 例えば、切り抜いた画像をIllustratorに貼り付け、その画像にドロップシャドウをつけると枠に対して四角のシャドウ効果がついてしまい、切り抜いた画像の境界線の形にドロップシャドウ効果を付けることができません。 初心者ですので出来るだけ詳細に教えていただけるとありがたいです。 よろしくお願い致します。

  • CSSで画像を上下中央に配置する方法を教えてください。

    はじめまして。 現在、CSSを使ってホームページを作っているんですが、CSSの枠内に画像とテキストを一列に連続して挿入する場合、テキスト部分がどうしても画像の下の部分合わせて配置されます。 これをなんとかして画像の真ん中にテキストを配置させたいのですが、可能でしょうか? また、まだまだ初心者でCSSの仕組みをよく理解していないのですが、基本的にはCSSというのはdivでboxを作ってそれを配置していくもの理解しています。 ただ、今の私の知識ではdivの中にかなり多い数のdivが挿入されていて、あまりきれいな状態とは言えないような感じなのですが・・・ なにか勘違いしているんでしょうか?

  • WEB用画像の書き出しはどれを使いますか?

    はじめまして。 現在、WEB製作を勉強しているものですが、バナーやメニュー等のパーツをWEB用の画像書き出しを する際には、photoshop、illustrator、fireworksのどのソフトを使うのが良いのでしょうか。 操作自体は、3つとも、同じくらいできるのですが、fireworksでは画像が綺麗ではないとか、 photoshopは、操作性がいまひとつ等。。。いろいろ聞くのですが、どれが一番効率がよいのでしょうか。 現在は、photoshopで全体のレイアウトも画像の書き出しをやっていたのですが、レイアウトだけでしたら、fireworks、illustratorの方が使いやすいかと思い、fireworksを試しております。 また、illustratorでは、アンチエイリアスがきいて、ピクセルがずれたりしてしまい、手間が かかってしまいます。 どのソフトでもできることは、理解しているのですが、クオリティを一番高く保ちながら、効率よいやり方がありましたら、ぜひともご教示頂けましたら幸いです。 有識者の方、よろしくお願い致します。