Advertisement
  1. Design & Illustration
  2. Icon Design

Cách tạo biểu tượng

Scroll to top
Read Time: 32 min

Vietnamese (Tiếng Việt) translation by Vy Cam Nguyen (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Bạn luôn muốn tìm hiểu những điều cần thiết để tạo biểu tượng của riêng bạn, nhưng không bao giờ biết chính xác bắt đầu từ đâu? Vâng, với bài viết này, điều đó sẽ thay đổi. Bạn sẽ tìm hiểu biểu tượng là gì và có được câu trả lời cho các câu hỏi và vấn đề phổ biến nhất thường thấy. Khi thực hiện, bạn sẽ khám phá ra rằng quá trình này không khó như bạn từng nghĩ.

Ồ, và trước khi tôi quên, nếu bạn muốn mở rộng thư viện biểu tượng của mình, bạn luôn có thể đi đến Envato Elements nơi bạn sẽ tìm thấy một bộ sưu tập các gói biểu tượng vector tuyệt vời đang chờ để được chọn.

1. Biểu tượng là gì?

Nếu có một điều thực sự quan trọng mà trường học có thể dạy tôi, đó là bất cứ khi nào bản thân bạn cần giải quyết một ý tưởng mới, bạn nên luôn luôn dành thời gian cho nó và thực hiện nghiên cứu kỹ lưỡng, để bạn có thể hiểu đầy đủ về điều mà nó đại diện.

Vì vậy, với thói quen mà tôi đang có, tôi sẽ hướng dẫn cho bạn phương pháp giải quyết vấn đề tương tự, bắt đầu với những câu hỏi cơ bản nhất: Một biểu tượng là gì?

what are iconswhat are iconswhat are icons

Theo Google, từ này bắt nguồn từ tiếng Hy Lạp (hình ảnh) và ngày nay thường được định nghĩa là:

"bức họa tôn sùng của Chúa Kitô hoặc một nhân vật thánh khác, thường được tạo trên gỗ và được sử dụng trong nghi lễ ở Byzantine và các nhà thờ phương Đông khác".

Mặc dù đây chính xác là loại biểu tượng mà chúng ta sáng tạo có xu hướng nghĩ ra, nhưng đây có thể là điều đầu tiên mà một số người hình dung khi bạn nói với họ rằng bạn kiếm sống bằng cách "thiết kế biểu tượng".

Đừng hiểu sai về tôi, tôi không chống lại nghệ thuật vẽ biểu tượng, bản thân nó là một nghề thủ công đẹp nhưng khó, nhưng chúng ta đang nói về việc sử dụng của đôi tay và trí tưởng tượng hoàn toàn khác ở đây.

Từ góc nhìn hiện đại hơn, kỹ thuật số, một biểu tượng của người Viking được định nghĩa là:

Một biểu tượng hoặcdiễn tả đồ họa trên màn hình của một chương trình, tùy chọn hoặc cửa sổ.

Cho dù bạn sử dụng máy Mac hay PC, iPhone hay thiết bị Android, mỗi loại trong số chúng đều có giao diện người dùng dựa trên các biểu tượng có hình dạng, màu sắc và kích cỡ khác nhau.

2. Tại sao chúng ta sử dụng các biểu tượng?

Trong lịch sử, bộ biểu tượng máy tính đầu tiên từng được ý tưởng hóa cách đây gần 37 năm (chính xác hơn là năm 1981), khi một nhà khoa học máy tính tên David Canfield Smith hợp tác với nhà thiết kế Norman Lloyd Cox khi làm việc trên GUI (Graphical User Interface) của Xerox Star 8010. Nhiệm vụ của họ là giảm bớt sự tương tác của người dùng với máy, họ đã vượt qua một cách sáng tạo bằng cách giới thiệu các biểu tượng đồ họa quen thuộc để phản ánh các đối tượng trong đời thực mà người dùng có thể liên quan.

Vì máy tính ngày trước hầu hết chỉ được sử dụng trong môi trường làm việc, do đó, họ nhanh chóng nhận ra rằng họ có thể tìm thấy nguồn cảm hứng bằng cách nhìn vào các vật thể phổ biến nhất được tìm thấy trong một văn phòng, do đó "phép ẩn dụ văn phòng" ra đời.

Điều này đặt nền tảng cho việc xây dựng ngôn ngữ hình ảnh phổ biến đầu tiên cho thời đại kỹ thuật số, nó đã không chỉ định hình không chỉ giao diện GUI mà còn cả cách chúng hoạt động.

Dễ tương tác

Chuyển nhanh đến thời nay và trong khi chúng ta chắc chắn đã thấy một số thay đổi về hình thức, thì chức năng cốt lõi của chúng vẫn khá giống nhau, vì chúng tiếp tục phục vụ cùng một mục đích mà chúng được thiết kế ban đầu và điều đó làm giảm sự tương tác của chúng ta với các phần khác nhau và các loại phần mềm.

ease of interactionease of interactionease of interaction

Và thành thật mà nói, chúng ta có nên ngạc nhiên không? Hãy tưởng tượng bạn phải sử dụng một phần mềm có GUI hoàn toàn dựa trên việc sử dụng từ khóa. Tôi đã làm, và hãy tin tôi, nó nhanh chóng biến thành một cơn ác mộng nhỏ.

Bẻ gãy rào cản ngôn ngữ

Các biểu tượng hoạt động như các biểu tượng hình ảnh phổ quát thoát khỏi rào cản ngôn ngữ, do thực tế là chúng quản lý để mô tả hình ảnh có thể dễ dàng hiểu được bởi những người dùng đến từ các quốc gia khác nhau trên hành tình.

Thay vì phải tìm ra cách truyền đạt cùng một ý nghĩa cho những người nói hai ngôn ngữ khác nhau, bạn có thể dễ dàng tìm thấy một biểu tượng thường được chấp nhận thực hiện công việc cho bạn.

Tất nhiên, đôi khi sẽ có một số mô tả có thể yêu cầu người dùng trải qua quá trình ghi nhớ một biểu tượng để thêm nó vào biệt ngữ của họ. Thông thường, điều này sẽ xảy ra trong trường hợp khi có các ý tưởng hoặc công nghệ mới mà họ cần làm quen.

Kích hoạt tư duy nhanh hơn

So với lời nói, hình ảnh có khả năng kích thích mắt của chúng ta nhanh hơn đáng kể và trong một khoảng thời gian dài hơn. Nó có nghĩa là người dùng sẽ không chỉ giải mã ý nghĩa đằng sau một biểu tượng nhanh hơn mà thời gian tham gia dự kiến chung sẽ nhỏ hơn rất nhiều.

Hãy tưởng tượng có một số phần mềm phức tạp với rất nhiều công cụ và chức năng. Bây giờ, nó sẽ trông như thế nào nếu tất cả các công cụ được minh họa bằng nhãn, tức là văn bản thay vì ký hiệu? Mặc dù bạn có thể tìm ra vị trí của một số trong số họ, nhưng nó sẽ nhanh chóng trở thành một tình trạng quá tải trực quan, cuối cùng sẽ khiến bạn ghét phần mềm đó.

Dù bạn có tin hay không, có một lý do thực sự khiến chúng ta rời xa các giao diện dòng lệnh và điều đó chủ yếu liên quan đến tính thẩm mỹ và dễ tương tác.

Kẹo ngọt cho đôi mắt

Vượt ra ngoài ý tưởng về chức năng, các biểu tượng hoạt động như các yếu tố kích hoạt trực quan có nghĩa là không chỉ để mô tả một ý tưởng nhanh hơn mà còn thực hiện nó theo cách dễ chịu cho đôi mắt.

Ví dụ, tôi thích nghĩ về một màn hình thiết bị là một trong những cái kệ mà tôi thường đi dạo khi đi mua sắm ở chợ nhỏ tại địa phương. Nếu các sản phẩm được gói ghém một cách sặc sỡ, bắt mắt, thì tôi sẽ ngay lập tức chú ý đến chúng, mặc dù đôi khi tôi không cần đến sản phẩm đó - Tôi cũng chỉ quan tâm đến việc xem nó chứa gì.

Nó cũng tương tự như các biểu tượng, vì chúng trông càng đẹp, người dùng sẽ càng bị chúng hấp dẫn và sau đó là tham gia vào tương tác, đôi khi đó chính xác là những gì chúng ta muốn chúng làm.

3. Cách tạo biểu tượng

Được rồi, cho đến thời điểm này, chúng ta đã biết các biểu tượng là gì và tại sao chúng ta sử dụng chúng. Bây giờ chính là lúc để biết những điều cần làm để tạo biểu tượng.

3.1. Giai đoạn nghiên cứu

Mỗi khi bạn bắt đầu làm việc với một dự án dựa trên biểu tượng mới, có một vài khía cạnh chính mà bạn cần tìm ra trước khi bạn trải qua quá trình thực tế xây dựng các biểu tượng.

Tôi gọi đây là "giai đoạn nghiên cứu" vì về cơ bản đó là tất cả những gì bạn sẽ làm. Bạn sẽ dành một vài phút hoặc vài giờ, tùy thuộc vào thời gian và sự kiên nhẫn mà bạn có, tìm kiếm câu trả lời cho một vài câu hỏi cơ bản.

research phaseresearch phaseresearch phase

Bạn cần bao nhiêu biến thể kích thước?

Câu hỏi đầu tiên mà bạn phải luôn tự hỏi bản thân phải làm với số lượng biến thể kích thước mà bạn cần tạo cho một biểu tượng cụ thể.

Bạn cần một biểu tượng, hai biểu tượng hoặc có thể nhiều hơn?

Nếu, vì một số lý do, bạn chỉ làm việc với một dự án kích thước duy nhất, thì phần này sẽ khá dễ dàng để thực hiện. Mặt khác, nếu bạn cần cung cấp nhiều kích cỡ, thì bạn có thể sẽ thấy mình bị mắc kẹt, đặc biệt là nếu bạn đang làm việc cho khách hàng nhưng không có một bản tóm tắt rõ ràng về các giá trị bắt buộc.

how many size variations do you needhow many size variations do you needhow many size variations do you need

May mắn thay cho chúng ta, hầu hết các giá trị này đã trở thành "tiêu chuẩn" cho ngành công nghiệp, điều đó có nghĩa là bạn sẽ không phải lãng phí thời gian để chơi với những con số để tìm ra cái nào sẽ mang lại hiệu quả và cái nào không.

Nếu bạn biết nơi các biểu tượng sẽ được sử dụng, bạn thường có thể tìm thấy các giá trị kích thước cần thiết bằng cách thực hiện tìm kiếm Google đơn giản.

Biểu tượng nhỏ:

  • 12 x 12 px
  • 16 x 16 px
  • 24 x 24 px
  • 32 x 32 px
  • 48 x 48 px

Biểu tượng trung bình:

  • 64 x 64 px
  • 96 x 96 px
  • 128 x 128 px
  • 256 x 256 px

Biểu tượng lớn:

  • 512 x 512 px
  • 1024 x 1024 px

Quick tip: nếu bạn xem xét kỹ hơn các giá trị kích thước trên, bạn sẽ nhanh chóng nhận thấy rằng hầu hết chúng thực sự được tạo bằng cách nhân đôi số trước đó: 12 > 24 > 48 > 96; 16 > 32 > 64 > 128 > 256 > 512 > 1024.

Trong một số trường hợp, chẳng hạn như đối với các ứng dụng dành cho thiết bị di động, bạn có thể tìm thấy các hướng dẫn chi tiết trực tiếp từ các nhà sản xuất OS nhằm giúp bạn giải quyết:

Kích thước cơ sở của bạn sẽ là gì?

Khi làm việc trên các dự án có nhiều kích cỡ, tôi thực sự khuyên bạn hãy luôn bắt đầu từ kích thước nhỏ nhất có thể.

Nó sẽ là kích thước cơ sở của bạn, mà sau này bạn sẽ sử dụng để thực hiện tất cả các yêu cầu khác. Lý do liên quan đến bản chất điểm ảnh hoàn hảo (pixel - perfect) của các hình dạng của bạn, nó sẽ bị hỏng nếu bạn xây dựng lớn và sau đó cố gắng để có được các biến thể nhỏ hơn bằng cách thay đổi kích thước chúng.

Khi nói đến việc chọn một giá trị cho kích thước cơ sở thực tế, tất cả phụ thuộc vào các yêu cầu của dự án, nhưng quy tắc chung là bạn phải luôn thực hiện càng nhỏ càng tốt.

choosing a base sizechoosing a base sizechoosing a base size

Ví dụ: nếu tôi cần tạo ba biến thể (16 x 16 px, 32 x 32 px và 64 x 64 px), tôi sẽ luôn đảm bảo bắt đầu với kích thước cơ sở 16 x 16 px của mình, sau đó tạo những biểu tượng khác bằng cách nhân đôi nó lên.

Các đặc điểm xác định chính của đối tượng đó là gì?

Khi chúng ta đã giải quyết xong vấn đề về kích thước, chúng ta cần phải dành thời gian và hiểu về ý tưởng mà chúng ta sẽ minh họa. Đối với cá nhân tôi, bước này là bắt buộc vì nó cho phép tôi xác định và cô lập các đặc điểm chính của nó.

Bạn có thể dễ dàng thực hiện điều này bằng cách lấy một tờ giấy hoặc mở một tài liệu văn bản, sau đó viết dần các quan sát ngắn (từ khóa) có liên quan đến hình dạng, kích thước, màu sắc, các yếu tố / tính năng tạo thành của nó, v.v.

icon main featuresicon main featuresicon main features

Mặc dù một số người thường dành ít thời gian hơn cho phần nghiên cứu này, nhưng thêm vào đó một chút thời gian có thể chứng minh là cực kỳ hữu ích, đặc biệt là nếu bạn mới bắt đầu, vì nó sẽ giúp mọi việc trở nên dễ dàng hơn khi có được "cảm giác" của đối tượng đó.

Bạn sử dụng phong cách nào?

Tại thời điểm này, chúng ta có thể và nên bắt đầu nghĩ về "phong cách' này, hay nói cách khác là vẻ ngoài mà các biểu tượng của chúng ta sẽ có được.

Trước đây, mọi thứ khá khác biệt, vì phong cách của các biểu tượng đầu tiên được quyết định bởi công nghệ hiển thị hạn chế. Đến lượt nó cuối cùng đã định hình được cách hiển thị các biểu tượng hình ảnh này , nhưng cũng đặt nền tảng cho phong cách đầu tiên, sử dụng các hình dạng được xác định bởi các đường kẻ đậm, cứng cho các phần bên ngoài và mỏng hơn cho các chi tiết bên trong.

Ngày nay, rào cản điểm ảnh đó đã vượt qua được từ lâu, cho phép chúng ta phát triển và tạo ra các phong cách mới, không ngừng phát triển và thay đổi.

example of same icon in multiple stylesexample of same icon in multiple stylesexample of same icon in multiple styles

Các phong cách phổ biến nhất là:

  • pixel art
  • flat
  • material
  • line art
  • isometric
  • glyph
  • skeuomorphic
  • dimensional
  • hand-drawn
  • animated

Về cá nhân, khi nói đến việc chọn giao diện cho các biểu tượng trong tương lai của mình, tôi thường ghé qua Dribbble.com, nơi tôi thường dành một vài phút để phân tích các xu hướng hiện tại. Khi tôi cuộn lên và xuống, tôi nhanh chóng xoay sở để có ý tưởng về những gì tôi muốn làm, và sau đó tôi cố gắng bám lấy nó.

Để thực hiện, tôi thực sự khuyên bạn nên có ý tưởng tốt về những gì bạn hướng tới ngay từ đầu, vì nếu không bạn có thể thấy mình mất rất nhiều thời gian bằng cách quay đi quay lại qua các phong cách khác nhau.

Ồ, và một điều nữa, xin đừng trở thành nhà thiết kế đó, là người nhìn thấy thứ gì đó tốt và sau đó sao chép hoàn toàn công việc của một người khác, công khai nó như là của riêng họ. Trong khi một số người đề xuất cách tiếp cận này để học hỏi và phát triển, thì đó là điều cuối cùng nên làm, một bài tập mà bạn cố gắng tìm hiểu về cách một số việc được thực hiện.

Nếu sao chép là tất cả những gì bạn phải làm, thì bạn có thể không bao giờ đến được nơi mà bạn phát triển một phong cách cá nhân, đó là điều khiến một nhà thiết kế biểu tượng giỏi khác biệt so với phần còn lại.

Nếu bạn muốn tìm hiểu thêm về chủ đề này, tôi thực sự khuyên bạn nên đọc bài 10 Phong cách đã thay đổi khuôn mặt của thiết kế biểu tượng, bài viết này giải thích các phong cách chính hiện có và các đặc điểm của chúng.

10 styles that have changed the face of icon design10 styles that have changed the face of icon design10 styles that have changed the face of icon design
10 Styles That Have Changed the Face of Icon Design

Cách tìm cảm hứng

Tùy thuộc vào bản chất của dự án mà bạn đang thực hiện, cho dù đó là một công việc cá nhân hay công việc của khách hàng, cuối cùng bạn sẽ thấy mình cần có một chút cảm hứng. Giai đoạn này khá rắc rối với việc chọn kiểu, vì đây là nơi bạn bắt đầu đặt nền tảng cho các biểu tượng trong tương lai của mình.

Vì vậy, làm thế nào để bạn có được cảm giác được truyền cảm hứng?

Chà, cách tốt nhất để khiến cho sự sáng tạo của bạn tuôn trào là tạo ra thứ thường được gọi là "bảng tâm trạng" (hay bảng cảm hứng).

Như tên gọi của nó, bảng tâm trạng là một bộ sưu tập, hay chính xác hơn là một ảnh ghép của các ý tưởng dựa trên hình ảnh, từ bảng màu đến hình ảnh, hình minh họa, kết cấu, kiểu chữ, ... Nó giúp bạn định hướng cho những gì bạn muốn có ở sản phẩm sau cùng của bạn.

Là một nhà thiết kế, bạn có thể liên tục đánh dấu những thứ thu hút sự chú ý của bạn, nhưng đôi khi nó rất khó để theo dõi tất cả chúng, đặc biệt là khi bạn cần xem tất cả chúng cùng một lúc.

Đây là nơi các công cụ như Pinterest và Instagram có ích, vì chúng cho phép bạn tạo bảng tâm trạng chỉ với một nút bấm.

Một cách khác, mà tôi biết rất nhiều người có xu hướng sử dụng, là tải xuống lựa chọn hình ảnh mà bạn đã thực hiện, sau đó tạo bảng tâm trạng trực tiếp trong bộ đồ họa của bạn.

Nếu bạn sử dụng một thiết lập màn hình đơn thì điều này có thể phù hợp với bạn hơn, nhưng nếu bạn có thể lập nhóm đôi, bạn có thể cân nhắc sử dụng phương pháp đầu tiên.

Khi nói đến hình ảnh thực tế, tôi thường dựa vào một trong các tài nguyên sau:

Đôi khi, bạn sẽ thấy mình ở trong tình huống nơi bạn có một chủ đề phức tạp hơn mà bạn có thể cần trợ giúp để tìm ra biểu tượng được sử dụng cho nó. Khi điều này xảy ra, tôi thường đến The Noun Project hoặc Iconfinder và thực hiện một tìm kiếm đơn giản, nó luôn có một sự lựa chọn lớn các hình ảnh giúp tôi hiểu rõ hơn về chủ đề này.

Lúc này, bạn đã giải quyết được tất cả các câu hỏi trên, điều đó có nghĩa là chúng ta hiện đã sẵn sàng để chuyển sang giai đoạn tiếp theo.

3.2. Giai đoạn xây dựng

Vậy là, bạn đã tìm ra kích thước cơ sở của mình, quyết định các biến thể kích thước và thậm chí thiết lập một bảng tâm trạng nhỏ, đưa chúng ta đến giai đoạn thứ hai của quá trình này.

Bây giờ, bất kể phần mềm mà bạn sử dụng là gì - Adobe Adobe Illustrator, Adobe Photoshop, Affinity Designer, Sketch,... phần tiếp theo này khá giống nhau, vì bạn có thể áp dụng các khái niệm cho bất kỳ bộ đồ họa hiện có nào.

Điều tương tự cũng có thể nói về các hệ điều hành khác nhau, cho dù bạn là người dùng Mac hay Windows, bạn sẽ có thể đạt được kết quả tương tự bằng cách làm theo cùng một quy trình.

Để thực hiện, hãy xem những gì cần có để bắt đầu xây dựng biểu tượng của bạn.

Làm nó theo dạng Pixel Perfect (điểm ảnh hoàn hảo)

Lúc này, hầu hết các chương trình đã được cấu hình sẵn để giúp bạn tạo ra các biểu tượng của mình với định hướng điểm ảnh hoàn hảo.

Nếu đây là lần đầu tiên bạn nghe về ý tưởng này, thì tôi thực sự khuyên bạn nên dành một vài phút và xem qua bài viết về Cách tạo bản vẽ nghệ thuật Pixel-Perfect của tôi, sẽ giúp bạn tăng tốc.

how to create pixel perfect artworkhow to create pixel perfect artworkhow to create pixel perfect artwork
How to Create Pixel-Perfect Artwork in Adobe Illustrator

Bây giờ, giả sử bạn đã đọc xong bài viết trên, câu hỏi đặt ra là liệu chúng ta có nên dành thời gian và thích nghi với quy trình làm việc nghiêm ngặt hơn này hay không.

Chà, cá nhân tôi đã sử dụng nó trong hơn năm năm nay và không quan trọng nó mất bao nhiêu thời gian để thẩm thấu, tôi vẫn tin rằng nó rất đáng để đọc. Nếu bạn nhìn vào cách mọi thứ ban đầu được thực hiện trong những năm đầu của nghề này, khi độ phân giải là một vấn đề, bạn sẽ nhận thấy rằng các biểu tượng được xây dựng bằng lưới pixel, không phải hình dạng kích thước ngẫu nhiên.

Thiết lập một tập tin dự án phù hợp

Bước đầu tiên để tạo biểu tượng của riêng bạn, hoặc gói biểu tượng, là thiết lập một tập tin dự án mới. Thật đơn giản phải không? Chà, thật ra thì không, vì nếu bạn chỉ mới bắt đầu, có một vài điều mà bạn nên chú ý.

Hồ sơ tài liệu

Trước tiên, bạn phải luôn đảm bảo rằng hồ sơ tài liệu của bạn được đặt thành Web, vì các biểu tượng thường được sử dụng trong phương tiện kỹ thuật số.

Điều này thực sự quan trọng, vì các cấu hình khác nhau sẽ có các hệ màu khác nhau (Web sử dụng RGB, trong khi In ấn sử dụng CMYK), điều này có thể dẫn đến việc thể hiện màu sắc không mong muốn khi người khác xem.

Các đơn vị đo lường

Tiếp theo, chúng ta có các đơn vị đo được sử dụng để mô tả chiều rộng, chiều cao, bán kính góc, độ dày nét viền và khoảng cách được sử dụng cho các hình dạng tạo thành khác nhau.

Theo mặc định, các đơn vị phải luôn được đặt thành Pixel miễn là bạn đảm bảo rằng tài liệu được dự định sẽ sử dụng cho web.

Chúng ta sử dụng pixel thay vì những thứ khác vì đây là đơn vị được thống nhất toàn cầu được sử dụng để đo bất kỳ sản phẩm kỹ thuật số nào.

Số lượng bản vẽ

Sau khi bạn thiết lập hồ sơ và đơn vị tài liệu của bạn, bạn cần tìm hiểu xem bạn sẽ sử dụng một Artboard lớn hay nhiều bản vẽ nhỏ hơn.

Lời khuyên của tôi là luôn cố gắng đi theo con đường thứ hai, vì nó sẽ giúp mọi việc dễ dàng hơn rất nhiều khi xuất các biểu tượng.

Ngoài ra, có nhiều Artboards có nghĩa là bạn có thể dễ dàng tập trung hơn vào một tài sản tại một thời điểm, khi bạn xây dựng gói của mình một cách dần dần.

Sử dụng các Layer

Cho dù bạn có đang tạo một biểu tượng hay một bộ biểu tượng, bạn luôn phải thử và sử dụng một vài layer để tách tài sản của bạn khỏi lưới tham chiếu của bạn.

use layersuse layersuse layers

Bằng cách làm như vậy, bạn có thể dễ dàng xây dựng các biểu tượng của mình mà không phải lo lắng rằng bạn sẽ di chuyển hoặc nhóm các lưới cơ bản do nhầm lẫn.

Ngoài ra, nó sẽ giúp bạn trong quá trình xuất, vì bạn sẽ muốn có thể che đi lưới của mình.

Sử dụng lưới tham chiếu

Theo định nghĩa, "lưới tham chiếu" là một công cụ trực quan bao gồm các hướng dẫn hình học nhằm giúp bạn đạt được sự thống nhất về kích thước trong các biểu tượng của mình.

Nó có thể đơn giản như hai hình vuông xếp chồng lên nhau hoặc bạn có thể sử dụng một cái gì đó phức tạp hơn một chút. Cá nhân, tôi thích đi theo điều cơ bản hơn vì nó mang lại kết quả tốt hơn mong đợi.

example of complex reference gridexample of complex reference gridexample of complex reference grid

Thông thường, tôi bắt đầu bằng cách tạo bề mặt tham chiếu chính bằng cách sử dụng cùng các giá trị chiều rộng và chiều cao chính xác như Artboard bên dưới của tôi. Sau đó, tôi thêm một khu vực nhỏ hơn một chút gọi là khu vực vẽ đang hoạt động, đó là nơi tôi sẽ định vị tất cả các hình dạng tài sản của mình.

Điều này sẽ cung cấp cho tôi một lớp đệm bảo vệ toàn diện, mà tôi luôn bao gồm để đảm bảo rằng các biểu tượng không bị cắt bớt khi chúng được giao và sử dụng sau này bởi khách hàng.

Khi làm việc trên nhiều biểu tượng, quy tắc vàng của tôi là quyết định liệu tôi có nên điền vào cả chiều rộng và chiều cao của khu vực vẽ đang hoạt động hay chỉ một trong số chúng, tùy thuộc vào phong cách mà tôi đi theo. Khi tôi nhận ra điều này, tôi sẽ sử dụng quy tắc đó và áp dụng nó cho tất cả các tài sản khác của mình, do đó đạt được sự thống nhất mà tôi đã nhắm tới.

4. Những điều nền và không nên làm khi tạo biểu tượng

Khi bạn đã hoàn tất việc thiết lập tập tin dự án, các layer và lưới tham chiếu của mình, tất cả những gì còn lại là bắt đầu làm việc với các biểu tượng thực tế. Bây giờ, tùy thuộc vào phong cách mà bạn sẽ hướng tới, có một vài điều mà bạn nên chú ý.

Giữ nó đơn giản

Khi chúng ta bắt đầu học một điều gì đó mới mẻ, chúng ta luôn có mong muốn tạo ra ở cấp độ cao hơn, vì chúng ta có xu hướng nhìn vào những gì người khác đang làm và nghĩ "điều đó không thể khó khăn như vậy".

Mặc dù tôi không nghi ngờ khả năng của bạn tạo ra một thứ nào đó hoàn toàn tuyệt vời, nhưng tôi thực sự khuyên bạn nên bắt đầu bằng cách thiết kế đơn giản ngay từ đầu, để bạn có thể dần dần xây dựng các kỹ năng của mình theo cách tự nhiên hơn.

Ngoài ra, đôi khi đơn giản sẽ tốt hơn vì ý tưởng là mô tả một chủ đề, cho dù đó là một đối tượng, một chức năng hay một ý tưởng - theo cách mà bất kỳ người dùng nào cũng có thể hiểu ngay lập tức.

Bắt đầu với các hình dạng cơ bản

Nếu bạn đang gặp khó khăn khi làm việc trong một dự án, ý tưởng tốt nhất là lùi lại một bước và sau đó tập trung vào việc đặt các hình dạng cơ bản của đối tượng đó. Cho dù bạn đang sử dụng hình chữ nhật, hình tròn hoặc cả hai, hãy thử nới lỏng và xem cách bạn có thể xây dựng biểu tượng của mình bằng cách tập trung vào các phần tạo thành chính của nó.

Khi bạn đã đặt nền móng của mình, bạn có thể bắt đầu điều chỉnh các khối xây dựng chính và dần dần thêm chi tiết cho chúng cho đến khi bạn đạt được hình thức mong muốn.

Tập trung vào màu sắc

Nhiều lúc, tôi thấy những tác phẩm đáng kinh ngạc được đưa ra bởi những người sáng tạo ngẫu nhiên, người đã chú ý rất nhiều vào các tác phẩm của họ, nhưng vì một số lý do dẫn đến thất bại khi nói đến màu sắc. Dù bạn có tin hay không, một bảng màu có thể tạo ra hoặc phá vỡ tác phẩm nghệ thuật tuyệt đẹp của bạn, đó là lý do tại sao tôi tin rằng rất quan trọng để bạn dành thời gian cho nó và tìm hiểu tất cả những gì bạn có thể về lý thuyết màu sắc.

Nếu bạn cảm thấy lười, hoặc đơn giản là không có thời gian để bắt đầu đọc những quyển sách về chủ đề này, thì chỉ cần tìm một số biểu tượng (một số biểu tượng tốt) và thử và phân tích cách những người tạo ra chúng sử dụng màu sắc để mang lại sự sống cho chúng.

Đôi khi, học bằng cách nhìn vào một ví dụ khác có thể kích hoạt cơ bắp bộ nhớ nhanh hơn rất nhiều, dạy cho tâm trí của bạn màu nào sẽ mang lại hiệu quả và màu nào thì không.

Tránh sử dụng văn bản trong các biểu tượng của bạn

Đây là một kiểu không cần trí tuệ, vì toàn bộ ý tưởng đằng sau một biểu tượng là để loại bỏ sự cần thiết của các chữ cái viết, cần được thay thế bằng các biểu tượng.

Tất nhiên, sẽ luôn có một vài tình huống khi bạn thực sự cần sử dụng các chữ cái để phân biệt biểu tượng này với biểu tượng khác. Ví dụ tốt nhất là khi bạn cần tập hợp một gói biểu tượng theo chủ đề tài liệu, trong đó bạn cần minh họa một tập tin PNG, JPEG và SVG. Vì hình dạng của tài liệu cần giữ nguyên, nên cách tiếp cận tốt nhất của bạn để làm điều này là thêm một nhãn nhỏ vào giữa mỗi tài liệu để cho người dùng có thể phân biệt.

Bạn có thể tìm thấy một danh sách chi tiết hơn bằng cách đọc Top 10 lời khuyêni để tạo ra những biểu tượng tuyệt vời của tô, sẽ mang lại nhiều ánh sáng hơn cho chủ đề này.

10 top tips for creating awesome icons10 top tips for creating awesome icons10 top tips for creating awesome icons
10 Top Tips for Creating Awesome Icons

Một số phong cách, chẳng hạn như line icons, cần chú ý nhiều hơn một chút khi nói đến quá trình xây dựng thực tế. Từ đường path chồng chéo cho đến vị trí đặt nét viền, tôi đã bao gồm tất cả các vấn đề khác nhau mà bạn cần lưu ý khi tạo các loại biểu tượng này.

the dos and donts of creating line iconsthe dos and donts of creating line iconsthe dos and donts of creating line icons
Những việc cần và không cần làm khi tạo biểu tượng đường nét

5. Các vấn đề thường gặp

Tiếp theo, chúng ta sẽ nhanh chóng khắc phục một số vấn đề phổ biến nhất mà bạn sẽ phải giải quyết khi làm việc với một biểu tượng mới.

Xoay hình

Đây có lẽ là điều khó chịu nhất khi làm việc với một biểu tượng điểm ảnh hoàn hảo, vì bất cứ khi nào bạn xoay một hình dạng, nó sẽ ngay lập tức tắt Lưới Pixel bên dưới. Khi điều này xảy ra, các giá trị chiều rộng và chiều cao của hình dạng đó sẽ biến thành giá trị thập phân, thường được biểu thị bằng bảng Transform của phần mềm đó.

example of shape snapping off the pixel grid after being rotatedexample of shape snapping off the pixel grid after being rotatedexample of shape snapping off the pixel grid after being rotated

Mặc dù bạn có thể nghĩ rằng đây không phải là một vấn đề lớn như vậy, nhưng bạn sẽ nhanh chóng phát hiện ra rằng nó thực sự như vậy, vì nếu bạn cần căn chỉnh hình dạng với cạnh của một hình khác, bạn sẽ không thể làm được.

Tùy thuộc vào độ phức tạp của hình dạng, hầu hết những lần bạn có thể khắc phục sự cố đó bằng cách chọn riêng lẻ các điểm neo / nút của nó, sau đó gắn chúng trở lại vị trí vào giao điểm đường lưới gần nhất.

Cá nhân, tôi có xu hướng tránh xa các hình dạng xoay và chỉ sử dụng chúng khi tôi thực sự phải làm, cố gắng làm hết sức mình để đưa chúng trở lại Lưới Pixel.

Tạo biến thể kích thước

Vậy là, bạn đã biết tạo kích thước cơ sở cho biểu tượng của mình, nhưng làm thế nào về việc thêm nhiều biến thể kích thước dựa trên nó?

Chà, tự quá trình đó khá đơn giản, vì hầu hết thời gian bạn phải làm là tăng gấp đôi kích thước của biểu tượng hiện tại của mình bằng cách tăng 200%.

Ví dụ: nếu bạn có một biểu tượng là 64 x 64 px, bạn có thể dễ dàng tạo biến thể kích thước tiếp theo bằng cách nhân đôi giá trị chiều rộng và chiều cao của nó, là 128 x 128 px.

Bạn có thể tìm hiểu thêm về quy trình cụ thể này bằng cách đọc bài viết của tôi về Cách chia tỷ lệ biểu tượng chính xác trong Adobe Illustrator, trình bày các khái niệm có thể được sử dụng trong hầu hết các bộ đồ họa.

how to scale icons correctly in adobe illustratorhow to scale icons correctly in adobe illustratorhow to scale icons correctly in adobe illustrator
How to Scale Icons Correctly in Adobe Illustrator

6. Cách xuất biểu tượng của bạn

Chúng ta đã trải qua các bước chính cần thiết để tạo biểu tượng, vì vậy bây giờ là lúc chúng ta dành một vài phút và nói về những gì chúng ta cần biết khi xuất nó.

Phần cuối cùng của quá trình này, mặc dù có vẻ phức tạp, nhưng thực sự rất đơn giản.

Chọn đúng định dạng

Điều đầu tiên bạn cần làm là tìm ra định dạng tập tin bạn sẽ sử dụng để lưu thiết kế cuối cùng của bạn.

Thông thường, khi tạo biểu tượng, bạn sẽ muốn xuất chúng bằng cách sử dụng nền trong suốt để có thể sử dụng chúng trên bề mặt màu. Tính năng này được hỗ trợ bởi các định dạng tập tin raster sau:

Trong tất cả, bạn thường sẽ sử dụng PNG vì nó cung cấp khả năng tương thích hoàn toàn, sử dụng một trọng khối rất nhỏ khi nói đến kích thước. Điều này có nghĩa là về cơ bản nó có thể được sử dụng ở bất cứ đâu, cho dù đó là trang web, ứng dụng máy tính để bàn, ứng dụng di động, tài liệu Word, v.v.

SVG đang trở thành một định dạng phổ biến khác cho web vì đây là định dạng có thể mở rộng mà bạn có thể điều chỉnh nhanh chóng và thay đổi kích thước mà không làm giảm chất lượng.

Lưu chúng riêng lẻ

Khi nói đến quá trình của chính nó, nó thay đổi từ công cụ này sang công cụ khác. Một số đi kèm với các công cụ xuất chuyên dụng, trong khi những biểu tượng khác vẫn dựa vào các phương pháp truyền thống hơn.

Cho dù bạn sử dụng phần mềm nào, thì mục tiêu chính là luôn đảm bảo lưu từng biểu tượng dưới dạng tập tin riêng của nó, đặt tên cho chúng khi có thể.

Mở rộng kỹ năng xây dựng biểu tượng của bạn!

Bây giờ chúng ta đã đi đến cuối bài viết, tôi muốn để lại cho bạn một vài hướng dẫn chọn lọc sẽ giúp bạn nhanh chóng mở rộng các kỹ năg của mình!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
One subscription. Unlimited Downloads.
Get unlimited downloads