Cách tạo một banner động cho website bằng Photoshop

Việc tạo ra những banner không hẳn là những công việc hấp dẫn nhất trên thế giới nhưng đó là việc mà mỗi nhà thiết kế băt buộc phải nhúng tay vào tại một thời điểm nào đó trong công việc của họ, có thể là không chỉ một mà nhiều lần. Mặc dù không có nhiều quy luật ràng buộc cho việc thực hiện nó, có nhiều cái không cần nói mà chúng ta phải tự biết là kiểu chữ phải to, rõ và thông điệp phải “bắt” mắt. 

Bởi vì chúng ta đang làm cho nó trở nên “động”, tôi khuyên bạn không nên có nhiều hơn 3 slide hoặc ôm đồm nhiều quá mức vì mọi người đơn giản là sẽ không xem nó. Những yếu tố chớp nhoáng cũng có thể giúp gây chú ý cho người xem

Qua ít bước tiếp theo tôi sẽ hướng dẫn cách cài đặt và tạo một banner web động đơn giản mà một khi đã thành thạo sẽ dễ cho các bạn xin được bất cứ công việc mới nào trong tương lai

1. Thiết lập document của bạn

Mở Photoshop, sau đó ta vào File-> New và chọn Web từ tab Preset. Từ Size kéo xuống chọn leaderboard hoặc nếu kích thước màn hình của bạn khác thì chọn custom và nhập chỉ số pixel vào

Sau đó vào View-> Snap To-> Document Bounds, rồi kéo thả guide để áp dụng lên document của bạn

2. Thêm đồ họa

Bây giờ hãy đặt các yếu tố thiết kế quan trọng vào. Ở ví dụ trên tôi đã thêm vào logo  của T3 và như đã tạo, guide có thể chỉnh size lại và áp dụng lên document một cách dễ dàng. Thêm tiếp một cái mũi tên mà chúng ta sẽ dùng sau và sử dụng công cụ nhập để đặt nội dung cho slide đầu tiên. Sau đó thêm vào bất cứ hình ảnh nào mà bạn cần và chắc chắn rằng bạn đã đặt tên đúng cho tất cả layer của mình

3. Tạo các slide phụ

Giờ đơn giản là hãy tạo thêm một bản sao cho type layer của bạn, sau đó tắt type layer bên dưới và nhập text tiếp theo vào, trong trường hợp này là “ON SALE NOW”. Một khi bạn đã chắc là mọi thứ đã xong, merge down càng nhiều layer nhất có thể. Về phần background, logo và hình nền sẽ để ở trạng thái tĩnh, chúng ta có thể merge down bằng việc để lại 4 layer: background, 2 type layer và layer mũi tên

4. Dựng frame animation

Các bạn hãy click vào tab timeline ở dưới cửa sổ hoặc vào Window -> Timeline. Click tiếp mũi tên nhỏ ở giữa cửa sổ và chọn “Create frame animation” sau đó nhấn nút. Giờ hãy tắt hết tất cả các layer trừ layer background và layer message đầu tiên. Apply một giây delay cho frame từ menu trên khung animation frame nhỏ. Tiếp tục chỉ cần click vào “duplicate selected frames” trong timeline nhưng hãy tắt message đầu tiên và bật message thứ 2. Lặp lại quá trình này cho tất cả các layer và kết thúc bằng layer mũi tên

5. Làm cho mũi tên nhấp nháy và căn chỉnh timing

Để làm cho mũi tên nhấp nháy đơn giản là nhấn “duplicate selected frames” từ timeline và tắt mũi tên đi. Căn chỉnh thời gian 0.5 giây và lặp lại tiến trình bật lại mũi tên và tắt tất cả các bảng layer để mà nó xuất hiện dưới dạng chớp tắt. Cuối cùng bạn có thể muốn điều chỉnh một vài timing cho tới khi bạn hoàn toàn hài lòng. Mọi người thường có khoảng thời gian tập trung rất ngắn nên sẽ vô ích trong việc làm chậm tốc độ khung hình, nhưng họ sẽ vẫn cần đọc được nó

6. Lưu file

Chọn “Save for web” và chọn tiếp GIF. Bạn cũng có thể hạ một chút chất lượng hình ảnh để giảm dung lượng của file. Khi bạn đã hoàn tất, lưu lại và kéo thả lên trình duyệt để kiểm tra xem banner chạy thế nào.

Bài viết gốc trên Designs.vn