Softonic

เครื่องมือสร้างสไปรต์ชีต

ขั้นตอน / 3
กำลังกู้คืนไฟล์ที่เลือก...

วางภาพเป็นชุด แล้วเครื่องมือจะจัดวางบนกริดสม่ำเสมอและวาด PNG สไปรต์ชีตเดียวในเบราว์เซอร์ จากนั้นสร้าง CSS ที่มีออฟเซ็ต background-position ต่อสไปรต์ ทุกอย่างทำงานในเครื่องบนแคนวาส จึงไม่มีการอัปโหลดสิ่งใดไปยังเซิร์ฟเวอร์ เหมาะสำหรับชุดไอคอน เฟรมเกมย้อนยุค และสถานะอินเทอร์เฟซที่คุณต้องการไฟล์เดียวแทนหลายภาพแยกกัน คุณกำหนดจำนวนคอลัมน์ ขนาดไทล์ ระยะห่างระหว่างเซลล์ และพื้นหลัง (โปร่งใส ขาว หรือดำ) ได้เอง

สไปรต์ชีตถูกสร้างอย่างไร

  1. 1

    วางภาพของคุณ

    เพิ่มไฟล์ PNG, JPG หรือ WebP จัดลำดับใหม่ด้วยปุ่มขึ้น/ลง หรือลบเฟรมใดก็ได้ แผ่นจะถูกสร้างใหม่ทันที

  2. 2

    ตั้งค่ากริด

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

  3. 3

    ปรับขนาดไทล์และระยะห่าง

    เลือกขนาดไทล์เป็นพิกเซล และเพิ่มระยะห่างระหว่างเซลล์เพื่อป้องกันไม่ให้สไปรต์ที่อยู่ติดกันเลอะเข้าหากันเมื่อปรับขนาด

  4. 4

    ดาวน์โหลด PNG และคัดลอก CSS

    บันทึกสไปรต์ชีตเป็น PNG ไฟล์เดียว และคัดลอกคลาส CSS ที่สร้างขึ้น หนึ่งกฎ `.spr-ชื่อ` ต่อภาพ พร้อมความกว้าง ความสูง และ background-position

เลย์เอาต์ทำงานอย่างไร

เครื่องมือใช้เลย์เอาต์เดียวที่คาดเดาได้: กริดสม่ำเสมอ คุณกำหนดจำนวนคอลัมน์ ส่วนจำนวนแถวคือ ปัดขึ้น(ภาพ / คอลัมน์) ทุกเซลล์มีขนาดสี่เหลี่ยมจัตุรัสเท่ากัน (ขนาดไทล์ที่คุณเลือก) ดังนั้นแต่ละภาพจึงถูกปรับขนาดให้พอดีกับเซลล์ของตนโดยคงอัตราส่วน แล้วจัดกึ่งกลาง ภาพขนาดต่างกันจะไปอยู่ในเซลล์ที่เท่ากันทั้งหมด ซึ่งเป็นสิ่งที่สไปรต์ CSS ที่ใช้ background-position คาดหวังพอดี

ตัวควบคุม ช่วง ผล
คอลัมน์ 1 ถึง 16 จำนวนสไปรต์ต่อแถว; แถวคำนวณอัตโนมัติ
ขนาดไทล์ 32 ถึง 512 px เซลล์สี่เหลี่ยมจัตุรัสที่แต่ละภาพถูกจัดให้พอดี
ระยะห่าง 0 ถึง 64 px ช่องว่างโปร่งใสระหว่างเซลล์เพื่อกันการเลอะเมื่อปรับขนาด
พื้นหลัง โปร่งใส / ขาว / ดำ สีเติมด้านหลังสไปรต์ในไฟล์ PNG ผลลัพธ์

รูปแบบของ CSS ที่สร้างขึ้น

แต่ละภาพจะกลายเป็นคลาสที่ตั้งชื่อตามไฟล์ (.spr-<ชื่อ>) มีขนาดเท่าไทล์และถูกเลื่อนไปยังเซลล์ของตน เมื่อมีสี่คอลัมน์ ขนาดไทล์ 128 px และไม่มีระยะห่าง แผ่นจะมีลักษณะดังนี้:

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

ออฟเซ็ตขยับในสองมิติ: สไปรต์เติมแต่ละแถวจากซ้ายไปขวา แล้วขึ้นแถวถัดไป บันทึก PNG เป็น spritesheet.png ไว้ข้าง CSS ของคุณ (หรือแก้ url(...) ให้ตรงกับพาธของคุณ)

ระยะห่างและการเลอะ

สไปรต์ที่อัดชิดขอบต่อขอบอาจเลอะเข้าหากันเมื่อเบราว์เซอร์ปรับขนาดแผ่น (อัตราส่วนพิกเซลไม่เป็นจำนวนเต็ม การแปลง CSS) เพิ่มระยะห่าง 2 ถึง 4 พิกเซลระหว่างเซลล์เพื่อกันไม่ให้พิกเซลข้างเคียงรั่วเข้ามา

จอความละเอียดสูง (retina)

ไม่มีการส่งออก 2x อัตโนมัติ แต่คุณทำแผ่นให้คมชัดขึ้นได้ง่าย ๆ: เลือกขนาดไทล์ใหญ่ขึ้น (เช่น 256 px แทน 128 px) เพื่อให้แต่ละสไปรต์มีพิกเซลมากขึ้น แล้วแสดงที่ครึ่งหนึ่งของขนาด CSS เท่านี้คุณก็ได้สไปรต์คมชัดบนจอความละเอียดสูงโดยไม่ต้องทำรอบแยก

สไปรต์ชีตหรือทางเลือกอื่น

  • สไปรต์ชีต: ชุดไอคอนคลาสสิกใน CSS เฟรมเกม HTML5 และหน้าที่ได้ประโยชน์จากการรวมภาพเล็กจำนวนมากไว้ในไฟล์เดียว
  • สไปรต์ SVG (symbol): ดีกว่าสำหรับไอคอนอินเทอร์เฟซสมัยใหม่ ปรับขนาดได้โดยไม่เสียคุณภาพ รับ fill ของ CSS ไม่ต้องยุ่งกับ background-position
  • ฟอนต์ไอคอน: จำกัด แต่ยังใช้กับไอคอนสีเดียวขนาดจิ๋ว
  • ไฟล์แยกกับ HTTP/2 หรือ HTTP/3: การมัลติเพล็กซ์ทำให้จำนวนคำขอสำคัญน้อยลงกว่าแต่ก่อน

คำถามที่พบบ่อย

ภาพของคุณอยู่ในเบราว์เซอร์ ในขั้นตอนแบบหลายหน้า เบราว์เซอร์นี้จะเก็บไฟล์ภาพที่เลือกและการจัดวางไว้ชั่วคราวในแท็บนี้นานสูงสุด 30 นาที โดยไม่มีการส่งสิ่งใดไปยังเซิร์ฟเวอร์หรือเพิ่มลงใน URL

ได้ แต่ SVG แบบอินไลน์หรือสไปรต์ SVG <symbol> มักเข้ากับเฟรมเวิร์กแบบคอมโพเนนต์ได้ดีกว่า สไปรต์ชีต CSS โดดเด่นเมื่อมีการแสดงภาพจำนวนมากพร้อมกันบนหน้าเว็บแบบสถิต

ตั้งจำนวนคอลัมน์ให้เท่ากับจำนวนเฟรมเพื่อให้แต่ละเฟรมอยู่ในแถวเดียว จากนั้นควบคุมด้วย animation-timing-function: steps(N) ของ CSS และ background-position ที่กระโดดทีละเซลล์ เหมาะกับแอนิเมชันวนสั้น ๆ (ตัวโหลด สถานะพัก)

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

เครื่องมือที่เกี่ยวข้อง

ตัวเลือกสี Material Design

สำรวจพาเลตสีของ Material Design คัดลอกเฉดสีใดก็ได้ (ตั้งแต่ 50 ถึง A700) ในรูปแบบ HEX, RGB หรือ HSL เพียงแตะครั้งเดียว

เครื่องสร้างกระดาษเส้นบรรทัด

สร้างกระดาษเส้นบรรทัดพร้อมพิมพ์ได้ฟรี เลือกเส้นแบบวิทยาลัย กว้าง หรือแคบ ตั้งระยะห่างบรรทัดเป็นมิลลิเมตร ขนาดกระดาษ และเส้นขอบ แล้วพิมพ์หรือดาวน์โหลดเป็น SVG

โปรแกรมแปลงรูปแบบภาพ

แปลงรูปภาพเป็น JPG, PNG หรือ WebP ได้ทันทีในเบราว์เซอร์ พร้อมควบคุมคุณภาพสำหรับรูปแบบบีบอัดและรักษาความโปร่งใสใน PNG และ WebP

เครื่องมือแบ่งกริดรูปภาพ Instagram

แบ่งรูปภาพขนาดใหญ่ให้เป็นกริด Instagram ขนาด 3×3 หรือกี่แถวก็ได้ แต่ละแผ่นภาพมีหมายเลขกำกับ จึงอัปโหลดแบบย้อนลำดับได้ง่าย

ตัวแปลง JPG เป็น Word

แปลงภาพถ่าย JPG หรือภาพหน้าจอของข้อความเป็นเอกสาร Word ที่แก้ไขได้ เครื่องมืออ่านคำด้วย OCR แล้วจัดวางเพื่อให้คุณเขียนใหม่ จัดรูปแบบ และนำกลับมาใช้ได้

เครื่องแปลงค่าจาก Pantone เป็น HEX

แปลงสี Pantone PMS ให้เป็นค่า HEX, RGB และ CMYK ที่ใกล้เคียงที่สุด เพื่อให้สอดคล้องกันระหว่างการแสดงผลบนหน้าจอและการพิมพ์ โดยพร้อมดูตัวอย่างสีแบบสวัตช์

เครื่องมือนี้มีให้บริการในภาษาอื่น