Cách tạo hiệu ứng cho logo trong 7 bước

Hình ảnh động logo ngày càng phổ biến ngày nay. Giữa điện thoại thông minh và sự tiến bộ chung của công nghệ internet, logo ngày nay được bắt gặp thường xuyên hơn trong không gian kỹ thuật số, và điều này mở ra cánh cửa cho các hiệu ứng hình ảnh chẳng hạn như hoạt hình mà các sản phẩm vật lý không thể thực hiện được. Tất nhiên, sự phổ biến ngày càng tăng của hoạt ảnh biểu tượng có nghĩa là ngày càng nhiều thương hiệu sẽ cần nó để duy trì tính cạnh tranh. Vì vậy, học cách làm sinh động logo có thể là một kỹ năng có giá trị để đưa logo của bạn lên một tầm cao mới.

Đồng thời, phần mềm hoạt hình cũng trở nên phổ biến hơn, được sắp xếp hợp lý và trực quan hơn để hỗ trợ cơ sở người dùng ngày càng tăng này. Vì vậy, bất kể hoạt ảnh biểu trưng nghe có vẻ khó khăn và kỹ thuật như thế nào, ngay cả những người mới bắt đầu bây giờ cũng có khả năng tạo ra các hoạt ảnh đơn giản nhưng hiệu quả.

Để kết thúc phần này, tôi sẽ hướng dẫn bạn những điều cơ bản về hoạt ảnh logo từ đầu đến cuối. Ví dụ, tôi sẽ làm việc với một logo mà tôi đã tạo cho blog cá nhân của mình: Story Mode. Trong khi chúng ta sẽ sử dụng Adobe After Effects trong hướng dẫn này, hầu hết các phần mềm hoạt ảnh đều có chức năng tương tự và các nguyên tắc cơ bản về cách phần mềm hoạt động sẽ áp dụng cho bất kỳ chương trình nào mặc dù tên cụ thể và các tùy chọn menu có thể khác nhau.

Cách tạo hoạt ảnh cho logo bằng After Effects trong 7 bước
–

1. Chuẩn bị tệp logo
2. Nhập logo vào After Effects
3. Thiết lập bố cục
4. Tạo hoạt ảnh với các khung hình chính
5. Tạo hoạt ảnh với các lớp hình dạng
6. Điều chỉnh thời gian hoạt ảnh của bạn
7. Xuất logo động của bạn

Bước 1: Chuẩn bị tệp logo

Chúng tôi thực sự sẽ bắt đầu hướng dẫn hoạt hình logo của mình trong Adobe Illustrator (hoặc phần mềm thiết kế logo tương đương mà bạn sở hữu). Điều này là để đảm bảo rằng tệp biểu trưng của chúng tôi được thiết lập cho hoạt ảnh.

Mặc dù bản thân phần mềm hoạt hình dựa trên raster, các tệp nguồn biểu trưng phải ở định dạng vectơ. Điều này cho phép chúng được thay đổi mà không làm giảm chất lượng hình ảnh (ví dụ: mở rộng biểu tượng raster dẫn đến tạo pixel) và điều này sẽ hữu ích sau này khi làm việc với các lớp hình dạng.

Biểu trưng cũng nên được phân lớp thay vì nhóm thành một đối tượng duy nhất. Điều này cho phép bạn dễ dàng tạo các hoạt ảnh phức tạp hơn bằng cách tạo hoạt ảnh cho các phần riêng biệt của logo. Bạn có thể tạo các lớp mới bằng cách sử dụng nút  Thêm Lớp mới  ở cuối bảng điều khiển Lớp, sau đó sao chép và dán các phần biểu trưng của bạn vào chúng.

Cuối cùng, vì hoạt ảnh có bản chất kỹ thuật số, chúng tôi cũng đang làm việc với màu RGB. Nếu tệp Illustrator của bạn được đặt thành CMYK, bạn có thể thay đổi điều này bằng cách chọn biểu trưng của mình và điều hướng đến  Chỉnh sửa  >  Chỉnh sửa màu  >  Chuyển đổi thành RGB .

Khi bạn đã sẵn sàng, hãy xuất biểu trưng của bạn dưới dạng tệp vectơ nhiều lớp đầy đủ. Vì các loại tệp After Effects nằm trong dòng phần mềm Adobe, tôi sẽ lưu biểu trưng mà tôi đã tạo dưới dạng tệp AI (Adobe Illustrator), nhưng có một số loại tệp vectơ khác nhau để lựa chọn nếu bạn đang sử dụng một biểu tượng khác phần mềm.

Bước 2: Nhập logo vào After Effects

Mở After Effects. Giao diện thoạt nhìn có vẻ phức tạp, vì vậy hãy chia nhỏ các yếu tố cần thiết:

1. Bảng công cụ : Đây là nơi bạn có thể truy cập các công cụ xây dựng đồ họa cơ bản như công cụ bút, công cụ gõ, v.v.
2. Bảng điều khiển dự án : Đây là nơi bạn quản lý và sắp xếp các tệp phương tiện cho dự án tổng thể của mình.
3. Cửa sổ sáng tác : Đây là cửa sổ xem trước video trong đó bạn có thể xem hoạt ảnh cho thành phần hiện tại (thường được gọi là bản tổng hợp) mà bạn đang thực hiện. Comps về cơ bản là những cảnh mà mỗi cảnh có dòng thời gian hoạt ảnh riêng biệt. Chúng ta sẽ thảo luận sâu hơn về các tác phẩm trong phần tiếp theo.
4. Dòng thời gian : Đây là nơi bạn sẽ xây dựng hoạt ảnh của mình. Nó bao gồm cả dòng thời gian theo nghĩa đen ở bên phải (nơi bạn sẽ thiết lập các sự kiện hoạt ảnh để kích hoạt trên biểu đồ dựa trên thời gian) và vùng tổng hợp ở bên trái (nơi bạn sẽ phân lớp và chỉnh sửa các thuộc tính của nội dung phương tiện của mình).
5. Bảng điều khiển : Đây là nơi bạn có thể truy cập các chức năng hỗ trợ khác nhau như thông tin phương tiện, tùy chọn đoạn văn và căn chỉnh, cũng như các thư viện hiệu ứng hình ảnh và hoạt ảnh tạo sẵn được tích hợp trong After Effects.

Nếu bạn không chắc chắn về bất kỳ công cụ hoặc nút nào, di chuột qua nó sẽ cung cấp cho bạn mô tả.

Để nhập tệp biểu trưng của bạn, chỉ cần kéo và thả tệp đó vào bảng Dự án hoặc điều hướng đến  Tệp  >  Nhập  >  Tệp . Trong hộp thoại sau đó, hãy chọn nhập phương tiện dưới dạng  Cảnh và Lớp được hợp nhất .

Bước 3: Thiết lập bố cục

Thành phần (comp) là một vùng chứa cho phép bạn xếp lớp, chỉnh sửa và áp dụng hoạt ảnh cho các tệp phương tiện. Một sản phẩm lớn hơn, chẳng hạn như một bộ phim, sẽ chứa nhiều comps được sắp xếp trong bảng điều khiển dự án. Vì vậy, bạn có thể coi các comp như một cảnh duy nhất trong bộ phim đó và mỗi comp sẽ có dòng thời gian riêng biệt. Trong trường hợp của chúng tôi, một hoạt ảnh logo dài dưới năm giây cần rất ít comps.

Hãy bắt đầu với một nền đơn giản. Nhấp chuột phải vào bảng comp và chọn New  >  Solid . Bởi vì logo của tôi là màu trắng, tôi đã đi với một khối màu đen, nhưng bạn có thể chọn bất kỳ màu nào bạn muốn. Trong cửa sổ sau, đặt tên cho vật rắn (trong trường hợp của tôi là “BG”) và nhấp vào nút  Make Comp Size  và chọn  OK . Bây giờ, hãy kéo tệp logo của bạn từ bảng dự án vào bảng dòng thời gian và bạn sẽ thấy logo của mình được xem trước trong cửa sổ comp. Nếu không, hãy đảm bảo bạn sắp xếp lại các lớp của mình bằng cách kéo nền rắn bên dưới tệp logo.

Nhấp chuột phải vào tệp logo trong bảng comp và chọn Create > Convert to Layered Comp . Điều này sẽ biến tệp logo của bạn thành một comp khác (bạn sẽ thấy biểu tượng đã thay đổi). Nhấp đúp vào tệp logo bây giờ sẽ mở ra một tab mới và đưa bạn vào tệp mới này chứa tất cả các lớp riêng biệt mà bạn đã thiết lập trong Illustrator. Bây giờ bạn có thể thấy cách comps hoạt động: về cơ bản chúng giống như các thư mục lồng nhau.

Nếu muốn, bạn có thể chuyển đổi từng lớp này thành các lớp riêng bằng cách nhấp chuột phải và chọn  Soạn trước . Điều này sẽ cung cấp cho lớp đó một dòng thời gian hoạt ảnh riêng biệt được lồng trong comp trước đó. Và nếu bạn muốn tạo hoạt ảnh cho toàn bộ logo cùng một lúc, bạn sẽ sử dụng dòng thời gian được liên kết với comp chính.

Với điều đó, chúng ta hãy tìm hiểu cách thức hoạt động của các mốc thời gian này đối với hoạt ảnh.

Bước 4: Tạo hoạt ảnh với các khung hình chính

Cách hoạt động của After Effects (và hầu hết các phần mềm hoạt hình) là thông qua các khung hình chính. Khung hình chính về cơ bản là các điểm đánh dấu mà bạn có thể đặt dọc theo dòng thời gian để xác định khi nào các trạng thái bắt đầu và trạng thái kết thúc cho hoạt ảnh của bạn sẽ xảy ra.

Ví dụ, hãy bắt đầu với một hoạt ảnh rất đơn giản: một màn hình mờ dần. Có các thuộc tính khác nhau được gắn vào một đối tượng và các thuộc tính được thay đổi trong một khoảng thời gian nhất định về cơ bản là hoạt ảnh. Để xem các thuộc tính này, hãy nhấp vào biểu tượng mở rộng bên cạnh cả biểu tượng comp và thuộc tính Transform tiếp theo .

Đối với hoạt ảnh mờ dần, bạn muốn làm việc với thuộc tính đo lường khả năng hiển thị của một đối tượng: Độ mờ. Độ mờ được đặt thành 100% vì logo hiển thị hoàn toàn theo mặc định.

Nhấp vào biểu tượng đồng hồ bấm giờ bên cạnh Độ mờ và bạn sẽ thấy một viên kim cương xuất hiện ở bất cứ nơi nào điểm đánh dấu trên đầu phát của bạn (đường màu xanh lam nhạt băng qua dòng thời gian) đã được đặt. Đây là khung hình chính, về cơ bản là ảnh chụp nhanh giá trị hiện tại của thuộc tính được chỉ định. Di chuyển khung hình chính bằng cách nhấp và kéo khung hình đó đến mốc 2 giây trên dòng thời gian. Kéo đầu phát trở lại mốc 0 giây, sau đó tạo một khung hình chính khác và đặt Độ mờ đục thành 0%. Nhấn phím cách để xem trước hoạt ảnh trong cửa sổ comp.

Bạn sẽ thấy rằng bạn đã tạo hoạt ảnh mờ dần bằng cách thay đổi Độ mờ từ 0% đến 100% trong khoảng thời gian 2 giây chỉ với hai khung hình chính. Đây là cách hiệu quả tất cả hoạt ảnh được thực hiện trong After Effects. Bạn tạo khung hình chính bắt đầu và khung hình chính kết thúc ở các khoảng thời gian khác nhau dọc theo dòng thời gian và After Effects tự động tính toán các chuyển đổi khung hình cần thiết để đi từ điểm A đến điểm B (theo truyền thống được gọi là inbetweens trong biz hoạt hình).

Bạn có thể thấy rằng có một số thuộc tính mà bạn có thể làm việc với thuộc tính Transform mà chúng tôi sẽ giải thích ngắn gọn ở đây. Vui lòng thử nghiệm với keyframing và thay đổi từng keyframe này để cảm nhận khả năng hoạt ảnh của chúng:

• Vị trí : Thuộc tính này mô tả vị trí của biểu trưng trong không gian X, Y trên màn hình tổng hợp và cho phép bạn tạo hoạt ảnh chuyển động tuyến tính.
• Quy mô : Thuộc tính này mô tả kích thước của biểu trưng (theo tỷ lệ phần trăm so với kích thước đầy đủ của tệp nguồn) và cho phép bạn tạo các hoạt ảnh đang phát triển hoặc thu nhỏ.
• Xoay : Thuộc tính này mô tả hướng theo độ và cho phép bạn tạo hoạt ảnh quay.

Mẹo chuyên nghiệp : Khi nói đến hoạt ảnh biểu trưng, ​​bạn nên làm việc ngược lại (như chúng ta đã làm với chế độ mờ dần) vì hoạt ảnh được cho là kết thúc trên biểu trưng hoàn chỉnh, hoàn chỉnh. Điều này có nghĩa là bạn sẽ cần tạo khung hình chính trước khi thay đổi bất kỳ điều gì để bạn có ảnh chụp nhanh các giá trị thuộc tính ở trạng thái mặc định của chúng. Sau đó, bạn có thể di chuyển các khung hình chính đó đến điểm cuối dự định của bạn trên dòng thời gian (dù bạn muốn hoạt ảnh kéo dài bao lâu) và tạo các khung hình chính mới để thay đổi khi bắt đầu dòng thời gian.

Bước 5: Tạo hoạt ảnh cho logo của bạn bằng các lớp hình dạng

Bây giờ chúng ta hãy đi vào một số kỹ thuật hoạt hình thú vị hơn thông qua các lớp hình dạng. Các lớp hình dạng là các đối tượng chứa thông tin liên quan như điểm neo và đường kết nối (tương tự như trong các chương trình vectơ) và việc thao tác các lớp này sẽ mở ra cánh cửa cho toàn bộ khả năng hoạt ảnh ngoài thuộc tính Transform .

Đầu tiên, chúng ta sẽ chuyển logo thành một lớp hình dạng. Trong bảng comp layered comp (các lớp được tạo từ bước 3), chọn tất cả các lớp của bạn, nhấp chuột phải và chọn  Create  >  Create Shapes from Vector Layer . Bạn sẽ thấy mỗi lớp được nhân đôi với một ngôi sao bên cạnh nó — đây là một lớp hình dạng. Được lồng bên dưới lớp hình dạng, bạn sẽ tìm thấy thuộc tính Nội dung ngoài thuộc tính Chuyển đổi . Ở bên phải thuộc tính Nội dung , bạn cũng sẽ thấy  nút Thêm  cho phép bạn chọn nhiều thuộc tính hơn nữa để tạo hoạt ảnh.

Đối với biểu trưng của mình, tôi đã sử dụng một hình ảnh động khá phổ biến và hữu ích bằng cách sử dụng thuộc tính Trim Paths. Để thực hiện việc này, tôi đã thêm Trim Paths bằng  nút Add vào các lớp hình dạng cho mỗi chữ cái, đặt khung hình chính thuộc tính End thành 0% ở đầu dòng thời gian và 100% sau đó khoảng 1 giây. Như bạn có thể thấy, điều này làm cho đường viền của các chữ cái xuất hiện được vẽ bởi một bàn tay vô hình trong thời gian thực.

Ngoài ra, tôi muốn kết hợp một số hoạt ảnh có điểm nhấn vào nền. Vì tôi đang làm việc với màu đen và trắng, tôi đã chọn hiệu ứng đường hầm vòng lặp gợi nhớ đến Vùng Chạng vạng. Để thực hiện việc này, tôi đã sử dụng công cụ đa giác trên thanh công cụ để vẽ một hình dạng ở trung tâm của phần mềm của tôi, tạo một lớp hình dạng mới.

Sau đó, tôi thêm thuộc tính Bộ lặp, căn giữa vị trí và tăng số lượng bản sao. Điều này nhân đôi hình dạng để tạo ra một đường hầm dường như vô hạn. Việc điều chỉnh tỷ lệ sẽ tăng không gian giữa mỗi bản sao và thay đổi cách xoay sẽ định hướng các bản sao theo các hướng khác nhau để tạo hứng thú cho thị giác.

Cuối cùng, để tạo hiệu ứng cho điều này, tôi đã tạo khung chính Offset bằng 0 ở đầu dòng thời gian và đặt nó thành giá trị âm sau này trong dòng thời gian.

Có thể bạn đang hiểu rằng có rất nhiều lựa chọn cho các lớp hình dạng. Điều này đúng: có đầy đủ các khóa học trực tuyến dành riêng cho chủ đề này và bạn nên dành thời gian để thử nghiệm, thực hành và học hỏi.

Tôi cũng không thể cho bạn biết phong cách hoạt ảnh nào sẽ phù hợp với biểu trưng của bạn hoặc những công cụ hoạt hình cụ thể nào bạn sẽ cần để đạt được phong cách đó. Tuy nhiên, tôi có thể cho bạn lời khuyên về cách tự khám phá điều này. Tìm kiếm nguồn cảm hứng từ các biểu trưng hoạt hình khác, chẳng hạn như đối thủ cạnh tranh của bạn, thương hiệu bạn ngưỡng mộ và / hoặc trên một trang web như Pinterest hoặc Dribbble — giống như bạn đã làm khi tạo biểu tượng ngay từ đầu.

Bạn sẽ thấy rằng một khi bạn bắt đầu phân tích những điều này với kiến ​​thức mới tìm thấy của bạn về cách tạo hoạt ảnh cho một biểu trưng mà nhiều biểu trưng dựa trên các thao tác đơn giản về hình dạng và biến đổi (ngay cả những biểu tượng đã được phân lớp rõ ràng trên các hiệu ứng nâng cao, cách điệu). Sau khi tìm thấy một vài hình ảnh động mà bạn thích, bạn có thể làm việc ngược lại trong After Effects để cố gắng thiết kế ngược những hình ảnh động này để thực hành.

Bước 6: Điều chỉnh thời gian hoạt ảnh của bạn

Hãy dành một chút thời gian để nói về thời gian, mô tả tốc độ của khung hình hoạt hình trong suốt hoạt ảnh. Bạn có thể xem biểu diễn trực quan về thời gian bằng cách điều hướng đến  Trình chỉnh sửa đồ thị . Để làm như vậy, hãy nhấp vào biểu tượng Đồ thị (có nhãn  Trình chỉnh sửa đồ thị  nếu bạn di chuột qua nó) ở gần đầu bảng dòng thời gian và thao tác này sẽ thay đổi dòng thời gian thành biểu đồ tuyến tính.

Nếu bạn nhấp vào một trong các thuộc tính khung hình chính của mình, bạn sẽ thấy một đường thẳng từ khung hình chính này đến khung hình tiếp theo. Ngay bây giờ, bởi vì chúng tôi chỉ tạo khung chính điểm bắt đầu và điểm kết thúc, chúng tôi đã để After Effects tính toán thời gian. Không có hướng, After Effects chuyển từng khung hình hoạt ảnh một cách đồng đều, dẫn đến một đường thẳng hoàn hảo.

Tuy nhiên, thay đổi thời gian theo cách có mục đích là điều mang lại cho hoạt hình cảm giác chân thực. Ví dụ, trong hình ảnh động quả bóng nảy, quả bóng di chuyển chậm hơn ở độ cao nảy của nó và nhanh hơn khi nó ở gần mặt đất hơn vì xung lượng và trọng lực. Nói cách khác, nó không di chuyển cùng tốc độ trong suốt hoạt ảnh, và nếu có, nó sẽ nổi bật như rô bốt.

Trình chỉnh sửa biểu đồ cho phép bạn điều chỉnh thời gian trên hoạt ảnh của riêng bạn bằng cách sử dụng cái được gọi là tay cầm bezier để biến đổi đường biểu đồ thành một đường cong. Về phía dưới cùng bên phải của Trình chỉnh sửa đồ thị, bạn sẽ thấy một số biểu tượng của các điểm vuông được gắn với các đường — đây là những công cụ bezier.

Nhấp vào một trong các khung hình chính của bạn và di chuột qua các công cụ bezier cho đến khi bạn tìm thấy công cụ có nhãn  Chuyển đổi khung hình chính thành Auto Bezier . Khi bạn nhấp vào đây, bạn sẽ thấy một chốt màu vàng xuất hiện trong biểu đồ. Kéo tay cầm này xung quanh sẽ làm cho đường cong và điều này sẽ thay đổi thời gian của hoạt ảnh của bạn. Nơi đường cong rõ nét hơn, khung hình sẽ phát nhanh hơn, và nơi đường cong mượt mà hơn, khung hình sẽ phát chậm hơn.

Để thực sự hiểu các sắc thái về cách tùy chỉnh thời gian của riêng bạn cần có trải nghiệm hoạt ảnh và đó là lý do tại sao việc điều chỉnh các đường cong bezier bằng tay là một chủ đề nâng cao hơn. Đối với mục đích của hướng dẫn dành cho người mới bắt đầu này, tôi khuyên bạn nên sử dụng công cụ Easy Ease  bezier (áp dụng đường cong tự động cho khung hình chính đã chọn của bạn) cho tất cả thời gian hoạt ảnh của bạn. Bạn có thể áp dụng  Easy Ease  cho khung hình chính bên ngoài Trình chỉnh sửa đồ thị bằng cách chọn khung hình chính và nhấp chuột phải.

Bước 7: Xuất logo động của bạn

Khi bạn đã sẵn sàng xuất biểu trưng động đã hoàn thành của mình, hãy chuyển đến Tệp  >  Xuất  >  Thêm vào hàng đợi Adobe Media Encoder . After Effects sẽ xuất dưới dạng tệp mp4 theo mặc định, điều này tốt cho video. Vì chúng tôi muốn tạo tệp hình ảnh có thể chia sẻ của hoạt ảnh biểu trưng của mình, chúng tôi sẽ xuất dưới dạng GIF động. Trong cửa sổ Bộ mã hóa phương tiện, nhấp vào mũi tên bên cạnh dòng văn bản màu xanh lam được đánh dấu dưới từ Định dạng và chọn  Ảnh động GIF . Bạn cũng có thể đặt thư mục đích của tệp đã hoàn thành của mình bằng cách nhấp vào văn bản màu xanh lam bên dưới các từ Tệp đầu ra.

Nhấp đúp vào văn bản màu xanh lam được đánh dấu bên dưới Cài đặt sẵn để hiển thị cửa sổ Cài đặt xuất. Có một số tùy chọn bạn muốn chú ý để giảm kích thước tệp: Chất lượng (tôi đặt của tôi ở mức 20), Tốc độ khung hình (tôi đặt của tôi thành 10, mặc dù tốc độ khung hình cao hơn (fps) được khuyến nghị cho video ) và thời lượng, là thanh màu xanh lam bên dưới bản xem trước (tôi đã cắt thành 4 giây). Chọn  OK  để đóng cửa sổ này.

Sau khi bạn hoàn tất, hãy chọn biểu tượng Phát màu xanh lục ở góc trên bên phải của Bộ mã hóa phương tiện và tệp của bạn sẽ hiển thị đến thư mục đích ưa thích của bạn. Và bạn đã có nó: một hình ảnh động logo đã hoàn thành!

Mang thương hiệu của bạn trở nên sống động thông qua hoạt ảnh logo
–

Hoạt hình logo không chỉ là một xu hướng phổ biến mà các thương hiệu buộc phải theo kịp. Ngoài ra còn có một điều kỳ diệu không thể phủ nhận đối với việc tạo hoạt ảnh cho logo và đó là một cách tuyệt vời để tạo ra khoảnh khắc thú vị về thị giác cho tất cả những người tương tác với thương hiệu của bạn. Và may mắn thay, phần mềm hoạt hình đã phát triển để hầu như bất kỳ ai bất kể kỹ năng đều có thể truyền một chút ma thuật đó vào logo của chính họ.

Như đã nói, mặc dù hướng dẫn này được thiết kế để bạn bắt đầu với những kiến ​​thức cơ bản về cách tạo hoạt ảnh cho logo, nhưng bạn cần phải thử và sai, thực hành và thử nghiệm để đạt được bất cứ điều gì trên một hoạt ảnh cơ bản. Nếu bạn muốn có một hoạt ảnh biểu trưng thực sự đặc biệt, một trình tạo hoạt ảnh biểu trưng chuyên nghiệp rất đáng để đầu tư.