Làm cách nào để xuất hình ảnh từ hình ảnh Illustrator ở nhiều kích cỡ?


29

Tôi chưa quen với Adobe Illustrator và tôi có một hình ảnh logo mà tôi cần sử dụng ở 5 hoặc 6 kích cỡ khác nhau. Hình ảnh logo đã được tạo trong Adobe Illustrator, nhưng khi tôi cố lưu hình ảnh thành PNG hoặc JPEG, điều đơn giản hóa ra lại rất phức tạp.

Tôi hiểu rằng Adobe Illustrator muốn coi hình ảnh là một kích thước nhất định và sau đó muốn nhân kích thước đó với hệ số tỷ lệ pixel trên inch để dẫn đến số pixel thực tế mà nó lưu. Nó có một vài lựa chọn hệ số tỷ lệ giới hạn, cung cấp một tập hợp kích thước pixel đầu ra rất hạn chế.

Tuy nhiên, đối với nhiều người sử dụng web, người dùng đã biết kích thước pixel đầu ra cần thiết. Có cách nào để chỉ định chiều rộng hoặc chiều cao pixel của đồ họa đã lưu cần thiết không?

Tôi đã thấy các đề xuất để xuất hình ảnh và sau đó sử dụng Photoshop để thay đổi kích thước hình ảnh, nhưng điều đó dẫn đến chất lượng hình ảnh kém hơn so với việc tạo hình ảnh cuối cùng từ hình ảnh vector.



Có nhiều cách để làm điều đó, tôi chọn tất cả sau đó hình ảnh bạn muốn xuất sau đó có tùy chọn chiều rộng và chiều cao trong tiêu đề, chỉ cần thay đổi nó sau đó xuất nó

Câu trả lời:


26

Tệp> Lưu cho Web và sau đó nhập kích thước pixel bằng cách nhấp vào Image Size tab ở bên phải cửa sổ Lưu cho Web.

Hay tôi không hiểu bạn chính xác?


Hoàn hảo, cảm ơn. Tôi mới dành khoảng 15 phút với chức năng "xuất khẩu", nhưng vì nó từ chối sử dụng ít hơn 72ppi, tôi đã phải bán lại tác phẩm nghệ thuật và bản vẽ để xuất khẩu rất nhỏ, đó là những gì người hỏi đã làm.
Kjeld Schmidt

12

Sử dụng File → Save for Web và nhập kích thước sẽ làm những gì bạn sau. Ngoài ra, Illustrator sử dụng tỷ lệ vectơ, vì vậy kết quả sẽ tốt hơn so với việc bạn đã thử điều tương tự trong Photoshop - nhập kích thước không khớp với tài liệu trong Photoshop có nghĩa là hình ảnh sẽ được chia tỷ lệ bitmap.

Xin lưu ý rằng bạn phải nhấp vào Áp dụng sau khi thay đổi kích thước, nếu bạn đang sử dụng phiên bản Illustrator trước CS6.

Lưu cho Web trong Illustrator

Ồ, và có một cơ hội rất tốt bạn sẽ muốn Convert to sRGBtắt - nó sẽ chuyển đổi hình ảnh của bạn từ không gian màu hiện tại thành sRGB, làm cho màu sắc thay đổi.

nhập mô tả hình ảnh ở đây


Không có nút Áp dụng trong CS6 .... và tôi không đồng ý về Chuyển đổi sang RGB, bạn muốn BẬT cho hình ảnh dành cho web.
Scott

2
Cảm ơn về mẹo CS6. Rời khỏi Convert to sRGB trên hoàn toàn là cách tiếp cận sai cho công việc web và UI. Đây là toàn bộ bài viết về lý do tại sao: bjango.com/articles/photoshop (Cuộc thi với tôi về điều này trong tình trạng nguy hiểm của bạn!)
Marc Edwards

2
Bạn có thực sự đọc bài viết này? Khi bạn đang làm việc trên web và UI, các giá trị màu chính xác PHẢI được duy trì trong toàn bộ quá trình. Nếu bạn nhập # FF0010 dưới dạng màu, thì PHẢI là đầu ra trong tệp dưới dạng # FF0010 nếu bạn có ý định khớp màu trong mã. Điều này có nghĩa là Chuyển đổi sang sRGB PHẢI tắt. Tôi có cảm giác bạn không làm công việc này và không hiểu những gì liên quan.
Marc Edwards

1
Scott, xin đừng coi đây là một cuộc tấn công vượn nhân hình quảng cáo, nhưng từ các cuộc thảo luận tương tự tôi nghĩ bạn có thể đã chọn ra một số ý tưởng sai lầm về biểu diễn màu RGB. Xem thêm đồ họa.stackexchange.com/questions / 7815 / .
e100

3
Chuyển đổi sang sRGB là lựa chọn sai trong hầu hết mọi tình huống có thể hiểu được khi làm việc cho web. "Có LÝ DO, nhóm Save for Web đã triển khai tùy chọn Convert to sRGB" - Thời gian để sửa lỗi đó. feedback.photoshop.com/photoshop_family/topics/ từ
Marc Edwards

1

Khi tôi cần hỗ trợ nhiều kích thước pixel, tôi đã nhân đôi và chia tỷ lệ nghệ thuật trong cùng một tệp AI. Mỗi kích thước đi vào một artboard có kích thước chính xác riêng biệt. Tôi nối tên bảng với định dạng tệp sẽ được xuất. Sau đó, tôi chạy một jsx xuất từng artboard và chọn định dạng tệp từ tên, sử dụng các cài đặt cuối cùng tôi đã nhập cho định dạng đó trong tệp đó. Đây là tất cả trong CS5.

Tôi sử dụng quy trình công việc này cho một số logo, biểu tượng và quảng cáo hiển thị.


Xin vui lòng, bạn có thể chia sẻ .jsx?
kelin

@kelin Tôi sợ tôi không thể. Lâu lắm rồi tôi không bận tâm đến các sản phẩm của Adobe.
thường phục

1
Không thành vấn đề, tôi tìm thấy kịch bản tuyệt vời ở đây: stackoverflow.com/a/28067227/3050403
kelin

0

Bạn cũng có thể tạo một tài liệu có kích thước phù hợp trong Photoshop (hoặc bỏ ra một khu vực có hướng dẫn) sau đó File> Đặt nghệ thuật vector.

Bạn có thể chia tỷ lệ kích thước của hình trước khi nó được hiển thị. Rõ ràng quy mô sau đó sẽ làm giảm chất lượng của nó.

Tôi đã luôn sử dụng kỹ thuật này cho các logo để kiểm soát chính xác kích thước, ví dụ: lấy đường cơ sở của các thành phần văn bản của logo trên ranh giới pixel (một hình thức gợi ý).


0

Một bổ sung cho chủ đề này mà tôi thấy hấp dẫn cho các nhà thiết kế ứng dụng di động, là tập lệnh này tạo tài sản võng mạc cho iOS và Android chỉ trong 1 cú nhấp chuột.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.