Tạo hình minh họa đơn giản cho Web

Sep 12, 2025

Cách

Tôi ngồi xuống, chơi một số âm nhạc, làm mờ ánh sáng và mở laptop của tôi. Tôi đã có rất nhiều việc phải làm. Trong một nỗ lực để triệu tập cảm hứng, tôi bắt đầu vẽ Doodle Art. Các dòng từ một góc của màn hình này sang góc màn hình khác, khi tôi thấy một hình thức sao chổi. "Hmm," bộ não của tôi từ từ khởi động, "Nếu tôi kết nối chúng và thêm một số hành tinh thì sao?"

Vài giờ sau tôi đã có minh họa dribbble phổ biến nhất của mình. Tôi vẫn khó nhớ nó đã xảy ra như thế nào, nhưng sau một số đào qua não của tôi, tôi đã phát hiện ra thuật toán bên trong của mình để tạo một minh họa - không chỉ là cái này, mà bất kỳ ai khác tôi đã làm. Thật buồn cười, tôi mong đợi nó phức tạp hơn. Ồ, tốt ...

Minh họa phong cách

Trước khi tôi bắt đầu làm việc trong một minh họa, tôi chắc chắn rằng tôi hiểu mục đích của nó và bối cảnh nơi nó sẽ sống. Đó là trong ứng dụng, hoặc trang web, hoặc hình nền? Sẽ có văn bản trên đó, và nó sẽ được đặt trong một môi trường bận rộn? Có phải nó được cho là để tượng trưng cho một hành động, hoặc nó chỉ ở đó để đưa ra một sự rung cảm nhất định?

Nếu hình minh họa được cho là rơle một ý tưởng rõ ràng, hoặc để tượng trưng cho một đối tượng hoặc hành động cụ thể, thì tôi sẽ chọn một cách thực hiện đơn giản trong đó tất cả sự chú ý tập trung vào phần quan trọng. Tuy nhiên, nếu tôi đặc biệt là một minh họa nền 'im lặng', tôi sẽ chọn một cách tiếp cận giống như mô hình hoặc đảm bảo rằng không có các yếu tố thu hút sự chú ý rõ ràng nào, để giảm thiểu khả năng mọi người đang diễn giải quá mức . Đối với các minh họa trong ứng dụng, tôi cố gắng giữ mọi thứ thuần hóa, để tránh sự chú ý của các chức năng.

Quy tắc thẩm mỹ

Bộ não của tôi thích tạo ra tất cả các quy tắc kỳ lạ này. Họ giống như những thách thức lố bịch mà tôi không thể đứng qua: Điều gì sẽ xảy ra nếu tôi chỉ vẽ một con người sử dụng vòng tròn? Nếu tôi minh họa một hoàng hôn chỉ bằng một màu?

Quy tắc hình học, tiến trình logic, đối xứng. Có một cái gì đó rất hấp dẫn trong việc có các quy tắc toán học nghiêm ngặt được áp dụng cho nghệ thuật. Nó cảm thấy như ma thuật kỹ thuật đảo ngược; Nó tước đi yếu tố thần bí trong nghệ thuật để nó gần giống như tiết lộ khoa học đằng sau nó.

Minh họa phức tạp; Bảng màu đơn giản

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette — Một minh họa thành phố với một mức độ chi tiết phức tạp, đã được kết hợp với một bảng màu đơn giản, tương tự (Tín dụng hình ảnh: Nina Geometrieva)

Hóa ra, bộ não của tôi khá lười biếng khi chọn màu, vì vậy nó có hai loại bảng màu chung mà nó chọn từ: một cho hình minh họa phức tạp; khác cho những người đơn giản.

Hình minh họa phức tạp có mức độ chi tiết cao, với nhiều hình dạng / đối tượng và rất nhiều chi tiết. Đây thường là giống như mẫu theo bản chất và không có một tiêu điểm rõ ràng. Bộ não của tôi đã quyết định rằng những loại hình minh họa này hoạt động tốt với bảng màu đơn sắc hoặc tương tự. Hoặc, trong các điều khoản rộng hơn - ít màu sắc hơn và độ tương phản ít màu.

Tất cả điều này sôi sục xuống cân bằng thị giác; Nếu hình dạng là điên rồ, màu sắc nên nhạt nhẽo. Một ngoại lệ là trong trường hợp tôi muốn nhấn mạnh vào một đối tượng nhất định mà nếu không sẽ không nổi bật. Điều này có thể đạt được bằng cách sử dụng một màu tương phản cao, trong khi mọi thứ khác được giữ đơn sắc và chế ngự. Cân bằng trực quan hoàn hảo ở đâu đó giữa sự quá mức (màu sắc lớn, hình dạng phức tạp, rất nhiều chi tiết, mọi thứ hét lên trên khuôn mặt của bạn) và sự thiếu sót (loại xấu tối thiểu, nhàm chán, không có gì mới hoặc thú vị đang diễn ra hoặc thú vị).

Bảng màu đơn sắc.

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements — Bảng màu tương tự hoặc đơn sắc hoạt động hiệu quả khi có một tiến trình trực quan hoặc lặp lại các yếu tố (Tín dụng hình ảnh: Nina Geometrieva)

Một bảng màu đơn sắc được tạo thành từ các sắc thái hoặc sắc thái của một màu. Tint xảy ra khi một màu sắc dần dần trộn lẫn với màu trắng; Shades xảy ra khi nó dần dần trộn lẫn với màu đen. Một vấn đề mà tôi luôn có với các bảng màu đơn sắc là sắc thái và sắc thái dần dần mất đi sự sống động, do bản chất pha trộn một màu với màu trắng hoặc đen, cả hai đều có độ bão hòa bằng 0%.

Để tránh sự buồn tẻ dần dần này, tôi sử dụng một gian lận đơn giản: cũng như thêm màu trắng hoặc đen, tôi dần dần chuyển Huế một chút. Đây thực chất là một bảng màu tương tự tinh tế thay vì một bảng màu đơn sắc. Ví dụ: nếu tôi muốn tạo ra các tông màu đơn sắc màu đỏ, tôi sẽ chuyển Huế về phía Orange. Nếu tôi muốn tạo ra các sắc thái đơn sắc màu đỏ, tôi sẽ chuyển Huế về phía Magenta khi nó tối. Nếu tôi muốn có được màu xanh nhạt hơn, tôi chuyển sang Cyan; Đối với các sắc thái tối của màu xanh, tôi chuyển theo hướng khác, về phía màu tím.

Điều này dẫn đến một bảng màu vẫn cảm thấy hơi đơn sắc, nhưng còn sống nhiều hơn và chắc chắn đã đá. Vì tôi phát hiện ra điều này, tôi sẽ không bao giờ tạo một bảng màu đơn sắc thực sự một lần nữa.

Minh họa đơn giản; Bảng màu phức tạp.

Minh họa với độ phức tạp thấp hơn thường có một tiêu điểm rõ ràng và phân cấp đối tượng. Các hình dạng có xu hướng đơn giản hơn, vì vậy các lựa chọn màu sắc có thể được hoang dã hơn. Tôi đang nghĩ rằng màu sắc tương phản cao của bất kỳ loại nào - bổ sung, Triadic, Tetradic - miễn là đó là một bảng màu bắt mắt, kích thích.

Có một toàn bộ vũ trụ ở giữa những gì tôi mô tả là hình minh họa phức tạp và đơn giản. Nhưng bộ não của tôi không quá quan tâm đến tất cả các phổ đó - nó thích dán nhãn bất kỳ hình minh họa nào như phức tạp hoặc đơn giản.

Bảng màu tương phản cao không đơn giản như chọn màu đối diện trên một bánh xe màu. Bánh xe màu là một điểm khởi đầu tuyệt vời, nhưng nó không có nghĩa là kết thúc quá trình. Ví dụ, khi chọn một sự kết hợp màu cam và màu xanh tốt, tôi chú ý đến một vài điều: cảm nhận độ chói và làm thế nào màu sắc tác động với màu sắc mặc định.

Cảm nhận độ chói

Nếu cả hai màu sắc đều có độ chói cảm nhận tương tự sau đó bộ não cảm thấy khó phân biệt biên giới giữa chúng - vì vậy hãy nhìn vào hình ảnh cảm thấy không thoải mái. Trừ khi màu sắc không bao giờ được cho là chạm vào nhau, nó đáng để đảm bảo rằng chúng không có độ chói cảm nhận giống nhau.

Ồ, và trong trường hợp bạn tò mò lý do tại sao tôi sử dụng từ 'nhận thức', tìm kiếm hiệu ứng Helmholtz-kohlrausch, chứng minh rằng màu sắc có cùng độ chói có thể được coi là có giá trị khác nhau. Vì Orange có độ chói cảm nhận cao hơn màu xanh lam, ví dụ, thật dễ dàng để tăng thêm sự chênh lệch giữa hai màu bằng cách sử dụng màu cam nhạt và màu xanh đậm hơn.

Accent so với màu mặc định

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents — Một minh họa cho trang chủ Zopim. Blue Shades chiếm ưu thế, với màu cam cung cấp các điểm nhấn (Tín dụng hình ảnh: Nina Geometrieva)

Nếu việc sử dụng mỗi màu khác nhau rất nhiều, tôi điều chỉnh các giá trị màu phù hợp. Trở nên dũng cảm với màu sắc và chơi nó an toàn với màu sắc mặc định là cách tiếp cận của tôi.

Trong ví dụ màu xanh da cam ở trên, tôi sẽ sử dụng màu xanh như một màu làm dịu để lấp đầy các khu vực lớn hơn, cho các nền và các yếu tố lớn và một số màu cam hoang dã cho các nút, biểu tượng và các yếu tố nhỏ khác. Trong bối cảnh minh họa, tôi sẽ có màu xanh lam làm cơ sở, và một lần nữa, màu cam là giọng - có lẽ bằng cách nhấn mạnh một chi tiết thú vị, hoặc một yếu tố quan trọng.

Kiểm tra cân bằng trực quan

Bất cứ hình minh họa nào bạn kết thúc bằng cách làm theo các hướng dẫn trên, đảm bảo bạn lùi lại một bước và kiểm tra xem tất cả những gì nó có ý nghĩa với nhau. Có rất nhiều ngoại lệ để các quy tắc trong Minh họa, rằng sẽ không thể liệt kê tất cả các kết hợp sinh ra một minh họa tuyệt vời. Luôn luôn thử mọi thứ có vẻ thú vị, và khi một cái gì đó làm bạn ngạc nhiên, hãy chắc chắn rằng bạn hiểu nó để bạn có thể tiếp tục cải thiện trực giác.

Bài viết này ban đầu xuất hiện trong Tạp chí Net. phát hành 286; Mua nó ở đây !

Những bài viết liên quan

7 thiết kế web dos và Don'ts
6 danh mục đầu tư tự do tốt nhất năm 2016
6 công cụ Photoshop tốt nhất cho các nhà thiết kế web

Tạo hình minh họa đơn giản cho Web

Minh họa phong cách

Quy tắc thẩm mỹ

Minh họa phức tạp; Bảng màu đơn giản

Bảng màu đơn sắc.

Minh họa đơn giản; Bảng màu phức tạp.

Cảm nhận độ chói

Accent so với màu mặc định

Kiểm tra cân bằng trực quan

Cách - Các bài báo phổ biến nhất

Chụp ảnh chân dung: Làm thế nào để chụp chân dung hoàn hảo

Bắt đầu với Artrage

8 Hướng dẫn thiết kế đồ họa mới tuyệt vời

Xây dựng một thành phần đầu thân thiện với SEO cho NextJS / React

Cách tạo một kỹ năng Alexa cho trang web của bạn

Mọi thứ bạn cần biết về Node.js 8 mới

Cách thiết kế bìa sách trong InDesign

Xây dựng giao diện Maya tùy chỉnh

Thể loại