Dribbble과 같은 프로토 타입 모형의 애니메이션 GIF를 만드는 방법은 무엇입니까?


38

Dribbblers가 디자인의 애니메이션 모형을 업로드하는 것을 보았습니다.

예를 들면 다음과 같습니다.

Photoshop에서 모형을 만들거나 간단한 트윈 애니메이션을 적용 할 수도 있지만 여기서는 GIF를 예로들 수 없습니다.

Dribbbler는 이러한 애니메이션을 만들기 위해 무엇을 사용합니까?

애니메이션에는 터치 포인트와 완벽한 모션도 포함되어 있습니다. Photoshop 모형을 동일하게 변환하고 싶습니다.

Dribbblers에서 만든 것과 유사한 모형의 애니메이션 예를 어떻게 만들 수 있습니까?


Creative Dash 가 그 트렌드를 시작했거나 적어도 Dribbble에서 인기를 얻은 것으로 보입니다 . 그들의 샷의 대부분은 멋진 UI 기술을 과시하기 위해 애니메이션 GIF입니다.
ckpepper02

1
AE에서 얼마나 어려운지 알고 싶었고 놀라 울 정도로 쉽다고 말해야합니다. 반 시간이 걸리지 만 꽤 재미 있습니다. 여기 내가 한 일이 있습니다. 나는 게으르고 gui : / .. 아래에 전화 강조 표시 레이어를 남겨 두었습니다. 그러나 AE에 대한 작은 지식으로 할 수 있다면 누구나 할 수 있다고 말하고 싶습니다.
Joonas

@Joonas 대단해! 어떻게 달성했는지에 대한 간단한 지침을 게시 할 수 있습니까?
Nag

응, 내일 벌써 늦었 기 때문에 내일 할 계획 이었어 AE의 멋진 부분은 A 지점에서 B 지점으로 대상체에 애니메이션을 적용하는 방법을 배우면 불투명도, 회전, 스케일 및 고정 점과 같은 애니메이션 방법을 거의 알 수 있다는 것입니다. 그들은 모두 거의 같은 방식으로 작동하기 때문입니다.
Joonas

당신이 그것을 작성하면 공유하십시오! 말이 되겠지만, 다소 단순 해 보이지만 여전히 전문가들이 어떻게하고 있는지 알고 싶습니다.
Nag

답변:


58

After Effects에서 다음과 같이 만들려면 알아야 할 사항 :

여기에 이미지 설명을 입력하십시오



프로젝트 및 작곡 방법

AE를 시작할 때를 누르면 Cmd+N컴포지션이 하나 인 새 프로젝트를 만들 수 있습니다 .

이미 프로젝트가 열려있는 경우을 누르면 Cmd+N새 컴포지션 만 생성됩니다.

이 프로젝트에서는 2 개의 작곡을 사용했습니다. GUIGUI 및 해당 애니메이션을 보유하도록 구성하십시오. iphonecomp는 배경과 GUIcomp를 모두 보유합니다 .

GUI 애니메이션이 포함 된 두 번째 컴포지션은 화면과 크기가 동일하거나 최소한 가로 세로 비율이 같아야합니다. 나중에 화면에 표시하려고 할 때 가로 세로 비율이 꺼져 있으면 화면이 이상하게 보일 수 있습니다.



AE로 이미지 가져 오기

After Effects에는 .psd 파일을 가져 오는 데 매우 유용한 시스템이 있지만 .psd 파일을 잘못 배치하거나 이동하거나 이름을 바꾸면 효과를 찾을 수없고 모든 장면을 푸티 지로 교체해야하기 때문에 사용하고 싶지 않습니다 별도 레이어.

예를 들어 이미지 폴더를 프로젝트로 가져 오는 경우 이미지 폴더의 이름을 바꾸면 하나의 이미지 푸티지를 교체하기 만하면 모든 누락 된 이미지가 복원됩니다 (모든 누락 된 이미지가 동일한 폴더에 존재하는 한). 또한이 방법으로 혼란이 줄어 듭니다.

이미지를 프로젝트로 가져 오는 방법

왼쪽의 프로젝트 패널 내부를 마우스 오른쪽 버튼으로 클릭하여 다음을 선택하십시오. Import > Multiple files

... 또는 파일을 해당 패널로 드래그하면됩니다.

포토샵에서 이미지를 내보내는 데 매끄럽게 사용 했습니다 .



별도의 이미지 파일로 저장해야 할 객체

기본적으로 모든 움직이는 개체를 별도로 저장하려고합니다. 정적 객체 몇 개를 별도로 저장해야 할 수도 있습니다.

이 프로젝트에서 머리글과 바닥 글을 하나로 저장할 수 있었지만 머리글에 첫 번째 버튼 위에 그림자가 생겼으므로 별도로 저장해야했습니다.

다음은 이미지 파일을 AE로 가져 오기 전에 Photoshop에 저장 한 방법에 대한 설명입니다.

여기에 이미지 설명을 입력하십시오



애니메이션 101

위치 애니메이션 :

  1. 위치 애니메이션 :
    • 타임 라인 왼쪽의 목록에서 개체를 선택하십시오.
    • 프레스 P
    • 선택한 레이어 아래에있는 스톱워치 아이콘을 클릭하십시오. 그러면 시간 표시기가있는 곳 (타임 라인의 빨간색 선)에 첫 번째 키 프레임이 자동으로 추가됩니다.
    • 여기에 이미지 설명을 입력하십시오
    • 타임 라인에서 시간 표시기를 앞으로 이동시킵니다. 를 드래그하거나 Cmd+{Arrow left or right}또는Cmd+Shift+{Arrow left or right}
    • 컴포지션 뷰어에서 객체를 이동하려는 위치로 드래그합니다 ( Shift+arrow keys포토샵 에서처럼 또는 숫자 값을 드래그하여을 사용할 수도 있습니다 ).
    • 타임 라인에 다른 키 프레임이 나타나고 이제 애니메이션이 있습니다.
    • 여기에 이미지 설명을 입력하십시오
    • 를 눌러 애니메이션을 재생할 수 있습니다 space

키 프레임을 서로 더 가깝게 이동하면 애니메이션 속도가 빨라지고 서로 멀어지면 속도가 느려집니다.

일시 정지 후 애니메이션 계속.

시나리오 : A에서 B로 무언가를 애니메이션했으며 X 밀리 초 동안 일시 중지 한 다음 B에서 C로 이동하려고합니다.

B 애니메이션을 만들었 으면 타임 라인으로 이동하여 왼쪽의 키 프레임 아이콘을 클릭하십시오. 여기에 이미지 설명을 입력하십시오

회색으로 표시되므로 걱정하지 마십시오. 그것은 단지 그 위치에 키 프레임이 없다는 것을 의미합니다.

키 프레임 # 2와 새로 만든 키 프레임 # 3 변환의 값이 같으므로 이제 두 키 프레임 사이에 일시 중지가 있습니다. 그런 다음 타임 라인에서 앞으로 이동 한 후 값을 다시 변경하여 정상적으로 애니메이션을 계속 진행할 수 있습니다.

회전 또는 불투명도와 같은 다른 애니메이션

나는이 시간을 가지고 모든 것이 위치 애니메이션처럼 작동한다고 말하고 싶었습니다 (... 빼기).

아래 단축키를 누를 때 나타나는 숫자 슬라이더를 사용하십시오.

다른 변환 방법에 대한 단축키 :

  • P -위치
  • T -불투명도
  • R -회전
  • S -규모
  • A -앵커 포인트

객체를 선택하고이 핫키 중 하나를 누르고 애니메이션을 시작하십시오. 아무것도 선택하지 않으면 comp의 각 객체에 대해 변형 메서드가 표시됩니다.



객체를 다른 객체에 종속시키는 방법

Comp 패널에는 모든 객체에 대한 Parent 드롭 다운 목록이 있습니다.

이를 사용하여 객체의 부모를 정의 할 수 있습니다.

여기에 이미지 설명을 입력하십시오

그런 다음 Parent를 움직이면 Child 요소가 함께 움직입니다. Parent 요소에 첨부 한 애니메이션도 마찬가지입니다.

Parent 오브젝트에 회전하도록 애니메이션을 적용하면 Child는 다음을 따릅니다.



애니메이션에 탄성 추가

버튼 애니메이션이 벽에 멈추지 않고 매우 탄력적으로 멈추는 것을 알 수 있습니다.

After Effects Expressions를 사용하여이 작업을 수행 할 수 있습니다 (더 많은 작업을 수행 할 수 있음).

애니메이션에 Expression 스크립트를 적용하려면 Alt+{mouse click}스톱워치로 스크립트에 붙여 넣습니다.

여기에 이미지 설명을 입력하십시오

버튼 애니메이션에 사용한 표현식

처음 3 개의 변수 amp, freq, decay는 다른 결과를 얻기 위해 편집 할 수 있습니다.

동일한 스크립트를 움직임 기반 애니메이션에 적용 할 수 있습니다. 예를 들어 불투명도 애니메이션은 영향을받지 않습니다.

여기에서도 찾을 수 있습니다.

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}


쉽게 ...

따라서 이것은 위의 Expression 스크립트와 마찬가지로 애니메이션이 훨씬 덜 선형 적으로 보일 수있는 또 다른 것입니다.

나는 "터치 인디케이터 서클"에서 Ease Ease를 사용하여 좀 더 인간적인 움직임을 보았습니다.

하나 이상의 키 프레임을 선택하고 그 중 하나를 마우스 오른쪽 버튼으로 클릭 할 수 있습니다.

그런 다음 목록에서 : Keyframe assistant > Easy Ease 여기에 이미지 설명을 입력하십시오

나는 게으 르기 때문에 종종 Easy ease를 사용합니다 ...

사진 또는 발생하지 않은 ...

다음은 완화 및이 특정 표현 스크립트가 애니메이션에 큰 영향을 줄 수있는 방법을 보여주는 간단한 위치 애니메이션입니다.

여기에 이미지 설명을 입력하십시오



애니메이션 광고 / 발자국을 화면에 배치

GUI가 애니메이션 된 후에는 장치의 화면에 배치 할 차례입니다.

  1. 컴포지션 안에 이미지를 배치하는 것처럼 GUI comp를 iPhone comp 안에 배치하십시오.
  2. 프로젝트 패널에서 iPhone comp를 두 번 클릭하십시오.
  3. GUI comp 선택 여기에 이미지 설명을 입력하십시오
  4. 톱 메뉴에서 Effects > Distort > Corner pin
  5. 그런 다음 각 모서리를 끌어 장치 화면 모서리와 일치시킵니다.

여기에 이미지 설명을 입력하십시오



.gif로 내보내기

AE에는 기본 방법이 없지만 걱정할 필요는 없습니다.

나는 이것을 선호한다 :

  1. 에서 구성을 클릭하십시오 Projects panel
  2. Composition > Add to render queue Cmd+Ctrl+M
  3. 그런 다음 타임 라인이있는 맨 아래에서 내보낼 항목과 위치를 선택합니다.
    • 나는 보통 무손실 .mov를 내 보냅니다
    • "렌더 설정"을 클릭하면 프레임 속도를 선택할 수 있습니다. 그렇지 않으면 프레임 속도를 사용합니다.
  4. 그런 다음 오른쪽 상단 또는 해당 패널에서 렌더를 누릅니다.
  5. 내 보낸 파일을 찾아 Photoshop에서 엽니 다.
  6. 웹용으로 저장 Cmd+Shift+Alt+S
    • .gif로 저장

솔직히 그렇게 나쁘지 않습니다 ...



비디오 파일로 내보내기

따라서 위의 방법으로 무손실 파일을 내보내는 방법을 보여 주지만 비디오 파일을 내보내는 방법이 아닙니다.

당신은 이렇게 이렇게 :

  1. 프로젝트 파일을 저장하십시오.
  2. 에서 컴포지션을 클릭합니다 Projects panel(둘 이상의 경우)
  3. Composition > Add to adobe media encoder queue Cmd+Alt+M
  4. 사전 설정을 오른쪽 열에서 왼쪽 열로 드래그
  5. 재생을 누릅니다.
  6. 내보내기 폴더를 선택하지 않으면 기본적으로 프로젝트 파일 바로 옆으로 이동합니다.


푸티지를 교체하는 방법

AE가 파일을 찾을 수 없습니까? 이 작업을 수행:

  • 프로젝트 패널에서 누락 된 푸티 지 중 하나를 마우스 오른쪽 버튼으로 클릭하십시오.
  • 목록에서 Replace footage > File...
  • 영상과 물건 찾기


다른 유용한 단축키

  • U-comp에 사용 된 모든 키 프레임을 표시합니다 (선택한 항목이없는 경우). 예를 들어 여러 키 프레임을 한 번에 이동해야 할 때 매우 유용합니다.
  • U( 더블 탭 )-변경된 모든 내용을 표시합니다.
  • E( 두 번 탭 )-사용 된 모든 표현식을 표시합니다.
  • J -이전 키 프레임으로 이동합니다.
  • K -다음 키 프레임으로 이동합니다.
  • space -광고 재생
  • I또는 home키-현재 시간 표시기를 타임 라인의 시작 부분으로 이동합니다.
  • Cmd+K -현재 컴포지션 설정.
  • Cmd+I -파일을 가져옵니다.
  • Alt+{Arrow keys left and right} -키 프레임을 선택하고 단축키를 눌러 이동합니다.
  • Alt+Shift+{Arrow keys left and right} -키 프레임을 선택하고 단축키를 눌러 이동합니다.


프로젝트 파일을 찾을 수 있습니다 here.


@ Nagarjun 여기서 다루지 않은 것을 찾으면 알려주십시오.
Joonas

확실한! 다시 한번 감사합니다! 이 답변과 함께 언급 할 수있는 트위터 계정이 있습니까? 많은 사람들이 이것을 읽고 싶어 할 것입니다.
Nag

@ Nagarjun 글쎄,하지만 원한다면 이 asnwer에 바로 연결할 수 있습니다 .
Joonas

@Joonas이 답변은 더 많은 점수를 가져야합니다 ... 매우 전문적인 ...
LCarvalho

6

이 무료 애니메이션 MOCKUP.PSD 파일 웹 사이트 스크롤 창의 메뉴 애니메이션 완전히 편집 하 고 완전히 편집 하 고 포토샵에서 어리석은 편집하기 쉬운 애니메이션, 당신은 여기 에 무료로 파일을 다운로드 할 수 있습니다, 그리고 또한 방법에 대 한 자습서 비디오 이 공짜를 쉽게 편집 할 수 있습니다. 여기에 이미지 설명을 입력하십시오


4

해당 게시물에 대한 의견을 보면 Adobe After Effects http://www.adobe.com/uk/products/aftereffects.html 을 사용했다고 말합니다 .


1
모바일 디자인 제스처를 어떻게 완벽하게 모방 할 수 있습니까? After Effects는 이러한 요구에 맞게 특별히 제작 된 것이 아니라 일반적인 모션 그래픽 도구라는 것을 알고 있습니다.
Nag

3
인터넷 검색을 수행하면 Aftereffects의 UI 애니메이션에 대한 많은 리소스가 있습니다. 다음은 시작하기위한 몇 가지 리소스입니다. news.layervault.com/stories/…
Sci

3

이를 수행하는 두 가지 방법이 있습니다.

  1. After Effects가 하나 인 애니메이션 프로그램에서 원하는 애니메이션을 재생성 한 후 애니메이션 GIF로 내 보냅니다. 분명히 (실제로) 여기에는 "가짜"터치 및 기타 상호 작용을 생성하여 진행 상황을 보여줄 것입니다.

  2. 기능적인 프로토 타입을 생성 한 다음 TV로 전달 될 때 AppleTV 또는 HDMI 출력을 통해 유사한 장치에서 출력을 기록하십시오.

둘 다 엄청나게 시간이 걸리고 여행은 그 자체로 진행됩니다.

그러나 옵션 2는 옵션 1에 비해 엄청난 이점을 가지고 있습니다.

그러나 그보다 훨씬 더 기본적인 대화식 프로그래밍 기능을 사용하면 애니메이션 소프트웨어를 사용하는 사람보다 변형 및 대체 방법을 훨씬 빠르게 반복 할 수 있습니다.

그리고 당신은 당신의 디자인을 보여주기 위해 진정한 인터랙티브 한 무언가를 갖게 될 것입니다. 또한 아트웍은 실제로 장치의 대화 형 환경에서 테스트되었으므로 이미 픽셀과 색상이 완벽해야합니다.

하지만 기다려 넌 무서워 힘들 거에요?

iPad가 있다면 아닙니다.

Codea는 지구상에서 가장 간단하고 깔끔한 스크립팅 언어로 사소한 (그리고 매우 복잡한) 애니메이션과 상호 작용을 만드는 가장 저렴하고 빠른 방법입니다 ... Lau.

http://codea.io

iPad가 없다면 구입하십시오.

그때까지는 learning processing.org를 통해 비슷한 흥미로운 모형을 만들 수 있습니다.

http://processing.org/

처리에는 Javascript라는 다른 스크립트 언어가 사용됩니다. 비슷하지만 간단하지만 루아만큼 우아하지는 않습니다.


3

Keynote를 사용하여 UI 애니메이션을 만들 수도 있습니다. UI 애니메이션 제작에 매우 간단하고 완벽합니다. 그런 다음 효과를 사용하여 비디오를 전화에 넣었습니다.

1 단계 : 먼저 기조 연설에서 UI 애니메이션을 만들고 다음과 같이 만들었습니다. http://vimeo.com/108991829

2 단계 : 온라인에서 찾은 효과 모형 후 비디오를 iPhone에 넣고 .mov 파일을 저장했습니다. 이 비디오의 지침을 따르십시오 : http://youtu.be/VeZGwjVwDrc

3 단계 : 포토샵의 도움으로 지시를 따랐습니다.

여기에 이미지 설명을 입력하십시오


-1

Keynote를 고수하고 Quicktime 형식으로 내보내려면 다음과 같이 시도해도 나쁘지 않을 것입니다.

GIF Brewery 여기에 이미지 설명을 입력하십시오

GIF Brewery를 사용하면 비디오 파일의 짧은 클립을 GIF로 변환 할 수 있습니다. 최신 고양이 GIF를 만들거나 더 긴 비디오의 미리보기를 제공하려는 경우 GIF Brewery가 적합합니다.

더 이상 영화에서 프레임을 추출하거나 Adobe® Photoshop®에서 레이어를 사용하여 바이올린을 피할 필요가 없습니다. 대신 GIF Brewery가 모든 지루한 작업을 수행하게하십시오.

또한 GIF Brewery에는 창의성을 표현할 수있는 다양한 기능이 있습니다. 캡션을 추가하여 대화를 다시 만들거나 여러 이미지 필터를 추가 할 수 있습니다.

@Joonas의 모든 지침을 정말 좋아합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.