Công cụ để tạo CSS spites? [đóng cửa]

Có bất kỳ công cụ tốt để làm cho css spites?

Ý TƯỞNG Tôi muốn cung cấp cho nó một thư mục hình ảnh và tệp .css hiện có đề cập đến những hình ảnh đó và để nó tạo ra một hình ảnh lớn được tối ưu hóa với tất cả các hình ảnh nhỏ VÀ thay đổi tệp .css của tôi để tham chiếu đến những hình ảnh đó.

Ít nhất tôi muốn nó lấy một thư mục hình ảnh và tạo ra một sprite lớn và .css cần thiết để sử dụng từng cái làm nền.

Có bất kỳ plugin photoshop tốt hoặc ứng dụng hoàn toàn thổi để làm điều này?

Điều này sẽ làm 90% công việc cho bạn: CSS Sprite Generator . Bạn vẫn sẽ cần phải tự chỉnh sửa các quy tắc, nhưng công cụ sẽ cung cấp cho bạn các đoạn mã bạn cần cho tệp CSS mới.

Instant Sprite là một trình tạo sprite CSS trong trình duyệt mà tôi đang làm việc. Nó thực sự nhanh, nhưng không có nhiều tính năng như một số tính năng khác. Hiện tại nó chỉ hoạt động trong Firefox hoặc Chrome, vì nó sử dụng JavaScript FileReader và HTML Canvas để tạo các họa tiết bên trong trình duyệt web mà không cần tải lên.

Bây giờ có Sprite Me của Steve Souder. Chỉ cần thử nó và nó có vẻ hoạt động khá tốt.

Đây là liên kết http://spriteme.org/ và đây là bài đăng blog thông báo nó.

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

Điều này có vẻ đầy hứa hẹn:

http://csssprites.org/

Ngoài ra tôi tìm thấy bài viết này có một số thông tin hữu ích, và thậm chí một số bình luận độc giả đáng đọc.

Ngoài ra, rõ ràng bộ công cụ web của google có một cái gì đó - vì vậy nếu bạn đang sử dụng nó có thể đáng để kiểm tra.

Thử cái này:

http://spritepad.wearekiss.com /

ZeroSprites là một trình tạo CSS spites nhằm mục đích tối thiểu hóa diện tích bằng thuật toán tạo tầng VLSI.

tìm thấy điều này khá nhanh rằng giới hạn tải lên 500K có thể là một nỗi đau. mã nguồn có sẵn ở đây

Tonttu là ứng dụng dựa trên Adobe AIR cung cấp giao diện dễ dàng để tạo hình ảnh CSS Sprites mạnh mẽ. Bạn có thể chỉ định FiledWidth và FieldHeight hoặc sắp xếp hình ảnh.
Tạo CSS Sprites Hình ảnh với Tonttu Desktop Tool

Vẫn chưa rõ nếu nó sẽ đưa nó vào khung ASP.NET cốt lõi nhưng đây là một dự án mã hóa của Microsoft cho csssprites:

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

nếu bạn thích nó - sử dụng nó - hoặc chỉ thích ý tưởng thì thêm một bình luận. Tôi nghĩ rằng đây sẽ là một điều tuyệt vời để có trong khung công tác ASP.NET. Cá nhân tôi đã không sử dụng nó (tôi phải tự phát minh ra bánh xe) nhưng nó đã được đánh giá tốt.

Nó bao gồm các thành phần sau:

• API để tự động tạo các họa tiết và hình ảnh nội tuyến
• Kiểm soát và trợ giúp cung cấp cách gọi thuận tiện vào API

Các tính năng được thêm vào trong phiên bản thứ hai:

• Điều khiển liên kết CSS cho Biểu mẫu web (chọn tệp CSS thích hợp cho trình duyệt của người dùng, nhưng không hiển thị hình ảnh)
• Sử dụng đường dẫn thư mục tùy chỉnh khác với App_Sprites
• Thay đổi hướng ốp lát của hình ảnh sprite
• Hợp nhất CSS được tạo với CSS của người dùng

Các tính năng đang được xem xét để phát hành trong tương lai:

• Tự động chọn màu nền sprite hiệu quả nhất
• Tự động thu nhỏ CSS được kết xuất
• Biên dịch với .NET 3.5

Chỉ cần sử dụng http://sprites.scherpontwikkeling.nl/ nó cũng có thể tạo các họa tiết từ URL của trang web ... bạn có thể tích hợp các họa tiết của mình sau khi phát triển trang web của mình. Nó rất dễ sử dụng;)

Không phải là một câu trả lời trực tiếp mà là cho các nhà phát triển và nhà tích hợp web đồng nghiệp của tôi, hãy xem xét đơn giản là sắp xếp từng sprite với quyền hạn của hai; ví dụ: lưới 16 pixel hoặc 32 pixel. Nó làm cho việc tính toán bù đắp trong tệp CSS dễ dàng hơn nhiều. Tất cả khoảng trắng giữa không quan trọng vì định dạng gifd và png nén rất tốt.

La bàn CSS Framework có thế hệ sprite tự động .

Nếu bạn thích Java, thì bạn có thể sử dụng GWT 1.5+ đi kèm với một thứ gọi là " ImageBundle ." Trình biên dịch GWT sẽ xử lý tất cả các chi tiết khó chịu cho bạn. Bạn thậm chí sẽ không phải viết mã một dòng JavaScript hoặc viết bất kỳ CSS nào.

Đây là một kịch bản kết hợp hình ảnh thông qua một tập lệnh Photoshop thành các họa tiết CSS . Nó sẽ không làm một bản đồ sprite như bạn yêu cầu, nhưng nó sẽ kết hợp các hình ảnh thành bội số của hai (2, 4, 8) nếu chúng có cùng kích thước. Tôi thích kết hợp các hình ảnh tương tự (bình thường, di chuột, được chọn, cha mẹ của lựa chọn) hơn là có tất cả các hình ảnh trong một tệp.

nếu bạn đang sử dụng ruby ​​trên đường ray, có một thư viện dễ cài đặt để tạo các sprite css.

http://github.com/aberant/spittle

Có một công cụ mới được gọi là ActiveSprites, một phần của đá quý active_assets.

Github: http://bitly.com/eRTwU4

Bạn sử dụng một dsl ruby ​​để xác định các họa tiết của bạn và sau đó thực hiện "cào cào" và các họa tiết và biểu định kiểu tương ứng được tạo.

Đó là rad!

Đây là một số mã mẫu,

# 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

Công cụ này có một cách tiếp cận mới trong đó nó tập hợp các hình ảnh bạn yêu cầu khi đang di chuyển dưới dạng dịch vụ http. Điều này làm cho toàn bộ quá trình khá đơn giản (không cần tiền xử lý, thay đổi hình ảnh bất cứ lúc nào): Bạn bắt đầu dịch vụ và sau đó tham chiếu bất kỳ hình ảnh nào bạn muốn trong HTML của mình:

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

Vì nó động, bạn thậm chí có thể tạo các họa tiết từ một bộ ảnh động như trang hình thu nhỏ. Mặc dù không hỗ trợ JPEG, nhưng PNG và GIF hoạt động tốt.

Tôi khuyên bạn nên sử dụng Sprite Master Web . Tôi tự động tạo các tấm sprite và xuất mã CSS cho bạn. Nó luôn cố gắng tạo ra các tấm sprite nhỏ nhất với các thuật toán tiên tiến.

Đây là một ảnh chụp màn hình và video youtube

Không có công cụ nào trong số này đáp ứng yêu cầu của tôi, vì vậy tôi đã viết một công cụ sử dụng thư viện hình ảnh nhỏ của Mark Tylers, mtpixel (hiện là một phần của mtcelledit ) Nó không siêu rộng nhưng có thể dễ dàng mở rộng thông qua các chức năng được xây dựng của mtpixel bao gồm: thang độ xám, đảo ngược màu , xoay, làm sắc nét, định lượng, posterize, lật (dọc và ngang), biến đổi, rgb-> được lập chỉ mục, lập chỉ mục-> rgb, phát hiện cạnh, chạm nổi, vẽ đa giác, văn bản và nhiều hơn nữa.

Tất cả những gì bạn làm là truyền cho nó một tập hợp các hình ảnh dưới dạng args (hỗ trợ png, gif và jpeg) và nó sẽ xuất ra một pgb rgb có tên là sprite.png cùng với dữ liệu cắt ảnh hữu ích cho thiết bị xuất chuẩn. Tôi sử dụng nó trong các tập lệnh bash để ghi lại toàn bộ thư mục hình ảnh và xuất dữ liệu cắt để tạo css tự động (với hy vọng cuối cùng sẽ làm cho nó có khả năng thay thế các thẻ img hiện tại một cách tự động bằng một chút sed / awk sáng tạo)

Gói nhị phân cho con chó con linux sẽ ở đây:

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

Trường hợp sử dụng của tôi chỉ yêu cầu ghép các hình ảnh theo chiều dọc vào một png mới, vì vậy đó là tất cả, nhưng mã nguồn của tôi là miền công cộng và thư viện mtcelledit là gpl3. Với mtpixel được liên kết tĩnh, nhị phân là <100kb (chỉ một vài kb khi được liên kết động) và chỉ có các phụ thuộc khác là libpng, libjpeg và libgif (và freetype với mtpixel chính thức, nhưng tôi không cần hỗ trợ văn bản, vì vậy tôi không cần hỗ trợ văn bản, vì vậy tôi không cần hỗ trợ văn bản đã nhận xét các bit freetype trong bản dựng tĩnh)

thoải mái sửa đổi cho nhu cầu của riêng bạn:

#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; 
}

Nếu bạn đang sử dụng .net, hãy xem http://www.RequestReduce.com . Nó không chỉ tự động tạo tập tin sprite mà còn thực hiện nó một cách nhanh chóng thông qua một HTTPModule cùng với việc hợp nhất và thu nhỏ tất cả CSS. Nó cũng tối ưu hóa hình ảnh sprite bằng cách sử dụng lượng tử hóa và nén không mất dữ liệu và nó xử lý việc phục vụ các tệp được tạo bằng cách sử dụng các tiêu đề ETags và Expires để đảm bảo bộ nhớ đệm trình duyệt tối ưu. Việc thiết lập không quan trọng chỉ liên quan đến một thay đổi web.config đơn giản. Xem bài đăng trên blog của tôi về việc áp dụng nó bởi thư viện Microsoft Visual Studio và MSDN Samples.

Gần đây tôi tìm thấy công cụ này: SpriteRight http://spriterightapp.com/

SpriteRight là một trình tạo spritesheet CSS cho Mac cho phép bạn nhập hình ảnh hoặc biểu định kiểu hiện có của mình. Làm cho trang web của bạn tải nhanh hơn, cắt giảm chi phí băng thông và tiết kiệm thời gian. SpriteRight thậm chí còn tạo mã CSS một cách nhanh chóng.