Icon cùng thị trường cung ứng vector như Iconfindertạo ra những icon dạng vector đẹp mắt và có mức giá cũng dễ dàng chịu, cân xứng với số đông người thiết kế web cùng graphic.

Bạn đang xem: 7 nguyên tắc siêu đơn giản để thiết kế bộ icon ấn tượng

Bài viết này dàn xếp về các hướng dẫn dành riêng cho một bộ icons với sáu bước. Những cách tuân theo những kiến tạo icon cơ bản, bao hàm sự tuyệt nhất quán, rõ ràng, dễ nhận biết. Các yếu tố cơ phiên bản của thi công hiệu qủa được điều đình trong cuốn sách The Icon Handbook của John Hicks, tương tự như hướng dẫn thệ thống icon của Google.

Sáu cách được nêu ra trong bài này cần được xem như là một hướng dẫn, chứ chưa phải quy quy định bắt buộc. Một trong những phần của vấn đề trở thành nhà thiết kế tốt đó là học hỏi nhằm phá vỡ những quy chế độ khi đi làm việc theo chúng, như thứ bọn họ sẽ chứng minh ở đây.

Trong ví dụ của những hình hình ảnh dưới trên đây trong bài xích viết, sau cách được nêu đang áp dụng để triển khai mới một biểu tượng chú chó (loài Corgi) được đưa lên bởi người sử dụng tên là Kem Bardly. Biểu tượng rất gồm tiềm năng nhưng lại nó thiếu một chút ít để được reviews “chất lượng cao cấp”.

Chúng tôi đã cung cấp cho Kem một trong những mẹo nhỏ dại để có tác dụng theo, và chỉ cần tinh chỉnh thêm tí đỉnh thì bộ icon của anh ấy ấy sẽ trở đề nghị cao cấp. Hình hình ảnh dưới đấy là phiên bản biểu tượng trước cùng sau của Kem. Trong những phần dưới, cửa hàng chúng tôi sẽ giải thích cách sử dụng triết lý để đi trường đoản cú bản ban sơ tới sau này.

*

Lưu ý rằng trả lời trong bài này nhằm sử dụng biểu tượng web, chúng nhìn chung cũng có thể có thể cân xứng với hình tượng in ấn. Nếu khách hàng làm về in thì rất có thể bỏ qua số đông phần về pixel-hoàn hảo.

Ba nguyên tố của xây đắp icon hiệu quả

Icon có phong cách thiết kế thể hiện do một giải pháp tiếp cận cơ bản bằng ba thành phần chủ yếu giúp chế tạo ra nên bất cứ icon nào: hình dáng, thẩm mỹ và năng lực nhận biết.

Khi xây đắp một cỗ cion, cân nhắc các thành bên trong một giải pháp tiếp cận tương tác, ban đầu với hình dáng chung thông thường và tiến tới những đặc điểm riêng. Thậm chí nếu khách hàng tạo ra một icon đơn lẻ, ba thành phần này vẫn được dùng.

Không ngờ vực gì, nhiều hơn ba thành phần tạo thành một icon hiệu quả, nhưng bố thành phần kết hợp lúc đầu đủ nhằm khởi rượu cồn công việc.

 1. Dáng vẻ – Form

Hình dáng là một cấu trúc cơ bản của một biểu tượng, hay cách nó được tạo ra. Nếu khách hàng bỏ đi các chi tiết của một biểu tượng và vẽ một nét xung quanh ngoài mặt chính, chúng tạo ra một hình vuông, một vòng trọn, một hình chữ nhật ngang hoặc đứng, một hình tam giác hay là một hình dạng bất kỳ? phần nhiều hình những thiết kế học học tập cơ bạn dạng – vuông, tròn và tam giác – tạo nên một hình dạng thẩm mỹ cho xây cất biểu tượng.

Trong ví dụ như về biểu tượng Corgi của Kem Bardly, đầu của chú chó được tạo thành bởi 2 hình tam giác với hai hình ellip. Như thể nó được bắt đầu bằng câu hỏi phác ra mọi thứ béo nhất, làm nên giản cá biệt và tiếp nối tinh chỉnh những chi tiết, một thứ bắt đầu băng đơn giản rồi thêm các cụ thể khác – dẫu vậy chỉ với các chi tiết cần thiết để truyền tải phát minh thành hiện thực, từ 1 đối tượng, một ý tưởng hay như là 1 hành động.

*

2. Thống tuyệt nhất thẩm mỹ

Những nhân tố được share trong một icon hiếm hoi và trong suốt một cỗ icon là đông đảo gì bọn họ gọi là Thống nhất thẩm mỹ và làm đẹp (Aesthetic Unity). Hầu hết yếu tố chính là hững máy như những góc bo hoặc góc vuông, những size của góc (2px, 4px…), sự giới hạn và độ đậm thống nhất của nét, phong thái (phẳng, nét, đổ bóng…), bảng màu và gần như thứ khác.

Sự thống nhất thẩm mỹ và làm đẹp của một cỗ icon là một trong danh sách những yếu tố mà các bạn sẽ lặp đi tái diễn trong xuyên suốt bộ thi công để làm ngặt nghèo hình ảnh tạo sự thống nhất của tất cả bộ. Trong ví dụ như dưới bạn sẽ thấy bố chú chó của Kem bao hàm điểm chung, như 2 px góc bo, đường nét 2px…

*

3. Tính dấn biết

Tính nhận ra là vẻ lôi cuốn của một icon hay 1 sản phẩm hay thiết bị gì khiến cho icon độc đáo. Liệu một icon có hiệu quả, giao hàng việc tín đồ xem nhận biết nó dễ dàng ra sao. Tính thừa nhận biết bao gồm việc chỉ ra những điểm lưu ý phổ biến tương quan tới ý tưởng, tuy thế nó cũng có thể gồm đa số yếu tố lạ mắt và bất ngờ, như hình dáng trái tim thay vày hình mũi trên chú chó.

Nhớ rằng hầu như sự nhận biết đó không chỉ là sự gọi biết về đối tượng, ý tưởng phát minh hay hành vi được tế bào tả, ngoài ra được nhận thấy bởi sự lạ mắt trong icon của bạn. Trong hình hình ảnh ở dưới, shop chúng tôi nhận ra được sự khác biệt của hai loại chó, Corgi cùng Husky vì color của chúng, dáng vẻ đầu, tai, tuy vậy họ vẫn thấy nó chia sẻ những thứ chung và cùng cách thiết kế.

*

Như vậy là chúng ta đã thấy điều gì họ cân kể với tía thành phần để có phong cách thiết kế hiệu quả. Trong phần tiếp, chúng ta sẽ nhìn sâu rộng vào sáu cách để chỉ ra số đông gì tương quan với tía thành phần trên.

Sáu bước

1. Thường xuyên bắt đầu với lưới

Lợi ích tốt nhất của lưới đã làm được nhắc tới trong vô số bài viết. Trong bài viết này chúng ta sẽ dùng lưới 32x32px. Lưới của bọn họ chứa một vài hướng dẫn chung nhằm mục tiêu giúp tạo ra một hình dạng bên dưới mỗi xây cất icon.

*

Vùng 2px mang tên là “No go zone – Không chạm tới” dùng làm tránh bài toán đặt mọi gì của icon vào khu vực này trừ rất nhiều trường hợp cực kì đặc biệt. Việc tạo ra vùng này nhằm mục đích để biểu tượng có không khí thở.

Phần kiểu dáng của một icon là ngoài mặt chung và có định hướng. Chúng ta có thể vẽ một nét xung quanh cạnh của một icon – một khung viền, bạn vẽ một hình trạng chung như vuông, tròn, tam giác, chữ nhật ngang, dọc hoặc góc nhọn.

Icon hình trụ được để trung trung tâm của lưới với thường va cả bốn cạnh bao quanh của phần “cho phép”, ko lấn vào vùng “không đụng tới”. Lưu ý rằng do một số vì sao đặc biệt bạn có thể cho đông đảo yếu tố nhỏ dại lấn qua 1 chút như ví dụ bên dưới.

*

Icon vuông thường đặt trung trọng tâm của lưới, nhưng mà trong hầu hết trường hợp không nên lấn ra tới phần viền cho phép. Để bảo trì sự thống độc nhất vô nhị về tỉ lệ thị giác. So với icon tròn hoặc tam giác, những hình vuông thường có cảm giác trọng lực phệ hơn.

Bạn có thể xem những ví dụ ở dưới với những vùng màu xanh lá cây là hầu như gì nhưng mắt đánh giá vùng của icon hiển thị.

*
*
*

Cần nhớ rằng bạn không tốt nhất thiết yêu cầu tuân theo grid trong rất nhiều trường hợp. Grid sinh sống đó để giúp bạn tạo nên tính thống nhất, tuy thế nếu đề xuất chút biệt lập bạn vẫn rất có thể phá đổ vỡ quy luật.

2. Bước đầu với một kiểu dáng học cơ bản

Hãy bắt đầu thiết kế icon của người sử dụng với những nét vẽ hình học dễ dàng và đơn giản như vuông, tròn, tam giác. Bạn có thể phác bằng tay, và tiếp đến sử dụng Illustrator để điều khiển nó để sở hữu sự thiết yếu xác. Dùng những hình cơ phiên bản giúp chế tác sự đúng chuẩn và cũng rất có thể co kéo kích thước dễ dàng, chỉ cần có lẽ rằng nó vẫn theo mặt đường lưới mà bạn có.

*

3. Dùng những số, cạnh, nét, góc, mặt đường cong cùng góc độ.

Xem thêm: Không Muốn Cập Nhật Phần Mềm Iphone, Tắt Thông Báo Cập Nhật Ios Cho Iphone Như Thế Nào

Càng những càng tốt để thiết kế không có vẻ quá thứ móc, nhàm chán. Sử dụng những góc, các đường cong và góc độ nên được đo lường và tính toán chính xác. Nói cách khác, tuân theo các con số chứ chớ tin vào sự cầu đoán tuyệt vẽ thoải mái khi đi sâu và các chi tiết. Sự thiếu đồng điệu của các biểu tượng có thể giảm quality của chúng.

a. Góc độ

Trong hầu hết các trường hợp, theo góc 45 độ. Việc áp dụng góc 45 để giúp đỡ bạn bớt thiểu bài toán bị răng cưa làm việc nét, không chỉ có thế mắt tín đồ cũng đam mê góc này. Sự thống tuyệt nhất về sự nhận ra này tạo thành sự đồng điệu từ mỗi icon với những icon khác trong cả bộ. Nếu bạn có nhu cầu phá vỡ lẽ quy luật, cũng cần làm tròn số như 25 độ, chứ không nên là 24,2 chẳng hạn.

*

b. Đường cong

Một giữa những khu vực hoàn toàn có thể làm giảm quality của icon và cũng chính là nơi sinh sản sự khác hoàn toàn giữa người chuyên nghiệp – bạn học việc, là ai bao gồm đường cong tuyệt vời và hoàn hảo nhất hơn. Bất kể đâu mắt con người cũng có thể nhận ra đầy đủ sự khác biệt nhỏ tuổi về tính thiết yếu xác, thực hiện tay không tạo ra sự những có số hay đối. Hãy tin cậy các biện pháp và những con số để khiến cho các đường những nhất có thể, hơn là vẽ nó thủ công (dùng tay chỉ nhằm phác thảo). Khi bạn cần vẽ một con đường cong trên AI, tốt hơn buộc phải giữ Shift để gia công tròn góc độ.

*

Như chúng ta thấy hình “trước đó” trên, đường vẽ tay ảnh hưởng tới chất lượng của thiết kế.

*

*

c. Bo góc

Một góc thông thường được bo với mức giá trị khoảng chừng 2-3 pixel. Trong icon 32×32, một góc bo 2px là đủ lớn để xem thấy được bo tròn nhưng mà cũng không khiến góc bị cảm hứng quá tròn để khiến hình tổng thể và toàn diện bị nỗ lực đổi. Quý hiếm góc mà chúng ta chọn sẽ ảnh hưởng tới phong cách bạn muốn trong thiết kế.

*

Thử với các hình học, chúng tôi đã cấp dưỡng 2 pixel đường viền triệu chứng ming đến việc những hình dạng cùng với sự thống duy nhất trong cụ thể như góc bo đã bức tốc thiết kế cố gắng nào.

Điều này đã khiến cho phiên phiên bản mới xuất sắc hơn với hầu hết góc bo, nét mềm mại ở đầu và tai.

*

d. Tuyệt vời từng px – Pixel-Perfection

Việc tinh chỉnh từng px là điều đặc biệt đối với size nhỏ. Răng cưa làm việc cạnh của một icon hoàn toàn có thể khiến nó giảm chất lượng. Không gian giữa các nét ko căn đúng với phần nhiều điểm px sẽ bị mờ. Căn icon vào với px sẽ khiến cho những cạnh dọc ngang của icon rõ nét, các đường cong với góc phù hợp giúp nó cụ thể hơn.

Như vẫn nhắc tới, một góc 45 độ là tốt nhất có thể để hiện một con đường cong trả hảo. Với càng đúng mực về toán học thì những vấn đề nhoè viền sẽ giảm xuống. Bạn cũng phải biết vấn đề răng cưa này cũng bớt nặng nề hà hơn nếu khách hàng nhìn trên màn hình phân giải cao như “Retina:

e. Độ đậm của nét

Khi nói tới độ đậm của nét, thì 2 px là lý tưởng, tuy vậy cũng không hẳn cần thiết. Phương châm của kiến tạo là hỗ trợ một hình hình ảnh rõ ràng phân cấp, mà không tồn tại quá nhiều độ đậm và khiến nó không giữ được tính thống nhất.

Sử dụng số lượng 2px với 4px có thể dễ dàng biến hóa trong vài ngôi trường hợp. Trong vô số nhiều trường hợp, cần né việc thực hiện nét 1px, trừ phi bạn đang tạo ra một xây dựng phong biện pháp line-icon.

*

4. Thực hiện những yếu tố kiến thiết thống nhất và duy trì xuyên suốt.

Hemmo de Jonge vẫn có một buổi nói chuyện độc đáo tại Icon Salon năm ngoái khi nói về khía cạnh xây cất icon. Trong nhì năm làm việc chuyên về icon cho cơ quan chính phủ Hà Lan, Hemmo cùng những tập sự đã dùng một vệt tự khắc trên loạt biểu tượng. Chưa hẳn tất cả đều có dấu tự khắc này, dẫu vậy hầu hết. Những kiểu dấu hiệu được sử dụng xuyên suốt giúp cho các icon có tương quan tới nhau hơn.

*
*
Trong các ví dụ của những chú chó công ty chúng tôi đã sử dụng hình trái tim để thay dáng vẻ đầu mũi của không ít chú chó, bọn chúng vừa thống duy nhất vừa thân mật và gần gũi phù hợp.

Trong những trường hợp, nếu một vài phần của icon bị biến hóa – ví dụ như phong thái – những yếu tố vẫn hoàn toàn có thể đứng cạnh nhau, như bên dưới. Tía chú chó làm việc dạng phẳng, 1-1 sắc nhưng mà vẫn có vẻ như thông nhất.

*

5. Sử dụng các chi tiết và tô điểm một cách tinh tế.

Icon tố hơn là gấp rút có cảm giác tương tác với một đối tượng, ý tưởng, hay như là một hành động. Rất nhiều chi tiết nhỏ chỉ làm tạo ra thêm phiền nhiễu khiến cho chúng cạnh tranh nhận biết, quan trọng ở kích cỡ nhỏ. Level của các cụ thể bạn đính trong icon hay bộ icon cũng là kỹ lưỡng quan vào trong việc nhận biết và thẩm mỹ chung.

Nguyên tắc tốt nhất của việc khẳng định cấp độ trong chi tiết trong icon là việc tối giản cụ thể để tạo ra ra ý nghĩa sâu sắc rõ ràng.

Tại phiên phiên bản trên, công ty chúng tôi gần như đi đến bước cuối cùng để tăng cấp thiết kế. Phần hông đen nghỉ ngơi tai được tủ bở color nâu, phần viền đen ở mặt cũng bị loại bỏ bỏ nhưng vẫn còn 2 pixel khoảng cách giữa phần trắng để tạo ra khuôn cho mặt.

6. Khiến chúng độc đáo

Số lượng đầy đủ nhà kiến thiết xuất sắc, và tạo ra những icon miễn giá tiền cũng ko ít. Là 1 nhà thi công chuyên nghiệp, họ nên nhìn bao quanh ngành công nghiệp kiến tạo icon, nhìn vào những kiến trúc sư, kiến thiết chữ, xây đắp công nghiệp, khoa học, tự nhiên và mọi lĩnh vực khác để tìm cảm hứng. Khiến cho thiết kế của chúng ta đọc đáo vô cùng rất quan tiền trọng.

Nhìn lại vào mọi bước solo giản, chúng ta có thể nhận ra những nâng cao của icon trước và sau khi áp dụng. Công ty chúng tôi chỉ đề cập tới những bước cơ bạn dạng nhất, với cũng có tương đối nhiều cách không giống của người khác mang lại hiệu quả. Cách tốt nhất có thể để thiết kế tốt hơn là xem các thiết kế cực tốt có thể, đọc những tài liệu, phác hoạ thảo liên tục để thực hành, thực hành thực tế và thực hành.

*

Tóm lại

Chúng ta đã cùng trao đổi phương thức cơ phiên bản để có một icon đẳng cấp. Những kiến thức cơ bạn dạng như vậy người nào cũng có thể học bằng việc thực hành. Hãy nhờ rằng việc tạo nên một icon giỏi hơn, bước đầu từ những hình dáng hình học tập cơ bản và ban đầu đi tiếp vào các chi tiết.

Giữ icon của người tiêu dùng thống nhất, và thống nhất trên cả bộ icon. Khi chúng ta đã là thông thạo với các kỹ thuật cơ bản, chúng ta có thể tập trung tích điện vào điều gì chế tạo ra nên đặc điểm độc đáo của xây dựng của bạn.

Trên trên đây là nội dung bài viết về thuật ngữ này với nó giúp cho chúng ta hiểu cũng tương tự để kiến thiết tốt. Đồ hoạ 360 cùng các bạn hiểu về những bước căn phiên bản để xây dựng Icon giỏi hơn.