콘텐츠
- 게임 체인저
- 01. 스케치
- 02. 애니메이션 스케치
- 03. Illustrator CC로
- 04. 로고 구조
- 05. 색상 팔레트 선택
- 06. 팔레트 적용
- 07. 자산 용 아트 보드
- 08. 올바른 형식으로 저장
- 09. SVG 이점
- 10. 이제 Edge Animate CC로 이동
- 11. 자산 가져 오기
- 12. 기초 마련
- 13. 애니메이션 스테이징
- 14. 모두 동기화
- 15. 타임 라인에 갇히다
- 16. 키 프레임 옵션
- 17. 모션 경로
- 18. 기호로 변환
- 19. 간단한 코드
- 20. 더 간단한 코드
- 21. 그리고 ... 되감기
- 22. HTML5로 내보내기
- 23. OAM 형식
- 24. 파일 분석
- 25. Muse CC에 배치
- 26. 미리보기 페이지
- 27. 테스트 용으로 게시
- 이제 다음을 읽으십시오.
우리는 일상 생활의 벽과 제품을 장식하는 모든 브랜드를 봅니다. 그들은 우리 시야의 또 다른 층이되었습니다. 다른 사람들보다 더 많은 빛을 비추는 경향이있는 사람들은 겸손과 공명감을 가지고 있습니다. 그들의 이야기에는 역동적이고 인간적인 것이 있습니다.
제가 좋아하는 브랜드는 시대에 따라 변하는 브랜드라는 것을 자주 알아 차 렸습니다. 하지만 깊은 곳에서는 정적 장치에서 진정으로 벗어날 수 없습니다. 오히려 우리는 소셜 버블에서 그 지위를 발전시킬 것입니다.
'동적 브랜딩'이라는 용어는 몇 년 전부터 사용되어 왔으며, 특히 글로벌 크리에이티브 회사 인 Moving Brands와 같은 브랜딩 전문가가 사용하고 있습니다. 오늘날 거의 모든 사람들이 디지털 장치를 소유하고 있으며, 이에 대한 지식으로 안전하게 디자인 접근 방식을 수용하여 브랜드가 다양한 개성을 숨길 수 있도록 할 수 있습니다.
게임 체인저
아래에서는 내 눈에 게임 체인저 인 Adobe Edge Animate CC를 소개합니다. 디자인 소프트웨어의 큰 가발로 무게를 다룰 수있는 능력을 가진 제품입니다.
Edge Animate CC의 가장 눈에 띄는면 중 하나는 사용자가 가장 일반적인 모바일 장치 및 브라우저와 호환되는 경험을 만들 수 있다는 것입니다. 즉, 거의 모든 사람이 언제 어디서나 디자인을 볼 수 있습니다. 당신이 의도했습니다.
여기에 소개 된 프로젝트를 예로 들어 Mind Altering Design, 줄여서 MAD라는 가상의 크리에이티브 에이전시 로고를 만드는 전체 과정을 살펴 보겠습니다. 그런 다음 애니메이션을 적용하고 Adobe의 Muse CC를 사용하여 웹 사이트에 적용합니다.
01. 스케치
여느 프로젝트와 마찬가지로 저는 항상 좋은 낙서로 시작합니다.이 특정 프로젝트에서는 스케치북에서 로고의 스타일을 파악하는 것으로 시작했습니다. 이 세션은 정말 아이디어를 생성하는 세션입니다. 제가 최종 개념에 도달 한 방법을 확인할 수 있기를 바랍니다.이를 구체화하면 Illustrator CC에 적용 할 것입니다.
02. 애니메이션 스케치
다음 단계는 서로 다른 요소가 어떻게 애니메이션을 적용하고 잠재적 인 상호 작용 움직임을 계획 할 것인지 대략적으로 스케치하는 것입니다. Edge Animate CC에 들어가는 것보다 프로세스 초기에이 작업을 수행하는 것이 편리합니다. 애니메이션 로고를 올바르게 만드는 것은 다른 무엇보다 좋은 계획에 관한 것입니다.
03. Illustrator CC로
여기서는 Illustrator CC에서 점 작업을 시작했습니다. 더 복잡한 디자인이라면 스케치를 일러스트 레이터로 가져 와서 그런 식으로 작업했을 것입니다. 이것은보다 단순한 접근 방식이므로 Illustrator에서 직접 수행 할 수 있습니다. 여기서는 유형을 만드는 데 사용할 3x3 기둥 점 그리드 작업을 시작했습니다.
04. 로고 구조
점 그리드가 단단히 자리 잡은 상태에서 원형 요소를 빼서 'MAD'로고의 구조를 만들 차례입니다. 저는 먼저 그레이 스케일로이 작업을 수행했습니다. 순전히 색상 팔레트를 추가하기 전에 개념이 작동하는지 여부에 대한 아이디어를 제공하기위한 것입니다.
05. 색상 팔레트 선택
각 로고의 글자를 구성하는 5 가지 요소에 맞게 일련의 미묘한 색상을 선택했습니다. 색상 팔레트를 찾는 데 어려움을 겪고 있다면 iPhone 용 앱 또는 https://kuler.adobe.com의 우수한 사이트 인 Adobe Kuler를 사용해보십시오. Kuler 및 Illustrator CC간에 팔레트를 동기화 할 수 있습니다. 이에 대한 자세한 내용은 68 페이지를 참조하십시오.
06. 팔레트 적용
선택한 색상을 사용하여 로고에 적용 할 때입니다. 각 문자는 일관성을 위해 동일한 처리를받습니다. Kuler를 사용한 적이 있다면 Illustrator CC에서 Kuler 패널을 열고 거기에서 직접 색상을 추가 할 수 있습니다. 실제 세계에서 영감을 얻고 작업에 통합 할 수있는 좋은 방법입니다.
07. 자산 용 아트 보드
다음으로 Edge Animate CC에서 애니메이션을위한 에셋을 준비 할 때입니다. 이렇게하려면 개별적으로 내보낼 수 있도록 자체 아트 보드로 각 모양을 설정해야합니다. 대지 도구를 사용하여 대지를 만든 다음 각 대지를 개별적으로 저장하면됩니다.
08. 올바른 형식으로 저장
Edge Animate CC 용 에셋을 만들 때 사용할 수있는 몇 가지 옵션이 있습니다. 가장 많이 사용되는 파일은 웹용으로 저장 대화 상자 (파일> 웹용으로 저장)에서 찾을 수 있습니다. 이러한 종류의 프로젝트의 경우 GIF 및 PNG가 가장 적합하지만 JPEG 형식으로 저장할 수도 있습니다.
09. SVG 이점
Edge Animate CC에는 작은 파일 크기로 유명한 벡터 형식 인 XML 기반 파일 형식 SVG를 읽을 수있는 기본 기능도 있습니다. 프로젝트가 완전히 벡터 기반이라면 파일> 다른 이름으로 저장을 사용하여 에셋을이 형식으로 저장 한 다음 SVG를 선택하는 것이 좋습니다.
10. 이제 Edge Animate CC로 이동
이제 애니메이션을 할 시간입니다. Edge Animate CC를 열 때 가장 먼저해야 할 일은 스테이지 크기를 설정하는 것입니다.이 특정 프로젝트의 경우 웹 사이트 포트폴리오의 헤더 로고를 기반으로합니다. 320x114 픽셀은 매우 잘 작동하지만 크기는 물론 프로젝트에 따라 다릅니다.
11. 자산 가져 오기
자산을 Edge로 가져 오려면 파일> 가져 오기로 이동하여 이미 생성 된 자산을 선택합니다. 자산 이름이 올바르게 지정되고 적절하게 레이블이 지정된 폴더에 배치되었는지 확인하십시오. 언제라도 다시 찾아야하는 경우 훨씬 쉽게 만들 수 있습니다.
12. 기초 마련
앞서 언급했듯이 뛰어 들기 전에 애니메이션을 계획하는 것이 중요합니다 (물론 진행하면서 실험 할 수 있음). 이러한 이유로 제가 시작하는 첫 번째 자산은 로고의 최종 구성의 JPEG로, 작업에 도움이되도록 불투명도를 줄입니다. 애니메이션의 구성 요소를 만드는 동안 가이드 역할을합니다.
13. 애니메이션 스테이징
가져 오기 명령을 사용하여 첫 번째 원형 자산을 가져 오면 스테이징 영역 바로 외부에 배치되므로 위에서 드롭 할 수 있습니다. Illustrator, After Effects 또는 InDesign에서와 마찬가지로 그래픽 요소에 애니메이션을 적용하기 전에 대지를 사용하여 그래픽 요소를 유지할 수 있습니다.
14. 모두 동기화
첫 번째 원을 배치하고 애니메이션을 시작하면 이제 나머지 요소를 가져 와서 JPEG 가이드와 동기화하여 배치 할 수 있습니다. Illustrator CC에서 그래픽 크기를 잘못 조정하여 크기를 조정해야하는 경우 일반 자유 변형 도구를 사용하여 Edge Animate에서 쉽게이 작업을 수행 할 수 있습니다.
15. 타임 라인에 갇히다
타임 라인은 특히 자동 키 프레임 (1) 및 자동 전환 (2) 모드를 선택한 경우 모든 마법이 일어나는 곳입니다. 이것들은 당신이 진행하면서 틈새를 메울 것입니다. 플래시에서 트위닝하는 것처럼 생각하십시오. 실제로 Edge Animate CC는 After Effects CC와 매우 유사한 방식으로 작동하여 그래픽 요소를 타임 라인에 시각적으로 표시합니다. 따라서 이에 대해 잘 알고 있다면 한 단계 앞서있는 것입니다.
16. 키 프레임 옵션
측면 패널에는 회전 이동 (1) 및 클리핑 옵션 (2)을 포함한 키 프레임 옵션도 있습니다. 이것으로 실험하십시오.
17. 모션 경로
Edge Animate CC의 또 다른 환상적인 기능은 모션 경로 기능입니다. 경로의 호는 축을 따라 베 지어 점을 추가하여 완전히 사용자 정의 할 수 있습니다.
18. 기호로 변환
이제 각 문자가 애니메이션되었으므로 각 문자의 모든 레이어를 선택하고 타임 라인에서 갈매기 형 선분으로 표시되는 심볼로 변환 할 수 있습니다.
19. 간단한 코드
요소 옆에있는 중괄호를 클릭하면 Edge의 코딩 요소에 액세스합니다. 또는 Cmd / Ctrl + E를 눌러 전체 코드를 볼 수 있습니다. 여기에서는 로고가 애니메이션을 완료 할 때 (재생 헤드가 타임 라인의 끝에 도달했을 때 – 반복하지 않기를 원합니다)에 대한 간단한 JavaScript '중지'설정을 추가합니다. 애니메이션이 끝날 때 재생 헤드가있는 코드 대화 상자에서 중지 버튼을 누르기 만하면됩니다. 타이밍이 표시됩니다 (이 경우 'Trigger @ 2634ms). 단순히 sym.stop () 함수를 추가합니다.
20. 더 간단한 코드
사용자가 사이트를로드 할 때 애니메이션되는 로고뿐만 아니라 사용자가 데스크톱 브라우저에서 마우스를 가져갈 때 각 문자가 애니메이션되도록합니다. 각 문자 위의 보이지 않는 사각형 모양에 mouseover 명령을 추가하여 쉽게 수행 할 수 있습니다.
21. 그리고 ... 되감기
마우스 아웃은 문자를 읽기 쉬운 구조로 되 감아 마무리 터치를 추가합니다. 이것은 sym.playReverse () 함수를 사용하여 수행되며, 위에 표시된 대화 상자에서 추가 할 수 있습니다.
22. HTML5로 내보내기
애니메이션에 만족하고 모든 타이밍과 기능을 다시 확인했다면 내보내기 버튼을 누르세요. 첫 번째 옵션을 사용하면 완전히 작동 가능한 HTML5 문서를 내보낼 수 있습니다. 브라우저에서 애니메이션을 빠르게 테스트하는 데 유용합니다. 돌아가서 필요한 경우 조정하십시오.
23. OAM 형식
사용 가능한 두 번째 옵션 (Animate 배포 패키지)은이 특정 워크 플로에서 찾고있는 것입니다. 이렇게하면 InDesign 및 Muse에서 읽을 수있는 .oam 형식 (Edge Animate 컴포지션)의 파일이 내 보내져 애니메이션을 사이트 디자인이나 디지털 출판물로 가져올 수 있습니다.
24. 파일 분석
위의 스크린 샷에서 .an 작업 파일 (원본 Edge Animate 파일) 및 .oam 파일을 포함하여 Edge Animate에서 저장하고 내보낼 때 생성 된 파일의 분석을 볼 수 있습니다. Edge Animate는 HTML 파일도 생성하므로 브라우저에서 애니메이션을 빠르게 미리 볼 수 있습니다.
25. Muse CC에 배치
MAD 포트폴리오 사이트가 멋지게 결합되었으므로 OAM 애니메이션 파일을 헤더로 가져 오는 마무리 작업을 할 차례입니다. Muse CC에서 디자인 탭으로 이동하고 파일> 배치를 선택한 다음 이전 단계에서 생성 한 OAM 파일로 이동합니다. 애니메이션 로고를 배치하면 완료됩니다.
26. 미리보기 페이지
Adobe Muse CC의 미리보기 탭을 사용하면 사용자가 애니메이션 위에 커서를 놓을 때 대화 형 요소가 어떻게 작동하는지 빠르고 쉽게 볼 수 있습니다. 문제가있는 경우 Edge Animate CC로 돌아가 디자인을 조정 한 다음 다시 가져올 수 있습니다. 이제 남은 일은 하나뿐입니다 ...
27. 테스트 용으로 게시
마지막 단계는 Business Catalyst를 사용하여 테스트를 위해 사이트를 게시하는 것입니다. 파일> Muse CC에서 게시로 이동하고 옵션에 따라 임시 Business Catalyst 사이트를 만듭니다 (30 일 동안 온라인 상태로 유지됨). 참고로이 프로젝트의 작업 버전은 www.james-oconnell.com/MAD에서 온라인으로 찾을 수 있습니다.
말: 제임스 오코넬
수상 경력에 빛나는 글로벌 광고 소재 인 O’Connell은 디테일과 다채로운 상상력에 대한 관심을 통해 Time Out NY, BBC 및 넷 매거진과 같은 고객을 확보했습니다.
이 기사는 원래 The Ultimate Guide To Adobe Creative Cloud에 게시되었습니다..
이제 다음을 읽으십시오.
- 디자이너가 Adobe의 Creative Cloud에 대해 이야기합니다.
- Adobe Creative Cloud의 새로운 도구 : 12 가지 공개 비디오
- 놀라운 효과를 만드는 무료 Photoshop 작업
