Xuất kích thước biểu tượng iOS trong Trình thiết kế mối quan hệ

Mặc dù Affinity Designer có khả năng xuất @ 1x, @ 2x và @ 3x cực kỳ hữu ích, tôi tự hỏi liệu có cách nào để xuất theo nhiều kích cỡ được yêu cầu cho biểu tượng iOS không?

Tôi tìm thấy một lưới ngắn gọn các kích thước cần thiết ở đây , mà tôi sẽ sao chép ở định dạng danh sách:

• 1024x1024
• 180x180
• 152x52
• 120x120
• 87x87
• 80x80
• 76x76
• 58x58
• 57x57
• 40x40
• 29x29

Đó là 11 kích cỡ biểu tượng khác nhau!

Tôi đã tìm thấy toàn bộ Xuất khẩu Persona với khái niệm cấu hình lát là tuyệt vời, đặc biệt là khi bạn có thể áp dụng các lát cho các lớp riêng lẻ (giả sử, đối với các phiên bản bình thường và nhấn của một nút). Có cách nào để sử dụng cùng một công cụ này, có lẽ, để thực hiện các quy mô xuất khẩu cụ thể không?

Vì các yêu cầu thay đổi theo thời gian, nên luôn luôn nên tham khảo các nguyên tắc của Apple. Có một mẫu Trình thiết kế mối quan hệ trên trang web của tôi mà tôi đã phát triển để xuất 18 kích thước hiện đang được yêu cầu cho các ứng dụng phổ quát.

Nó trông giống như một danh sách lớn, phức tạp, nhưng thực sự chỉ có 5 kích thước bạn cần xây dựng:

• 29pt
• 49pt
• 60pt
• 76pt
• 1024px

Bốn kích thước đầu tiên (được liệt kê theo điểm) cần các phiên bản 1 ×, 2 × và 3 × (nếu bạn là bằng chứng trong tương lai, cũng như bao phủ iPhone 6 Plus).

Một số kích thước bạn sẽ thấy được liệt kê trên mạng và trên trang web của Apple là dành cho iOS 6 trở xuống (57 × 57, v.v.). Chúng không cần thiết nếu bạn đang nhắm mục tiêu iOS 7 trở lên.

Đây là mẫu Photoshop tôi đã tạo:

Tôi có các lát được thiết lập để xuất từng biểu tượng và một hành động để thay đổi kích thước và reexport, vì vậy tôi kết thúc bằng:

• biểu tượng-29.png
• icon-29@2x.png
• icon-29@3x.png
• icon-40.png
• icon-40@2x.png
• icon-40@3x.png
• icon-60.png
• icon-60@2x.png
• icon-60@3x.png
• icon-76.png
• icon-76@2x.png
• icon-76@3x.png

Không phải tất cả các kích thước đó là cần thiết, nhưng có khả năng sẽ có trong tương lai. Bắt đầu với 4 kích thước cơ sở làm cho việc xây dựng các biểu tượng dễ dàng hơn nhiều.

Tôi đang sử dụng Slices trong Photoshop để xuất các vùng khác nhau cần thiết cho mỗi biểu tượng. Xin lưu ý rằng các biểu tượng bạn cung cấp không nên có bất kỳ khu vực trong suốt nào - màu sắc sẽ mở rộng ra tất cả các góc. iOS sẽ che dấu biểu tượng, vì vậy bạn không phải lo lắng về điều đó.

Bạn có thể làm tương tự, bằng cách sử dụng tính năng lát cắt của Affinity?

Cập nhật: Tôi đã tạo một số mẫu biểu tượng ứng dụng mã nguồn mở cho Affinity Designer, Sketch, Photoshop và Illustrator . Họ có thể đáng xem xét.

Bạn có thể làm điều đó trong Trình thiết kế mối quan hệ, các lát có thể chia tỷ lệ đầu ra của chúng, sử dụng hậu tố, đây là xuất biểu tượng iOS bằng hậu tố 'w':

Tôi chỉ tìm thấy một cách tốt để làm điều này trong Nhà thiết kế quan hệ. Nó không hoàn toàn tự động mặc dù. Tôi sẽ giải thích cách nhận ba kích thước biểu tượng hiện cần cho iPhone (29pt, 40pt, 60pt), mỗi kích thước có độ phân giải 2x và 3x:

1. Tạo một Tài liệu mới, đặt đơn vị thành "Điểm", kích thước trang thành 29x29 và kiểm tra "Tạo Artboard" trong hộp thoại
2. Dán và định vị tác phẩm nghệ thuật của bạn trong artboard
3. Đổi tên artboard thành "29pt" trong bảng điều khiển Lớp (tùy chọn)
4. Nhấp chuột phải vào bản vẽ và chọn "Sao y"
5. Kéo artboard mới (để bạn có thể nhìn thấy cả hai bên cạnh nhau) và sau đó đổi tên thành "40pt" (một lần nữa, bước này là tùy chọn)
6. Thay đổi kích thước lớp mới thành 40x40pt bằng bảng Transform - tác phẩm nghệ thuật của bạn sẽ được tự động thu nhỏ
7. Lặp lại các bước 4-6 để tạo ra một bản vẽ nghệ thuật 60pt (cộng thêm 76pt và 83,5pt cho iPad, nếu cần)
8. Chuyển đến Xuất khẩu Persona, chuyển sang bảng Slices và chọn độ phân giải 2x và 3x (cộng với 1x cho iPad)
9. Chọn tất cả các lớp artboard trong danh sách ("29pt", "40pt", v.v.) và nhấp vào "Xuất được chọn" ở dưới cùng của bảng.

Sự liên kết sẽ tạo ra tất cả các kích thước biểu tượng ở mọi độ phân giải đã chọn, do đó bạn có thể nhận được nhiều biểu tượng hơn mức bạn thực sự cần. Nhưng chúng được đặt tên gọn gàng "29pt@2x.png", v.v., vì vậy thật dễ dàng để gán chúng trong Danh mục tài sản Xcode của bạn.

Một cảnh báo: Khi bạn truy cập vào Xuất khẩu Persona, Affinity sẽ tự động tạo một lát xuất cho mỗi bản vẽ (đó là khung màu xanh có nhãn kích thước trên đó). Tôi thấy rằng đôi khi kích thước của các lát cắt bị tắt bởi một vài pixel. Có vẻ như một lỗi trong AD. Bạn có thể dễ dàng sửa nó bằng cách kéo các góc của lát.

Marc Edwards đã có một câu trả lời tuyệt vời về kích thước của các biểu tượng cần được tạo, việc sử dụng các lát cắt để làm như vậy và liên kết tốt đến các tài nguyên Photoshop để thực hiện điều này. Tuy nhiên, tôi vẫn đang tìm kiếm một giải pháp cho cách xuất ở nhiều kích cỡ trong Affinity Designer cụ thể.

Cuối cùng, tôi nhận ra rằng điều này sẽ có thể sử dụng công cụ Place Image. Tạo biểu tượng của bạn trong một tệp và sau đó trong tệp "mẫu" khác, bạn có thể sử dụng công cụ Place Image để tạo nhiều lớp kéo vào tệp biểu tượng của mình. Mỗi lớp có thể được biến thành một lát có tên.

Nhược điểm ở đây là mỗi lớp cần được tạo và trỏ vào tệp biểu tượng của bạn, do đó có vẻ như nó sẽ tẻ nhạt. Tuy nhiên, khi đã có, sau khi có bất kỳ chỉnh sửa nào đối với tệp cơ sở của bạn, bạn có thể dễ dàng xuất lại mọi thứ.