Cách vẽ đường cong với công cụ Pen tool - Ứng dụng trong thiết kế Banner Style phân cách cho website

Hình ảnh Banner được chụp từ Website www.Eximbank.com.vn

Rất rất nhiều Banner cho website sử dụng đường cong phân cách (Divider) như kiểu trên, Banner trên website Eximbank là một ví dụ cho Style banner này.
Hôm nay, ThiếtkếPS hướng dẫn cách vẽ đường cong này bằng Pen tool của Photoshop, cách này không hoàn hảo lắm và hầu như làm thủ công 100% vì mình chưa biết cách sử dụng công cụ Fill màu :D
Ưu điểm của cách này là đơn giản, cùng xem và thực hành nhé:

Xem Video hướng dẫn:

Bước 1: Tạo một ảnh mới với kích thước khoảng 800 * 300
Bước 2: Vẽ đường cong bằng Pen Tool

Đầu tiên chấm 2 điểm như thế này:

Tiếp tục chấm để vẽ thành hình này:

Kế tiếp là điều chỉnh đường cong, mình vẽ liên tục hình khối này.

Bước 3: Tô màu
Giờ đến phần tô màu cho khối này, chuột phải chọn Fill Path

Ok! Đã tô màu dãy này, chọn Foreground Colour nhé.

Thực hiện tương tự để tô màu cho phần trên:

Bước 4.Thêm chữ vào Banner

Banner này theo tông màu sáng, do đó chữ cũng nên chọn màu sáng.

Ở đây mình bắt chước đặt một ảnh minh họa bên trái giống Banner của Eximbank, bên phải sắp xếp chữ Typography theo chiều dọc. Thông thường một tiêu đề nên nhấn mạnh bằng nét chữ đậm cho một dòng, các dòng còn lại viết chữ với Font nét mỏng để làm điều hòa. KHÔNG NÊN chọn chữ nét đậm cho tất cả vì sẽ gây phản cảm, nhìn vào bị nhức mắt.

Về phối hợp màu sắc: các box tối làm nổi bật chữ có thể chọn màu tối theo các màu CHỦ ĐẠO, trên banner này có 3 màu chủ đạo là: Xanh, Đen, Trắng. Do đó mình chọn màu đen và màu trắng xám có viền Stroke để nhìn bố cục có vẻ cứng hơn, nếu không có Stroke các góc "bén" như lưỡi lam và không hợp với màu nền, việc chọn nét Stroke viền cho box chữ còn giúp nhấn mạnh nội dung và phân vùng bố cục text rõ ràng hơn.

Về bố cục ở Footer: đa số bổ sung thông tin liên hệ, mã QR code hay các địa chỉ website.

Font chữ: Dòng "Tự học thiết kế" là Font UTM - Avo

Dòng Banner quảng cáo là Font UTM Futura Extra

Các dòng chữ khác cũng sử dụng Font UTM - Avo

Nhận xét: Banner này thuộc Style đơn giản, các Background đều thống nhất một màu, phù hợp để làm ảnh Slider cho website hoăc Post lên Facebook

Banner quảng cáo Facebook - Case Study 3 [Style Black & White]

Hi all!
Bài này giới thiệu phong cách Banner theo tông màu tối
Nền màu đen và chữ sáng. Click vào ảnh để phóng to.

Các bước thiết kế Banner theo Style này:

Bước 1:  Tạo một hình chữ nhật màu đen
Bước 2: Làm mờ Fade hình ảnh một góc, có thể dùng công cụ Snagit hoặc chức năng Fade trong Photoshop để làm mờ một góc ảnh
Bước 3: Viết chữ sáng trên nền tối
Trình bày nội dung text ở một bên, các bạn để ý bố cục Typography của chữ.

Nhận xét:
Style này khá bắt mắt vì có tông màu tương phản Đen vs Trắng, lưu ý về Font chữ
Tiêu đề có thể sử dụng Font chữ nét đậm và tiêu đề phụ sử dụng Font nét mỏng. Ngoài ra có thể tận dụng dấu phân cách divider | để tách các vùng hoặc nhấn mạnh một vùng chữ nào đó
Call to Action nên nhấn mạnh bằng khối hình chữ nhật màu nổi để độc giả hành động ngay khi xem.

Banner quảng cáo Facebook - Case Study 2 [Style tương phản 2 màu]

Chào các bạn!
Hôm nay giới thiệu 2 Banner mới làm, 2 Banner này dùng để quảng cáo trên Facebook.

Mẫu 1:
Mẫu này theo cấu trúc cân đối, hình ảnh bên trái, nội dung thông tin bên phải.
Để tạo Banner này, mình tìm một ảnh Stock hình chữ nhật, nếu không có thì tìm ảnh hình vuông cũng được, sau đó kéo dài ra cho thành hình chữ nhật :D
Kế tiếp là tạo một vùng tối để góp phần làm nổi bật chữ, bạn có thể ghi chữ trực tiếp trên nền màu vàng nhưng có thể sẽ bị chói màu khi có cùng tông sáng giữa text và background, do đó viết chữ trên nền tối như vậy sẽ dễ nhìn hơn tý xíu :)

Về Font chữ: 
Chữ New và tiêu đề "Khai trương...vn" sử dụng Font UTM Futura Extra
Chữ text sử dụng Font UTM - Avo, hoặc xài Font VNI - Avo cũng tương tự 

Ngoài ra còn có thủ thuật tạo nút bấm, xem hướng dẫn tạo nút bấm tại đây 
Nút bấm "Call to action' là thành phần bắt buộc trong banner quảng cáo nếu bạn muốn khách xem click vào Banner, dù không Click cũng nên có câu chốt Sales nào đó, đại loại Chương trình khuyến mãi từ dd/mm/yy tới dd/mm/yy nào đó.
Để trình bày các thông tin bổ sung, bạn có thể dùng Brush để tạo nút chấm tròn hoặc ký tự khác cũng được

Mẫu 2:
Banner này cũng dùng cấu trúc tương tự như Mẫu 1, đó là phân cách ảnh minh họa và text, mỗi đứa một bên.
Font chữ Mua sắm thả ga: UTM Kabel KT
Font chữ dòng "Xem chi tiết..." Time New Romance
Vùng phân cách sử dụng thanh chéo nghiêng.
Phần trình bày thông tin bên trái đặt sản phẩm để lấp đầy khoảng trống vì banner này có rất ít chữ.
Phần ảnh minh họa bên phải kiếm ảnh Stock cầm thẻ, các bạn lưu ý là hình ảnh NGƯỜI THẬT VIỆC THẬT rất quan trọng trong Banner quảng cáo, nó giúp người xem quan tâm nhiều hơn tới sản phẩm. 

Ảnh Design xong mới thấy có một khiếm khuyết là khoảng cách chữ THẢ và GA hơi bị xa ;(
Đáng lẽ gần nhau hơn.

Banner quảng cáo Facebook - Case Study 1

Chào các bạn!
Banner này được dùng để post trên Facebook
Font chữ tiêu đề VPS Windows miễn phí: UTM Futura Extra
Font nội dung text: VNI-Avo
Style này theo cấu trúc cân xứng, hình minh họa bên dưới và text ở trên.

Mẫu 2 tương tự

Phần chữ Caption trên nền đen là Font VNI-Avo
Phần chữ tiêu đề màu đỏ là Font UTM Kabel KT - Dấu tiếng việt thấp, phù hợp khi ghép với các Font chữ nét mỏng.
Với tiêu đề mình thường sử dụng Font UTM Futura Extra và Kabel KT như trên, 2 Font này dễ gây ấn tượng vì nét chữ đậm, lưu ý đừng sử dụng nhiều, chỉ nên xài cho tiêud dề 1 dòng, tối đa 2 dòng.

Thủ thuật Photoshop - Tạo hiệu ứng bóng đổ cho text [Official]

Chào các bạn!Clip này mình sẽ hướng dẫn cách tạo hiệu ứng đổ bóng cho text

Demo

Hướng dẫn

Bước 1. Điền chữ
Bước 2. Thay đổi màu sắc cho text
Bước 3. Tạo Stroke viền xung quang chữ
Bước 4. Đổ bóng Shadow
Bạn chọn chế độ Opacity = 30%
Angel = 30
Distance = 3 px
Hiệu ứng này thích hợp khi đặt trên nền tối, các ảnh nền Background đậm để tạo cảm giác chữ nổi 3D