2012-10-12 33 views
5

Tôi có tệp PSD có biểu trưng vector (đối tượng thông minh). Tôi cần lưu nó dưới dạng SVG để sử dụng trang web. Tôi không thấy tùy chọn như vậy trực tiếp trong Photoshop mặc dù (tôi chỉ có thể xuất nó dưới dạng tệp .AI).Lớp Photoshop -> SVG

  1. Quy trình xuất như thế nào (PS CS5 hoặc CS6 - phiên bản hiện tại)?
  2. Cài đặt tốt nhất mà nhà phát triển web nên sử dụng khi xuất hiện biểu trưng là gì? Bạn có thể đặt các kích thước khác nhau của tệp SVG trong (AI -> SVG) trình chuyển đổi như thế này: http://image.online-convert.com/convert-to-svg
  3. Có điều gì khác cần chú ý trong trường hợp cài đặt không?
  4. Các tệp SVG nên được đưa vào trang web trong khu vực logo như thế nào? Đâu là cách tiếp cận lí tưởng nhất? Như thế này? http://jsfiddle.net/danielfilho/GdCcA/
+0

Để trả lời câu hỏi 4, đáng tin cậy nhất là rasterise SVG với bất kỳ kích thước nào bạn cần, vì vậy trang web có hình ảnh PNG hoặc GIF để hiển thị và không yêu cầu khả năng SVG. –

+0

@Kolink Tôi đang sử dụng biểu tượng JPG ngay bây giờ nhưng có vẻ mờ trong chế độ phản hồi của trang web, nơi bạn không thể hiển thị biểu tượng đó dưới dạng biểu trưng 250px nhưng thay vì biểu trưng 200px hoặc biểu trưng 150px. Chưa kể đến Retina lúc nào nó trông xấu xí. SVG sẽ là giải pháp hoàn hảo. Tại sao nó không được khuyến cáo? Công ty tôi làm việc để gửi biểu tượng vector cho tôi để có nó trong định dạng vector trên trang web sẽ là tuyệt vời. – Atadj

+0

SVG không được hỗ trợ trong các trình duyệt cũ hơn, cho một trình duyệt. Nhưng nếu bạn có thể thực hiện thử nghiệm tính năng thì bạn có thể có hình ảnh SVG rơi trở lại hình ảnh raster thay vào đó. –

Trả lời

3
  1. Bạn có thể trả tiền cho nó (SVG Kit), hoặc thay thế tốt nhất là để xuất khẩu/dán vào Illustrator và sau đó save as SVG. Câu hỏi Photoshop Custom Shape to SVG path string chi tiết điều này.
  2. Nhìn vào số Illustrator site để biết chi tiết về các tùy chọn khác nhau khi lưu dưới dạng SVG. Nó phụ thuộc vào việc bạn có quan tâm đến các chi tiết như thiết bị đích (thiết bị di động so với máy tính để bàn) hay không và liệu bạn có muốn hiển thị các hiệu ứng lọc, độ trong suốt và độ phân giải SVG hay không.
  3. Best practices for creating web graphics bởi Adobe nói về việc sử dụng màu an toàn trên web, chế độ Xem trước pixel trong Illustrator và giải quyết các thách thức nhất định của thiết bị di động.
  4. Đồng ý với nhận xét của @ Kolink ở trên.
Các vấn đề liên quan