Làm cách nào để tạo GIF động của các mô hình nguyên mẫu, giống như trên Dribbble?


38

Tôi chắc rằng bạn đã thấy Dribbblers tải lên các mô hình hoạt hình về thiết kế của họ.

Đây là một ví dụ:

Tôi có thể tạo các mockup trên Photoshop và thậm chí áp dụng Tween Animations đơn giản cho chúng nhưng tôi không bao giờ có thể khiến GIF của mình trông giống như ví dụ ở đây.

Dribbblers đang sử dụng để tạo ra những hình ảnh động này là gì?

Lưu ý rằng các hình ảnh động cũng bao gồm các điểm chạm và chuyển động hoàn hảo. Tôi muốn chuyển đổi các mockup Photoshop của tôi để làm như vậy.

Làm cách nào tôi có thể tạo một ví dụ hoạt hình về các mockup của mình, tương tự như các ví dụ được tạo bởi Dribbblers?


Dường như với tôi, Creative Dash đã bắt đầu xu hướng đó, hoặc ít nhất là làm cho nó trở nên phổ biến trên Dribbble . Hầu hết các bức ảnh của họ là Gifs hoạt hình để thể hiện kỹ năng UI tuyệt vời của họ.
ckpepper02

1
Tôi muốn xem làm thế nào khó khăn để làm điều đó trong AE, và tôi phải nói rằng nó dễ dàng đáng ngạc nhiên. Bán tốn thời gian, nhưng khá vui. Đây là những gì tôi đã làm. Tôi đã trở nên lười biếng và để lại lớp tô sáng điện thoại dưới gui: / ..nhưng, tôi sẽ nói bất cứ ai cũng có thể làm điều đó, nếu tôi có thể làm điều đó với kiến ​​thức nhỏ về AE.
Joonas

@Joonas Thật tuyệt! Bạn có thể vui lòng gửi một số hướng dẫn nhanh về cách bạn đạt được điều đó?
Nag

Phải, tôi đã lên kế hoạch thực hiện vào ngày mai vì đã muộn rồi. Phần thú vị về AE, là một khi bạn học cách làm động vật thể từ điểm A đến điểm B, bạn sẽ biết cách làm động: độ mờ, độ xoay, tỷ lệ và điểm neo. Bởi vì tất cả đều hoạt động khá giống nhau.
Joonas

Hãy chia sẻ một khi bạn viết nó! Có nghĩa là, nó trông khá đơn giản nhưng tôi vẫn muốn xem các chuyên gia đang làm điều đó như thế nào.
Nag

Câu trả lời:


58

Những điều bạn cần biết để tạo một cái gì đó như thế này trong After Effects:

nhập mô tả hình ảnh ở đây



Làm thế nào để thực hiện một dự án và sáng tác

Khi bạn khởi động AE, bạn có thể nhấn Cmd+Nđể tạo Dự án mới với một Thành phần bên trong nó.

Nếu bạn đã mở Dự án, nhấn Cmd+Nchỉ tạo Thành phần mới.

Trong dự án này, tôi đã sử dụng 2 tác phẩm. GUIcomp để giữ GUI và hình ảnh động của nó. iphonecomp để giữ cả hai, nền và GUIcomp.

Bố cục thứ hai với hình ảnh động GUI phải có cùng kích thước với màn hình hoặc ít nhất có cùng tỷ lệ khung hình. Sau này, khi bạn định đặt nó lên màn hình, nó có thể kéo dài trông kỳ quặc nếu tỷ lệ khung hình bị tắt.



Nhập hình ảnh vào AE

After Effects có một hệ thống khá tốt để nhập các tệp .. lớp riêng.

Nếu bạn nhập một thư mục hình ảnh vào các dự án và bạn, ví dụ. đổi tên thư mục hình ảnh, bạn chỉ phải thay thế một cảnh quay hình ảnh và tất cả các hình ảnh bị thiếu được khôi phục (Miễn là tất cả các hình ảnh bị thiếu tồn tại trong cùng một thư mục). Ngoài ra cách này có ít lộn xộn hơn.

Cách nhập hình ảnh vào dự án

Nhấp chuột phải vào bảng Project bên trái chọn: Import > Multiple files

... hoặc bạn chỉ có thể kéo tập tin vào bảng điều khiển đó

Tôi đã sử dụng sly để xuất hình ảnh của tôi ra khỏi photoshop.



Những đối tượng bạn nên lưu dưới dạng tệp hình ảnh riêng biệt

Về cơ bản, bạn sẽ muốn lưu tất cả các đối tượng chuyển động một cách riêng biệt. Bạn cũng có thể cần lưu một vài đối tượng tĩnh riêng biệt.

Trong dự án này, tôi có khả năng có thể lưu tiêu đề và chân trang làm một, nhưng tiêu đề có một bóng đổ qua nút đầu tiên, vì vậy tôi phải lưu riêng chúng.

Đây là một sự cố về cách tôi lưu các tệp hình ảnh của mình trong photoshop trước khi nhập chúng vào AE.

nhập mô tả hình ảnh ở đây



Hoạt hình 101

Vị trí hoạt hình:

  1. Vị trí hoạt hình:
    • Chọn đối tượng của bạn trong danh sách ở bên trái dòng thời gian.
    • nhấn P
    • Nhấp vào biểu tượng đồng hồ bấm giờ hiện bên dưới lớp bạn đã chọn. Điều này sẽ tự động thêm khung hình chính đầu tiên, nơi chỉ báo thời gian của bạn (dòng màu đỏ trong dòng thời gian).
    • nhập mô tả hình ảnh ở đây
    • di chuyển chỉ báo Thời gian về phía trước trong dòng thời gian. Kéo nó hoặc Cmd+{Arrow left or right}hoặcCmd+Shift+{Arrow left or right}
    • trong trình xem bố cục, kéo đối tượng của bạn đến vị trí bạn muốn di chuyển (Bạn cũng có thể sử dụng Shift+arrow keys, giống như trong photoshop Hoặc bằng cách kéo các giá trị số.).
    • Một khung hình chính khác xuất hiện trong dòng thời gian và bây giờ bạn có một hình ảnh động.
    • nhập mô tả hình ảnh ở đây
    • Bạn có thể phát hình động bằng cách nhấn space

Di chuyển các khung hình chính gần nhau hơn để tăng tốc độ hoạt hình hoặc cách xa nhau để làm chậm nó.

Tiếp tục hình ảnh động sau khi tạm dừng.

một kịch bản: Bạn đã hoạt hình một cái gì đó từ A đến B và bạn muốn tạm dừng X lượng mili giây và sau đó chuyển từ B sang C.

Khi bạn đã hoạt hình B, hãy chuyển tiếp trong dòng thời gian và nhấp vào biểu tượng khung hình ở bên trái, tại đây: nhập mô tả hình ảnh ở đây

Nó sẽ trông có vẻ xám xịt, vì vậy đừng lo lắng. Điều đó chỉ có nghĩa là không có keyframe ở vị trí đó

Vì keyframe # 2 và biến đổi keyframe # 3 mới được tạo có cùng giá trị, nên hiện có một khoảng dừng giữa hai khung hình chính đó. Sau đó, bạn có thể tiếp tục hoạt hình bình thường, bằng cách di chuyển về phía trước trong dòng thời gian và thay đổi lại các giá trị.

Hoạt hình những thứ khác, như Xoay hoặc Opacity

Tôi chỉ muốn dành thời gian này để nói với bạn rằng tất cả chúng đều hoạt động giống như hoạt hình vị trí (... trừ khi kéo).

Chỉ cần sử dụng các thanh trượt số hiển thị khi bạn nhấn các phím nóng bên dưới.

Phím nóng cho các phương thức biến đổi khác nhau:

  • P - Chức vụ
  • T - Độ mờ
  • R - Vòng xoay
  • S - Tỉ lệ
  • A - Điểm neo

Chỉ cần chọn (các) đối tượng và nhấn một trong những phím nóng này và bắt đầu hoạt hình. Nếu bạn không chọn bất cứ thứ gì, nó sẽ hiển thị các phương thức biến đổi cho từng đối tượng trong comp.



Làm thế nào để nô lệ các đối tượng khác

Trong bảng Comp, bạn sẽ thấy danh sách thả xuống Parent trên mọi đối tượng.

Bạn có thể sử dụng nó để xác định cha mẹ cho một đối tượng.

nhập mô tả hình ảnh ở đây

Nếu sau đó bạn di chuyển Cha mẹ, bạn sẽ nhận thấy phần tử Con bây giờ di chuyển cùng với nó. Tương tự với các hình ảnh động mà bạn đính kèm vào phần tử Parent.

Nếu bạn làm động vật thể Cha mẹ để xoay, Trẻ sẽ theo ...



Thêm độ đàn hồi cho hoạt hình của bạn

Vì vậy, có thể bạn nhận thấy rằng hình động của nút không dừng lại trên tường, thay vào đó nó dừng lại một cách rất đàn hồi.

After Effect Expressions có thể được sử dụng để đạt được điều này (Nó cũng có thể làm được nhiều hơn thế).

Để áp dụng tập lệnh Biểu thức cho hoạt hình, Alt+{mouse click}đồng hồ bấm giờ và dán vào tập lệnh.

nhập mô tả hình ảnh ở đây

Biểu thức tôi đã sử dụng trong hoạt hình nút của mình

3 biến đầu tiên amp, freq, decaycó thể được chỉnh sửa để có kết quả khác nhau.

Bạn có thể áp dụng cùng một kịch bản này cho hoạt hình dựa trên chuyển động. Ví dụ, hình ảnh động mờ không bị ảnh hưởng.

Cũng có thể được tìm thấy ở đây.

amp = .1;
freq = 1.0;
decay = 9.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}


Dễ dàng ....

Vì vậy, đây là một điều khác có thể làm cho hình ảnh động dường như ít tuyến tính hơn, giống như tập lệnh Expression ở trên.

Tôi đã sử dụng Dễ Dễ trong "vòng tròn chỉ báo cảm ứng" đó để làm cho nó nhìn giống như chuyển động của con người hơn một chút.

Bạn có thể chọn một hoặc nhiều khung hình chính và nhấp chuột phải vào một trong số chúng.

Sau đó từ danh sách: Keyframe assistant > Easy Ease nhập mô tả hình ảnh ở đây

Tôi thường sử dụng Dễ dàng, bởi vì tôi lười biếng ...

Bức ảnh hoặc không xảy ra ...

Đây là một hoạt hình vị trí đơn giản cho thấy việc nới lỏng và tập lệnh biểu thức cụ thể này có thể có tác động rất lớn đến hoạt hình.

nhập mô tả hình ảnh ở đây



Đặt comp / đoạn phim hoạt hình vào màn hình

Vì vậy, sau khi GUI hoạt hình, đã đến lúc đặt nó lên màn hình của thiết bị.

  1. Đặt GUI comp bên trong comp comp của iPhone, giống như bạn đặt hình ảnh bên trong bố cục.
  2. Nhấp đúp chuột vào iPhone comp trong bảng Project
  3. Chọn GUI comp nhập mô tả hình ảnh ở đây
  4. Từ menu trên cùng Effects > Distort > Corner pin
  5. Sau đó chỉ cần kéo từng góc để khớp với các góc màn hình thiết bị.

nhập mô tả hình ảnh ở đây



Xuất sang .gif

AE không có phương pháp riêng để làm điều này, nhưng đừng lo lắng, có nhiều cách.

Tôi thích làm điều này:

  1. Nhấp vào một thành phần trong Projects panel
  2. Composition > Add to render queue Cmd+Ctrl+M
  3. Sau đó, ở phía dưới nơi dòng thời gian thường ngồi, bạn chọn xuất những gì và ở đâu.
    • Tôi thường xuất khẩu .mov
    • Nếu bạn nhấp vào "Cài đặt kết xuất", bạn có thể chọn tốc độ khung hình, nếu không, nó sẽ sử dụng tốc độ khung hình Comp
  4. Sau đó chỉ cần nhấn render ở góc trên bên phải hoặc bảng điều khiển đó.
  5. Tìm tập tin đã xuất và mở nó lên trong photoshop.
  6. Tiết kiệm cho web Cmd+Shift+Alt+S
    • Lưu dưới dạng .gif

Thật ra nó không tệ đến thế ...



Xuất dưới dạng tệp video

Vì vậy, mặc dù phương pháp trên chỉ cho bạn cách xuất tệp không bị mất, nhưng đó không phải là cách bạn nên xuất tệp video.

Bạn làm như thế này:

  1. Lưu tập tin dự án của bạn.
  2. Nhấp vào một thành phần trong Projects panel(nếu bạn có nhiều hơn một)
  3. Composition > Add to adobe media encoder queue Cmd+Alt+M
  4. Kéo một giá trị đặt trước từ cột bên phải sang cột bên trái
  5. Nhấn chơi.
  6. Nếu bạn không chọn thư mục xuất, theo mặc định, nó sẽ nằm ngay bên cạnh tệp dự án.


Cách thay thế cảnh quay

Vì vậy, AE không thể tìm thấy tập tin của bạn? Làm cái này:

  • Nhấp chuột phải vào một trong những cảnh còn thiếu trong bảng Project
  • Từ danh sách Replace footage > File...
  • Xác định vị trí cảnh quay của bạn và công cụ


Các phím nóng hữu ích khác

  • U- Hiển thị tất cả các khung hình chính được sử dụng trong comp (nếu bạn không có gì được chọn). Ví dụ, thực sự hữu ích khi bạn cần di chuyển nhiều khung hình chính.
  • U( Chạm hai lần ) - Hiển thị mọi thứ đã được thay đổi.
  • E( Chạm hai lần ) - Hiển thị tất cả các Biểu thức đã sử dụng.
  • J - Di chuyển đến khung hình chính trước đó.
  • K - Di chuyển đến khung hình chính tiếp theo.
  • space - Chơi comp
  • Ihoặc homephím - Di chuyển chỉ báo thời gian hiện tại sang đầu trên dòng thời gian.
  • Cmd+K - Cài đặt thành phần hiện tại.
  • Cmd+I - Nhập tệp.
  • Alt+{Arrow keys left and right} - Chọn keyframe (s) và nhấn các phím nóng để di chuyển chúng xung quanh.
  • Alt+Shift+{Arrow keys left and right} - Chọn keyframe (s) và nhấn các phím nóng để di chuyển chúng xung quanh.


Các tập tin dự án có thể được tìm thấy here.


@Nagarjun Nếu bạn tìm thấy thứ gì đó không được đề cập ở đây, hãy cho tôi biết.
Joonas

Chắc chắn rồi! Một lần nữa xin cảm ơn! Bạn có tài khoản Twitter mà tôi có thể đề cập đến bạn cùng với câu trả lời này không? Tôi chắc rằng rất nhiều người thích đọc nó.
Nag

@Nagarjun Vâng, nhưng bạn có thể liên kết trực tiếp với asnwer này , nếu bạn muốn.
Joonas

@Joonas Câu trả lời này cần có nhiều điểm hơn ... cực kỳ chuyên nghiệp ...
LCarvalho

6

Là một miễn phí Animated mockup PSD FILE NÀY của một trang web cuộn dow và một hình ảnh động đơn hoàn toàn chỉnh sửa và hoạt hình trong photoshop lố bịch dễ dàng để chỉnh sửa và chơi xung quanh, bạn có thể tải về các tập tin miễn phí ở đây , tôi cũng có một video hướng dẫn về cách là dễ dàng để chỉnh sửa miễn phí này. nhập mô tả hình ảnh ở đây


4

Nếu bạn xem các bình luận về bài đăng cụ thể đó, anh chàng nói rằng anh ta đã sử dụng Adobe After Effects http://www.adobe.com/uk/products/aftereffects.html


1
Làm thế nào họ có thể bắt chước cử chỉ thiết kế di động một cách hoàn hảo? Tôi hiểu rằng After Effects không được tạo riêng cho các nhu cầu như vậy nhưng đó là một công cụ đồ họa chuyển động chung.
Nag

3
Nếu bạn làm một số việc, có rất nhiều tài nguyên về hoạt hình UI trong Aftereffects. Đây là một số tài nguyên để giúp bạn bắt đầu: news.layervault.com/stories/ trên
Sci

3

Có hai cách để làm điều này.

  1. Tái tạo / Mockup các hình động mong muốn trong một chương trình hoạt hình (trong đó After Effects là một) và sau đó xuất nó dưới dạng gif hoạt hình. Rõ ràng (như bạn đã nhận ra) điều này cũng sẽ liên quan đến việc tạo ra những cú chạm "giả" và các tương tác khác để chứng minh những gì đang diễn ra.

  2. Tạo một nguyên mẫu chức năng và sau đó ghi lại đầu ra từ thiết bị của bạn thông qua AppleTV hoặc tương tự thông qua đầu ra HDMI khi nó được truyền đến TV của bạn.

Cả hai đều vô cùng tốn thời gian và hành trình theo cách riêng của họ.

Nhưng tùy chọn 2 có lợi thế ENORMOUS so với tùy chọn 1. Không ít trong số đó là bạn sẽ học một số chương trình cơ bản.

Tuy nhiên, điều tuyệt vời hơn là với một số khả năng lập trình tương tác rất cơ bản, bạn sẽ có thể lặp lại thông qua các biến thể và cách tiếp cận thay thế nhanh hơn nhiều so với ai đó sử dụng phần mềm Animation.

Và bạn sẽ có một cái gì đó thực sự tương tác để thể hiện thiết kế của bạn. Thêm vào đó, tác phẩm nghệ thuật thực sự đã được thử nghiệm trong môi trường tương tác trên thiết bị, do đó, chắc chắn là pixel và màu sắc hoàn hảo.

Nhưng chờ đã, tôi biết. Bạn đang sợ hãi. Sẽ rất khó phải không?

Không, nếu bạn đã có iPad.

Codea là cách rẻ nhất, nhanh nhất để tạo ra các hình ảnh động và tương tác tầm thường (và RẤT phức tạp) bằng ngôn ngữ kịch bản đơn giản nhất, sạch nhất trên trái đất ... Lau.

http://codea.io

Nếu bạn không có iPad, hãy lấy một cái.

Cho đến lúc đó, hãy tiếp tục với việc học process.org vì bạn sẽ có thể tạo ra các mockup thú vị tương tự trong đó:

http: // Processing.org/

Xử lý sử dụng ngôn ngữ script khác gọi là Javascript. Nó đơn giản tương tự, nhưng gần như không thanh lịch như Lua.


3

Bạn cũng có thể tạo hình ảnh động của giao diện người dùng bằng Keynote. Nó khá đơn giản và hoàn hảo để tạo hình ảnh động UI. Sau đó, tôi đã sử dụng sau các hiệu ứng để chỉ đặt video vào Điện thoại.

Bước 1: Lần đầu tiên tôi tạo hoạt hình UI trên keynote và thực hiện điều này: http://vimeo.com/108991829

Bước 2: Sau đó, tôi đã đặt video vào iPhone sau khi hiệu ứng mockup mà tôi tìm thấy trực tuyến và lưu tệp .mov. Làm theo các hướng dẫn trên video này: http://youtu.be/VeZGwjVwDrc

Bước 3: Với sự trợ giúp của photoshop và làm theo hướng dẫn tôi đã thực hiện.

nhập mô tả hình ảnh ở đây


-1

nếu bạn muốn bám vào Keynote và xuất nó dưới dạng Quicktime, tôi nghĩ có thể không đau khi thử:

GIF Brewery nhập mô tả hình ảnh ở đây

Nhà máy bia GIF cho phép bạn chuyển đổi các clip ngắn từ các tệp video của mình thành GIF. Cho dù bạn muốn tạo GIF mèo mới nhất hoặc cung cấp bản xem trước của video dài hơn, Nhà máy bia GIF là dành cho bạn.

Bạn không còn phải trích xuất các khung hình từ phim và fiddle với các lớp trong Adobe® Photoshop®. Thay vào đó, hãy để Nhà máy bia GIF làm tất cả công việc tẻ nhạt cho bạn.

Ngoài ra, Nhà máy bia GIF chứa nhiều tính năng khác để thể hiện sự sáng tạo của bạn. Bạn có thể thêm chú thích để tạo lại đoạn hội thoại hoặc thêm nhiều bộ lọc hình ảnh.

Tôi thực sự thích tất cả các hướng dẫn được đưa ra từ @Joonas.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.