Tạo logo, avatar, icon dạng Flat Design - Thiết kế phẳng đơn giản

Flat Design - Hướng dẫn cách tạo một Logo cá nhân, avatar, icon biểu tượng dạng thiết kế phẳng.

Flat Design - Không quá mới mẻ, cũng chẳng phải đã cũ, Flat Design đang dần bùng nổ để đem đến một khái niệm mới trong thiết kế đồ họa đó chính là thiết kế phẳng.

Trước khi đi vào bài hướng dẫn cách tạo một Logo cá nhân, avatar, icon biểu tượng dạng thiết kế phẳng thi chúng ta hãy điểm qua một số đặc tính cơ bản của Flat Design nhé.


1/ Không hiệu ứng: Trong Flat Design, giảm thiểu hoặc hoàn toàn không sử dụng đến bất kỳ một hiệu ứng nào. Trong bài có sử dụng một chút Shadow để tạo sự khác biệt.
2/ Chi tiết đơn giản: Càng ít chi tiết càng tốt, không quá rườm rà và nhấn mạnh điều mà mình muốn gửi đến người xem.
3/ Tập trung vào Typography ( kiểu chữ ): Điều này vô cùng quan trọng, vì thế hãy tìm một Font chữ hợp lý cho bức ảnh nhé.
4/ Tập trung vào màu sắc: Chọn màu sắc hợp lý sẽ giúp cho tác phẩm của bạn hoàn hảo và bắt mắt người xem. Ở Flat Design thường dùng các màu Retro và phối hợp các màu tương phản lại với nhau trong một tác phẩm.
Tham khảo: Bảng mã màu cơ bản trong thiết kế phẳng - Flat Design Colors

Tạo logo, avatar, icon dạng Flat Design:
Bài hướng dẫn khá chi tiết cho các bạn chưa từng sử dụng qua Photoshop vẫn có thể làm được, vì thế có nhiều phần hướng dẫn hơi thừa đối với các bạn đã thành thạo, mong các bạn thông cảm.

Bước 1: Khởi động Photoshop, tạo một Layer mới ( phím tắt Ctrl + N ) và thiết lập như hình dưới.
- Chiều dài rộng bạn có thể thay đổi tùy mục đích sử dụng, nếu bạn có ý định làm Avatar dành cho Facebook thì nên để 960px, color mode: RBG, color profile: sRBG và khi lưu ảnh là .PNG ( đó là công thức giúp ảnh không bị giảm chất lượng khi up lên Facebook )


Bước 2: Tạo thêm một Layer mới ( phím tắt Ctrl + Shift + N ). Trên Layer vừa tạo chọn công cụ Elliptical Marquee Tool ( phím tắt Shift + M )
- Giữ đè phím Shift, click chuột và kéo từ góc trái trên cùng xuống góc phải dưới cùng để tạo một vùng chọn hình tròn, như hình dưới thì các bạn kéo từ đuôi cho đến đầu mũi tên rồi thả ra.


Bước 3: Chọn màu cho hình tròn. Bên thanh công cụ bên trái, click vào ô màu nằm trên để chọn màu sắc theo ý muốn và OK. Sau khi chọn xong màu, ấn tổ hợp phím Alt + Delete để đổ màu, tiếp tục ấn Ctrl + D để hủy bỏ vùng chọn ở bước 2.


Bước 4: Chọn công cụ Polugonal Lasso Tool ( Shif + L ) tạo một vùng chọn để cắt một góc của hình tròn như dưới đây, lưu ý phần đi qua hình tròn là một đường thẳng nhé.


- Sau khi tạo xong vùng chọn, bạn lần lượt ấn Ctrl + X → Ctrl + V → Ctrl + Shift + N → Ctrl + Alt + G.
Sau khi bấm đúng thứ tự các tổ hợp phím trên, bạn sẽ nhìn thấy khung Layers như ảnh dưới.
- Tiếp theo nhìn qua bên công cụ bên trái, chọn một màu khác và ấn Alt + Delete tiếp đến Ctrl + E
( Bước này là để đổ màu cho phần bị cắt )


Bước 5: Từ Layer phần cắt, ấn Ctrl + T, click chọn phải và chọn Rotate 180° để xoay nó lại 180° :))


- Kéo phần cắt lại cho nó nằm khớp với hình tròn rồi ấn Enter thì bạn sẽ được như thế này đây.


- Tại khung Layers, bạn click đúp chuột vào Layer phần cắt, nó sẽ hiện ra một bảng thiết lập hiệu ứng, chọn Drop Shadow, điều chỉnh thông số trong khung màu đỏ của ảnh dưới và OK ( cái này chỉ đúng khi ở bước 1 chọn chiều dài - rộng là 960px nhé, nếu kích thước khác thì tùy chỉnh cho phù hợp )


Bước 6: Tạo text. Ấn phím T sau đó tạo khung để nhập text của bạn. Theo mình thì nên chọn 2-3 chữ to và mỗi chữ nên để riêng một Layer để dễ dàng tùy chỉnh.

Trong phần này, dành cho bạn tự sáng tạo, lựa chọn kiểu font chữ nào tùy bạn, còn về màu sắc thì nên tương phản với màu nền của hình tròn.


- Thêm hoa văn bên cạnh text làm nổi bật thêm ( nhưng đừng lạm dụng quá nhé ). Bạn có thể lựa chọn những hoa văn bằng cách sử dụng công cụ Custom Shape Tool - Chọn cái icon ngôi sao năm cánh tròn tròn đấy, bên cạnh là Shape click vào nó để chọn mẫu hoa văn khác.


Dưới đây là tác phẩm hoàn cmn chỉnh của mình để làm mẫu, logo cá nhân theo phong cách phẳng Flat Design. Đây chỉ là bài hướng dẫn mâu cơ bản, chúc các bạn thành công và sáng tạo thêm nhiều nét riêng trong tác phẩm của bạn!

• Xem thêm: Hướng dẫn tự tạo Logo con dấu độc đáo bằng Photoshop


*Bài hướng dẫn này mình học được của bạn Nguyễn Tiến bên Forum VDS