Hiệu ứng ánh sáng tạo điểm nhấn cho Banner quảng cáo


Banner trên rất đơn giản những vẫn bắt mắt nhờ hiệu ứng ánh sáng Light effect, món này không có gì phức tạp, chỉ là brush click chuột phát là thêm được hiệu ứng vào ảnh.

Các bước thiết kế ảnh trên:

Bước 1: Tìm ảnh Stock
Ở đây là hình ảnh một cô gái trên nền màu tím nhạt (có sẵn nền hiệu ứng Bokeh lung linh)
Bạn có thể tìm ảnh Stock chất lượng trên các site ảnh Stock hoặc tự chụp

Bước 2: Tạo viền banner bao quanh ảnh
Một ảnh Stock đơn thuần là một ảnh nghệ thuật, chưa thể làm banner quảng cáo được
Do đó, các bạn cần biết những bố cục trong một banner, ví dụ ở banner trên, mình tách ra 2 phần, chữ và ảnh. Làm vậy để có khoảng trống viết chữ.
Bí kíp: Tạo Shadow cho dãy phân cách

Để tăng thêm sự tinh tế cho dãy phân cách, các bạn có thể tạo Shadow kiểu này.

Bước 3: Chèn chữ vào Banner
Phần này sử dụng nghệ thuật Typoraphy, ở ảnh trên mình có dùng kỹ thuật khoảng cách giữa các chữ xa nhau, Style này khá hay, áp dụng cho chữ S U N N Y , lưu ý là áp dụng đối với một từ thôi nhé, chứ viết cả dòng mỗi chữ xa nhau thế này rất khó đọc.

Bước 4: Tạo Layer text box hiệu ứng fade
So với text box hình chữ nhật mặc định có sẵn thì nét vẽ trông rất thô
Bí kíp là fade một góc.

Cách làm rất đơn giản, tạo một Layer mới, xong bỏ dấu check cho background rồi dùng công cụ Gradient để làm mờ một phía. Ok, giờ thì viết chữ lên text box.

Bước 5. Thêm hiệu ứng ánh sáng Light effect
Search Google từ khóa Light effect photoshop brush, sẽ có rất nhiều hiệu ứng ánh sáng trang trí, thêm ánh sáng vào banner sẽ giúp ảnh sống động hơn.

Ghi chú:
Font UTM AmericanaUTM Neutra


Ý tưởng thiết kế Poster quảng cáo đơn giản

Theo tiêu chí Nhanh - gọn - lẹ, mình thích sưu tầm các mẫu Banner quảng cáo đơn giản, có thể Design nhanh chóng với Photoshop, không cần vắt óc suy nghĩ các ý tưởng táo bạo mới. Kỳ này giới thiệu các bạn một khuôn khổ Poster đơn giản, đủ thông tin hữu ích cho người xem. Tham khảo mẫu bên dưới:

Credit: http://depositphotos.com/13843324/stock-illustration-city-park.html?sst=300&sqc=315&sqm=1355&sq=4ycbmj

Về bố cục: Poster này chia làm 2 phần:
+ Ảnh minh họa
+ Nội dung text
Phân chia bằng đường phân cách hình cong.
Style này rất dễ thiết kế, phần quan trọng nhất là tìm ảnh minh họa trên các site ảnh Stock liên quan, sau đó viết chữ ở phần nội dung text

Style 2

Nguồn ảnh: https://www.facebook.com/OfficialKaiGreene/photos/a.421219553900.194398.111615443900/10153021206963901/?type=1&theater

Bố cục: Có nhân vật chính đặt ở một góc
Các Text box hướng nghiêng .
Nền dạng grunge stone

Thiết kế Banner - Slide ảnh cho website với Background hiệu ứng Blur - Tuyệt đỉnh của sự tinh tế

Hôm nay đang search các ảnh nền Blur thì gặp được bài viết này http://www.websitedep.com.vn/blog/thiet-ke-web/su-dung-blur-background-trong-thiet-ke-website-nhung-minh-hoa-tuyet-dep.html

Website chia sẻ các Case study sử dụng kỹ thuật Blur để thiết kế Banner, đúng như tác giả nhận xét, khi nhắc đến hiệu ứng Blur (làm mờ hay làm nhòe hình ảnh), nhiều người ngay Style này hào nhóng, bóng bẩy quá và có vẻ chỉ dành cho lĩnh vực thiết kế, hội họa, âm nhạc hay những đề tài về nghệ thuật.

Ban đầu mình cũng nghĩ vậy, thấy nhiều site Graphic chia sẻ mấy ảnh nền background có hiệu ứng này mà rõ để làm gì và phối hợp ảnh với chữ ra sao để làm banner, rất may mắn là gặp được bài chia sẻ websitedep.com.vn, trình bày các case study thực tế của các website đang dùng kỹ thuật Blur, qua đó chúng ta học và tự làm được các Banner quảng cáo với chiêu thức Blur này.

2 Nhóm ảnh nền Blur background
Nhìn chung ảnh nền Blur này có 2 nhóm chính:

1. Background màu sắc: thử search google với từ khóa "blur background", bạn sẽ thấy vô số các background loại này https://www.google.com/search?q=blur+background, xem phần tìm kiếm với "Hình ảnh"
2. Background có chủ đề người thật - việc thật: là những nền chụp ảnh phong cảnh, người thật 100%

Ứng dụng cho thiết kế Banner quảng cáo
Học hỏi được rất nhiều từ các ví dụ trên, khi áp dụng kỹ thuật Blur, banner quảng cáo VỪA MANG TÍNH NGHỆ THUẬT vừa KHOA HỌC. Tạo cảm giác chuyên nghiệp, sang trọng và cuốn hút. Theo mình có thể sử dụng Background Blur màu sắc khi muốn nhấn mạnh hình ảnh sản phẩm và Background Blur có chủ đề để giới thiệu sp kết hợp với phông cảnh, ví dụ thiết kế banner trong lĩnh vực du lịch ắt hẳn có nhiều hình ảnh danh lam thắng cảnh, người mẫu,...
Bước 1. Kiếm ảnh Stock độ phân giải cao
Bước 2: Blur ảnh
Bước 3: Ghép mới ảnh sản phẩm
Bước 4: Thêm chữ nghệ thuật typography

Update: Nền Blur Bokeh cũng đẹp phết :D

Nguồn ảnh từ: https://www.facebook.com/groups/blendvn/permalink/1540258262920020/







Thiết kế Avata - Quảng cáo

Avata là ảnh đại diện, là thành phần không thể thiếu để hiển thị trên facebook, yahoo, skype, zalo,..và hầu hết các mạng xã hội đều cần có ảnh Avata. Chưa kể khi bạn marketing trên diễn đàn cũng phải có Avata.
Bài này giới thiệu Style thiết kế ảnh Avata đơn giản nhất, mục đích chính là dễ làm, không phải tốn hàng giờ để suy nghĩ thiết kế bố cục. Demo ngay bên dưới.

Sunburst

Hiệu ứng ánh sáng phát ra phía sau ảnh. Để Design theo phong cách này, bạn cần có hình ảnh đặc trưng của sản phâm, linh vật,... để làm nhân vật chính. Sau đó đặt nhân vật trên một khối. Phần còn lại cho màu nhạt hoặc màu khắc rồi cuối cùng là thêm hiệu ứng Sunburst là xong.
Bổ sung thêm chữ ở phần Footer với màu tương phản với nền, nền tối thì chữ sáng.
Ghi chú: bạn có thể tách làm 2 phần theo đường cong hoặc đường thẳng.
Style này đơn giản, phần lớn không gian để hiển thị ảnh linh vật, hình ảnh sản phẩm nên KHÔNG cần thêm nhiều chi tiết. Nên nhớ Avata chứ không phải banner quảng cáo, ảnh avata trên các forum thường rất nhỏ, không ai đọc hết chữ trên đó :D



Tương tự với mẫu ở trên, Avata kết hợp quảng bá hình ảnh sản phẩm :D

Đường chân trời


Style này dành cho Forum cho phép hiển thị Avata to hơn. Khi click vào Profile sẽ thấy Avata tương tự một banner quảng cáo hình vuông.


Mẫu thứ ba này cũng trong nhóm Keep It Simple Stupid, tìm một ảnh Stock, sau đó kẽ viền 2 góc và in chữ lên text box. Để làm nổi bật chữ bạn có thể tạo text box có viền Shadow.



Các hiệu ứng trang trí Banner quảng cáo phổ biến

NEW! Banner tông màu điện ảnh


Banner trên theo tông màu sáng tối hỗn hợp, màu chủ đạo là đen - tím
Bộ đôi màu này mang sắc thái huyền bí, kiêu sa, thường gặp trong các ánh đèn sân khấu.

Về bố cục: không có gì mới, chỉ là theo công thức phân tách chữ và hình.
Về phối hợp màu sắc: Đối với ảnh minh họa, sử dụng một Blur backgroun, xem bài này để hiểu rõ hơn về Blur Background, ảnh nền Blur có một ưu điểm rất lớn là dễ phối hợp với ảnh nhân vật hay bất kỳ hình ảnh nào trên nó. Mình thường hay sử dụng background blur khi không có ý tưởng gì mới cho backgroud, chẳng hạn không tìm được ảnh stock nào làm nền thì cứ lấy ảnh nền blur ra sử dụng hoặc làm mờ một ảnh phong cách nào đó theo chủ đề.

Về Typography: mình sử dụng font chữ mica có nét vuông, cứng. Font chữ trong text box đen hiển thị trên nhân vật là font Avo tròn để làm hài hòa bộ chữ, nếu 100% xài chữ "cứng" thì hơi bị phản cảm. Như các bài trước mình thường hay nói tới việc sử dụng 2 font chữ nét đậm và "uốn éo" để tạo cảm giác hài hòa giữa nghệ thuật và thương mại.

Hiệu ứng ánh sáng: đây là phần quan trọng nhất, tạo điểm nhấn và sức sống cho ảnh, trước khi blend màu, ảnh trông rất thô, màu sắc đậm, sau khi blend màu vàng và xanh vào hình nền mọi thứ có vẻ "mềm mại" hơn. Bên cạnh đó, ắt hẳn các bạn quan tâm tới mấy hiệu ứng ánh sáng chớp nhoáng theo kiểu đèn lóa sáng. Cái này chẳng qua là file ảnh len flare, hiệu ứng ánh đèn. Hiệu ứng này rất nổi bật khi đặt trên nền tối. Chỉ với chi tiết nhỏ này sẽ làm ảnh thêm phần sống động, nhìn vào có cảm giác như có ánh sáng đang quét ngang qua ảnh. Nếu bạn quan tâm đến hiệu ứng ánh sáng Flare kiểu này thì website Zing me mp3 là nguồn tài nguyên phong phú để tham khảo các hiệu ứng đấy. 

Thông thường khi tạo môt background mới một màu đồng nhất thì banner hơi bị đơn điệu. Chỉ cần thêm một số hiệu ứng effect ánh sáng hoặc các kỹ thuật trang trí nhỏ sẽ tạo ra thay đổi lớn.

Thêm một banner theo style hào nhoáng


Trong các hình troòn, uông, lập phương thì hình góc cạnh dễ ghép nhất :D
Ảnh trên sử dụng nền gốc, sau đó thêm hình ngũ giác, lục giác để chèn chữ.
Qua ảnh này, các bạn tích lũy thêm một kinh nghiệm hữu ích để sử dụng ảnh Stock, muốn làm chủ ảnh stock thì phải nắm vững các "thế võ" để tùy biến. Một banner quảng cáo mang tính thương mại cần có sự kết hợp giữa sự hào nhoáng và thông điệp quảng cáo hấp dẫn

Trước khi thêm hiệu ứ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

Banner trên chỉ đơn thuần là text. Nền background thuần nhất một màu.

Sau khi thêm hiệu ứ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

WOW! Lung linh hơn nhiều, chỉ vài tiểu xảo nhỏ, banner ấn tượng, có sức hút hơn hẳn :D

Các hiệu ứng giúp banner sinh động hơn:
1. Bokeh: đây là hiệu ứng tạo các hình tròn ánh sáng mờ ảo, tải bộ Bokeh tại đây: http://www.photoshoptutorials.ws/downloads/photoshop-brushes/freebie-24-abstract-bokeh-brushes/
Bạn cũng có thể dùng công cụ Brush hình tròn mặc định có sẵn trong công cụ Brush để "in" lên ảnh.
2. Light Flare: còn có tên gọi khác là Neon Blue ligh, đây là hiệu ứng ánh sáng chớp nhoáng, thường xuyên bắt gặp trong các poster, trailer phim ảnh.


Ảnh trên trở nên sống động hơn nhờ có một Flare ngay đỉnh, nếu không có ánh sáng này, toàn bộ banner bị chìm trong bóng tối. Các bạn thấy sự "lợi hại" của effect này rồi đấy :D

Gợi ý: search google với từ khóa " photoshop flare brush" bạn sẽ tìm được rất nhiều brush để vẽ các ngôi sao sáng, các divider line hiệu ứng ánh sáng giống trên hình minh họa. Hiệu ứng này giúp tạo điểm nhấn cho các khu vực quan trọng và làm ảnh trở nên sống động, lung linh hơn.
3. Hiệu ứng Sunburst: Style này rất thích hợp để quảng bá sản phẩm, ví dụ bên dưới. Ảnh light tỏa sáng đặt sau ảnh sản phẩm để nhấn mạnh sản phẩm.

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
 4. Hiệu ứng ánh sáng hào quang: nhìn kỹ xung quanh ảnh sản phẩm ở hình trên, bạn sẽ thấy có một viền tròn màu sáng trắng lan tỏa xung quanh. Kỹ thuật này góp phần làm "nhân vật chính" lung linh hơn.
Cách bố cục ảnh minh họa rất quan trọng, nên bố trí theo kiểu trực quan 3D để quảng bá hình ảnh sản phẩm và banner có trông chuyên nghiệp. Để tạo hiệu ứng hào quang chỉ cần dùng Brush tròn và màu trắng, vị trí đặt ở phía sau ảnh sản phẩm.

5. Đường phân cách Divider: Từ khóa tìm kiếm là " web element divider, photoshop divider brush"


Divider dạng đơn giản nhất là thanh ngang, có công cụ vẽ trong mọi phiên bản Photoshop. Ví dụ ở banner trên, đường Divider có chức năng phân cách các nội dung, tách tiêu đề và mô tả. Trogn thiết kế typography, đường Divider cũng được sử dụng rất nhiều.

Banner dưới đây sử dụng Divider "Web element Divider", có thêm hiệu ứng Shadow nhìn nét hơn.