Hướng dẫn cách tạo Banner động cho website bằng Photoshop

Hướng dẫn cách tạo Banner động cho website bằng Photoshop

Kết quả: 4.7/5 - (2485 phiếu)

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áy Tính Trường Thịnh sẽ hướng dẫn bạn cách tạo Banner động cho Website bằng photoshop đơn giản mà hiệu quả.

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.

Biên soạn: Admin Trường Thịnh Group

Cảm ơn các bạn đã đọc tin Máy Tính Trường Thịnh hi vọng giúp ích nhiều cho các bạn !!

==>> Quay lại đầu trang

Tin cùng chuyên mục


5 thủ thuật tăng tốc khi duyệt web

5 Công cụ Prototyping tốt nhất để kiểm tra thiết kế Website và bản di động

Slideshow Galleries – Khi nào, bằng cách nào và tại sao bạn nên sử dụng

Landing Page - Thiết Kế Web Bán Hàng

Tin ngẫu ngẫu nhiên


Công Ty Sửa Laptop Tận Nơi Quận Phú Nhuận

Công Ty Sửa Laptop Tận Nơi Huyện Nhà Bè

Công Ty Sửa Laptop Tận Nơi Huyện Bình Chánh

Công Ty Sửa Laptop Tận Nơi Quận Gò Vấp


backtop
Điện Thoại Công Ty Thiết Kế HCM