Làm cách nào để thay đổi kích thước bộ biểu tượng trong Photoshop?

Khi tìm kiếm trực tuyến các biểu tượng để sử dụng trên các trang web của mình, tôi thường tìm thấy các bộ biểu tượng miễn phí được thiết kế rất tốt.

Tuy nhiên, thường thì các bộ biểu tượng này chỉ có sẵn trên một kích thước duy nhất - ví dụ: bộ biểu tượng http://designdeck.co.uk/a/1245 ) chỉ có kích thước 48x48px.

Điều gì sẽ là cách tiếp cận tốt nhất để thay đổi kích thước biểu tượng này được đặt thành 24x24px hoặc 32x32px trong Photoshop?

Tôi chưa thể tìm thấy bất kỳ hướng dẫn tốt cho người mới trực tuyến. Cảm ơn

Bộ đặc biệt này bao gồm các hình dạng và văn bản, vì vậy thay đổi kích thước sẽ không ảnh hưởng đến chất lượng, nhưng bạn không thể thu nhỏ các biểu tượng này. Một biểu tượng là một loại đồ họa thông tin đặc biệt. Mục đích của nó là truyền đạt thông tin dễ nhận biết ở bất kỳ kích thước nào, vì vậy bước đầu tiên của bạn, trước khi bạn bắt đầu nhân rộng bất cứ thứ gì, là xác định phần nào của biểu tượng mang thông tin. Chúng phải còn rõ ràng, phần còn lại là dùng một lần.

Trong trường hợp này, hình dạng vòng tròn không mang bất kỳ thông tin nào, nhưng trong một số trường hợp, màu sắc của chúng có, vì vậy bạn không thể loại bỏ chúng. Bạn có thể mở rộng chúng một cách tự do, mặc dù. Các yếu tố đồ họa trong vòng tròn mang thông tin quan trọng, vì vậy bạn phải xử lý chúng cẩn thận hơn.

Dưới đây là cách chia tỷ lệ bộ này từ 48 px đến 24 px, hoạt động từ PSD:

• Mở lớp thiết lập cho một trong các biểu tượng. Hãy chọn biểu tượng Google+.

• Chọn vòng tròn và chọn Edit > Transform > Scale. Đảm bảo rằng điểm trung tâm trong proxy điều khiển Biến đổi được chọn và chuyển đổi liên kết giữa các trường W và H để tỷ lệ của bạn tỷ lệ thuận.

• Nhập 50 vào trường W hoặc H và nhấn Enter / Return.

Tại thời điểm này, vòng tròn của bạn có đường kính 24 px, nhưng "g" và "+" quá lớn.

• Chọn cả lớp hình dạng "g" và lớp văn bản "+" và chọn Edit > Transform > Scalenhư trước, nhưng lần này, nhập 80 vào trường W hoặc H và nhấn Enter / Return.

• Nhích các lớp "g +" để căn giữa chúng trong vòng tròn.

Biểu tượng rút gọn này vẫn truyền tải cùng một thông tin rõ ràng, nhưng là kích thước bạn cần và sẽ phù hợp với phần còn lại của tập hợp khi bạn đã thu nhỏ chúng.

Đối xử với phần còn lại của các biểu tượng tương tự. Các vòng tròn xác định ranh giới, vì vậy tất cả chúng đều được chia tỷ lệ 50%. Số lượng bạn chia tỷ lệ cho mỗi đồ họa sẽ khác nhau (biểu tượng Skype hoạt động tốt hơn ở mức 75% so với 80%), vì vậy bạn sẽ phải thử nghiệm một chút. Kinh nghiệm sẽ dạy bạn khi bạn đi.

Kích thước khác nhau sẽ cần tỷ lệ khác nhau và số lượng tỷ lệ thích hợp. Điều quan trọng là phân biệt đâu là thông tin và trang trí là gì. Bạn có thể mở rộng quy mô hoặc vứt bỏ trang trí; bạn phải giữ thông tin rõ ràng

"Biểu tượng" tượng trưng và các biểu tượng có nhiều chi tiết không thể đơn giản được thu nhỏ. Chúng phải được đơn giản hóa khi giảm kích thước để thông tin vẫn rõ ràng, do đó bạn phải tạo một biểu tượng khác cho kích thước nhỏ hơn. Nguyên tắc tương tự được tuân theo trong việc thiết kế logo - những gì hoạt động tốt trên poster có thể cần được đơn giản hóa rất nhiều cho danh thiếp - và trong thiết kế kiểu.

Câu trả lời áp dụng cho cả vector và biểu tượng rasterized.

Nếu vấn đề chất lượng, bạn không thể.

• Biểu tượng lớn chứa nhiều chi tiết hơn. Những chi tiết đó, đẹp trên biểu tượng 128 × 128, sẽ gây nhiễu cho biểu tượng 32 × 32; thay vì giúp trực quan xác định biểu tượng, họ sẽ làm ngược lại. Ví dụ: một biểu tượng lớn của bàn phím có thể chứa mọi phím của bàn phím. Đối với biểu tượng 16 × 16, bốn phím là đủ: hoặc bạn vẽ bốn và người dùng hiểu rằng đó là các phím hoặc bạn vẽ nhiều hơn và mọi thứ trở nên phẳng.

  Hãy thử xem điều gì sẽ xảy ra. Tôi lấy biểu tượng bàn phím xuất sắc được sử dụng trong Windows 7:

  

  Bây giờ, hãy so sánh, cạnh nhau, biểu tượng thu nhỏ ở bên trái và biểu tượng tôi đã thay đổi kích thước trong Photoshop từ biểu tượng lớn hơn:

  

  Cái bên trái khá rõ ràng. Ở bên phải, tôi tin rằng đó là một chiếc máy có hình dạng kỳ lạ với màn hình lớn, hai nút ở phía dưới màn hình và một nút lớn ở phía dưới. Chúng ta hãy xem điều gì xảy ra khi chúng ta đi đến một quy mô nhỏ hơn:

  

  Biểu tượng bên trái, được Windows 7 sử dụng, khá rõ ràng, mặc dù độ phân giải thấp. Biểu tượng bên phải, phiên bản thay đổi kích thước của cái lớn, hoàn toàn vô nghĩa: nó có thể là một chiếc PDA, hoặc một hộp bạc hoặc bất cứ thứ gì khác. Trên thực tế trông giống như máy tính PF-19686592 đối với tôi.

Các yếu tố khác ngoài mức độ chi tiết đối tượng phải được tính đến:

• một cái bóng, chẳng hạn, rất đẹp khi có biểu tượng 64 × 64, nhưng cùng một cái bóng sẽ trông thật ngu ngốc trên hình đại diện 16 × 16.

• đối tượng có thể được xoay để ở trong phối cảnh khi biểu tượng lớn. Khi nó nhỏ, vẽ nó phẳng.

• số lượng đối tượng phải giảm khi kích thước giảm. Ví dụ, một biểu tượng lớn của notepad có thể có một notepad bằng bút chì. Trên một biểu tượng nhỏ hơn, không có nơi nào đủ để vẽ một cây bút chì theo cách nó không che được notepad và được công nhận là một cây bút chì cùng một lúc.

Những quy tắc này thực sự được tuân theo trong các biểu tượng Windows XP .

Điều này có nghĩa là nếu UX và chất lượng thiết kế có vấn đề, bạn không thể thu nhỏ biểu tượng và mong muốn nó rõ ràng như biểu tượng gốc. Xem xét biểu tượng mà bạn liên kết đến trong câu hỏi của mình, rõ ràng bạn không muốn giữ một vòng tròn quanh biểu tượng cho các biểu tượng 24 × 24: xóa vòng tròn và chỉ giữ lại nội dung.

Hãy xem điều gì xảy ra. Bức ảnh này:

trở thành:

Ở bên trái, tôi loại bỏ vòng tròn. Ở bên phải, tôi chỉ thu nhỏ hình ảnh gốc. Bạn có thể cho tôi biết những gì bạn nhìn thấy ở phía bên phải?

Nếu chất lượng không thành vấn đề, bạn chỉ cần thay đổi kích thước hình ảnh.

Để đạt được chất lượng tốt hơn, bạn vẫn có thể muốn:

• Giữ nguyên tỷ lệ (rõ ràng),

• Thay đổi kích thước bằng cách chia cho bội số của hai: từ 128 × 128, bạn có thể nhận được 32 × 32, nhưng việc tạo biểu tượng 41 × 41 có thể cho kết quả kỳ lạ,

• Hãy thử với các thuật toán thay đổi kích thước khác nhau. Tôi hy vọng lanczos hoạt động tốt hơn, nhưng có lẽ không phải cho mọi biểu tượng. Làm sắc nét cũng có thể làm tăng hoặc giảm chất lượng.

Tôi luôn thực hiện các biểu tượng của mình ở định dạng vector (sử dụng Illustrator) - theo cách đó tôi chỉ có thể xuất tác phẩm của mình ở bất kỳ kích thước mong muốn nào và bất kỳ định dạng mong muốn nào. Chà, không hoàn toàn đúng, vì tôi phải điều chỉnh các biểu tượng để căn chỉnh pixel. CS5 làm rất tốt, nhưng nó không bao gồm tất cả các vấn đề ...

Trong photoshop, vì bạn đang sử dụng pixel, nó sẽ cho bạn kết quả tốt nhất nếu bạn phát triển các biểu tượng của mình ở định dạng lớn nhất bạn sẽ cần, sau đó thu nhỏ nó. Bạn cũng nên sử dụng "mặt nạ unsharp" để làm cho hình ảnh thu nhỏ sắc nét hơn vì chúng mất độ sắc nét trong thuật toán thu nhỏ.