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

Blog

Apr 22
lambanner-huong-dan-thiet-ke-banner-dong

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ẹ.

lambanner-tao-file-document

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.

lambanner-thay-doi-kich-thuoc-hinh

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

lambanner-tao-nut-cho-banner-gif

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%

lambanner-trang-tri-cho-nut

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.

lambanner-tao-layer-text

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ể.

lambanner-tao-thong-diep

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.

lambanner-frame-dau-tien-trong-banner-dong

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%

lambanner-frame-2-trong-banner-dong

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%

lambanner-buoc-9-thiet-ke-banner-dong

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%

lambanner-buoc-10-thiet-ke-banner-dong

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

lambanner-buoc-11-thiet-ke-banner-dong

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ư ý

lambanner-buoc-12-thiet-ke-banner-dong

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

lambanner-buoc-13-thiet-ke-banner-dong

Cuối cùng là sản phẩm hoàn chỉnh của chúng ta :

lambanner-banner-gif

Đôi nét về Lambanner

Lambanner là nơi cung cấp dịch vụ thiết kế banner chuyên nghiệp nhất. Tinh tế - bắt mắt - thẩm mỹ là phương châm của chúng tôi. Sản phẩm tại Lambanner luôn có độ hoàn thiện cao và mức giá cạnh tranh nhất trên thị trường.