Cách tạo hình ảnh hoạt hình cho ấn phẩm Trung bình của bạn

Từ CSS đến GIF

GIF tuyệt vời này đã được tìm thấy ở đây

Chúng tôi thích ý tưởng có một bìa hoạt hình cho ấn phẩm của chúng tôi. Phương tiện không cho phép người dùng tùy chỉnh hoàn toàn bố cục xuất bản, nhưng bạn vẫn có thể chơi xung quanh với một số yếu tố trực quan để đạt được kết quả ban đầu và làm cho ấn phẩm của bạn nổi bật.

Trong bài viết này, chúng tôi sẽ cho bạn thấy cách chúng tôi tạo tiêu đề xuất bản hoạt hình của chúng tôi. Chúng tôi cũng sẽ chia sẻ một số mẹo và hướng dẫn sử dụng tệp GIF trên Phương tiện.

GIF trên các ấn phẩm trung bình

Phương tiện cho phép bạn tải lên hai hình ảnh vào tiêu đề xuất bản của bạn: một là hình nền và một là hình ảnh logo.

Trong cả hai trường hợp, định dạng GIF đều được hỗ trợ, do đó bạn có thể điền vào bìa xuất bản của mình một số hình ảnh động đẹp.

Dưới đây là hai ví dụ truyền cảm hứng:

  • Backchannel (GIF làm hình nền)
  • Magenta (GIF như hình ảnh logo)

Từ CSS đến GIF

GIF có thể được tạo ra với nhiều công cụ. Con đường chúng tôi theo có thể không phải là con đường dễ nhất, nhưng chúng tôi muốn sử dụng một yếu tố đã tồn tại trên trang web của chúng tôi và điều chỉnh nó cho trang bìa Trung bình.

Hoạt hình trên trang web của chúng tôi đã được thực hiện bằng CSS, vì vậy chúng tôi đã quyết định điều chỉnh đoạn mã hiện có và tìm cách chuyển đổi nó thành GIF.

Ảnh bìa hiện tại của Radar

Bước 1 - html và CSS

Bước đầu tiên là điều chỉnh mã hiện có và tạo một trang html chứa hoạt hình của chúng tôi và cùng nền với hình nền mà chúng tôi muốn sử dụng trong ấn phẩm của chúng tôi.

Nếu bạn muốn chơi với các hiệu ứng hoạt hình từ tương tự, bạn có thể kiểm tra cây bút này của Amrit Leone.

Bước 2 - Ghi lại màn hình

Quicktime Player có chức năng ghi màn hình tiện dụng, cho phép bạn chọn khu vực màn hình mà bạn muốn ghi. Video được quay ở khoảng 30 FPS, do đó, hoạt hình của bạn không nên dài hơn 15 giây (15 giây = 450 khung hình).

Nếu bạn sử dụng Windows, bạn cũng có thể thử một trong những phần mềm này để ghi lại màn hình.

Bước 3 - Chuyển đổi .mov thành GIF

Khi bạn hoàn tất ghi âm, bạn sẽ có tệp .mov.

Mở Photoshop và đi đến Tệp> Nhập> Khung video thành Lớp.

Bạn có thể chọn một phần của bản ghi mà bạn muốn nhập và chuyển đổi thành Lớp. Đừng quên kiểm tra hộp Tạo hình khung hình của Make.

Photoshop sẽ giới hạn các khung hình ở mức 500, và bạn không nên có nhiều hơn thế, nếu không thì tệp sẽ trở nên quá nặng.

Nếu bạn mở bảng thời gian trên Photoshop, bạn sẽ thấy tất cả các khung của mình.

Bây giờ bạn chỉ cần xuất các khung dưới dạng GIF. Để thực hiện việc này, hãy đi tới Tệp> Lưu cho Web.

Bạn có thể giảm kích thước tệp bằng cách giới hạn số lượng màu trong hộp thoại xuất.

Điều quan trọng là giữ kích thước của GIF của bạn gấp đôi kích thước so với những gì bạn cần, bởi vì Medium sẽ thay đổi kích thước của nó thành một nửa.

Chúng tôi giả sử tất cả các logo là võng mạc, có nghĩa là logo được tải lên với kích thước gấp đôi chúng tôi cho rằng nó sẽ được hiển thị. Nếu bạn tải lên logo rộng 2000px và cao 1000px, Medium sẽ hiểu nó là rộng 1000px và cao 500x.
- Blog vừa

GIF cuối cùng của chúng tôi có 475 khung hình và khoảng 2MB.

Bước 4 - Tải nó lên Trung bình

Tải hình ảnh nền và hình ảnh logo của bạn lên ấn phẩm của bạn và đó là hình ảnh đó.

Bây giờ bạn có một hình ảnh bìa hoạt hình!

Chúng tôi hy vọng bạn tìm thấy điều này hữu ích. Cung cấp cho nó và cho chúng tôi biết nếu bạn cũng đang sử dụng GIF trên ấn phẩm Trung bình của mình. Chúng tôi rất thích nhìn thấy một số ví dụ tuyệt vời hơn! Để đọc thêm truyện, chỉ cần nhấn nút theo dõi đó.