เครื่องมือในการสร้าง CSS Sprite? [ปิด]

มีเครื่องมือที่ดีในการสร้างสไปรต์ css หรือไม่?

ฉันต้องการให้ไดเรกทอรีของรูปภาพและไฟล์. css ที่มีอยู่ซึ่งอ้างถึงภาพเหล่านั้นและให้สร้างภาพขนาดใหญ่ที่ปรับให้เหมาะสมกับภาพขนาดเล็กทั้งหมดและเปลี่ยนไฟล์. css ของฉันเพื่ออ้างถึงภาพเหล่านั้น

อย่างน้อยที่สุดฉันต้องการให้ใช้ไดเรกทอรีของรูปภาพและสร้างสไปรต์ขนาดใหญ่และ. css ที่จำเป็นในการใช้แต่ละภาพเป็นพื้นหลัง

มีปลั๊กอิน photoshop ที่ดีหรือแอพพลิเคชั่นที่สามารถทำสิ่งนี้ได้หรือไม่?

นี้จะทำ 90% ของการทำงานสำหรับคุณ: CSS สไปรท์เครื่องปั่นไฟ คุณยังคงต้องแก้ไขกฎด้วยตัวเอง แต่เครื่องมือจะให้ชิ้นส่วนโค้ดที่คุณต้องการสำหรับไฟล์ CSS ใหม่

Instant Spriteเป็นตัวสร้าง CSS Sprite ในเบราว์เซอร์ที่ฉันกำลังทำงานอยู่ มันเร็วมาก แต่ไม่มีคุณสมบัติมากเท่ากับคุณสมบัติอื่น ๆ ขณะนี้ใช้งานได้ใน Firefox หรือ Chrome เท่านั้นเนื่องจากใช้ JavaScript FileReader และ HTML Canvas เพื่อสร้างสไปรต์ภายในเว็บเบราว์เซอร์โดยไม่ต้องอัปโหลด

ขณะนี้มี Sprite Me โดย Steve Souders เพียงแค่ทดลองใช้และดูเหมือนว่าจะทำงานได้ดี

นี่คือลิงค์http://spriteme.org/และนี่คือบล็อกโพสต์ที่ประกาศ

http://www.stevesouders.com/blog/2009/09/14/spriteme/

สิ่งนี้มีแนวโน้ม:

http://csssprites.org/

นอกจากนี้ฉันพบบทความนี้ซึ่งมีข้อมูลที่เป็นประโยชน์และแม้แต่ความคิดเห็นของผู้อ่านบางคนก็ควรค่าแก่การอ่าน

เห็นได้ชัดว่าชุดเครื่องมือเว็บของ Google มีบางอย่าง - ดังนั้นหากคุณใช้มันอาจคุ้มค่าที่จะลองดู

ลองสิ่งนี้:

http://spritepad.wearekiss.com/

ZeroSpritesเป็นตัวสร้างสไปรต์ CSS ที่มุ่งเป้าไปที่การย่อขนาดพื้นที่โดยใช้อัลกอริทึม VLSI floorplaning

พบว่าสิ่งนี้ค่อนข้างเร็วที่ขีด จำกัด การอัปโหลด 500K อาจเป็นความเจ็บปวด ซอร์สโค้ดมีอยู่ที่นี่

Tonttu เป็นแอปพลิเคชั่นที่ใช้ Adobe AIR ซึ่งมีอินเทอร์เฟซที่ง่ายสำหรับการสร้างภาพ CSS Sprites ที่มีประสิทธิภาพ คุณสามารถระบุ FiledWidth และ FieldHeight หรือจัดเรียงรูปภาพ
สร้าง CSS Sprites อิมเมจด้วย Tonttu Desktop Tool

ยังไม่ชัดเจนว่าจะทำให้เป็นกรอบงาน ASP.NET หลักหรือไม่ แต่นี่คือโครงการ Microsoft codeplex สำหรับ csssprites:

http://aspnet.codeplex.com/releases/view/50869

ถ้าคุณชอบ - ใช้มัน - หรือชอบไอเดียจากนั้นเพิ่มความคิดเห็น ฉันคิดว่านี่จะเป็นสิ่งที่ดีที่จะมีในกรอบงาน ASP.NET ไม่ได้ใช้เป็นการส่วนตัว (ฉันต้องประดิษฐ์วงล้อด้วยตัวเอง) แต่ได้รับคำวิจารณ์ที่ดี

ประกอบด้วยส่วนประกอบต่อไปนี้:

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

คุณสมบัติที่เพิ่มในรุ่นที่สอง:

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

คุณสมบัติที่อยู่ระหว่างการพิจารณาสำหรับรุ่นต่อ ๆ ไป:

• เลือกสีพื้นหลังสไปรต์ที่มีประสิทธิภาพสูงสุดโดยอัตโนมัติ
• ย่อขนาด CSS ที่แสดงผลโดยอัตโนมัติ
• การคอมไพล์กับ. NET 3.5

เพียงใช้http://sprites.scherpontwikkeling.nl/ก็สามารถสร้างสไปรต์จาก URL ของเว็บไซต์ได้เช่นกัน ... คุณสามารถรวมสไปรต์ของคุณหลังจากที่พัฒนาเว็บไซต์ของคุณ ใช้งานง่ายมาก;)

ไม่ใช่คำตอบโดยตรง แต่สำหรับเพื่อนนักพัฒนาและผู้รวมเว็บของฉันลองพิจารณาเพียงแค่จัดเรียงสไปรต์ให้เป็นสองพลัง เช่นตาราง 16 พิกเซลหรือ 32 พิกเซล ทำให้การคำนวณออฟเซ็ตในไฟล์ CSS ง่ายขึ้นมาก ช่องว่างระหว่างสีขาวทั้งหมดไม่สำคัญเนื่องจากรูปแบบ gifd และ png บีบอัดได้ดีมาก

เข็มทิศ CSS กรอบมีรุ่นเทพดาอัตโนมัติ

หากคุณชอบ Java คุณสามารถใช้ GWT 1.5+ ซึ่งมาพร้อมกับสิ่งที่เรียกว่า " ImageBundle " คอมไพเลอร์ GWT จะจัดการรายละเอียดที่น่ารังเกียจทั้งหมดให้คุณ คุณไม่จำเป็นต้องเขียนโค้ด JavaScript แม้แต่บรรทัดเดียวหรือเขียน CSS ใด ๆ

นี่คือสคริปต์ที่รวมภาพผ่านสคริปต์ Photoshop เข้าสไปรท์ มันจะไม่ทำแผนที่สไปรต์ตามที่คุณถาม แต่จะรวมรูปภาพเป็นสองเท่า (2, 4, 8) หากมีขนาดเท่ากัน ฉันชอบรวมรูปภาพที่คล้ายกัน (ปกติ, วางเมาส์เหนือ, เลือก, พาเรนต์ของที่เลือก) มากกว่าการรวมรูปภาพทั้งหมดไว้ในไฟล์เดียว

หากคุณใช้ทับทิมบนรางมีไลบรารีที่ติดตั้งง่ายเพื่อสร้างสไปรต์ css

http://github.com/aberant/spittle

มีเครื่องมือใหม่ที่เรียกว่า ActiveSprites ซึ่งเป็นส่วนหนึ่งของอัญมณี active_assets

Github: http://bitly.com/eRTwU4

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

มันเป็น rad!

นี่คือโค้ดตัวอย่าง

# config/sprites.rb
Rails.application.sprites do
  sprite 'sprites/sprite1.png' => 'sprites/sprite1.css' do
    _'sprite_images/sprite1/1.png' => 'a.one'
    _'sprite_images/sprite1/2.png' => 'span.two'
  end
end

https://github.com/northpoint/SpeedySprite

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

<link href="css/my-images-dir/" rel="stylesheet">
<div class="my-image-name-here" />

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

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

นี่คือภาพหน้าจอและวิดีโอ youtube

เครื่องมือเหล่านี้ไม่ตรงตามความต้องการของฉันดังนั้นฉันจึงเขียนเครื่องมือที่ใช้ไลบรารีภาพขนาดเล็กของ Mark Tylers mtpixel (ปัจจุบันเป็นส่วนหนึ่งของmtcelledit ) มันไม่ได้กว้างขวางมาก แต่สามารถขยายได้อย่างง่ายดายผ่านฟังก์ชั่นในตัวของ mtpixel ซึ่งรวมถึง: โทนสีเทา, การกลับสี , การหมุน, เหลา, หาขนาด, โปสเตอร์, พลิก (แนวตั้งและแนวนอน), การแปลง, rgb-> จัดทำดัชนี, จัดทำดัชนี -> rgb, การตรวจจับขอบ, ลายนูน, รูปหลายเหลี่ยม, ข้อความและอื่น ๆ

สิ่งที่คุณทำคือส่งชุดรูปภาพเป็น args (รองรับ png, gif และ jpeg) และจะส่งออก rgb png ที่เรียกว่า sprite.png พร้อมกับข้อมูลการแบ่งส่วนภาพที่มีประโยชน์ไปยัง stdout ฉันใช้มันในสคริปต์ bash เพื่อขยายไดเร็กทอรีรูปภาพทั้งหมดและส่งออกข้อมูลการแบ่งส่วนสำหรับการสร้าง css โดยอัตโนมัติ (ด้วยความหวังว่าในที่สุดจะสามารถแทนที่แท็ก img ที่มีอยู่โดยอัตโนมัติด้วย sed / awk สร้างสรรค์เล็กน้อย)

แพ็คเกจไบนารีสำหรับลินุกซ์ลูกสุนัขจะอยู่ที่นี่:

http://murga-linux.com/puppy/viewtopic.php?t=82009

กรณีการใช้งานของฉันต้องการเพียงการต่อภาพในแนวตั้งลงใน png ใหม่นั่นคือทั้งหมดที่ทำ แต่ซอร์สโค้ดของฉันเป็นโดเมนสาธารณะและไลบรารี mtcelledit คือ gpl3 ด้วยการเชื่อมโยงแบบคงที่ mtpixel ไบนารีจะ <100kb (มีเพียงไม่กี่ kb เมื่อเชื่อมโยงแบบไดนามิก) และการอ้างอิงอื่น ๆ เท่านั้นคือ libpng, libjpeg และ libgif (และ freetype ด้วย mtpixel อย่างเป็นทางการ แต่ฉันไม่ต้องการการรองรับข้อความดังนั้นฉัน แสดงความคิดเห็นเกี่ยวกับบิต freetype ในโครงสร้างแบบคงที่)

อย่าลังเลที่จะปรับเปลี่ยนตามความต้องการของคุณเอง:

#include <stdlib.h> 
#include <stdio.h> 
#include <string.h> 
#include <mtpixel.h> 

int main( int argc, char *argv[] ){ 
int i=0,height=0,width=0,y=0; 
mtpixel_init(); 
mtImage *imglist[argc]; 
argc--; 
do{   imglist[i] = mtpixel_image_load( argv[i+1] ); 
   height+=imglist[i]->height; 
   if (imglist[i]->width > width) width=imglist[i]->width; 
} while (++i < argc); 
imglist[argc]=mtpixel_image_new_rgb(width,height); 
imglist[argc]->palette.trans=0; 
i=0; 
do{   if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED) 
      mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y); 
   else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y); 
   printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y); 
   y+=imglist[i]->height; 
   mtpixel_image_destroy( imglist[i] ); 
}while (++i < argc); 
   mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 ); 
mtpixel_quit(); 
return 0; 
}

หากคุณกำลังใช้ .net, ตรวจสอบhttp://www.RequestReduce.com ไม่เพียง แต่สร้างไฟล์สไปรต์โดยอัตโนมัติ แต่ยังสร้างไฟล์ดังกล่าวได้ทันทีผ่าน HttpModule พร้อมกับการรวมและย่อขนาด CSS ทั้งหมด นอกจากนี้ยังปรับภาพสไปรต์ให้เหมาะสมโดยใช้การบีบอัดปริมาณและการบีบอัดแบบไม่สูญเสียและจัดการการให้บริการไฟล์ที่สร้างขึ้นโดยใช้ส่วนหัว ETags และ Expires เพื่อให้แน่ใจว่าการแคชเบราว์เซอร์ที่ดีที่สุด การตั้งค่าเป็นเรื่องเล็กน้อยที่เกี่ยวข้องกับการเปลี่ยนแปลง web.config ง่ายๆ ดูบล็อกโพสต์ของฉันเกี่ยวกับการนำไปใช้โดยแกลเลอรี Microsoft Visual Studio และ MSDN Samples

ฉันเพิ่งพบเครื่องมือนี้: SpriteRight http://spriterightapp.com/

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