Banner động (banner gif, banner flash…) là một trong những thành phần đồ hoạ rất phổ biến trong môi trường internet hiện nay.
Có khá nhiều phần mềm giúp bạn tạo nên những banner động chuyên nghiệp, và Photoshop, phần mềm đồ hoạ phổ biến nhất hiện nay, cũng có thể làm được chuyện đó.
Trong bài viết này, mình sẽ hướng dẫn cho bạn cách thiết kế 1 banner động đơn giản nhưng đẹp mắt bằng Photoshop, và một khi đã thành thạo, bạn dễ dàng áp dụng vào những thiết kế khác trong tương lai.
Chúng ta bắt đầu nhé !
Bước 1:
Mở một tập tin Photoshop với kích thước 300px (rộng) và 250px (cao), đây là một trong những kích thước banner chuẩn mực và phổ biến trên website.
Vì banner động chỉ hiện thị trên web, chúng ta nên đặt độ phân giải là 72 để file có kích thước nhẹ.
Bước 2:
Trong ví dụ này, mình sẽ thiết kế 1 banner nhằm mục đích bán vé cho 1 sự kiện âm nhạc.
Bạn có thể download hình ảnh tại đây để thực hành !
Chèn hình trên sao cho chiếm toàn bộ không gian trên banner. Bạn có thể sử dụng công cụ transform (Ctrl + T) để thay đổi kích thước hình ảnh cho phù hợp.
Bước 3:
Sử dụng công cụ Eyedropper Tool (I) để chọn màu trùng với màu sắng ánh sáng của hình, sau đó 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.
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:
Nhìn lên thanh menu – chọn Window > Animation để mở bảng điều khiển Animation cuối màn hình. Bây giờ là lúc chúng ta sẽ tạo một số hiệu ứng chuyển động cho banner quảng cáo này.
Với khung hình đầu tiên, hãy tắt con mắt của 3 layer : Layer chứa thông điệp Layer chứa nút và lời kêu gọi hành động, nghĩa là 3 layer này sẽ vô hình ở khung hình đầu tiên.
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ốg 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%
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 (Opactity) 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
Cuối cùng là sản phẩm hoàn chỉnh của chúng ta :
