web-dev-qa-db-ja.com

.epsファイルのアイコンを使用して自分のサイトに読み込むにはどうすればよいですか？

私が持っています

http://www.shutterstock.com/ からダウンロードしたfilefile.epsは、次のようになります。

enter image description here

が欲しいです

これらのアイコンをすべて独自の部分にエクスポートして、自分のサイトで使用できるようにします。

私はもう試した

これを1つずつ手動で行うと非常に時間がかかりますが、すべてをエクスポートするためのより良い方法を探しています。

いくつか質問があります

私のfile.epsを複数のicon.pngファイルにエクスポート/スライスするのに役立つMacアプリケーションはありますか？

それらを抽出する必要がありますか？

私の主な目標は：

  • 私のウェブサイトにそれらをロード
  • 最小のHTTPリクエストを維持する
  • retinaディスプレイデバイスで見栄えがする。
cssiconsepssprite-sheet
10
kyo

この種のタスクを達成する方法は複数あると思いますが、これが私のやり方です。これが私のステップです：

1. .epsを.pngに変換します

私はfile.eps Illustratorで、[ファイル]> [Web用に保存]> [PNG-8]> [保存]に移動します。目的の宛先にエクスポートされるはずです。

2. Spritesスタイルシートを作成する

http://www.spritecow.com/ に移動します

エクスポートしたfile.png、オブジェクトを選択すると、対応するcssコードが次のように自動的に生成されます。

enter image description here

3.結果

気に入ったアイコンを複数選択して、適切に表示しました。

最後に、私の結果をまとめます： [〜＃〜]ここ[〜＃〜]

この答えが私のような人を助けることを願っています。

10
kyo

Macの場合は、Previewのデフォルトプログラムを使用できます。

画像を開いたら、[ファイル]> [エクスポート]> [フォーマット]に移動します。

次に、希望の形式を選択できます。保存先を選択するオプションもあります。

これもお役に立てば幸いです:)

0
AshNaz87