Membuat sprite CSS dari Photoshop

14

Saya memiliki PSD dengan desain web.
Setiap kali saya mengubah desain, saya perlu menyalin bagian gambar yang berbeda secara manual, dengan visibilitas lapisan yang berbeda (untuk transparansi) ke dalam sprite CSS.

Berapa banyak yang bisa otomatis?

adobe-photoshop export css sprite Slaks
sumber
Saya menghargai bahwa Anda ingin menyimpan pertanyaan umum, tetapi sebuah contoh mungkin akan membantu. Apakah visibilitas lapisan sudah ditetapkan, atau Anda harus mengubahnya secara individual sebelum mengekspor?
Pekka
@ Pekka: Bagian yang berbeda membutuhkan visibilitas yang berbeda. Misalnya, latar belakang situs diekspor terlihat, tetapi latar belakang konten diekspor dengan latar belakang global tidak terlihat. (untuk bayangan transparan)
Slaks
Saya melihat. Jadi ini jelas membutuhkan pemrosesan batch. Tertarik untuk melihat apa yang muncul! ...
Pekka

Jawaban:

9

Saya menggunakan skrip photoshop otomatis sekali dan bekerja dengan baik.

Konsepnya adalah:

  • Setiap bagian adalah gambar yang berbeda.
  • Setiap bagian (dan juga, setiap gambar) harus berada di folder yang sama tanpa gambar lainnya.
  • Jalankan skrip yang menunjukkan folder dan beberapa parameter (ukuran, nama css, dll ...).

  • Scriptnya:

    1. Gabungkan semua gambar menjadi satu dengan ukuran yang Anda pilih.
    2. Buat file CSS

Dalam kasus Anda, jika Anda memodifikasi satu gambar, Anda membuat ulang gambar global dan CSS melalui skrip dan ... itu saja. Mungkin Anda perlu menyalin / menempelkan CSS di milik Anda jika Anda tidak ingin menggunakan yang dibuat.

Catatan:

Saya mencobanya dengan beberapa file dan bekerja dengan sangat baik. Kemudian, saya mencoba seperti ~ 600 gambar dan kemudian, Anda akan membutuhkan CPU goooood dan kesabaran;) Dalam hal ini, jangan gunakan itu.

Shikiryu
sumber
1

Tidak akan menggunakan irisan + memulai Tindakan yang meminta pemilihan tenda (dengan snap ke irisan & batas dokumen pada) semua irisan Anda satu per satu, tetapi memotong untuk pemilihan setiap kali, dan menyimpan sebagai png, ctrl alt z undoing sampai tidak dipotong, pilih masing-masing sektor, tanam..etc, sampai selesai dengan semua sektor, lalu hentikan Tindakan. Di tengah Anda dapat menyembunyikan / menampilkan lapisan apa pun, seperti file yang sama selalu, jadi tidak boleh ada konflik ... Jadi, Anda akan memuat tindakan atas psd Anda yang diubah setiap kali. Satu-satunya hal yang bisa saya pikirkan adalah Anda benar-benar perlu mengubah batas irisan. Atau itu ... aku tidak mengerti kamu benar ...

Sunting: jika tidak perlu mengiris, maka makro (tindakan) yang hanya menyertakan menyembunyikan atau menampilkan lapisan dalam urutan yang Anda butuhkan, setelah semua tweak dilakukan. Seperti yang saya katakan, saya mungkin tidak mengerti ...

S.gfx
sumber
Meskipun saya melihat paragraf pertama Anda agak membingungkan dan namun tampaknya menambahkan lebih ke alur kerja daripada mengotomatiskannya; Saya mungkin melihat di mana Anda menuju dengan tindakan menyembunyikan / menampilkan lapisan, meskipun saya akan menggunakan irisan dengan itu.
Jari Keinänen
Terima kasih! Saya berusaha keras untuk memahami suara turun dari siapa pun, ...
S.gfx