PhotoshopからCSSスプライトを作成する


14

WebデザインのPSDがあります。
デザインを微調整するたびに、CSSスプライトに異なるレイヤー可視性(透明性のため)を使用して、イメージの異なる部分を手動でコピーする必要があります。

どのくらい自動化できますか?


質問を一般的なものにしたいと思いますが、おそらく参考になるでしょう。レイヤーの可視性は既に設定されていますか、またはエクスポートする前に個別に変更する必要がありますか?
ペッカ

@Pekka:異なる部分には異なる可視性が必要です。たとえば、サイトの背景はエクスポートされて表示されますが、コンテンツの背景はグローバル背景が非表示でエクスポートされます。(透明な影の場合)
SLaks

そうですか。そのため、これには間違いなくバッチ処理が必要です。何が起こるか興味があります!...
ペッカ

回答:


9

私は一度自動Photoshopスクリプトを使用しうまく機能しました。

コンセプトは:

  • 各部分は異なる画像です。
  • 各部分(つまり、各画像)は、他の画像なしで同じフォルダにある必要があります。
  • フォルダーといくつかのパラメーター(サイズ、CSS名など)を示すスクリプトを実行します。
  • スクリプトは:

    1. 指定したサイズのすべての画像を1つに結合します。
    2. CSSファイルを生成する

あなたの場合、1つの画像を変更すると、スクリプトを介してグローバル画像とCSSを再生成します...それだけです。生成されたCSSを使用したくない場合は、CSSをコピーして貼り付ける必要があるかもしれません。

ノート :

いくつかのファイルで試してみましたが、うまくいきました。それから、私は〜600枚の写真のようにしようとしました、そして、あなたはgoooood CPUと忍耐を必要とします;)この場合、それを使用しないでください。


1

スライスを使用せず、すべてのスライスを1つずつ選択して(スライスとドキュメントの境界にスナップして)マーキー選択を開始するアクションを開始しませんが、毎回選択範囲にトリミングし、png、ctrl alt z、元に戻すまで切り取り、すべてのセクターが完了するまで、各セクターを選択、トリミングなどを行い、アクションを停止します。中間では、常に同じファイルであるため、任意のレイヤーを非表示/表示することができるため、競合しないようにする必要があります...したがって、毎回変更されたpsdにアクションをロードします。私が考えることができるのは、実際にスライスの境界線を変更する必要があるということだけです。それとも...私はあなたを正しく理解していませんでした...

編集:スライスする必要がない場合は、すべての調整が完了した後、必要な順序でレイヤーの非表示または表示のみを含むマクロ(アクション)。私が言うように、私は理解していないかもしれません...


最初の段落はやや混乱しますが、それでもワークフローを自動化するよりもワークフローに追加するようです。私はかもしれないあなたがレイヤーのアクションを示す/隠れてで向かっているところ、私はそれでスライスを使用すると思いますが、参照してください。
ヤリケイネン

ありがとうございました!しかし、誰からの反対票を理解しようと懸命に努力しています
...-S.gfx
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.