colorME FLAT DESIGN EBOOK by colorME

color

ME NHỮNG ĐIỀU CẦN BIẾT VỀ

FLAT DESIGN Cuốn sách tiếp theo của colorME về những kiến thức chung cho cộng đồng

color

LỜI NÓI ĐẦU Như vậy, colorME đã tồn tại và phát triển được 9 tháng, 9 tháng là một chặng đường thực sự dài với colorME. Để tri ân các học viên và các bạn luôn ủng hộ colorME. colorME quyết định xuất bản 3 tập EBOOK để giúp mọi người phát triển kĩ năng thiết kế. Không giống như tập trước của EBOOK chỉ đào sâu vào kiến thức cơ bản về thiết kế kĩ thuật số, cuốn sách này chỉ tập trung chia sẻ với mọi người về những điều mà colorME biết về Infographic. Rất hi vọng mọi người sẽ có thêm nhiều cảm hứng sau khi đọc xong cuốn sách này. Mọi góp ý xin vui lòng liên hệ: colorme.idea@gmail.com Xin cám ơn mọi người.

color

MỤC LỤC 1 2 3 4

ĐỊNH NGHĨA HÌNH KHỐI BỐ CỤC LỜI KẾT

1 color

ĐỊNH NGHĨA

Cuốn sách này sẽ cho bạn biết, thiết kế phẳng là gì. Chúng ta hãy cùng nhau định nghĩa về thiết kế phẳng thông qua một số phương pháp nhận diện nhé.

1 color

LỊCH SỬ Thiết kế phẳng, hay còn gọi là Flat Design. Là thuật ngữ chỉ về một phong cách thiết kế mang lại cảm giác hình họa 2D, cực kì tối giản. Xuất hiện từ lâu, nhưng đến năm 2013, đã có sự quay lại đột phá.

ĐỊNH NGHĨA

1 color

LỊCH SỬ Nguyên nhân của sự quay lại này chính là Windows 8. Chắc hẳn các bạn còn nhớ, Windows 8 bùng nổ vào năm 2013 với điểm đặc trưng nhất là màn hình Start được thiết kế theo phong cách phẳng. Với những Icon trắng, chữ trắng trên những tấm chữ nhật nhiều màu đem lại cảm giác khá lạ lẫm và bắt mắt cho người dùng. Sau khi Microsoft cho ra đời Windows 8, một năm sau đó, Google đã cập nhật toàn bộ giao diện theo phong cách Material Design, một nhánh của Flaat Design, còn giao diện phẳng của Microsoft đi theo nhánh Metro Design.

ĐỊNH NGHĨA

1 color

MÀU SẮC Về màu sắc, Flat Design hướng đến sự dơn giản, dễ kết hợp, không quá chói, không quá đậm. Vì vậy, tone màu Pastel luôn là lựa chọn hàng đầu của các Designer khi chơi đùa với thiết kế phẳng. Các bạn có thể xem thêm các tone màu thường thấy trong Flat Design tại: FlatUIColors.com.

ĐỊNH NGHĨA

1 color

HIỆU ỨNG Flat design được tối giản về mọi mặt, kể cả hiệu ứng. Tất cả những hiệu ứng thường thấy trong Realism Design như Drop Shadow hay Gradient Overlay được loại bỏ gần như tuyệt đối ra khỏi phong cách thiết kế này.

ĐỊNH NGHĨA

1 color

HÌNH KHỐI Thiết kế phẳng thiên về dùng những hình khối tối cơ bản như hình chữ nhật, hình elip, hình tam giác hay hình chữ nhật được bo tròn bốn gốc. Điều tuyệt vời nhất là Adobe Illustrator có bộ xử lý hình khối cực kì hoàn hảo, khiến cho việc thiết kế theo Flat Design ngày nay dễ dàng hơn bao giờ hết.

ĐỊNH NGHĨA

1 color

HÃY BẮT ĐẦU Và giờ là lúc chúng ta cùng bắt đầu cuộc hành trình tìm hiểu về Flat Design. Hãy đọc kĩ từng phần nhé, sẽ có rất nhiều kiến thức và tips hay đang chờ bạn phía trước.

ĐỊNH NGHĨA

2 color

HÌNH KHỐI

Như đã nhắc đến trước đó, Flat Design được tạo ra từ những hình khối rất cơ bản, vậy với những hình khối đó ta có thể làm được gì? Hãy cùng colorME tìm hiểu xem nhé.

2 color

NGOÀI TRỜI Đầu tiên, chúng ta hãy cùng nhau tập vẽ những hình thể thường có xung quanh cuộc sống hàng ngày nhé, bắt đầu từ những thứ mà bạn có thể nhìn thấy mỗi ngày. Ví dụ như dưới đây, chúng ta đang có một hình mặt trời đượcc vẽ rất dễ thương chỉ với những hình tròn.

HÌNH KHỐI

2 color

NGOÀI TRỜI Hay những cái cây, những tán lá được vẽ bởi hình tròn, hình bán cầu và hình chữ nhật. Những hình ảnh này đem lại cho ta cảm giác rất đơn giản, khiến ai cũng tin rằng mình có thể vẽ ra nó một cách dễ dàng.

HÌNH KHỐI

2 color

NGOÀI TRỜI Và đó là lý do vì sao càng ngày càng nhiều Designer lựa chọn Flat Design, không những dễ thực hiện, mà nó còn khiến họ có cảm giác như mình có thể điều khiển mọi thứ theo ý thích. Không ai có thể nghĩ ra rằng mình có thể vẽ ra nguyên một cái đu quay chỉ với những hình khối cực kì cơ bản.

HÌNH KHỐI

2 color

NGOÀI TRỜI Phức tạp hơn một tí, với sự giúp sức của những hình chữ nhật được bo tròn bốn góc, chúng ta có thể vẽ ra một căn nhà nhỏ xinh như thế này.

HÌNH KHỐI

2 color

NGOÀI TRỜI Còn hình bên dưới, bạn cần dùng thêm Direct Selection Tool để can thiệp và Vector một hình tròn cho sẵn ban đầu để đưa nó về hình quả trứng, sau đó mới thêm cách hình khối cơ bản khác để tạo nên hình khinh khí cầu. Giai đoạn này đòi hỏi công sức hơn một tí nhé.

HÌNH KHỐI

2 color

NGOÀI TRỜI Bạn có đang cảm thấy những hình vừa rồi quá nhàm chán? Nhưng không, khi ghép tất cả những thứ nhỏ nhặt đó vào một bức tranh tổng thể, bạn sẽ có một kết quả đáng kinh ngạc.

HÌNH KHỐI

2 color

NGOÀI TRỜI Lời khuyên cho các bạn, khi mới luyện tập Flat Design những ngày đầu tiên, hãy luyện tập vẽ những ngôi nhà thật nhiều, có rất nhiều kiểu nhà mà bọn mình cung cấp dưới đây, việc vẽ theo những ngôi nhà này sẽ giúp bạn phần nào làm quen với việc phân tích hình khối trong AI hơn.

HÌNH KHỐI

2 color

HÌNH KHỐI

2 color

HÌNH KHỐI

2 color

HÌNH KHỐI

2 color

NGOÀI TRỜI Hoặc đôi lúc, bạn có thể vẽ vời thêm những thứ như cây đèn đường, các loại cây cối mà bạn có thể tạo ra được từ những hình khối cơ bản. Đây là lúc bạn giản ước toàn bộ thế giới xung quanh mình bằng những vật thể nhỏ bé rồi.

HÌNH KHỐI

2 color

NGOÀI TRỜI Sau đó, hãy bắt đầu lồng ghép mọi thứ lại với nhau, có thể bắt đầu từ những hành lang với những bộ bàn ghế phía dưới một bộ đèn chùm, hãy thử nghiệm mọi thứ xem nào, Flat Design dễ hơn bạn nghĩ nhiều.

HÌNH KHỐI

2 color

NGOÀI TRỜI Cố gắng làm thật nhiều, chẳng mấy chốc, bạn sẽ tự vẽ ra được nguyên một thành phố của mình. Mỗi ngày vẽ một ít, mỗi ngày vẽ một ít, lặp lui lặp lại như vậy cho đến khi bạn tin rằng Flat Design là chuyện nhỏ.

HÌNH KHỐI

2 color

NGOÀI TRỜI Dưới đây là một số bài tập cho các bạn luyện tập, hãy thử một lần cố gắng hết mình vì một cái gì đó, bạn sẽ vượt qua được bản thân mình. Adobe Illustrator không hơn không kém chỉ là một công cụ. Bạn mới là nhân vật chính của câu chuyện.

HÌNH KHỐI

color

2 color

NGOÀI TRỜI Thêm rất rất nhiều mẫu nhà khác nữa dành cho bạn. Đừng ngại luyện tập, đừng ngại khó, hãy nhìn thật kĩ, phân tích và sao chép lại những ngôi nhà dưới đây, bạn sẽ lên tay rất nhanh thôi.

HÌNH KHỐI POLICE POLICE

STORE STORE

$ $

2 color

NGOÀI TRỜI Khi đã chán với chốn thành thị đông đúc, hãy nghĩ đến những thứ khác trong thiên nhiên, mây, núi, rừng, biển, tất cả mọi thứ đều có thể đưa vào Flat Design một cách dễ dàng.

HÌNH KHỐI

2 color

HÌNH KHỐI

2 color

HÌNH KHỐI

2 color

HÌNH KHỐI

color

2 color

TRONG NHÀ Bạn đã có một khởi đầu rất tốt. Giờ đây, chúng ta hãy cùng bắt tay vào xây dựng những vật dụng mà bạn dùng mỗi ngày nhé. Bắt đầu từ chiếc đồng hồ nhỏ xinh bên dưới. Bạn hoàn toàn có thể phân tích nó ra thành những khối hình rất cơ bản.

HÌNH KHỐI

2 color

TRONG NHÀ Hay chiếc cúp vàng này cũng vậy. Tất cả mọi thứ đều vẫn chỉ đang dừng ở việc cắt ghép những hình khối, và PathFinder chính là công cụ đắc lực nhất của bạn trong Flat Design.

HÌNH KHỐI

2 color

TRONG NHÀ Một chiếc màn hình máy tính thì sao? Hoàn toàn đơn giản đúng không, nếu bạn đang thắc mắc làm sao để làm được chân máy tính thì đơn giản lắm, chỉ việc dùng hình Elip để khoét đi hình Chữ nhật thôi, Minus Back trong PahtFinder sẽ thực hiện tác vụ này trong nháy mắt.

HÌNH KHỐI

2 color

TRONG NHÀ Quả địa cầu không phải là một hình quá phức tạp, tuy nhiên trong trường hợp này, có thể bạn sẽ cần đến sự góp sức của công cụ Scissor đó.

HÌNH KHỐI

2 color

TRONG NHÀ Còn đây là một bai toán tổng hợp, bắt bạn cắt ghép nhiều lần. Hãy thử phân tích và làm theo xem sao nhé.

HÌNH KHỐI

2 color

TRONG NHÀ Dưới đây là một set đồ rất phong phú và đa dạng, đủ để bạn luyện tập trong một buổi chiều rồi đó. Hãy cùng nhâm nhi từng vật phẩm một nhé. Cố lên, sắp đến đích rồi.

HÌNH KHỐI

2 color

HÌNH KHỐI

color

ME ORT

P PASS

2 color

TRONG NHÀ Tiếp tục luyện tập với một chiếc la bàn đơn giản nào. Có thể bạn đã bắt đầu phải dùng dến Pentool rồi đó, để vẽ ra 2 hình tam giác bên tronng la bàn.

HÌNH KHỐI

2 color

TRONG NHÀ Chiếc ô tô giờ đây cũng không phải là thứ quá khó nhằn với bạn nữa, hãy cân nhắc xem nên dùng những khối hình như thế nào để có thể xây được một chiếc ô tô như thế này nhé.

HÌNH KHỐI

2 color

TRONG NHÀ Không ai ngờ rằng một chiếc Smart Phone lại có thể được vẽ lại chỉ bằng một vài đường nét như thế nay đúng không. Làm một bài tập nhỏ để giải trí nào.

HÌNH KHỐI

2 color

TRONG NHÀ Và tất nhiên, máy ảnh cũng có thể biểu diễn được bằng Flat Design. Chỉ với toàn hình khối cơ bản, bạn có thể mô tả được rất rất nhiều thứ khác nữa.

HÌNH KHỐI

2 color

TRONG NHÀ Tuy nhiên, với hình bên dưới đây, việc dùng những khối hình quá cơ bản dường như là một việc bất khả thi. Vậy nên đừng chần chừ nữa, hãy bắt đầu vẽ hình này với Pentool đi.

HÌNH KHỐI

2 color

TRONG NHÀ Thêm một set đồ nữa để các bạn luyện tập.

HÌNH KHỐI

2 color

TRONG NHÀ Thêm một set đồ nữa để các bạn luyện tập.

HÌNH KHỐI

2 color

TRONG NHÀ Thêm một set đồ nữa để các bạn luyện tập.

HÌNH KHỐI

color

2 color

NGƯỜI

Để vẽ người, dù là Flat hay Realism, đều không phải là việc dễ, tuy nhiên Flat Design vẫn có đôi chút dễ dàng thực hiện hơn cho người mới bắt đầu, hãy thử tham khảo một chàng trai bên dưới được vẽ theo phong cách Flat Design nhé.

HÌNH KHỐI

2 color

NGƯỜI

Tương tự như hình trước, chỉnh sửa lại áo quần và biểu cảm gương mặt, ta đã có hình dàng một cô gái cùng phong cách thiết kế.

HÌNH KHỐI

2 color

NGƯỜI

Hay thậm chí là một nhóm người.

HÌNH KHỐI

2 color

NGƯỜI

Với phong cách hoạt họa sẵn có của Flat Design, việc dùng những hình người có phong cách chibi là hoàn toàn khả thi. Mình khuyên các bạn nên tìm đọc thêm tài liệu về vẽ chibi trước khi bắt tay vào thực hiện nhé.

HÌNH KHỐI

2 color

NGƯỜI

Dưới đây là một nhóm người có cùng phong cách thiết kế của chàng trai trước đó, nhìn cứ như một minigame đúng không?

HÌNH KHỐI

2 color

NGƯỜI

Đôi lúc, tính chất công việc đòi hỏi tác phẩm của bạn phải có tính Formal cao, thì những hình người dưới dạng Icon kiểu này là lựa chọn hàng đầu.

HÌNH KHỐI

2 color

NGƯỜI

Đôi lúc, tính chất công việc đòi hỏi tác phẩm của bạn phải có tính Formal cao, thì những hình người dưới dạng Icon kiểu này là lựa chọn hàng đầu.

HÌNH KHỐI

2 color

NGƯỜI

Một team nhìn rất chuyên nghiệp đúng không.

HÌNH KHỐI

2 color

NGƯỜI

Dưới đây là phong cách thiết kế khá trẻ trung và mới lạ. Với hiệu ứng bóng tự thân (bạn google thêm nhé) và bóng đổ, nhìn bức hình rất có chiều sâu dù vẫn tuân thủ nguyên tắc của thiết kế phẳng.

HÌNH KHỐI

2 color

NGƯỜI

HÌNH KHỐI

2 color

NGƯỜI

HÌNH KHỐI

2 color

NGƯỜI

Icon kiểu này để làm Avatar đại diện cũng rất ổn đúng không? Để ý những tone màu Pastel khi thiết kế phẳng bạn nhé.

HÌNH KHỐI

2 color

NGƯỜI

Cách ăn mặc của một người hoàn toàn có thể cho bạn biết rằng người đó là ai. Nâng cao lên thêm một bậc nữa, bạn phải trang trí và vẽ áo quần cho nhân vật của mình sao cho khi nhìn vào, người xem biết được nhân vật của bạn là ai.

HÌNH KHỐI

2 color

NGƯỜI

HÌNH KHỐI

2 color

NGƯỜI

HÌNH KHỐI

2 color

NGƯỜI

HÌNH KHỐI

2 color

NGƯỜI

HÌNH KHỐI

2 color

NGƯỜI

HÌNH KHỐI

color

2 color

NGƯỜI

Còn giờ là lúc luyện tập để đưa những con người phẳng kia vào những bức thiết kế thật rồi.

HÌNH KHỐI

color

2 color

NGƯỜI

Còn giờ là lúc luyện tập để đưa những con người phẳng kia vào những bức thiết kế thật rồi.

HÌNH KHỐI

WEB DESIGNER

WEB DEVELOPMENT

WEB SEO

ONLINE MARKETING

2 color

NGƯỜI

HÌNH KHỐI

color

3 ME

BỐ CỤC

Thực ra trong thiết kế phẳng, không có quá nhiều bố cục phức tạp, có 2 bố cục được dùng nhiều nhất là nhìn thẳng và nhìn từ trên xuống, hãy thử tham khảo xem bạn nhé.

color

4 color

LỜI KẾT

Như vậy là bạn vừa hoàn thành cuốn sách thứ 3 thuộc bộ 3 cuốn sách của colorME về thiết kế trong AI. Cám ơn bạn rất nhiều vì điều đó. colorME hiểu rằng, sẽ có rất nhiều thiếu sót trong cuốn sách, và bạn chính là người giúp colorME cải tiến điều đó, đừng ngần ngại chia sẻ cho colorME cảm nhận của bạn nhé. Email của colorME là: colorME.idea@gmail.com. Toàn bộ hình ảnh trong cuốn sách được lấy từ nguồn Freepik (Freepik.com). Rất hi vọng cuốn sách này đã phần nào đem đến thêm một ít kiến thức cho bạn.