SVGator 3.0을 사용하여 한 곳에서 SVG를 만들고 편집하고 애니메이션하는 방법

게시 됨: 2022-03-10

빠른 요약 ↬ 오늘은 SVG 파일을 생성, 편집 및 애니메이션화하고 SVG가 제공하는 것을 처음부터 끝까지 최대한 활용할 수 있게 해주는 인기 있는 SVG 애플리케이션의 새로운 주요 릴리스인 SVGator 3.0에 대해 자세히 살펴보겠습니다. .

SVGator는 진화하고 있으며 많이 발전하고 있습니다. 3년 전에 SVGator의 기본 사용에 대한 포괄적인 소개를 게시했습니다. 그 당시에는 다른 앱에서 만든 SVG 파일을 애니메이션으로 만들기 위한 앱이었습니다. 2년 전에 SVGator의 새 버전과 향상된 애니메이션 기능을 소개했습니다. 이번에는 SVG 그래픽을 처음부터 그리고 애니메이션으로 그리기 위한 완성된 완전한 환경을 제공하는 SVGator의 새로운 주요 버전을 소개합니다.

참고 : 이 튜토리얼에서 다루는 SVGator의 일부 기능은 유료입니다. 무료 플랜에서는 SVG 그래픽을 무제한으로 만들고 내보낼 수 있습니다. 기본 애니메이션 기능을 사용하고 한 달에 3개의 애니메이션을 내보낼 수도 있습니다. 고급 애니메이션 기능은 월 11달러부터 유료 플랜에서 사용할 수 있습니다.

이 기사에서는 사용자 정의 SVG 로더를 만드는 과정을 처음부터 그리고 다양한 시각 효과를 적용하고 다양한 유형의 애니메이션을 만들고 파일을 내보내고 웹에서 사용할 수 있도록 준비하는 과정을 따릅니다.

SVGator에서 그려지고 애니메이션된 순수 SVG로 만든 사용자 정의 로더.

새 빈 파일을 만들고 배경색을 변경하여 시작합니다.

여기에서 나중에 애니메이션으로 만들 그림 그리기를 시작할 수 있습니다. SVGator를 사용하면 타원, 직사각형 및 다각형과 같은 모든 표준 SVG 모양을 그리고 펜 및 연필 도구를 사용하여 자신만의 모양을 그릴 수 있습니다. 부울 함수를 사용하여 모양을 서로 결합할 수도 있습니다.

원하는 모양을 쉽게 만들 수 있도록 캔버스 중앙에 원을 안내선으로 그리는 것부터 시작했습니다. 다행스럽게도 SVGator는 스마트한 가이드 시스템과 스냅 기능 덕분에 요소를 정렬하고 측정하는 것을 아주 간단하게 만듭니다. 더 나은 정밀도와 충실도를 위해 격자와 눈금자를 사용할 수도 있습니다.

알고 계셨나요? 기본 모양 및 그리기 기능 외에도 SVGator는 워크플로를 고정하기 위해 미리 만들어진 자산 라이브러리도 제공합니다. 다양한 모양, 아이콘 및 일러스트레이션 중에서 선택할 수 있습니다. (큰 미리보기)

다음으로 펜 도구를 사용하여 아래에 있는 원의 모양을 따라 대략적으로 첫 번째 얼룩을 그립니다. 연필 도구도 그 목적에 적합합니다. 이것에 대해 정말 멋진 점은 SVGator의 연필 도구는 일반적으로 다른 앱의 유사한 도구보다 훨씬 적은 노드 포인트로 모양을 생성하므로 결과가 더 매끄럽게 보일 뿐만 아니라 파일 크기도 훨씬 가벼워집니다.

펜 도구를 사용하여 얼룩 모양을 그립니다. 경로에 새 점을 계속 추가함에 따라 이미 존재하는 점과 곡선을 이동 및 드래그하여 즉시 수정할 수 있습니다. 이미 생성한 선을 조정하기 위해 그리기 모드를 시작하거나 종료할 필요가 없습니다.

SVGator에서 모양을 만들고 편집하는 것은 다른 벡터 도구와 약간 다르게 느껴질 수 있지만 익숙해지면 정말 쉽습니다. SVGator의 모든 그리기 기능은 완전 무료이므로 SVG 생성 소프트웨어로 원하는 만큼 무료로 사용할 수 있습니다.

그림을 그릴 공간이 더 필요한 경우 다음을 눌러 앱의 사이드바를 쉽게 숨기고 표시할 수 있습니다 — 그림을 그릴 공간이 더 필요한 경우 를 눌러 앱의 사이드바를 쉽게 숨기고 표시할 수 있습니다. (큰 미리보기)

첫 번째 얼룩이 준비되었으면 이제 약간의 스타일을 지정할 차례입니다. 여기에서 우리는 앱의 가장 큰 경쟁 우위 중 하나를 우연히 발견했습니다. SVG 파일을 내보낼 수 있는 다른 인기 있는 벡터 그래픽 응용 프로그램은 일반적으로 과도한 형식과 사용 사례에 맞게 기능을 활용해야 합니다. 동시에 주로 사용자 인터페이스에 중점을 둔 앱은 HTML 및 CSS 속성으로 가능한 것을 대부분 충족하며 획 마커 또는 필터와 같은 SVG 관련 기능을 별로 좋아하지 않습니다.

SVG 파일 생성만을 목적으로 하는 SVGator는 특히 이 형식이 제공하는 것을 최대한 활용합니다. 여기에는 SVG가 획, 채우기, 그라디언트 요소(SVG 그라디언트의 spreadMethod 속성에 대해 들어본 적이 있습니까?), 필터(예: 흐림, 그림자 또는 세피아) 및 기타 여러 가지를 처리하는 방법과 관련된 옵션이 포함됩니다.

또한 이러한 모든 기능은 특히 SVG 파일용으로 생성되었기 때문에 최종 결과가 예상대로 될 것이라는 확신을 갖고 스타일(채우기, 획, 효과 등)을 지정할 수 있습니다.

우리의 경우 단일 그라디언트 채우기와 그라디언트 스트로크가 수행됩니다. 또한 요소에 최종 터치로 라이트 블러 필터를 적용했습니다. SVGator는 CSS 대신 기본 SVG 필터를 사용하므로 두 축의 흐림 속성을 개별적으로 제어할 수 있습니다. 이 경우 x축 흐림 효과만 적용했습니다.

선택한 개체에 필터 추가 — 선택한 개체에 필터를 추가합니다. (큰 미리보기)

다음으로 얼룩을 복제하고 펜 도구를 다시 사용하여 두 개의 다른 얼룩을 더 만들 수 있습니다. 펜 도구가 작동하는 방식을 사용하면 매끄럽고 연속적인 선을 잃지 않고 모양을 정말 쉽게 수정할 수 있습니다.

몇 가지 다른 불규칙한 모양을 얻기 위해 모양을 가지고 놀기

그림의 마지막 요소로 무작위로 배치된 몇 개의 빛나는 점을 추가합니다. 그라디언트 채우기가 적용된 원에 불과합니다.

그라디언트 채우기가 있는 타원을 사용하여 빛나는 반짝임 만들기 — 그라디언트 채우기와 함께 타원을 사용하여 빛나는 반짝임을 만듭니다. (큰 미리보기)

초기 상태의 로더가 준비되었습니다. 이제 가장 재미있는 부분인 애니메이션을 볼 시간입니다!

일러스트레이션의 어떤 요소를 먼저 애니메이션할지 여부는 중요하지 않습니다. 제 경우에는 반짝임 애니메이션으로 시작했습니다. 각 요소에 위치 애니메이터를 추가하여 복잡한 경로 애니메이션을 만들 수 있습니다. 경로 애니메이션을 사용하면 시간이 지남에 따라 요소가 모든 모양의 경로를 따르도록 만들 수 있습니다. 우리의 경우 은 그림의 중심 요소 주위를 비행하는 느낌을 만들기 위해 캔버스 주위를 반짝거리게 만듭니다. 또한 Scale 및 Opacity Animator를 사용하여 반짝임이 보는 사람에게서 점점 더 멀어지는 것처럼 보이게 하고 3차원 공간에서 움직이는 환상을 강화할 수 있습니다.

반짝임 중 하나에 대한 경로 애니메이션 만들기.

참고 : 경로 애니메이션을 만드는 방법에 대해 자세히 알아보려면 "모션 경로 애니메이션 - 사용자 지정 경로를 따라 모든 개체에 애니메이션 효과 주기" 자습서를 시청하는 것이 좋습니다.

따라야 할 반짝임 중 하나의 마지막 경로입니다. 내 목표는 중간에있는 얼룩 주위에 반짝이는 느낌을주는 것이 었습니다. — 따라야 할 반짝임 중 하나의 마지막 경로입니다. 내 목표는 중간에 있는 얼룩 주위에 반짝이는 느낌을 주는 것이었습니다. 경로 애니메이션을 크기 및 불투명도에 대한 약간의 조정과 결합하면 요소가 뷰어로부터의 거리를 변경하는 것처럼 보이게 하고 얼룩 주위를 도는 인상을 주는 데 도움이 됩니다. (큰 미리보기)

얼룩에 애니메이션 효과를 주기 위해 Morph 애니메이터를 사용할 수 있습니다. 이를 통해 시간에 따라 모양을 수정하고 해당 상태 간에 부드러운 전환을 만들 수 있습니다. 두 모양 사이를 멋지게 전환하기 위해 Morph 애니메이터의 타임라인에 키프레임을 추가하고 추가 얼룩을 그릴 때와 마찬가지로 Pen Tool로 모양을 수정합니다.

얼룩의 모핑 애니메이션 만들기.

모프 애니메이션 제작에 대해 더 자세히 알고 싶다면 이 튜토리얼에서 기초를 소개할 뿐만 아니라 완전히 새로운 수준인 "고급 모프 애니메이션 튜토리얼"도 소개합니다.

각 애니메이션의 중요한 부분은 타이밍 기능입니다. 반짝임의 경우 Ease In Out 타이밍 기능을 주로 사용했습니다. 그것은 점들이 궤도의 좁은 회전에 도달할 때 속도를 늦추고 직선 스트레치에서 속도를 높여 다차원 공간의 관점에서 보이는 것에 더 가깝게 움직임을 보도록 도와줍니다.

반짝임에 사용되는 타이밍 기능 — 반짝임에 사용되는 타이밍 함수입니다. (큰 미리보기)

얼룩의 경우 Ease In Out 기능도 사용했습니다. 두 타이밍 기능이 기본적으로 Ease In Out 기능이 어떻게 보이는지와 다르다는 것을 알 수 있습니다. 베지어 곡선 인터페이스를 사용하여 약간 "날카롭게" 했습니다. 이를 통해 급격한 회전과 딸꾹질 없이도 눈에 띄는 속도 저하 없이 움직임을 부드럽고 자연스럽게 만들 수 있었습니다.

약간의 추가 조정 후에 파일을 내보낼 준비가 되었습니다. SVGator의 새 버전은 미리보기 기능과 내보내기 기능을 결합합니다. 덕분에 내보내기 설정을 테스트하고 변경하는 동안 애니메이션을 실시간으로 브라우저에서 미리 볼 수 있습니다.

우리의 경우 애니메이션이 무한 루프로 작동하기를 원합니다. 또한 그래픽의 동작을 제어하여 로드 시 또는 클릭 또는 스크롤과 같은 사용자 작업 시 표시할 수 있습니다.

내보낸 파일은 앱 내에서 만든 애니메이션과 완벽하게 일치하며 웹에서 사용할 준비가 되었습니다.

Mikolaj의 Pen [SVGator Loader](https://codepen.io/smashingmag/pen/wvJzWgp)를 참조하십시오.

Mikolaj의 Pen SVGator Loader를 참조하십시오.

이 기사가 마음에 드셨기를 바라며 작업에서 SVG를 사용하여 가장 놀라운 것을 만드는 데 영감을 주기를 바랍니다!

다음은 어디? 아래에서 SVG 및 SVGator를 계속 사용하는 데 유용한 몇 가지 리소스를 찾을 수 있습니다.

SVGator 튜토리얼
SVGator를 시작하는 데 도움이 되는 일련의 짧은 비디오 자습서입니다.
SVGator 도움말 센터
SVGator, 기능 및 멤버십 계획에 대한 가장 일반적인 질문에 대한 답변입니다.
SVGator로 경로 애니메이션의 힘을 발휘하십시오
경로 애니메이션과 SVGator로 애니메이션을 만드는 방법에 대한 광범위한 소개입니다.