Quy trình làm việc tốt nhất cho thiết kế biểu tượng: Bắt đầu lớn hay bắt đầu nhỏ?

Khi thiết kế các biểu tượng cần được phân phối ở một số kích thước, bạn có bắt đầu ở kích thước nhỏ hơn, sau đó mở rộng lên kích thước lớn hơn không? Hay bạn bắt đầu lớn và giảm quy mô?

Có một số lợi thế cho cả hai. Tôi đang cố gắng tinh chỉnh quy trình làm việc của mình, vì vậy đầu vào từ người khác sẽ hữu ích. Giả sử chúng ta đang thiết kế một biểu tượng Mac hoặc Windows, trong đó các kích thước có liên quan - chúng chủ yếu là bội số chính xác.

Đối với OS X, kích thước biểu tượng ứng dụng tiêu chuẩn là:

• 16 × 16, 32 × 32, 128 × 128, 256 × 256, 512 × 512 và 1024 × 1024.

Đối với Windows 7, kích thước biểu tượng ứng dụng tiêu chuẩn là:

• 16x16, 32x32, 48x48, 64x64 và 256x256.

Đối với iOS, kích thước biểu tượng ứng dụng tiêu chuẩn là:

• 29x29, 48x48, 57x57, 58x58, 72x72, 96x96, 114x114, 144x144, 512x512 và 1024x1024.

Đối với Android, kích thước biểu tượng ứng dụng tiêu chuẩn là:

• 36x36, 48x48, 72x72, 96x96 và 512x512.

Đối với iOS và Android, kích thước biểu tượng hơi khó hiểu hơn một chút và tỷ lệ cũng không liên quan, do đó, việc thông minh về lưới thiết kế ít quan trọng hơn, bởi vì bạn ít có khả năng tìm tọa độ chạm ranh giới pixel cho nhiều kích thước.

Cách 1: Thu nhỏ lại

1. Thiết kế biểu tượng ở kích thước lớn nhất (thường là 1024 × 1024) bằng cách sử dụng vectơ và hiệu ứng được tạo, như kiểu lớp.

2. Sao chép và thu nhỏ tài liệu xuống để tạo kích thước nhỏ hơn.

3. Thực hiện bất kỳ chỉnh sửa cần thiết và lưu hình ảnh cuối cùng.

Điều đó thật tuyệt, nhưng bỏ lỡ cơ hội cho các yếu tố sắp xếp vào lưới hoạt động cho nhiều kích cỡ. Sử dụng một lưới thô để chụp có vẻ sẽ giúp một chút. Ví dụ: tài liệu 1024 × 1024 với lưới 16px có nghĩa là các điểm chụp sẽ cung cấp cho bạn các pixel được cắt cạnh xuống kích thước 64 × 64. Ý tưởng là thiết kế với chi tiết nhưng chụp vào các lưới có kích thước nhỏ hơn, vì vậy bạn nhấn vào các vị trí quan trọng đó.

Cách 2: Mở rộng quy mô

1. Thiết kế biểu tượng ở mức nhỏ nhất hoặc một trong các kích thước nhỏ nhất (thường là 32 × 32 hoặc 64 × 64) bằng cách sử dụng vectơ và hiệu ứng được tạo, như kiểu lớp. Thông thường không đủ chi tiết trong 16 × 16 để sử dụng nó làm điểm bắt đầu.

2. Sao chép và chia tỷ lệ tài liệu lên để tạo kích thước lớn hơn và xuống cho kích thước nhỏ.

3. Thực hiện bất kỳ chỉnh sửa cần thiết và lưu hình ảnh cuối cùng.

Điều này có xu hướng dẫn đến các biểu tượng đơn giản không có nhiều chi tiết, vì vậy tôi không thích làm việc như thế này.

Cách 3: Thu nhỏ lên rồi xuống

1. Tạo một thiết kế thô với kích thước nhỏ hơn (thường là 32 × 32 hoặc 64 × 64) bằng cách sử dụng vectơ và hiệu ứng được tạo, như kiểu lớp.

2. Quy mô tài liệu lên đến kích thước lớn nhất và thêm chi tiết. Đây là điểm mà biểu tượng được đánh bóng và hầu hết các chi tiết được thêm vào.

3. Sao y và thu nhỏ tài liệu xuống cho tất cả các kích cỡ nhỏ hơn.

4. Thực hiện bất kỳ chỉnh sửa cần thiết và lưu hình ảnh cuối cùng.

Đây dường như là phương pháp tốt nhất, với những ưu và nhược điểm của các phương pháp khác. Là một điểm hơi liên quan, điều đó cũng có nghĩa là tôi thường thiết kế các biểu tượng iOS ở mức 912 × 912, vì đó chính xác gấp 16 lần kích thước biểu tượng không phải Retina của iPhone là 57 × 57.

Có một phương pháp tốt hơn để thiết kế các biểu tượng cần được phân phối ở nhiều kích cỡ không?

Mục tiêu là để đạt được kết quả tốt nhất có thể, với ít nỗ lực nhất.

Một điều chỉnh nhỏ cho các giả định của bạn: Mặc dù Windows và Mac sử dụng bội số của 16, nhưng chúng không có tỷ lệ như nhau. Kích thước chuẩn của Vista / 7 là 16 ² , 32 ² , 48 ² , 256 ² . OS X là 16 ² , 32 ² , 128 ² , 512 ² (+ phiên bản HiDPI). Để làm phức tạp thêm mọi thứ, các mức thu phóng mặc định của Windows Vista / 7 dường như là 16 ² , 48 ² , 96 ² , 256 ² và sẽ hạnh phúc chia tỷ lệ theo mức tăng nhỏ tới 2px. Điều này sẽ không tạo ra sự khác biệt lớn cho quy trình làm việc của bạn ngoại trừ việc nó không cần phải quan tâm đến các lưới pixel cụ thể ở tất cả các mức thu phóng.

Quy trình làm việc của tôi khác với công việc của tôi ở chỗ tôi không thực hiện thay đổi kích thước rất nhiều. Một hình ảnh mới được tạo cho từng cấp kích thước và tôi không cố tái chế chính xác bố cục.

Kích thước mà tôi bắt đầu được xác định bởi nền tảng. Nếu thiết kế cho Windows, tôi bắt đầu ở 48x48. (Tôi không có bất kỳ cơ sở khoa học nào cho việc này, nhưng mức thu phóng mặc định của Windows 7 là "Trung bình" là 48x48. Các biểu tượng Vista, OS X, iPhone, iPad và Android cũng đủ gần với kích thước này để thuận tiện và Thoải mái.)

Biểu tượng hoàn thành đầy đủ được thực hiện ở kích thước này và là tài liệu tham khảo cho các biểu tượng khác trong gia đình. Nếu làm một ứng dụng dành cho máy tính để bàn, tôi sẽ tạo các phiên bản khác ở 16x, 96x và 256x để phù hợp với các mức mặc định của Windows (trừ khi nó dành cho Mac, một cách tự nhiên). 96x thường rất giống với 48x.

Phiên bản 256x sẽ là một sáng tạo hoàn toàn mới. Nhiều chi tiết hơn (ngay cả khi đó là những thứ nhỏ như kết cấu nền). Tất cả các chi tiết mà tôi không thể phù hợp trong các phiên bản nhỏ hơn được thêm vào. Nếu ai đó có màn hình của họ quay số cho các biểu tượng khổng lồ, họ sẽ hài lòng với những gì họ nhìn thấy.

Phiên bản 16x cũng là một sáng tạo mới. Rất ít chi tiết. Xác định logo hoặc biểu tượng rất đơn giản với bảng màu giống như các phiên bản lớn hơn. Với kích thước này, tôi không cố làm cho mọi thứ trở nên đẹp đẽ - ngay lập tức có thể nhận ra.

Vì vậy, đối với tôi ít nhất, đó không phải là vấn đề tăng hoặc giảm với hy vọng có một hình ảnh giống hệt nhau hoặc sử dụng cùng một bố cục cơ sở ở mọi kích cỡ. Tôi nghĩ về nó giống như lái xe vào một thành phố - ở đằng xa, nó chỉ là một đường chân trời nhỏ xíu nhưng có thể nhận dạng được. Bạn đến gần hơn và bắt đầu chọn ra các tòa nhà. Sau đó, bạn đang ở trong đó và cảm nhận tất cả các chi tiết và kích thước. Từ mỗi khoảng cách có vẻ khác nhau, nhưng có một sự chuyển đổi suôn sẻ từ kích thước sang kích thước để cả gia đình không bao giờ cảm thấy rời rạc.

Chắc chắn bắt đầu lớn và quy mô xuống. Bất cứ khi nào tôi có các nhà thiết kế biểu tượng thiết kế cho phần mềm của mình, tôi muốn xem biểu tượng đó sẽ trông như thế nào ở kích thước lớn hơn và sau đó tôi có thể quyết định những tính năng nào cần xóa hoặc nhấn mạnh ở kích thước nhỏ hơn. Bạn cần biết những gì trong biểu tượng trước khi bạn loại bỏ các yếu tố nhỏ. biểu tượng glyfx có một số ví dụ hay về cách diễn giải các biểu tượng lớn và nhỏ của cùng một thiết kế.

Chà, tôi thích làm mọi thứ cho mật độ nhỏ nhất và tăng nó lên. Nếu bạn đang thiết kế toàn bộ bố cục cho một ứng dụng, công việc với lưới sẽ dễ dàng hơn nhiều và nó giúp bạn tiết kiệm rất nhiều vấn đề đau đầu, bởi vì bạn đang di chuyển các đối tượng trong một lưới nhỏ hơn.

Vì vậy, quy trình làm việc của tôi trông giống như: 1. Tôi tạo bố cục theo tỷ lệ dpi nhỏ nhất trong Photoshop và tiếp tục tạo các biểu tượng trong Illustrator, vì hình ảnh vector không có vấn đề gì khi tăng tỷ lệ. 2. Khi tôi tạo từng biểu tượng / đối tượng, v.v. Tôi tạo tất cả các phiên bản được thu nhỏ cùng một lúc (khi tôi quyết định nó trông có vẻ tốt trong cách bố trí) và trao các pngs cuối cùng cho lập trình viên.

Tôi phải lưu ý rằng tôi đã bắt đầu với iOS trước.