Một Số điều Cần Lưu ý Khi Thiết Kế GIF - IDesign

Đối với tôi, sản phẩm GIF thu hút phải có tính liên tục mượt mà và diễn ra vô tận với đa dạng các chuyển động.

Bài viết bởi Lisa Hassell, giám đốc sáng tạo tại agency Inkygoodness.

Chúng ta đang sống trong một thế giới mà tần suất các cuộc hội thoại và trò chuyện diễn ra trên mạng ngày càng tăng, đồng thời định dạng GIF bắt đầu xuất hiện nhiều hơn. Chúng xuất hiện ở mọi lĩnh vực, từ việc thể hiện văn hóa đến chiến dịch quảng cáo. Đối với thế hệ nhà thiết kế và lập trình viên sắp tới, việc trang bị kiến thức về đồ họa chuyển động và cách tạo nên một tác phẩm GIF hoàn chỉnh là vô cùng thiết yếu.

Một tệp GIF hoàn hảo có thể mang lại cảm giác tươi mới và sôi động, hoặc chậm rãi, mượt mà, tùy thuộc vào những yếu tố cấu thành. Điều cốt lõi ở đây là bạn phải hiểu được yếu tố nào góp phần tạo nên tệp GIF thật bắt mắt kèm theo ngôn ngữ thiết kế thích hợp với thông điệp muốn truyền tải.

Có vài nguyên tắc và công cụ cần lưu ý để hỗ trợ quá trình thuần thục kĩ năng tạo GIF. Bên dưới là 9 chia sẻ hữu ích về cách làm việc với GIF từ các studio hàng đầu cũng như những freelancer chất lừ .

1. Hãy tạo cảm giác bắt mắt

Với sự ứng dụng ngày càng cao của mạng xã hội, không mấy ngạc nhiên khi xu hướng ứng dụng GIF vào quảng cáo ngày càng gia tăng. “Sử dụng GIF để viết nội dung trên mạng xã hội là một cách tuyệt vời nếu nó được ứng dụng hợp lý,” Tom Grant, nhà thiết kế tại Fiasco Design ở Bristol chia sẻ.

Ông coi GIF như một công cụ thu hút sự chú ý, khiến cho những chi tiết tưởng chừng như vô tri trở nên vô cùng bắt mắt và hữu ích.

Fiasco Design tạo nên những tệp GIF vô cùng sống động dành cho Thế vận hội Rio năm 2016, kết hợp gam màu rực rỡ với tần số chuyển động nhanh và typeface tương thích trong hầu hết các kích cỡ.

2. Cân bằng kích thước để dễ dàng chia sẻ trên mạng

Nhà thiết kế cần tuân theo vài nguyên tắc để có được phần GIF phù hợp cho platform mạng xã hội. “Khó khăn chính là điều chỉnh sao cho kích cỡ của chúng không vượt quá giới hạn của mỗi platform,” James Curran, senior editor tại công ty sản xuất quốc tế Partizan chia sẻ. “Tumblr là môi trường khá khắt khe vì giới hạn chỉ có 2 MB (bây giờ là 3 MB), vì thế đôi khi tôi cần phải uyển chuyển một chút để điều chỉnh kích thước tập tin.”

Ngoài ra còn có những nguyên tắc khác khi tạo GIF. Đầu tiên, hãy tích hợp bảng màu. Tránh sử dụng gradient vì bạn sẽ gặp phải một vài khó khăn như phần shading thô kệch hoặc kích thước tệp quá lớn. Độ phân giải bán trong suốt cũng là điều nên tránh bởi yếu tố này cần được chỉnh 100% trong suốt hoặc tối hoàn toàn – đây là một số điều cần lưu ý để tránh những sai lầm đáng tiếc.

3. Luôn thiết kế với tư duy ứng dụng trên điện thoại

Dù mỗi trang web có cách ứng dụng GIF theo từng cách khác nhau, đa số nhà thiết kế đều đồng quan điểm rằng không nên có quá nhiều phần GIF cỡ lớn chạy cùng lúc trong một trang. Curran đề nghị sử dụng rollover để tránh các chuyển động quá chậm và điều chỉnh hoạt họa ở một tốc độ hợp lý.

Bạn cần phải ghi nhớ một vài loại thiết bị chứa GIF. Lời khuyên từ Curran là lúc nào cũng thiết kế với tư duy trên màn hình nhỏ: “Hãy giữ cho mọi thứ thật đơn giản và đậm nét để chúng phối hợp thật nhịp nhàng trên mọi loại thiết bị.“

Russell Etheridge, một thành viên trong đội ngũ sáng tạo Animade, ưa chuộng thiết kế dạng hình vuông. “Hầu hết các GIF của chúng tôi đều ở dạng hình vuông và nếu cần thì sẽ cắt chỉnh phù hợp. Đồng thời, bạn có xu hướng lướt qua nội dung trên các trang mạng xã hội bằng điện thoại, vì thế sẽ tốt hơn nếu thiết kế vừa vặn khung hình vuông bởi dạng hình ảnh hẹp sẽ cho cái nhìn tốt hơn.“

Đối với tệp GIF Olympops phía trên, Etheridge đã ứng dụng khung 4:3, nó đều có thể được cắt chỉnh thành hình vuông hoặc video khung 16:9 chuẩn mực.

4. Tạo tính liên kết xuyên suốt

Nhà thiết kế người Pa-ri Valentin Adam làm việc tại Playground Paris có một góc nhìn khác về GIF, đó là tổng thể gồm các thành phần liên tiếp chuyển động không ngừng: “Thật thú vị khi tạo ra một tác phẩm hoạt họa dài 2 giây chuyển động không ngừng, mỗi giai đoạn lại cho ta cái nhìn trông thật khác lạ.”

Curran đồng quan điểm với ý tưởng trên và ủng hộ ý tưởng về GIF theo quan điểm liên tiếp thay vì là một đoạn chuyển động nhỏ có điểm bắt đầu và kết thúc xác định. “Hãy kể một câu chuyện diễn ra trong mạch chuyển động liên tiếp ấy,” ông chia sẻ. “Tôi nghĩ rằng quan điểm này sẽ khiến mọi người gắn bó với GIF lâu hơn.“

Nếu phần hoạt họa quá ngắn, hãy giới hạn phần lặp lại không quá 3 lần rồi kết thúc hoàn toàn – Nick Lewis, nhà thiết kế và lập trình front end tại Fiasco Design.

Tuy nhiên, nếu thiết kế tệp GIF cho các platform mạng xã hội như Twitter, bạn không cần phải lo lắng quá nhiều bởi tính năng built-in chỉ chạy GIF khi chúng vào trong tầm mắt.

Cuối cùng, quan trọng là bạn cần phải tạo ra mạch liên kết thật mượt mà và cần tránh phạm phải lỗi sau: “Khung hình cuối cùng trùng khớp phần đầu sẽ tạo ra một khoảng lặng nhỏ, khiến bạn có cảm giác trùng lặp 2 lần và mạch liên kết sẽ không được mượt mà,” Etheridge nói. “Hãy chắc rằng bạn lược bỏ yếu tố này vào giai đoạn cuối.”

5. Trang bị công cụ phù hợp

Đối với đại đa số các nhà thiết kế, việc thuần thục Photoshop là yếu tố quan trọng để tạo ra GIF hoàn chỉnh. Curran đề nghị bạn nên lượn lờ vài vòng trên Youtube để biết được một vài phần mềm quan trọng: “Một khi nắm bắt được kiến thức cơ bản, bạn có thể biết cách áp dụng những nguyên tắc ấy để tạo ra sản phẩm ưng ý.“

Grant cũng khuyên mọi người nên tham khảo qua CodePen: “Nơi đây là nguồn cảm hứng dạt dào, môi trường để bạn học hỏi và sáng tạo với code, dù là dân nghiệp dư hay chuyên gia.”

Để tạo ra những sản phẩm có độ phức tạp cao hơn, After Effects là sự lựa chọn của đa số dân thiết kế. “Phần mềm hỗ trợ tính năng kiểm soát chuyển động và điều chỉnh thời gian cũng như tạo ra phần hoạt họa sống động hơn,” Lewis bật mí.

Nếu bạn đang tìm kiếm nơi để rèn giũa kĩ năng sử dụng After Effects, hãy thử qua phần hướng dẫn tạo GIF của Curran ở đây, bao gồm phần Nhập môn hoạt họa với After Effects và tổng hợp 50 hướng dẫn sử dụng After Effects online dành cho bạn.

Việc xuất file trực tiếp dưới dạng GIF là hoàn toàn khả thi, tuy nhiên Lewis khuyên rằng bạn nên xuất định dạng video trước: “Cách làm này sẽ khiến mọi thứ dễ dàng hơn và thu nhỏ kích cỡ của tệp.”

6. Khởi đầu với những gì đơn giản

Chúng ta sẽ dễ bị choáng ngợp trước vô vàn lựa chọn khác nhau. “Bởi có quá nhiều thứ cần phải cân nhắc, dẫn đến nhiều thử nghiệm và nghiên cứu cần được thực hiện. Nó có thể tốn gấp đôi thời gian để tạo ra một tệp GIF liền mạch hoàn chỉnh,” nhà thiết kế tại Melbourne – Ellen Porteus chia sẻ.

Lời khuyên từ cô là hãy thật đơn giản: “Hãy bắt đầu với một vài chi tiết để hiểu được nguyên tắc vận hành, từ đó dần dần xây dựng lên những điều phức tạp hơn.”

Adam đã biết cách thuần thục kĩ năng đơn giản hóa mọi thứ trong lúc mở rộng phần portfolio GIF của mình. “Trong đầu tôi lúc nào cũng đinh ninh rằng mình phải tạo ra thật nhiều chuyển động hỗn tạp đầy những điều ngớ ngẩn và điên rồ, tuy nhiên để điều này được khả thi, tôi phải làm GIF mỗi ngày – một phần để tránh làm quá mọi thứ lên,” ông giải thích.

Ông thực hiện thử thách này trong vòng 1 tháng bằng cách đăng tải GIF liên tục trên trang Instagram cá nhân. Thông qua việc ứng dụng đa dạng các thủ thuật, ông đã có thể rút ngắn thời gian làm việc trung bình của mình xuống còn khoảng 1 tiếng đồng hồ.

7. Biến một chiếc video thành GIF

Tạo GIF không phải là tính chất trực thuộc của một nhà minh họa – bạn có thể tải bất kì một video nào vào Photoshop và biến nó thành một tệp GIF. Đối với những ai đang còn hơi “gà” về kĩ năng Photoshop, Grant khuyên bạn nên bắt đầu với Giphy, một phương pháp khá đơn giản và không tốn phí để phân tách video thành các khung hình nhỏ lẻ.

“Tôi không thật sự sử dụng hệ thống hoạt họa theo khung hình trong Photoshop, bởi các phần nhỏ của một video mang tính trực giác quá cao,” Etheridge nhận xét. “Nếu đang trong quá trình làm đồ họa, tôi sẽ sử dụng After Effect và xuất video qua Photoshop trước khi chuyển đổi dạng tệp tin.”

Tuy nhiên, ông cũng chỉ ra rằng nếu bạn tạo GIF từ một video, việc có được sự mượt mà liên tiếp sẽ khó khăn hơn nhiều, và quá trình chọn màu sắc phù hợp cũng gian nan không kém.

8. Mọi người đều phải truy cập được

Để đảm bảo nội dung được truyền đến nhiều người dùng hơn, nhà lập trình cần phải cân nhắc tính tiếp cận và quy chuẩn trang web. “Hoạt họa trên trang web nên được ứng dụng để cải thiện trải nghiệm,” Grant nói.

Ông khuyên rằng chúng ta nên diễn tả hoạt họa và GIF bằng con chữ để chúng có thể tiếp cận nhiều người dùng/khán giả hơn. Đồng thời điều này cũng giúp tránh những yếu tố chuyển động quá nhanh để phù hợp với những đối tượng nhạy cảm về hình ảnh.

Nhà đồng sáng lập Animade, James Chamber, đồng ý rằng tính tiếp cận cần phải được xây dựng từ ban đầu: “Những điều cơ bản như gắn nhãn cho hình ảnh hoặc GIF cần phải thực hiện ngay từ đầu.“

Ông cũng chia sẻ rằng đối với hoạt họa dạng vector, sử dụng inline SVG có thể cải thiện đáng kể mức độ tiếp cận. Nói một cách đơn giản, SVG là một dạng hình ảnh gốc XML dành cho đồ họa 2 chiều nhằm hỗ trợ tính tương tác và hoạt họa. “Theo góc nhìn tính tiếp cận, inline SVG chứa nhiều thông tin hơn khi so sánh với nhãn mác trống, do đó chúng sẽ được trình duyệt đọc hiểu dễ dàng hơn,” ông giải thích.

Đối với những trang web nặng về hoạt họa, Chambers khuyên là nên kết hợp SVG và ứng dụng gắn nhãn ARIA. Người dùng sẽ tương tác khá nhiều với HTML, nhưng ARIA có thể cung cấp nhiều nội dung và tương tác hơn. ARIA không tác động đến cách bố trí và hoạt động của những chi tiết trên trình duyệt – nó chỉ hoạt động với vai trò của một nhân tố phụ. Đây thật sự là một công cụ hữu hiệu cho dân thiết kế web.

9. Khám phá điều mới lạ

Tại sao GIF lại trở nên thông dụng đến như vậy? Đối với nhiều nhà thiết kế, chúng là phương thức truyền tải sáng tạo mới mẻ. “Tôi nghĩ rằng một phần là bởi người dùng GIF chủ yếu là đối tượng còn trẻ, khách hàng sẽ thích thú với những nội dung độc lạ hơn,” Curran nói.

“Dù lý do là gì chăng nữa, các nhãn hàng sẽ ưa chuộng nhà sáng tạo với GIF mới lạ hơn là theo cách truyền thống. GIF thường nằm trong các dự án nhỏ với ngân sách eo hẹp, đây là phương pháp ít rủi ro hơn để nhãn hàng có thể thử nghiệm vài điều khác biệt.“

Porteus nhận định rằng: “Tất cả đều dựa vào cách tận dụng sự linh hoạt của phương tiện truyền thông. Minh họa theo phương pháp truyền thống cũng hay, nhưng GIF có thể rất thu hút, mang lại cảm giác vui tươi và thể hiện sự tinh tế. Đối với tôi, sản phẩm GIF thu hút phải có tính liên tục mượt mà và diễn ra vô tận với đa dạng các chuyển động.“

Yếu tố nào làm nên một sản phẩm GIF hoàn hảo, trực giác là điều cần để tâm đến. “Điều quan trọng là bạn phải hiểu được các nguyên tắc hoạt họa cơ bản, nắm bắt nhịp điệu và khả năng nảy ra ý tưởng,” Curran kết luận. “Bản thân tôi vẫn tự trau dồi những điều như vậy sau hơn 10 năm làm hoạt họa!”

Tác giả: Lisa HassellNgười dịch: ĐáoNguồn: Creativebloq

• Animated GIFs by RRRRRRRROLL
• Tìm hiểu phương thức UX Research qua ảnh GIF
• Nghệ thuật kể chuyện bằng đồ họa chuyển động