6 bước đơn giản để thiết kế biểu tượng tốt hơn
Bài viết này bàn về một bộ các nguyên tắc thiết kế trong sáu bước. Các bước thực hiện theo các khái niệm cơ bản về thiết kế biểu tượng âm thanh, bao gồm tính nhất quán, tính rõ ràng và rõ ràng.. Sáu bước được thảo luận trong bài viết này nên được xem như một hướng dẫn, chứ không phải là một danh sách các quy tắc về các quy tắc . Một phần của việc trở thành một nhà thiết kế tuyệt vời đang học khi nào phá vỡ quy tắc và khi nào theo họ, như chúng ta sẽ chứng minh ở đây.
Mỗi biểu tượng được gửi đến Iconfinder được xem xét và đánh giá để thu hút người dùng trang web của chúng tôi và có thể có giá trị thương mại như các biểu tượng cao cấp. Khi xem xét bộ biểu tượng được gửi tới trang web, chúng tôi có trách nhiệm thiết kế và khách hàng của chúng tôi để đảm bảo tất cả các biểu tượng cao cấp trên trang web có chất lượng cao nhất có thể.
Để đạt được mục tiêu này, chúng tôi luôn nhận thức được sự khác nhau giữa "không vừa đủ" và "chất lượng cao". Sự khác biệt thường rất nhỏ và thường đòi hỏi những thay đổi tối thiểu, nhưng nó có ảnh hưởng lớn đến thiết kế và giá trị của biểu tượng bộ. Không giống nhiều thị trường khác, chúng tôi hiếm khi từ chối các bộ không đáp ứng đầy đủ các yêu cầu về chất lượng của chúng tôi. Thay vào đó, chúng tôi sẽ chia sẻ các đề xuất rất cụ thể và khả thi để làm thế nào nhà thiết kế có thể cải thiện các biểu tượng.
Việc sửa lại một biểu tượng
Trong các ví dụ về hình ảnh trong bài báo này, sáu bước thảo luận sẽ được áp dụng cho việc sửa lại một biểu tượng của một con chó (một Corgi, chính xác) gần đây được gửi bởi một người dùng Iconfinder có tên Kem Bardly. Biểu tượng này có tiềm năng nhưng không được đánh bóng đủ để được xem là "chất lượng cao". Chúng tôi đã cung cấp cho Kem một số mẹo nhỏ để làm theo, và với một chút sửa đổi, các biểu tượng của ông đã sẵn sàng để được phê duyệt như một biểu tượng cao cấp. Hình ảnh dưới đây cho thấy trước và sau các phiên bản của biểu tượng Kem. Trong các phần tiếp theo, chúng tôi sẽ giải thích làm thế nào để có phương pháp đi từ trước khi sau.
Lưu ý rằng trong khi các nguyên tắc được thảo luận trong bài viết được hướng đến biểu tượng web, nhưng chúng cũng thường áp dụng cho các biểu tượng in. 300 dpi trên mỗi inch (DPI) của vật liệu in làm cho độ hoàn hảo của pixel không có ý nghĩa. Nếu bạn là một nhà thiết kế in này đọc, tất cả các nguyên tắc được bảo hiểm được áp dụng, nhưng bạn có thể bỏ qua các phần hoàn hảo Pixxel
Các biểu tượng được thiết kế đẹp thể hiện cách tiếp cận có phương pháp và có chủ ý với ba thuộc tính chính tạo nên bất kỳ biểu tượng thiết kế nào: hình thức, tính thống nhất thẩm mỹ và sự công nhận. Khi thiết kế một bộ biểu tượng mới, hãy xem xét từng thuộc tính trong một cách tiếp cận lặp đi lặp lại, bắt đầu bằng dạng tổng quát (hình thức) và tiến tới tính xác định cụ thể. Ngay cả khi bạn đang tạo một biểu tượng duy nhất, ba thuộc tính này vẫn ngụ ý và có thể được ngoại suy từ một thiết kế đơn lẻ.
Không nghi ngờ gì nữa, có hơn ba thuộc tính tạo nên thiết kế biểu tượng hiệu quả, nhưng cả ba đều được xây dựng dưới đây là một nơi tốt để bắt đầu. Vì sự ngắn gọn tương đối, chúng tôi đã tập trung vào những gì chúng tôi coi là ba thuộc tính chính.
MẪU
Mẫu là cấu trúc bên dưới của một biểu tượng, hoặc nó được tạo ra như thế nào. Nếu bạn bỏ qua các chi tiết của một biểu tượng và vẽ một đường xung quanh các hình dạng chính, chúng có hình thành một hình vuông, hình tròn, hình chữ nhật ngang hay đứng, một tam giác hoặc một hình dạng hữu cơ hơn? Các hình dạng hình học chính - hình tròn, hình vuông và hình tam giác - tạo ra một nền tảng trực quan ổn định cho thiết kế biểu tượng. Trong ví dụ Corgi của chúng tôi của Kem Bardly, đầu của con chó được tạo thành từ hai hình tam giác và hai hình elip. Cũng giống như một người bắt đầu một bản vẽ bằng cách phác hoạ hình dạng lớn nhất, đơn giản nhất và sau đó tinh lọc theo hướng chi tiết hơn và lớn hơn, người ta sẽ bắt đầu một biểu tượng từ những hình dạng đơn giản nhất và sau đó thêm chi tiết hơn - nhưng chỉ cần chi tiết càng nhiều càng tốt để truyền đạt khái niệm Được đại diện, có thể là một đối tượng, ý tưởng hay hành động.
THẨM MỸ UNITY
Các phần tử được chia sẻ trong một biểu tượng đơn và qua một tập hợp biểu tượng là những gì chúng ta gọi là thống nhất thẩm mỹ. Các yếu tố này là những thứ như hình tròn hoặc góc vuông, kích thước của các góc (2 pixel, 4 pixel ...), trọng lượng giới hạn và nhất quán (2 pixel, 4 pixel, ...), phong cách (phẳng, đường thẳng, đầy Đường nét hoặc hình tượng trưng), bảng màu và nhiều hơn nữa. Sự thống nhất thẩm mỹ của bộ là tập hợp các yếu tố thiết kế và / hoặc sự lựa chọn mà bạn lặp lại trong suốt tập hợp để gắn nó với nhau như một toàn thể gắn kết. Trong các ví dụ dưới đây, chú ý rằng mỗi ba con chó từ bộ Kem đều có chung các yếu tố, chẳng hạn như các góc tròn tròn 2 điểm, đột qu thick dày 2 pixel xung quanh khuôn mặt của chó và mũi hình trái tim.
NHẬN DẠNG ĐƯỢC
Khả năng nhận dạng là một sản phẩm của bản chất của một biểu tượng hay cái gì làm cho một biểu tượng duy nhất. Cho dù một biểu tượng hoạt động cuối cùng phụ thuộc vào cách dễ dàng người xem hiểu rõ đối tượng, ý tưởng hay hành động mà nó mô tả. Khả năng nhận biết bao gồm hiển thị các thuộc tính mà người xem thường gắn với ý tưởng đó, nhưng nó cũng có thể bao gồm các yếu tố độc nhất hoặc bất ngờ, chẳng hạn như trái tim của mũi Corgi. Hãy nhớ rằng khả năng nhận biết đề cập đến không chỉ để hiểu được đối tượng, ý tưởng hay hành động được miêu tả, mà còn để thừa nhận bộ biểu tượng độc đáo của bạn. Về mặt này, sự thống nhất thẩm mỹ và công nhận có thể và thường làm chồng lên nhau. Trong hình ảnh dưới đây, chúng ta nhận ra hai trong số hai con chó là Corgi và Siberian Husky, vì màu sắc độc đáo, hình dạng đầu và tai của chúng, đồng thời vẫn nhận ra chúng như là một phần của cùng một bộ do các thiết kế và các yếu tố kiểu dáng được chia sẻ .
Cho đến nay, chúng tôi đã xem xét những gì chúng tôi coi là ba thuộc tính chính của thiết kế biểu tượng hiệu quả. Trong phần tiếp theo, chúng ta sẽ xem xét sâu hơn ở sáu bước để giải quyết đúng ba lĩnh vực quan tâm.
Sáu bước
LUÔN BẮT ĐẦU BẰNG LƯỚI
Lợi ích của các kích cỡ lưới khác nhau sẽ được xử lý tốt nhất trong một bài báo riêng. Với mục đích của chúng tôi, chúng tôi sẽ làm việc với lưới 32 x 32 pixel. Lưới của chúng tôi cũng có một số hướng dẫn cơ bản để giúp chúng tôi tạo ra các hình thức cơ bản của mỗi thiết kế biểu tượng.
2 bên ngoài của lưới điện là những gì chúng tôi gọi là "không-đi khu." Tránh đặt bất kỳ một phần của biểu tượng trong không gian này, trừ khi hoàn toàn cần thiết. Mục đích của khu vực không đi là tạo ra một số phòng thở xung quanh biểu tượng.
Một phần của biểu mẫu là một hình dạng và định hướng chung. Nếu bạn vẽ một đường xung quanh các cạnh bên ngoài của một biểu tượng - hộp giới hạn, nếu bạn muốn - hình dạng sẽ là hình vuông, hình tròn, hình tam giác, hình chữ nhật nằm ngang, hình chữ nhật đứng hoặc hình chữ nhật chéo.
Các biểu tượng hình tròn được căn giữa trong lưới và thường sẽ chạm vào tất cả bốn cạnh ngoài cùng của khu vực nội dung, mà không đi vào khu vực không đi. Lưu ý rằng lý do phổ biến để phá vỡ quy tắc vùng không đi là nếu một số phần tử hoặc phần tử nhỏ cần phải mở rộng ra ngoài vòng tròn để duy trì tính toàn vẹn của thiết kế, như được trình bày dưới đây.
Các biểu tượng hình vuông cũng được căn giữa trong lưới điện nhưng trong hầu hết các trường hợp, không mở rộng hết các đường biên ở ngoài cùng của vùng nội dung. Để duy trì trọng lượng hình ảnh nhất quán với các biểu tượng hình tròn và hình tam giác, hầu hết các biểu tượng hình chữ nhật và hình vuông sẽ thẳng hàng với đường chính ở giữa (vùng cam trong hình dưới đây). Khi để căn chỉnh cho mỗi dòng chính được xác định bởi trọng lượng trực quan của chính biểu tượng đó; Nhận được một cảm giác khi nào sử dụng mà kích thước chỉ cần thực hành. Xem hình bố trí vuông bên dưới. Ba ô vuông đồng nhất được đề cập ở trên được thể hiện bằng màu xanh nhạt, cam và ánh sáng màu xanh lá cây.
Bên trong hình vuông 32 pixel, bạn sẽ nhận thấy các hình chữ nhật dọc và ngang có chiều rộng 20 × 28 pixel. Chúng tôi thực hiện theo các hình chữ nhật này một cách lỏng lẻo cho các biểu tượng nằm ngang hoặc dọc theo hướng và cố gắng làm cho kích thước của bất kỳ biểu tượng định hướng như vậy, để phù hợp kích thước 20x28 pixel của các hình chữ nhật này.
Các biểu tượng định hướng theo đường chéo được căn lề với các cạnh của vùng nội dung tròn, như thể hiện trong hình ảnh bên dưới.Lưu ý rằng các điểm ngoài cùng của cưa xấp xỉ được căn lề với các cạnh của vòng tròn. Đây là một khu vực mà bạn không cần phải chính xác; Đóng là đủ tốt.
Hãy nhớ rằng bạn không cần phải làm theo lưới điện và hướng dẫn chính xác mọi lúc. Lưới điện có ở đó giúp bạn tạo ra các biểu tượng nhất quán, nhưng nếu bạn phải lựa chọn giữa việc tạo một biểu tượng tuyệt vời và tuân theo các quy tắc, hãy phá vỡ các quy tắc - chỉ cần làm như vậy một cách nhẹ nhàng.
Bản chất của một biểu tượng cá nhân vượt trội hơn tầm quan trọng của sự gắn kết thiết lập.
BẮT ĐẦU VỚI HÌNH DẠNG HÌNH HỌC ĐƠN GIẢN
Bắt đầu thiết kế biểu tượng của bạn bằng cách phác thảo các hình dạng chính với hình tròn đơn giản, hình chữ nhật và tam giác. Ngay cả khi một biểu tượng sẽ kết thúc là chủ yếu là hữu cơ trong tự nhiên, bắt đầu với các công cụ hình dạng trong Adobe Illustrator. Khi làm biểu tượng, đặc biệt đối với các kích thước nhỏ hơn trên màn hình, các biến thể nhẹ ở các cạnh do vẽ bàn tay sẽ làm cho một biểu tượng trông không tinh tế. Bắt đầu với hình dạng hình học cơ bản sẽ làm cho các cạnh chính xác hơn (đặc biệt là dọc theo đường cong) và sẽ cho phép bạn điều chỉnh quy mô tương đối của các phần tử bên trong thiết kế một cách nhanh chóng cũng như đảm bảo rằng bạn làm theo lưới và hình dạng.
THEO SỐ: CÁC CẠNH, ĐƯỜNG, GÓC, ĐƯỜNG CONG VÀ ĐƯỜNG
Càng nhiều càng tốt mà không làm cho thiết kế trông quá cơ khí và nhàm chán, góc, đường cong và góc phải được chính xác toán học.Nói cách khác, hãy làm theo các con số và không cố gắng để mắt hoặc miễn phí nó khi nói đến những chi tiết này. Sự không thống nhất trong những yếu tố này có thể làm giảm chất lượng của một biểu tượng.
Góc
Trong hầu hết các trường hợp, giữ góc 45 độ, hoặc nhiều lầnKết quả là sắc nét, và đường chéo hoàn hảo của góc này là một mô hình dễ nhận ra, mà mắt người thích rất nhiều . Mô hình nhận dạng này tạo nên tính nhất quán trên một tập hợp biểu tượng và sự thống nhất trong một biểu tượng duy nhất.Nếu thiết kế của bạn cho thấy bạn phải vi phạm quy tắc này, hãy thử làm như vậy trong một nửa (22,5 độ, 11,25, v.v.) hoặc bằng bội số của 15 độ. Mỗi tình huống là khác nhau, do đó, quyết định từng trường hợp. Lợi ích của việc sử dụng một nửa của 45 độ là việc tăng cường chống răng cưa sẽ vẫn còn khá công bằng.
Đường cong
Một trong những khu vực đáng chú ý nhất có thể làm giảm chất lượng của một biểu tượng và có thể có nghĩa là sự khác biệt giữa chuyên nghiệp và nghiệp dư là những đường cong chưa hoàn hảo.Trong khi mắt người có thể phát hiện sự thay đổi rất nhỏ về độ chính xác, sự phối hợp tay và mắt không phải lúc nào cũng đạt được độ chính xác cao. Dựa vào các công cụ hình dạng và con số để tạo ra những đường cong càng nhiều càng tốt, hơn là vẽ chúng bằng tay.Khi bạn cần vẽ đường cong bằng tay, hãy sử dụng phím chỉnh sửa hạn chế của Adobe Illustrator (hoặc phím chỉnh sửa vectơ của bạn) (phím Shift)
Như chúng ta thấy trong hình ảnh "trước" ở trên, các đường vẽ tay tạo ra đường cong không đều làm giảm chất lượng của thiết kế.
Góc
Giá trị góc tròn chung (hoặc bán kính) là 2 pixel. Trong một biểu tượng 32 x 32-pixel, bán kính 2-pixel là đủ lớn để được nhìn thấy rõ ràng là làm tròn nhưng không làm mềm các góc để thay đổi tính cách của thiết kế (cho rằng "bong bóng" xem). Giá trị bạn chọn sẽ phụ thuộc vào cá tính mà bạn muốn thiết kế. Cho dù bạn sử dụng góc tròn là một quyết định thẩm mỹ được thực hiện xem xét tổng thể thẩm mỹ của bộ.
Bắt đầu với hình dạng hình học, chúng tôi đã thêm một phác thảo 2-pixel, thể hiện cách các công cụ hình dạng, cùng với sự nhất quán trong các chi tiết như các góc tròn, đang cải tiến thiết kế.
Phiên bản cải tiến này cho thấy ý nghĩa thiết kế mới, với các góc tròn được thống nhất, các đường cong mịn và cơ sở cho trọng lượng của các đường xung quanh tai.
Pixel-Perfection
Pixel-hoàn hảo alignment là rất quan trọng khi thiết kế cho các kích thước nhỏ. Chống răng cưa trên các cạnh của một biểu tượng với kích thước nhỏ có thể làm cho biểu tượng xuất hiện mờ. Không gian giữa các đường không liên kết với lưới pixel sẽ được chống aliased và xuất hiện mờ. Căn chỉnh biểu tượng vào lưới pixel sẽ làm cho các cạnh sắc nét trên đường thẳng và sắc nét hơn trên góc độ chính xác và đường cong.
Như đã đề cập, góc độ 45 độ là tốt nhất (sau đường thẳng) bởi vì các điểm ảnh được sử dụng để xác định góc được xếp chồng lên nhau, hoặc bước, kết thúc để kết thúc theo đường chéo hoàn hảo. Điều này cũng đúng với các góc và đường cong: Chính xác hơn về mặt toán học, thì sự chống aliasing sẽ càng cao. Tuy nhiên, lưu ý rằng độ hoàn hảo của pixel ít có liên quan, ít nhất là đối với chống răng cưa, ở các kích thước lớn hơn và trên các màn hình có độ phân giải cao hơn, chẳng hạn như màn hình "Retina".
Trọng lượng
Khi nói đến cân nặng, hai là lý tưởng, nhưng đôi khi đôi khi cần thiết.Mục tiêu là cung cấp sự phân cấp thị giác và đa dạng, mà không cần giới thiệu quá nhiều sự đa dạng và do đó phá hủy tính nhất quán của bộ. Hơn ba và một bộ có thể mất sự gắn kết của nó. Lợi ích của trọng lượng 2 và 4-pixel là chúng có thể là bội số của 2 và, do đó, dễ dàng tăng lên và xuống theo từng bước. Trong hầu hết các trường hợp, tránh những đường nét rất mỏng, đặc biệt là trong biểu tượng glyph và phẳng. Trừ khi bạn cố ý tạo ra một biểu tượng kiểu đường thẳng, dựa vào ánh sáng và bóng tối chứ không phải là các đường kẻ, để xác định hình dạng.
SỬ DỤNG CÁC YẾU TỐ THIẾT KẾ PHÙ HỢP VÀ CHỮ NỔI QUA CÁC BIỂU TƯỢNG
Hemmo de Jonge của Icon Hà Lan đã có một cuộc nói chuyện tuyệt vờ trong đó ông nói về chiều dài của khía cạnh thiết kế biểu tượng này. Trong dự án hệ thống biểu tượng hai năm của mình cho chính phủ Hà Lan, Hemmo và đối tác thiết kế của ông kết hợp chặt chẽ với mỗi biểu tượng. Không phải mọi biểu tượng đều có điểm, nhưng hầu hết đều có. Loại giọng nói này, được sử dụng bảo mật nhưng luôn xuyên qua biểu tượng, thực sự có thể kết hợp các thiết lập lại với nhau.
Trong ví dụ về chó của chúng tôi, chúng tôi đã sử dụng một yếu tố phong cách thông thường với mũi hình trái tim. Hiếm khi sử dụng một trái tim cho mũi không chỉ liên kết các biểu tượng với nhau mà còn thêm một yếu tố kỳ quái và truyền đạt tình cảm cho bạn bè bốn chân của chúng ta.
Trong nhiều trường hợp, thậm chí nếu các khía cạnh chính của một bộ biểu tượng được thay đổi - ví dụ như phong cách - các yếu tố xây dựng sự thống nhất thẩm mỹ vẫn có thể buộc lại tập hợp lại với nhau, như được trình bày dưới đây. Chúng tôi đã tạo lại ba biểu tượng chú chó giống nhau theo phong cách glyph, chứ không phải là kiểu phẳng, và chúng vẫn có tính thẩm mỹ.
SỬ DỤNG CHI TIẾT VÀ TRANG TRÍ
Các biểu tượng nên nhanh chóng truyền đạt một đối tượng, ý tưởng hay hành động. Quá nhiều chi tiết nhỏ sẽ tạo ra sự phức tạp, làm cho biểu tượng không thể nhận ra được, đặc biệt ở các kích thước nhỏ hơn. Mức độ chi tiết mà bạn đưa vào trong một biểu tượng hoặc một bộ biểu tượng cũng là một khía cạnh quan trọng của sự thống nhất thẩm mỹ và khả năng nhận dạng. Một nguyên tắc chung để xác định đúng mức độ chi tiết trong biểu tượng hoặc tập hợp là bao gồm tối thiểu các chi tiết cần thiết để làm cho ý nghĩa rõ ràng.
Trong phiên bản trên, chúng tôi khá gần với thiết kế được hoàn thiện và hoàn thiện của chúng tôi. Đường viền màu đen xung quanh tai đã trở thành vùng lông màu nâu bao phủ quanh tai. Các đường màu đen xung quanh mặt đã biến mất nhưng vẫn có thể phát hiện được trong không gian 2 pixel trên đánh dấu màu trắng trên khuôn mặt của Corgi. Tuy nhiên, lưu ý rằng chúng tôi vẫn có một số yếu tố từ phiên bản "trước", chẳng hạn như mũi thông thường. Chúng tôi sẽ giải quyết vấn đề đó trong bước tiếp theo.
TẠO ĐỘC ĐÁO
Số lượng các nhà thiết kế tài năng đang tạo ra bộ biểu tượng chất lượng cao, nhiều trong số đó có sẵn miễn phí, dường như đang phát triển mỗi ngày. Thật không may, rất nhiều nhà thiết kế dựa quá nhiều vào xu hướng hoặc phong cách của các nhà thiết kế phổ biến nhất. Là các chuyên gia sáng tạo, chúng ta nên tìm kiếm bên ngoài ngành công nghiệp biểu tượng, kiến trúc, kiểu chữ, kiểu dáng công nghiệp, tâm lý, thiên nhiên và bất kỳ khu vực nào khác mà chúng ta có thể tìm thấy cảm hứng. Bởi vì rất nhiều biểu tượng trông giống như những ngày này, làm cho thiết kế của bạn độc đáo là quan trọng hơn bao giờ hết.
Trong hình ảnh cuối cùng "sau", chúng ta có một liên lạc độc đáo trong mũi hình trái tim, mà thêm một dấu gạch ngang của sự mới lạ và thoải mái để thiết kế.
Những bước đơn giản này nên được xem như một điểm khởi đầu, chứ không phải là một hướng dẫn dứt khoát. Không có cách nào để thiết kế biểu tượng. Trong bài báo này, chúng tôi đã vạch ra những khái niệm cơ bản về cách tiếp cận phù hợp với thiết kế, nhưng các nhà thiết kế khác chắc chắn có ý kiến và kỹ thuật riêng của họ. Cách tốt nhất để trở thành một nhà thiết kế giỏi hơn là xem xét nhiều tài liệu tham khảo trực quan nhất có thể, đọc nhiều loại tài liệu, phác hoạ thường xuyên (mang theo một cuốn phác thảo bất cứ nơi nào), và thực hành, luyện tập, thực hành.
Chúng tôi đã chia sẻ các nguyên tắc cơ bản về cách tạo các biểu tượng chất lượng cao cấp. Những nguyên tắc cơ bản này là kỹ năng kỹ thuật; Bất cứ ai cũng có thể học hỏi và làm chủ chúng bằng thực hành. Hãy nhớ rằng để tạo các biểu tượng tốt hơn, hãy bắt đầu từ hình thức chung (chung) và làm việc theo hướng xác định cụ thể. Và giữ các biểu tượng của bạn trong nội bộ phù hợp, cũng như sự nhất quán trên toàn bộ thiết bị, bằng cách chú ý đến các yếu tố chia sẻ (sự thống nhất thẩm mỹ) của biểu tượng hoặc tập hợp. Một khi bạn đã nắm vững các nguyên tắc cơ bản về kỹ thuật, bạn có thể tập trung năng lượng vào những gì tạo nên một biểu tượng thực sự nổi bật: tầm nhìn sáng tạo độc đáo của bạn.
Bạn có kỹ thuật, mẹo hoặc nguyên tắc cơ bản của riêng mình mà bạn muốn chia sẻ? Để lại chúng trong các ý kiến dưới đây.
nên biết rằng phạm Khôi chuyên in tờ rơi giá rẻ, thiết kế tờ rơi, in tờ rơi tại sài gòn
0 nhận xét:
Đăng nhận xét