|
GBIT.Các nguyên tắc thiết kế biểu tượng (symbol or icon) hiệu quả
Nếu bạn muốn tạo ra thiết kế biểu tượng hiệu quả thì bạn nên có một cách tiếp cận toàn diện các vấn đề như đối tượng thưởng thức, kích thước, tính đơn giản, ánh sáng, phối cảnh và phong cách. Bài viết này cung cấp cho bạn một khởi điểm đầu tốt đẹp cho việc tạo ra các biểu tượng hài hòa với nhau và phù hợp một cách liền mạch trong thiết kế của bạn.
1. Tiếp cận thiết kế biểu tượng một cách tổng thể
Cho dù chúng được thiết kế cho các ứng dụng máy tính để bàn hoặc những trang web, biểu tượng là một trong nhiều yếu tố đồ họa cần phải hài hòa với nhau. Bạn hãy áp dụng logic này trên các bộ tập hợp biểu tượng. Biểu tượng có thể được đánh giá cao vì các giải pháp thẩm mỹ mang tính cá thể, nhưng chúng không hoạt động một mình.
Hãy đánh giá các thiết kế biểu tượng của bạn tham chiếu đến hệ thống đồ họa mà bạn đang sử dụng chúng trong đó. Hãy chắc chắn rằng mỗi biểu tượng khác những biểu tượng xung quanh nó, trong khi vẫn hoạt động cùng nhau như một tổng thể.
Trong bài viết “Thiết kế một ngôn ngữ mang tính biểu tượng” trên trang Turbo Milk tác giả Yegor Gilyov có phát biểu thế này: “Nếu bạn phải vẽ nhiều biểu tượng, bạn cần phải suy nghĩ về các hình ảnh cho toàn bộ tập hợp các biểu tượng trước khi tiếp tục công việc với các hoạt động vẽ minh họa” Đây là một trong hai điểm chính trong bài viết này về vấn đề thiết kế biểu tượng.
Ông tiếp tục giải thích thế nào là sự thất bại trong việc lên kế hoạch và cách thức toàn bộ tập hợp các biểu tượng sẽ hoạt động cùng nhau ngay từ đầu sẽ chắc chắn dẫn tới một sự lãng phí lớn về thời gian, bởi vì thiết kế lại sẽ là điều không thể tránh khỏi.
2. Hãy cân nhắc đối tượng người xem của bạn là ai
Bạn sẽ có những cân nhắc khác nhau nếu bạn đang thiết kế mạng nội bộ cho một công ty nhỏ thay vì sản phẩm có thể sau đó được đem bán trên thị trường quốc tế. Khi bạn tạo tác các biểu tượng thì những cân nhắc về mặt văn hóa là rất quan trọng.
Biểu tượng có thể khác hẳn so với những yếu tố thông thường mà bạn sử dụng cho thiết kế của mình. Turbo Milk có một bài viết tuyệt vời với tựa đề là “10 sai lầm trong thiết kế biểu tượng”. Trong đó, họ chỉ ra một số ví dụ rõ ràng mà ở đó nhiều thiết kế biểu tượng đã mắc sai lầm. Họ thảo luận về đặc điểm quốc gia và xã hội tại điểm bảy của bài viết: “Sẽ luôn luôn là điều cần thiết để ta cân nhắc các điều kiện mà ở đó biểu tượng của bạn sẽ được sử dụng.
Một khía cạnh quan trọng ở đây chính là các đặc tính quốc gia. Truyền thống văn hóa, môi trường xung quanh và cử chỉ có thể hoàn toàn khác nhau từ quốc gia này sang quốc gia khác.” Họ tiếp tục đưa ra một ví dụ về việc các thùng thư tín ở các quốc gia lại có sự khác biệt lớn đến như vậy. Apple sử dụng cùng một ví dụ trong Hướng dẫn Giao diện Nhân bản (Human Interface Guidelines) của công ty này.
Vậy thì thiết kế một biểu tượng quốc tế dựa trên thiết kế của một hộp thư nông thôn của một quốc gia nào đó là một ý tưởng tệ hại - ví dụ cụ thể về những gì ta không nên làm. Họ chỉ ra cho chúng ta thấy bằng cách nào biểu tượng Mail của Apple được nhận biết dễ hơn dưới dạng những con tem có tính phổ quát văn hóa hơn.
3. Thiết kế theo đúng kích thước mà biểu tượng sẽ được sử dụng
Nếu bạn chọn vector và tạo biểu tượng trong phần mềm Illustrator, một sự cám dỗ vốn có đối với việc kéo giãn tỉ lệ của thiết kế, và cố gắng sử dụng nó ở bất kỳ kích thước nào. Đối với các biểu tượng thì điều này lại không ổn. Những gì trông có vẻ rất tốt ở kích thước 512px sẽ trông giống như một bóng lam mờ ở kích thước 16px. Biểu tượng nên có một thiết kế cơ sở được sử dụng như là một điểm khởi đầu, nhưng mỗi kích thước đầu ra cần phải có một thiết kế tối ưu hóa riêng cho nó.
Thiết kế biểu tượng không phải là một phương tiện truyền thông giải pháp có khả năng mở rộng tương ứng cho một thiết kế. Đây là một trong những lý do khiến Photoshop được xem là giải pháp tốt như các chương trình khác. Đối với các nhà thiết kế là những người tạo các biểu tượng trong Illustrator, họ vẫn còn để làm sạch chúng hơn trong Photoshop, hoặc nhảy qua một số vành đai vệ tinh để có được các biểu tượng chất lượng tốt ở kích thước nhỏ nhắn khi được kết xuất trực tiếp từ Illustrator. Vì vậy, không nên bám vào huyền thoại rằng thiết kế biểu tượng là một phương tiện truyền thông hoàn toàn dựa trên vector. Sau cùng chúng ta sẽ xuất ra đây các điểm ảnh.
Ngoài ra còn có các công cụ vector trong Photoshop và mặt nạ mà bạn có thể tận dụng lợi thế của sự đồng đẳng đó bằng khả năng mở rộng giữa các chương trình. Hãy cân nhắc việc sử dụng các đối tượng thông minh (Smart Objects). Bạn cũng có thể xem xét sử dụng một add-on của Photoshop có tên gọi là Icon Builder.
Cách tiếp cận dành cho biểu tượng nhỏ và biểu tượng lớn khác nhau vô cùng. Firewheel có một bài viết hay đề cập đến chủ đề co giãn kích thước có tiêu đề là “Thiết kế Biểu tượng: Bitmap so với Vector (Icon Design: Bitmap vs Vector”. Bài viết bao gồm một số vấn đề tồn tại cố hữu đối với các biểu tượng thiết kế và các kích thước nhỏ.
4. Giữ cho các biểu tượng thật đơn giản và đầy tính biểu tượng
Giờ đây, với những hệ điều hành có các biểu tượng co giãn thành các kích thước lớn (512px X 512px quá khổng lồ cho một biểu tượng), sự cám dỗ bùng phát nhằm minh họa cho các thiết kế biểu tượng của bạn. Trong khi một mức độ nào đó của chủ nghĩa hiện thực sẽ có thể gia tăng sự chú ý đến một thiết kế biểu tượng thì nó vẫn không nên thay thế khả năng của mình để hoạt động một cách thật đơn giản và hiệu quả.
Smashing Magazine có một bản tóm tắt tuyệt vời về Các hướng dẫn giao diện nhân bản của hãng Apple trong thiết kế biểu tượng. Phần viết về Chủ nghĩa hiện thực trong Aqua đã tạo nên một số quan điểm hay về những hạn chế của chủ nghĩa hiện thực trong thiết kế biểu tượng và chỉ ra khi nào thì Chủ nghĩa biểu tượng trở nên cần thiết. Phần này bàn về các vấn đề mâu thuẫn giữa Chủ nghĩa hiện thực và tính đơn giản trong thiết kế biểu tượng.
Hãy cố gắng không phức tạp hóa một cách thái quá và thận trọng với việc đặt quá nhiều tiểu tiết hoặc minh họa thái quá một biểu tượng. Tôi chắc chắn rằng tất cả mọi người đều quen thuộc với hình tượng phổ biến dành cho các biểu tượng RSS. Các biểu tượng bao quanh những hình minh họa trong khi vẫn duy trì phẩm chất mang tính tượng trưng mạnh mẽ của chúng. Minh họa và trưng diện quá mức lên biểu tượng sẽ gây hậu quả làm giảm sự nhận biết, đặc biệt là ở các kích cỡ nhỏ. Vì vậy, hãy cẩn thận với việc đưa qua nhiều chi tiết vào một thiết kế biểu tượng.
Nhiều khi sự quan tâm về mặt thẩm mỹ của biểu tượng có thể cũng đáng để ta hi sinh một số tác động mang tính biểu trưng của nó. Điều này luôn là một lời kêu gọi sự phán xét, và nhu cầu sẽ thay đổi theo từng thiết kế khác nhau. Bạn hãy so sánh một trong những bộ biểu tượng dưới đây với một thiết kế biểu tượng RSS đơn giản, giống như cái này trên Psdtuts +. Có một động thái cân bằng với việc đem các biểu tượng vào phong cách thiết kế trang web của bạn. Bạn muốn gia tăng sự quan tâm và lời khen ngợi dành cho thiết kế của mình, nhưng cũng không muốn mất đi sự tác động mang tính biểu trưng của biểu tượng.
Các biểu tượng dưới đây trông thực sự thú vị. Mặc dù vậy nó đòi hỏi một sự phán xét xem liệu sự thất thoát của khả năng nhận biết nhanh chóng của biểu trưng có đáng để ta thêm thiết kế xung quanh biểu trưng này. Ở một kích thước lớn, điều đó ổn, bởi vì chức năng của chúng tương tự như các hình minh họa. Ở kích thước nhỏ hơn, một giải pháp ít phô trương có thể được ưa thích hơn.
5. Kiếm tìm ánh sáng, phản quang và bóng đổ bất biến
Điều quan trọng là toàn bộ chủ nghĩa hiện thực mà bạn thêm vào các thiết kế của mình phải thể hiện chức năng của nó một cách mạch lạc. Nếu bạn sử dụng một nguồn ánh sáng đến từ một hướng thì bạn phải bám sát theo nó. Nếu không bạn có nguy cơ đánh mất thiết kế tích hợp cho các biểu tượng của mình. Bạn cũng nên cân nhắc nguồn ánh sáng của thiết kế mà các biểu tượng sẽ được đặt vào. Nếu nguồn ánh sáng của chúng trái ngược với trang web hay thiết kế ứng dụng mà bạn đang đặt chúng vào thì thiết kế của bạn sẽ bộc lộ tính nghiệp dư.
Trong cuốn Hướng dẫn kinh nghiệm người dùng Windows Vista có một phần viết về ánh sáng và bóng đổ của biểu tượng. Sách hướng dẫn này cung cấp cho ta các quy tắc thực sự cụ thể dành cho bộ tập hợp biểu tượng của Vista. Cuốn sách đưa ra nhiều hơn các tiêu chuẩn về tính chính xác dành cho các nhà thiết kế biểu tượng và đảm bảo một hệ thống biểu tượng thống nhất. Sau đây là một quy tắc cụ thể được xem như một ví dụ: “Hãy sử dụng bóng đổ để nâng các đối tượng trực quan khỏi phần nền background và khiến các đối tượng 3D xuất hiện gắn chặt với nền tảng chứ không trôi nổi một cách lúng túng trong không gian.” Còn nhiều quy tắc hơn nữa trong cuốn hướng dẫn này.
6. Sử dụng một phối cảnh có giới hạn
Phạm vi của phối cảnh trong tập hợp thiết kế biểu tượng của bạn nên đồng nhất với nhau. Nếu bạn có các biểu tượng được nhìn trực diện thì phải theo sát với điều đó. Nếu bạn đặt biểu tượng ở một góc độ cụ thể thì hãy chắc chắn rằng tất cả các biểu tượng đều theo cách đó. Hãy tưởng tượng một máy ảnh được đặt từ một điểm lợi cụ thể và chĩa vào tất cả các đối tượng từ phối cảnh tương tự. Điều này giúp duy trì tính nhất quán trong thiết kế biểu tượng của bạn.
Hệ thống thiết kế có quy mô lớn, một cái gì đó giống như hệ điều hành, có thể cần sự linh hoạt hơn. Apple cũng có đề cập về Phối cảnh cho biểu tượng trong cuốn “Hướng dẫn giao diện nhân bản” của mình. Họ đã có phương pháp sử dụng linh hoạt hơn dành cho phối cảnh. “Ta đạt được những phối cảnh khác nhau bằng cách thay đổi vị trí của một máy ảnh tưởng tượng đang chụp hình biểu tượng” hình ảnh dưới đây cho thấy sự khác biệt trong quan điểm giữa một biểu tượng ứng dụng Application Icon (trên) và một biểu tượng thanh công cụ Tool Bar (dưới).
7. Tạo các phong cách bất biến cho bộ biểu tượng
Ánh sáng và phối cảnh chắc chắn có đóng góp cho phong cách của một biểu tượng, mặc dù có nhiều yếu tố khác nữa có thể đóng góp cho phong cách. Nếu bạn đang cố gắng để làm cho biểu tượng của bạn phù hợp trong một trang web thiết kế theo phong cách bụi bặm (grunge), có thể bạn sẽ bổ sung thêm kết cấu cho phong cách của thiết kế biểu tượng này.
Các bộ biểu tượng có những tính năng độc đáo là thứ khiến cho chúng trở nên nổi trội. Trong cuốn Hướng dẫn Biểu tượng Echo bộ biểu tượng này được mô tả như “một tập hợp mới của các biểu tượng được kiến nghị đưa vào Fedora. Được thiết kế với một viễn cảnh năng động, biểu tượng Echo nhắm vào mục đích xuất hiện một cách thực hơn trong khi vẫn duy trì thiết kế sạch sẽ và đơn giản bằng cách sử dụng độ tương phản cao và các điểm màu sắc rực rỡ.” Trên phương diện khác khiến bộ biểu tượng này nổi trội đó chính là thông qua việc kiên định sử dụng các outline. Xem hình ảnh dưới đây như là một ví dụ.
8. Hãy bắt đầu với thiết kế biểu tượng
Thiết kế biểu tượng cho các trang web là một cách tốt để bắt đầu với công việc thiết kế biểu tượng. Thông thường chỉ có một số biểu tượng cần thiết cho một thiết kế trang web. Bắt đầu một cách đơn giản với một dự án Web thiết kế trang web nho nhỏ, nơi bạn được yêu cầu để thiết kế chỉ một số ít các biểu tượng hoặc ít hơn. Đây là cách rất tốt để đạt được một số kinh nghiệm trong công việc thiết kế biểu tượng.
Hãy bắt quá trình thiết kế biểu tượng bằng việt nghiên cứu. Xem xét các phép ẩn dụ biểu tượng phổ biến đang được sử dụng để mô tả các biểu tượng mà bạn đang tìm kiếm để tạo tác. Hãy vẽ phác thảo càng nhiều càng tốt như là sự cần thiết để ghi lại ý tưởng. Xem xét phong cách của các thiết kế biểu tượng so với thiết kế trang web mà bạn sẽ sử dụng chúng trên đó.
Hãy xem xét màu, phối cảnh, và dáng vẻ đồ họa của trang web. Hicks design có một bài thuyết trình nhanh về thiết kế biểu tượng. Một phần của bài trình bày này bao gồm quá trình thiết kế của mình. Nó cung cấp cho ta một số ví dụ bằng hình ảnh rất tuyệt vời. Dưới đây là một ví dụ về bước vẽ phác thảo.
9. Các bộ biểu tượng chuyên nghiệp đầy cảm hứng
Một khi bạn đã tạo ra một bộ biểu tượng nhỏ cho các trang web, bạn có thể xem xét đến việc tạo các biểu tượng ứng dụng. Bán các biểu tượng có thể là một nỗ lực đem lại lợi nhuận cho một nhà thiết kế. Dưới đây là hai bộ biểu tượng chuyên nghiệp được thiết kế từ “những người đóng vai trò như những nguồn cảm hứng tuyệt vời”.
Bộ biểu tượng Classic Pack từ Icon Drawer
Bộ biểu tượng này có một sự kết hợp của: tính chuyên nghiệp, sự lựa chọn tuyệt vời các biểu tượng, chủ nghĩa hiện thực hoạt hình và phong cách thiết kế vui nhộn. Khi Jesse Bennett-Chamberlain của 31three sử dụng các biểu tượng cho bản tái thiết kế của Expression Engine, tôi đã bị chinh phục. Đó là một thiết kế trang web tuyệt vời, và các biểu tượng cực kỳ phù hợp với phong cách của trang.
Gia đình biểu tượng Chalkwork từ Mezzoblue
"Chalkwork là một tập hợp thống nhất về mặt thị giác các biểu tượng bản quyền miễn phí được thiết kế rất cẩn thận. Nó được xây dựng bao gồm một số các nhu cầu biểu tượng phổ biến nhất của web và các nhà thiết kế phần mềm, toàn bộ họ biểu tượng Chalkwork cung cấp cho ta hàng trăm các phép ẩn dụ liên quan đến máy tính và internet với một phong cách thị giác bất kiên định có 3 kích cỡ khác nhau trong 6 định dạng tập tin. Đây là một bộ biểu tượng được thiết kế hoàn hảo của Dave Shea.
10. Các chỉ dẫn biểu tượng Psdtuts+
Hãy chuyển dòng chỉ dẫn (headfirst) vào biểu tượng thiết kế. Bạn có thể bắt đầu với một vài dự án ở đây trên Psdtuts + để bắt đầu nhập cuộc. Chúng tôi đã xuất bản một phần hướng dẫn PLUS của tác giả Fabio về vấn đề thiết kế biểu tượng trước bài viết có nhan đề là New Plus Tutorial—Create a “Time Machine” like Icon.
Một khoảng thời gian trước đây Fabio cũng đã xuất bản một bài hướng dẫn được gọi là Handy Web 2.0 Icons In Photoshop. Vaclav đã xuất bản một vài hướng dẫn tuyệt vời ở trang này về vấn đề thiết kế biểu tượng có tựa dề lài là Illustrate a Traffic Cone Icon in Photoshop và Creating a Cool Yellow Helmet Icon. Nếu chúng ta đi ngược trở lại, bạn có thể xem qua bài hướng dẫn của tác giả Collis có nhan đề là Making a Photoshop Shield. Đây là tất cả những địa chỉ tuyệt vời để bắt đầu hoặc để luyện tập thiết kế biểu tượng.
Kết luận
Bạn hãy vui mừng lên nào khi mà dự án của khách hàng kế tiếp yêu cầu bạn phải tạo ra các biểu tượng. Hoặc bạn hãy tập tạo chúng thông qua các hướng dẫn ở trên. Một khi bạn đã nắm vững những kỹ thuật này, hãy thử thực hiện một tập hợp nhỏ các biểu tượng. Hoặc bước mạnh dạn về phía trước và tạo ra một bộ biểu tượng đầy đủ để bán lại cho người ta.
 CÁC TIN
LIÊN QUAN
|