การสร้าง CSS Sprite จาก Photoshop


14

ฉันมี PSD ที่มีการออกแบบเว็บ
ทุกครั้งที่ฉันปรับแต่งการออกแบบฉันต้องคัดลอกส่วนต่าง ๆ ของภาพด้วยตนเองด้วยความสามารถในการมองเห็นเลเยอร์ที่แตกต่างกัน (เพื่อความโปร่งใส) ลงใน CSS Sprite

สามารถอัตโนมัติได้เท่าไหร่?


ฉันขอขอบคุณที่คุณต้องการเก็บคำถามทั่วไป แต่ตัวอย่างอาจมีประโยชน์ เลเยอร์ที่มองเห็นได้ถูกตั้งค่าไว้แล้วหรือคุณต้องเปลี่ยนทีละรายการก่อนส่งออกหรือไม่
Pekka

@Pekka: ส่วนที่แตกต่างต้องการความสามารถในการมองเห็นที่แตกต่างกัน ตัวอย่างเช่นพื้นหลังของไซต์จะถูกส่งออกที่มองเห็นได้ แต่พื้นหลังเนื้อหาจะถูกส่งออกด้วยพื้นหลังส่วนกลางที่มองไม่เห็น (สำหรับเงาที่โปร่งใส)
SLaks

ฉันเห็น. ดังนั้นสิ่งนี้เรียกการประมวลผลแบบแบตช์ สนใจที่จะดูว่าเกิดอะไรขึ้น! ...
Pekka

คำตอบ:


9

ฉันใช้สคริปต์โฟโต้ช็อปอัตโนมัติหนึ่งครั้งและทำงานได้ดี

แนวคิดคือ:

  • แต่ละส่วนเป็นภาพที่แตกต่าง
  • แต่ละส่วน (และแต่ละภาพ) จะต้องอยู่ในโฟลเดอร์เดียวกันโดยไม่มีภาพอื่น ๆ
  • เรียกใช้สคริปต์เพื่อระบุโฟลเดอร์และพารามิเตอร์บางตัว (ขนาด, ชื่อ css, ฯลฯ ... )
  • สคริปต์ทำ:

    1. รวมภาพทั้งหมดเป็นภาพเดียวกับขนาดที่คุณระบุ
    2. สร้างไฟล์ CSS

ในกรณีของคุณหากคุณแก้ไขภาพหนึ่งภาพคุณจะสร้างรูปภาพทั่วโลกและ CSS ผ่านสคริปต์และ ... บางทีคุณอาจต้องคัดลอก / วาง CSS ในของคุณหากคุณไม่ต้องการใช้ CSS ที่สร้างขึ้น

หมายเหตุ:

ฉันลองกับไฟล์ไม่กี่ไฟล์และใช้งานได้ดี จากนั้นฉันลองเช่น ~ 600 ภาพจากนั้นคุณจะต้องใช้ซีพียูและความอดทนของ goooood;) ในกรณีนี้อย่าใช้มัน


1

จะไม่ใช้การแบ่งเป็นส่วน ๆ + เริ่มต้นการกระทำที่ทำให้ผู้คนเลือกปะรำ (พร้อมสแน็ปเป็นชิ้น & ขอบเขตเอกสาร) ชิ้นของคุณทีละคน แต่การปลูกพืชเพื่อเลือกในแต่ละครั้งและบันทึกเป็น png, ctrl alt z z เลือกแต่ละส่วนครอบตัด .. ฯลฯ จนเสร็จกับทุกภาคส่วนแล้วหยุดการกระทำ ตรงกลางคุณสามารถซ่อน / แสดงเลเยอร์ใด ๆ ได้เหมือนไฟล์เดิมเสมอดังนั้นไม่ควรขัดแย้ง ... ดังนั้นคุณจะโหลดแอคชั่นเหนือ psd ที่คุณเปลี่ยนทุกครั้ง สิ่งเดียวที่ฉันคิดได้ก็คือคุณจำเป็นต้องเปลี่ยนเส้นแบ่งเป็นชิ้น ๆ หรือว่า ... ฉันไม่เข้าใจคุณถูกต้อง ...

แก้ไข: หากไม่จำเป็นต้องแบ่งส่วนแล้วแมโคร (แอ็คชัน) ที่รวมเฉพาะการซ่อนหรือแสดงเลเยอร์ตามลำดับที่คุณต้องการหลังจากปรับแต่งเสร็จแล้ว อย่างที่ฉันพูดฉันอาจจะไม่เข้าใจ ...


ในขณะที่ฉันเห็นย่อหน้าแรกของคุณค่อนข้างสับสนและดูเหมือนว่าจะเพิ่มมากขึ้นในเวิร์กโฟลว์มากกว่าที่จะทำให้มันอัตโนมัติ ฉันอาจเห็นว่าคุณกำลังมุ่งหน้าไปที่ใดด้วยการซ่อน / แสดงเลเยอร์แอ็คชั่นแม้ว่าฉันจะใช้สไลซ์
Jari Keinänen

ขอขอบคุณ! ฉันพยายามอย่างหนักที่จะเข้าใจการลงคะแนนจากใครก็ตามแม้ว่า ...
S.gfx
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.