Banner quảng cáo KHUYẾN MÃI ngang Horizontal cho website

Mẫu 1. Tông màu chói đỏ - Vàng

thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web

Bước 1. Tạo một banner ngang hình chữ nhật
Bước 2. Place một ảnh minh họa bên trái
Bước 3. Tạo một đường cong bằng Pen tool màu cam
Bước 4. Tạo Layer màu đo bo tròn một góc
Bước 5. Vẽ Layer third màu vàng
Bước 6. Thêm chữ

Thể loại này "ăn tiền" ở phần mẫu, nếu được bạn nên tự chụp ảnh liên quan, căn dãy nền xanh để dễ tách hình. Banner có mẫu luôn sinh động hơn, nếu ko có thì search trên các site ảnh Stock kiếm ảnh chất lượng để tách khỏi nền.

Mẫu 2. Tông màu chói Vàng & Xanh dương

thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web

thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web

Bộ 2 màu Vàng - Xanh dương: Nền màu xanh dương thì dùng Box vàng và ngược lại.
Tông màu này làm banner facebook cũng rất hợp.Bạn cần tìm một ảnh minh họa đặt bên trái liên quan đến nội dung. Theo thống kê thì các banner có hình ảnh người thật, các model được quan tâm nhiều nhất do đó nên ưu tiên tìm ảnh minh họa là người mẫu, hot girl.

Mẫu 3. Tông màu Xanh dương

thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web

Mẫu 3 này không có hình ảnh minh họa, 100% là chữ. Khối bên trái là TIÊU ĐỀ và khối bên phải là nội dung khuyến mãi.

Mẫu 4. Tông màu Xanh dương & Cam

thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web
Tương tự mẫu số 4, mẫu 5 này có khối bên trái là tiêu đề và bên phải là thông tin khuyến mãi. Bạn cần cô động tối đa nội dung để chữ to hơn, dễ đọc

Mẫu 5. Tông màu Xanh dương &Xanh dương nhạt


thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web
Banner số 5 này nhiều thông tin hơn, bao gồm:
Giới thiệu thương hiệu công ty, nằm trong Layer third màu trắng nhạt
Nội dung tiêu đề hòa lẫn với thông tin "Call to Action", sử dụng nghệ thuật viết chữ nghiêng để  nhấn mạnh nội dung, chữ nghiêng thường thu hút ánh nhìn hơn so với chữ ngang.
Thông tin bổ sung ở Footer
Mẫu này cần tới 2 ảnh minh họa hiển thị mờ ảo (Giảm chỉ số Opacity)
Theo tông màu xanh dương, xanh da trời nên ảnh minh họa cũng nên chọn màu xanh dương hoặc các màu tối sẽ phù hợp.

Mẫu 6. Tông màu xanh lá cây nhạt- Aqua

thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web
Màu nền này tương đối "hiếm", màu Aqua thích hợp làm Banner thông báo, thông tin hơn là banner kích thích mua hàng vì tông màu aqua thuộc nhóm màu nhạt, có tính kích thích yếu.
Về bố cục: TIÊU ĐỀ đặt trong banner ribbon
Nội dung trình bày dạng canh đều
Hình ảnh và "Call to action" đặt ở góc phải.

Mẫu 7. Tông màu xanh lá cây & Xanh dương - Nền trắng

thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web

Màu nền trắng kiểu này cũng thích hợp làm Banner cho web.
Font chữ nội dung: VNI-Franko
Font chữ Tiêu đề: VNI-Boston Black
Bố cục: Tiêu đề giới thiệu đặt ở Header, dấu phân cách Divider đơn giản phân tách tiêu đề với nội dung giới thiệu. Các thông tin giới thiệu chi tiết được trình bày với Bullet tròn (sử dụng Brush để tô)
Về hình ảnh: Đặt bên phải, ngay bên dưới là nút bấm Buttom Click xem ngay.

Mẫu 8. Tông màu Cam & Xanh dương

thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web

Mẫu này dùng để trưng bày hình ảnh sản phẩm bên trái và thông tin khuyến mãi bên phải.
Với phong cách đơn giản này, các bạn cần có hình ảnh minh họa sản phẩm, graphic bắt mắt vì khi nhìn vào banner, người xem quan sát hình ảnh phía bên trái trước, khi đã thích sp rồi xem thông tin khuyến mãi thì tỷ lệ tương tác sẽ rất cao.

 Mẫu 9. Tông màu Xanh - Trắng theo chủ đề


thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web

Banner này dành cho lĩnh vực chuyên môn, để thiết kế một Banner kiểu vậy bạn cần:
1. Kiếm ảnh Stock liên quan và có kích thước size lớn, có thể Search google hoặc trên các website ảnh stock chất lượng, tùy theo chiều rộng của website để chọn size banner phù hợp. Ảnh stock mình thường chọn có kích thước hình chữ nhật ngang và độ phân giải lớn để hiển thị nét hơn. Tuy nhiên, khi render ảnh bạn cần chuyển sang định dạng jpg hoặc gif để giảm dung lượng ảnh, nếu ảnh banner to quá, tải ảnh mất nhiều thời gian.
2. Thiết kế chữ: sắp xếp nội dung khuyến mãi sao cho cân bằng, phần này không thể thiếu hình ảnh sản phẩm vì banner quảng cáo rất cần có hình sp để khách biết họ sẽ mua gì.


 Mẫu 10. Sử dụng Text box


thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web

Một ảnh Stock đã chứa nhiều hình ảnh chi tiết và không còn chỗ trống để viết chữ, vậy sẽ chèn chữ như thế nào!?
Trong trường hợp này cách đơn giản nhất là tạo một text box băng ngang qua ảnh, text box nền sáng thì chữ tối và ngược lại.

 Mẫu 11.Fade màu

thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web

Style này khá sinh động, chuyển tiếp từ text box sang ảnh minh họa rất nhịp nhàng, tạo cảm giác có sự chuyển động trên ảnh. Thủ thuật rất đơn giản, chỉ việc Ctrl + J để copy layer box và giảm Opacity xuống nhạt dần.
Tương tự cho các banner sau:

thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web

Trên đây là tông màu cam, từ đậm đến nhạt
Bạn có thể design tương tự với các tông màu khác, các màu như xanh, đỏ, tím, cam, xanh lá,..nói chung là mấy gam màu từ sáng đến tối đều áp dụng mẫu này được. Đặc biệt là bạn có thể theo tông màu "bộ nhận diện thương hiệu" của logo, website để thiết kế banner quảng cáo cho đồng nhất



 Mẫu 11. Viền màu Header

thiet ke banner - dich vu thiet ke banner - thiet ke banner gia re - huong dan thiet ke banner - banner quang cao - hinh anh quang cao - banner quang cao psd - banner quang cao cho web

Ảnh này có viền nhiều màu ở header, có 2 phần text box ở tiêu đề và Footer. Do có viền nhiều màu nên sẽ thu hút ánh nhìn hơn hẳn.