Các Font khác sử dụng:
1. burgue script
2. UVF Youmakemesmile
Font chữ viết quôt quote - facebook cover cảm xúc - MonteCarlo
Viết chữ uốn lượn với Font MonteCarlo, có sẵn các nét ngoằn ngoèo glyph http://www.myfonts.com/
Các Font khác sử dụng:
1. burgue script
2. UVF Youmakemesmile
Font chữ MonteCarlo này rất độc đáo, có nhiều Style uốn éo bắt mắt
Các Font khác sử dụng:
1. burgue script
2. UVF Youmakemesmile
Thiết kế Banner quảng cáo với Abstract Background
Bên dưới là một số banner design với Abstract Background
Abstract Background là ảnh đồ họa được thiết kế bằng các gam màu tương phản như đỏ xanh, trắng đen,..các tông màu đối nghịch hòa quyện với hiệu ứng ánh sáng Neon khiến mắt điều tiết nhiều hơn và banner có sức hút hơn so với tông màu đơn sắc..
Ảnh trên chỉ đơn thuần là ghép nền vào ảnh stock minh họa, bạn có thể chèn trực tiếp hoặc chèn kiểu layer mask, ở đây mình chèn trực tiếp để có màu sáng. Trên nền tối thì chọn chữ màu sáng.
Tương tự Banner trên dùng Abstract Background nhiều màu sắc xanh đỏ tím vàng :D
Pic này ghép nhiều background vào nhau bằng Layer Mask để có hình ảnh mờ ảo phía sau.
Ngoài ra, bạn có thể dùng ảnh Mockup Macbook, hay các Mockup ảnh show web để tự làm ảnh minh họa khi cần chụp ảnh màn hình.
Abstract Background là ảnh đồ họa được thiết kế bằng các gam màu tương phản như đỏ xanh, trắng đen,..các tông màu đối nghịch hòa quyện với hiệu ứng ánh sáng Neon khiến mắt điều tiết nhiều hơn và banner có sức hút hơn so với tông màu đơn sắc..
Ảnh trên chỉ đơn thuần là ghép nền vào ảnh stock minh họa, bạn có thể chèn trực tiếp hoặc chèn kiểu layer mask, ở đây mình chèn trực tiếp để có màu sáng. Trên nền tối thì chọn chữ màu sáng.
Tương tự Banner trên dùng Abstract Background nhiều màu sắc xanh đỏ tím vàng :D
Pic này ghép nhiều background vào nhau bằng Layer Mask để có hình ảnh mờ ảo phía sau.
Ngoài ra, bạn có thể dùng ảnh Mockup Macbook, hay các Mockup ảnh show web để tự làm ảnh minh họa khi cần chụp ảnh màn hình.
Chuyên đề làm chủ ảnh Stock - Special
Note: một số Font chữ thường dùng trong banner quảng cáo:
UTM Alexander, UTM Avo, UTM Americana UTM Kabel KT (thường viết hoa)
Trước khi tìm hiểu cách xử ý ảnh Stock, các bạn thử làm banner ngang hình chữ nhật
Kích thước: 1200 * 500 px
Nội dung quảng cáo: Bí quyết thiết kế banner với ảnh Stock - Chuyên đề đặc biệt, Làm chủ ảnh Stock"
VẤN ĐỀ CHÍNH Ở ĐÂY LÀ LÀM THẾ NÀO ĐỂ HÒA HỢP MÀU SẮC CỦA BẤT KỲ ẢNH STOCK NÀO VỚI MÀU NỀN.
Ok, và đây là banner mình Design từ Ảnh Stock trên.
Trong các bài viết trước mình thường sử dụng cấu trúc tự tạo text box tách rời với ảnh minh họa, cách này quá đơn giản vì không phải lo chuyện màu nền.
Như banner này chẳng hạn:
Màu text box na ná với ảnh minh họa,thế là hợp gu. Nhưng để chèn chữ TRỰC TIẾP lên màu nền thì khó hơn tý.
Bước 1. Blur một mép ảnh Stock
Hiện tại mình không rành chức năng Blur ảnh trên Photoshop nên xài tạm Snagit :)
Bước 2: Chọn màu nền tương đồng với màu nền của ảnh Stock
Dùng công cụ chọn màu có sẵn của Photoshop để chọn màu cho background, với ví dụ này thì màu xanh dương tối.
Bước 3. Thêm chữ
Thêm chữ vào khoảng trống, canh đều về phía bên phải.
Chèn chữ có thêm Shadow cho dễ đọc
Bước 4: Thêm hiệu ứng ánh sáng
Đây là kỹ thuật làm ảnh nét hơn, nếu không có trông rất "tầm thường"
Theo Style Fade này, bạn có thể design đủ loại Banner vuông hay hình chữ nhật. Ví dụ trên cho Banner hình vuông, cũng theo các bước tìm ảnh Stock rồi fade một mép ảnh, chọn màu nền background theo tông màu của ảnh Stock, ở đây là màu xanh. Done, giờ chỉ việc chèn chữ và thêm tý hiệu ứng ánh sáng. Khá là đơn giản phải không!?
Ngoài việc chọn Background đồng nhất một màu, bạn có thể sử dụng các blur background, kiểu gì cũng hợp vì ảnh được blur một góc rất dễ phối hợp màu sắc. Ảnh Stock màu sáng thì Background màu sáng và ngược lại.
Gợi ý: Chọn tông màu tối sẽ dễ kết hợp với các hiệu ứng ánh sáng Len Flare. Như ảnh trên, tông màu đen tối thì ánh sáng màu Aqua sẽ nổi bật.
Về cơ bản thì mình thường dùng 2 Style chế ảnh, một là fade như mấy ảnh trên, hai là dãy phân cách
Banner trên dùng bố cục dãy phân cách, sau khi có ảnh Stock, tự vẽ thêm text box màu đỏ bên dưới.
Sau đó vẽ hình tròn ở trung tâm, tạo Stroke màu đỏ viền xung quanh. "Ăn tiền" ở hộp sản phẩm đấy, banner quảng cáo KHÔNG thể thiếu hình ảnh sản phẩm. Về Typography thì dùng font chữ Time New romance. Tất cả các chữ đều xài font Time New Romance.
Mẹo vặt: chữ GIFTCARD dùng style viết cách xa nhau để ... lấp đầy khoảng trống :D và Style này mang tính nghệ thuật rất cao, rất nhiều logo & slogant trình bày theo style này.
Thêm một ví dụ về Style dãy phân cách:
Cũng với kiểu "xếp hình" với ngũ giác và lục giác quen thuộc, kiểu này được design nhanh chóng. Mình thích hình tròn và hình góc cạnh thế này vì chúng rất dễ ghép với nhau. Như ảnh trên, mấy hình lục giác đặt cạnh nhau sẽ tạo thành một khối vững chắc, điều này khiến hình ảnh có vẻ vững chắc hơn. Về Font chữ mình thường dùng Font UTM Kabel KT để viết hoa.
Để tạo sức nặng cho banner, có một kỹ thuật đơn giản nhưng cực kỳ hiệu quả, đó là tạo một đường viền của Footer, giống ảnh trên, một đường viền màu đỏ sẽ tạo cảm giác banner vững chãi hơn hẳn so với không có đường này. Những ví dụ ở trên mình kẻ text box và viết viết lên đó, còn trong ảnh trên thì chỉ có đường viền, sử dụng trong trường hợp không cần nội dung ở footer.
Bên cạnh đó, một thủ thuật nhỏ liên quan tới Typography là sử dụng dấu ngoặc vuông bo 2 góc đối diện, kỹ thuật này thuộc nhóm bố cục nội dung trên Banner, sử dụng Divider | để ngăn cách tiêu đề và thông điệp quảng cáo.
Về Font chữ thì dùng Font UTM Alexander
Background thì Blur theo hiệu ứng Len.
Ý tưởng khá độc đáo! Chữ 2010 được uốn cong với text box.
2 Banner này theo tông màu sặc sỡ, dùng Abstract Background để làm nền, ảnh stock promotion girl có rất nhiều trên mấy site ảnh Stock.
Banner dưới đây của công ty Bạch Long, ,
Điểm nhấn là đường footer cao để hỗ trợ hiệu ứng 3D
UTM Alexander, UTM Avo, UTM Americana UTM Kabel KT (thường viết hoa)
Trước khi tìm hiểu cách xử ý ảnh Stock, các bạn thử làm banner ngang hình chữ nhật
Kích thước: 1200 * 500 px
Nội dung quảng cáo: Bí quyết thiết kế banner với ảnh Stock - Chuyên đề đặc biệt, Làm chủ ảnh Stock"
VẤN ĐỀ CHÍNH Ở ĐÂY LÀ LÀM THẾ NÀO ĐỂ HÒA HỢP MÀU SẮC CỦA BẤT KỲ ẢNH STOCK NÀO VỚI MÀU NỀN.
Ok, và đây là banner mình Design từ Ảnh Stock trên.
Trong các bài viết trước mình thường sử dụng cấu trúc tự tạo text box tách rời với ảnh minh họa, cách này quá đơn giản vì không phải lo chuyện màu nền.
Như banner này chẳng hạn:
Màu text box na ná với ảnh minh họa,thế là hợp gu. Nhưng để chèn chữ TRỰC TIẾP lên màu nền thì khó hơn tý.
Bước 1. Blur một mép ảnh Stock
Hiện tại mình không rành chức năng Blur ảnh trên Photoshop nên xài tạm Snagit :)
Bước 2: Chọn màu nền tương đồng với màu nền của ảnh Stock
Dùng công cụ chọn màu có sẵn của Photoshop để chọn màu cho background, với ví dụ này thì màu xanh dương tối.
Bước 3. Thêm chữ
Thêm chữ vào khoảng trống, canh đều về phía bên phải.
Chèn chữ có thêm Shadow cho dễ đọc
Bước 4: Thêm hiệu ứng ánh sáng
Đây là kỹ thuật làm ảnh nét hơn, nếu không có trông rất "tầm thường"
Theo Style Fade này, bạn có thể design đủ loại Banner vuông hay hình chữ nhật. Ví dụ trên cho Banner hình vuông, cũng theo các bước tìm ảnh Stock rồi fade một mép ảnh, chọn màu nền background theo tông màu của ảnh Stock, ở đây là màu xanh. Done, giờ chỉ việc chèn chữ và thêm tý hiệu ứng ánh sáng. Khá là đơn giản phải không!?
Ngoài việc chọn Background đồng nhất một màu, bạn có thể sử dụng các blur background, kiểu gì cũng hợp vì ảnh được blur một góc rất dễ phối hợp màu sắc. Ảnh Stock màu sáng thì Background màu sáng và ngược lại.
Gợi ý: Chọn tông màu tối sẽ dễ kết hợp với các hiệu ứng ánh sáng Len Flare. Như ảnh trên, tông màu đen tối thì ánh sáng màu Aqua sẽ nổi bật.
Về cơ bản thì mình thường dùng 2 Style chế ảnh, một là fade như mấy ảnh trên, hai là dãy phân cách
Banner trên dùng bố cục dãy phân cách, sau khi có ảnh Stock, tự vẽ thêm text box màu đỏ bên dưới.
Sau đó vẽ hình tròn ở trung tâm, tạo Stroke màu đỏ viền xung quanh. "Ăn tiền" ở hộp sản phẩm đấy, banner quảng cáo KHÔNG thể thiếu hình ảnh sản phẩm. Về Typography thì dùng font chữ Time New romance. Tất cả các chữ đều xài font Time New Romance.
Mẹo vặt: chữ GIFTCARD dùng style viết cách xa nhau để ... lấp đầy khoảng trống :D và Style này mang tính nghệ thuật rất cao, rất nhiều logo & slogant trình bày theo style này.
Thêm một ví dụ về Style dãy phân cách:
Cũng với kiểu "xếp hình" với ngũ giác và lục giác quen thuộc, kiểu này được design nhanh chóng. Mình thích hình tròn và hình góc cạnh thế này vì chúng rất dễ ghép với nhau. Như ảnh trên, mấy hình lục giác đặt cạnh nhau sẽ tạo thành một khối vững chắc, điều này khiến hình ảnh có vẻ vững chắc hơn. Về Font chữ mình thường dùng Font UTM Kabel KT để viết hoa.
Để tạo sức nặng cho banner, có một kỹ thuật đơn giản nhưng cực kỳ hiệu quả, đó là tạo một đường viền của Footer, giống ảnh trên, một đường viền màu đỏ sẽ tạo cảm giác banner vững chãi hơn hẳn so với không có đường này. Những ví dụ ở trên mình kẻ text box và viết viết lên đó, còn trong ảnh trên thì chỉ có đường viền, sử dụng trong trường hợp không cần nội dung ở footer.
Bên cạnh đó, một thủ thuật nhỏ liên quan tới Typography là sử dụng dấu ngoặc vuông bo 2 góc đối diện, kỹ thuật này thuộc nhóm bố cục nội dung trên Banner, sử dụng Divider | để ngăn cách tiêu đề và thông điệp quảng cáo.
Về Font chữ thì dùng Font UTM Alexander
Background thì Blur theo hiệu ứng Len.
Ý tưởng khá độc đáo! Chữ 2010 được uốn cong với text box.
2 Banner này theo tông màu sặc sỡ, dùng Abstract Background để làm nền, ảnh stock promotion girl có rất nhiều trên mấy site ảnh Stock.
Banner dưới đây của công ty Bạch Long, ,
Điểm nhấn là đường footer cao để hỗ trợ hiệu ứng 3D
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.
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 Americana và UTM 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
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
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
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.
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
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.
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
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:
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
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.
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.
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:
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
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.
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"
Banner dưới đây sử dụng Divider "Web element Divider", có thêm hiệu ứng Shadow nhìn nét hơn.
Subscribe to:
Posts (Atom)