Hướng dẫn các bước thiết kế banner động bằng Photoshop

Banner động rất đa dạng và phong phú

Banner động là một trong những yếu tố rất quan trọng đối với môi trường internet hiện nay. Có rất nhiều phần mềm để bạn tạo ra được banner động một cách chuyên nghiệp. Trong đó photoshop là phần mềm đồ họa phổ biến nhất hiện nay. Để thiết kế banner động một cách hiệu quả các bạn hãy theo dõi bài viết dưới đây của chúng tôi nhé. 

Hướng dẫn các bước thiết kế banner động

Thiết kế banner động được thực hiện với nhiều bước khác nhau, mỗi người sẽ có một quy trình xử lý riêng. Tuy nhiên dưới đây là cách đơn giản và cơ bản nhất các bạn cần nắm được. 

Bước 1

Việc đầu tiên cần làm để thiết kế được banner động đó là mở một tập tin photoshop có kích thước từ 300x250px trở lên. Đây là kích cỡ chuẩn mực được sử dụng phổ biến trên các website hiện nay. Vì banner động chỉ xuất hiện trên web vì vậy nên đặt độ phân giải ở mức 72 để có kích thước nhẹ và nhìn rõ nét. 

Bước 2

Tùy vào nhu cầu và mục đích sử dụng các bạn có thể thay đổi kích thước của banner theo ý mình. Công cụ  transform (Ctrl + T) sẽ giúp bạn thực hiện được thao tác thay đổi kích cỡ ảnh cho phù hợp. 

Xem thêm:   Dịch vụ làm video giới thiệu khách sạn giá tốt

Bước 3

Sau đó tiếp tục sử dụng công cụ Eyedropper Tool (I) để thực hiện việc chọn màu trùng với màu sắc ánh sáng của hình ảnh. Tiếp theo chọn công cụ Rounded Rectangle Tool (U) để vẽ 1 nút vào phần đáy của banner. 

Bước 4

Chúng ta sẽ trang trí một số thuộc tính cho nút bằng cách bật bảng Layer Style, chọn Bevel and Emboss. Đặt Style : Inner Bevel, Depth : 50%

Bước 5

Tạo 1 layer text mới và chèn dòng chữ “BUY NOW” lên nút “kêu-gọi-hành-động” vừa tạo.

Hướng dẫn thiết kế banner động đơn giản nhất
Hướng dẫn thiết kế banner động đơn giản nhất

Bước 6

Thêm 1 layer text mới để tạo thông điệp chính cho banner quảng cáo của bạn. Lưu ý rằng bạn chỉ có vài giây để thu hút sự chú ý của khách hàng trên internet, vì vậy hãy giữ cho văn bản ngắn gọn và dễ hiểu hết mức có thể.

Bước 7

Quan sát trên thanh menu và chọn vào Window, tiếp theo là Animation để mở được bảng điều khiển Animation ở cuối màn hình. Lúc này bạn sẽ tiến hành làm một số hiệu ứng chuyển động cho banner. 

Bước 8

Tạo một khung hình (frame) mới trong bảng điều khiển hoạt ảnh, trên banner quảng cáo của khung hình này, làm cho layer chứa thông điệp chính của bạn hiển thị trở lại. Di chuyển đoạn thông điệp lên trên cùng của banner sao cho bạn chỉ thấy 2 chữ “HALF PRICE”, đặt Opacity (độ đục) của layer này xuống 40%

Bước 9

Tạo khung hình thứ 3, di chuyển đoạn thông điệp xuống một chút, tăng độ đục (opacity) lên khoảng 70%.

Xem thêm:   5 sai lầm khi làm Digital Marketing mà bạn không thể bỏ qua

Bước 10

Tạo khung hình (frame) mới, kéo thông điệp chính vào vị trí ban đầu, tăng độ đục (Opacity) lên mức tối đa 100%.

Bước 11

Tạo khung hình thứ 5, hiện lại nút và lời kêu-gọi-hành-động trên nút.

Bước 12

Nhìn vào góc phải từng khung hình bạn sẽ thấy “0 sec.” Bước này chúng ta sẽ thiết lập thời gian cho từng khung hình để banner có hiệu ứng chuyển động theo ý thích. Bấm vào dấu mũi tên kế bên “0 sec.” xuất hiện trình đơn thả xuống. 

Đặt khung hình số 1, số 2, số 3 khoảng 0.1 giây. Khung số 4 lên 0.5 giây. Khung số 5 lên 2 giây. Nhấp vào biểu tượng “play” phía dưới để xem banner đã có hiệu ứng chuyển động như ý hay chưa và điều chỉnh lại thời gian nếu vẫn chưa như ý.

Bước 13

Sau khi hoàn chỉnh thiết kế. Chọn File > Save for Web & Devices. Chọn định dạng file save lại là Gif, sau đó nhấn Save.

Banner động rất đa dạng và phong phú
Banner động rất đa dạng và phong phú

Một số lợi ích của banner động

Banner động đem đến cho khách hàng cũng như các trang web nhiều lợi ích nổi bật. Cụ thể có thể nói đến là một số ưu điểm sau: 

Giảm bớt chi phí từ banner động

Sử dụng banner động sẽ giúp các chi phí thiết kế và thực hiện của banner quảng cáo thấp hơn đáng kể so với các phương tiện truyền thông thông thường. Hoặc các hình thức quảng cáo trực tuyến khác (phát thanh và truyền hình). Ước tính để “mua” khoảng 30 giây trên quảng cáo truyền hình, các nhà quảng cáo phải đổi lại mức ngân sách cho một tuần quảng cáo trên trang web nổi tiếng. 

Xem thêm:   Bạn đã biết cách làm hình nền video siêu đơn giản chưa?

Banner động giúp củng cố nhận thức về thương hiệu 

Sử dụng banner quảng cáo động có thể tạo ra doanh thu trong nháy mắt nhưng cũng đóng góp tích cực tới nhận diện thương hiệu của doanh nghiệp. Ngay cả khi khách hàng truy cập trang web mà không cần click vào banner, não bộ vẫn hình thành một ấn tượng trong tiềm thức về thương hiệu thông qua hình ảnh, logo. 

Từ đó, doanh nghiệp có thể tiếp cận tâm trí người mua hàng dễ dàng hơn. Mặt khác banner thể hiện rõ ràng hình ảnh, nội dung và thông điệp mà doanh nghiệp truyền tải, người xem có thêm sự hình dung và cảm nhận cụ thể đối với thương hiệu. 

Banner động được trình bày hấp dẫn, linh hoạt 

Việc trình bày dễ dàng, linh hoạt, hấp dẫn không chỉ giới hạn trong một khung hình tĩnh, những hình ảnh và con chữ bất động, quảng cáo dạng này hoàn toàn có thể thêm hình ảnh động hay thậm chí cả âm thanh.  

Bạn không nên lo lắng về việc các banner dạng động có khả năng làm giảm tốc độ tải trang vì các công cụ nén hiện nay có thể dễ dàng giảm thiểu kích thước. Sự phát triển của các công cụ này cho phép bạn tạo một quảng cáo bắt mắt mà giảm ảnh hưởng đáng kể đến thời gian tải trang.

Sử dụng banner động đem đến nhiều lợi ích cho website
Sử dụng banner động đem đến nhiều lợi ích cho website

Trên đây là toàn bộ thông tin hướng dẫn thiết kế banner động mà ostrichmotion.com chia sẻ đến các bạn. Việc sử dụng banner động quảng cáo cho các website đem đến rất nhiều lợi ích thiết thực. Bởi vậy nếu chưa tìm được đơn vị tiến hành thiết kế banner hãy đến với https://ostrichmotion.com/ của chúng tôi nhé. Chắc chắn trang web của các bạn sẽ vô cùng sinh động, đẹp mắt và chất lượng. 

(5 votes)
5/5
Thuận Nguyễn

Thuận Nguyễn

CEO OSTRICHMOTION

Leave a Reply

Your email address will not be published. Required fields are marked *

Giới thiệu

Ostrichmotion là đơn vị sản xuất Video Marketing, Video Animation, Motion Graphic phục vụ nhu cầu quảng cáo, quảng bá dịch vụ và sản phẩm cho các thương hiệu.

Những tin tức khác

Theo dõi

Ostrich Motion
Room To Read VN - Explainer Videos

Room To Read VN - Explainer Videos

2
0

Liên hệ tư vấn

Đăng ký để nhận tin tức

Đăng ký theo dõi để nhận những tin tức mới nhất từ ostrichmotion