안녕하세요 여러분, 저는 카자흐스탄의 디지털 디자이너 Alex Tkachev 입니다 . 2015년에 웹 개발자로 경력을 시작했고, 1년 동안 개발에 종사한 후 디자인 분야로 완전히 전환했습니다. 저는 404페이지의 열렬한 팬이며 자연을 사랑합니다.
이 글에서는 매혹적인 애니메이션의 제작 과정을 비하인드 스토리로 안내해 드리겠습니다. 전체 경험을 위해 시청할 때는 사운드를 켜세요.
아이디어
처음에는 페이드 효과나 매끄러운 색상 오버레이와 같이 숨기기 위한 "간단한 트릭"을 사용하지 않고 한 구성에서 다른 구성으로의 매끄러운 전환을 만드는 것이 아이디어였습니다 . 따라서 초기 구조(와이어프레임)는 내가 만들고 싶은 것을 상상하자마자 이미 내 머릿속에 있었습니다.
영감과 참고 자료
1. 참고문헌은 두 개뿐이었습니다. 첫 번째 참고문헌은 타이포그래피 와 관련이 있습니다 . 저는 " Querida "가 프로젝트 "Solange"에서 Sans Serif와 Mono 글꼴을 조합하여 사용한 방식이 마음에 들었습니다. 이 프로젝트에서 저는 다음 글꼴을 사용했습니다. PP Neue Montreal by PangramPangram 과 JetBrains Mono by JetBrains .
2. " 발칸 형제 " 의 두 번째 참조는 매끄러운 색상 전환 측면에서 유용했습니다(오른쪽 카드). 이는 구성이 전환되는 애니메이션의 하단 부분에 영감을 주었습니다 : 구성 1/구성 2.
프로젝트에 사용된 음악 및 AI
저는 멜로매니아라서 모든 장르의 음악을 듣습니다. 처음에 저는 Lobster 라는 아티스트의 뮤직비디오를 우연히 보았는데 , 가사, 분위기, 비주얼, 그리고 셀린 디온 의 노래를 리믹스한 게 정말 마음에 들었습니다.
저는 두 곡의 원본 MP3 파일을 다운로드했지만, Lobster 뮤직 비디오에서 악기 연주와 보컬을 분리해야 했기 때문에 AI 도구인 "audeo.ai"를 사용했습니다 . 이 도구는 비디오, 음악, 음성 메시지 등 브라우저에서 나오는 모든 소리를 녹음합니다. 또한, 이 AI를 사용하면 악기 연주와 보컬을 두 개의 별도 파일로 분리할 수 있습니다.
Audacity에서 음악 편집하기
저는 사운드 편집 경험이 있습니다(10대 시절에 음악에 빠져서 Audacity를 사용하여 프로젝트를 녹음했습니다). 그래서 저는 이 분야의 초보자들에게 항상 이렇게 말합니다. "당신이 가진 모든 기술은 당신과 당신이 일하는 고객/팀 모두에게 유용할 수 있습니다."
그래서 저는 모든 MP3 파일을 Audacity로 가져왔습니다. Lobster 뮤직 비디오의 두 개의 별도 MP3 파일과 Céline Dion 노래의 전체 버전입니다.
그런 다음 모든 트랙을 편집하여 트랙 간의 사운드 균형을 맞추기 시작했습니다 . 원래 Céline Dion 노래에서 피치 효과를 적용하고 Lobster의 리믹스에 통합하는 데 초기 악기 연주(몇 초)만 필요했습니다.
다음으로, 몇 가지 표준 효과를 적용했습니다. 약간의 피치 조정과 페이드 인/페이드 아웃 효과입니다. 저는 항상 루프 애니메이션을 만들려고 노력합니다. 사운드가 점차 페이드 아웃되고 점차 다시 시작되는 것이 저에게 중요했습니다. 그리고 이것이 모든 것의 결과입니다 ????
디자인 과정
와이어프레임이 이미 준비되었고, 아이디어는 콘텐츠의 텍스트와 함께 준비되었으므로, 텍스트와 어떻게 어울리는지 보기 위해 구성을 만들기 시작했습니다. 그래서 비디오용 플레이스홀더가 있는 두 개의 초안을 만들었습니다.
다음으로, 저는 비주얼을 찾기 시작했습니다. 저는 두 곡의 분위기를 동시에 전달하고 싶었습니다. 이러한 비주얼에 대한 검색은 Lobster 뮤직 비디오의 영향을 크게 받았습니다. 저는 다양한 주제에 대한 영상이 엄청나게 많이 있는 Artlist 플랫폼을 사용했습니다.
저는 몇 시간 동안 검색을 하다가 Seffy (Joseph) Hirsch의 "Bus Love Story" 컬렉션을 발견했습니다 . 분위기, 분위기, 색상 보정을 보자마자 이것이 제가 필요로 하는 것이라는 것을 깨달았습니다.
애니메이션 프로세스
애니메이션 프로세스를 간략하게 설명하고자 합니다. 각 애니메이션에 대해 After Effects에서 작업을 돕고 동시에 용이하게 해주는 여러 플러그인을 사용합니다.
AEUX (Figma에서 After Effects로 파일을 전송할 수 있는 플러그인입니다. 이 플러그인을 사용하여 Figma에서 파일을 전송할 때 발생하는 문제를 피하기 위한 가장 중요한 조언: 자동 레이아웃을 사용하세요. 자동 레이아웃을 사용하는 레이어는 After Effects에서 작업할 별도의 구성으로 인식됩니다).
Motion 4 (개인적으로 이 플러그인을 사용해 앵커 포인트를 빠르게 설정하고 애니메이션을 부드럽게 만들지만, 이 플러그인은 다양한 속성을 가지고 있습니다).
TextExploder (전체 텍스트 블록을 여러 줄, 단어, 문자로 분할할 수 있는 플러그인)
전반적으로 애니메이션은 약 2~3시간이 걸렸습니다. 이 프로젝트의 가장 큰 어려움은 한 구성에서 다른 구성으로의 전환을 가능한 한 매끄럽게 만드는 것이었습니다(이것은 비디오에만 해당). 와이어프레임의 동일한 플레이스홀더를 사용하여 After Effects에서 마스크로 사용했고, 그 아래에서 비디오를 조정했습니다.
또한 디테일을 추가하고 분위기에 집중하기 위해 최종 비디오에 거의 눈에 띄지 않는 연기 레이어를 적용했습니다. 애니메이션의 부드러움과 관련하여 Matt Hall 이 조언한 접근 방식을 사용했습니다 (감사합니다, Matt ✌????). 이는 쉬운 용이성을 기반으로 그래프를 구축한 다음 이를 사용하여 "피크 속도 그래프"와 같은 것을 만드는 것을 포함합니다.
최고의 워드프레스 테마
최종 결과 및 결론
이 글의 시작과 마찬가지로, 끝에서도 뮤직비디오를 보고 갑자기 떠오른 최종 결과를 볼 수 있습니다. 그러니 항상 어디에서나 영감을 얻으려고 노력하세요. 이것에 국한하지 마세요.
창의성은 다양한 방식과 경로로 표현될 수 있는 거대한 구조입니다 . 많은 사람들이 좋아하는 그런 개념적 디자인을 달성하게 되어 기쁩니다. 새로운 기술을 배우고 한 구성에서 다른 구성으로의 부드러운 전환을 발견하게 되어 기쁩니다.
우리는 끊임없이 배우고 스스로를 향상시키고 있습니다. 그래서 결국, 저는 여러분 모두에게 자신과 자신의 능력을 믿고, 끊임없이 향상시키고, 더 많이 실험하고, 있는 그대로의 자신을 두려워하지 말라고 말하고 싶습니다. 자신이 되세요. 자신과 다른 사람들에게도 친절하세요.
