EFFECTSStroke 애니메이션을 유니크하게 만들어주는 Thicc Stroke Effects

motionlab
조회수 5005

오래간만에 무료 이펙트이면서도 강력한 플러그인을 하나 소개해드리려고 합니다. 바로 Line 애니메이션 시, 항상 문제가 되었던 Stroke 애니메이션을 좀 더 쉽고 간편하게 할 수 있게 만들어 주는 Thicc Stroke 이펙트입니다. Plugin Everything이라는 회사에서 나온 이펙트로, 감사하게도 무료입니다.



1. Free Download & Install

01. https://www.plugineverything.com/thiccstroke 에 들어가면 다운로드 받을 수 있습니다. 다운로드 받은 다음, C > Program Files > Adobe > Adobe After Effects CC 2019 > Support Files > Plug-ins 안에 넣어 주기만 하면 됩니다.




02. https://aescripts.com/thicc-stroke/ 에서도 다운로드 받을 수 있습니다.




2. Effects Basic 옵션 알아보기


01. 먼저, 새로운 Composition을 하나 만듭니다. 여기에 Solid Layer를 하나 만들겠습니다.



02. Solid Layer에 펜 툴을 이용하여 Mask를 하나 만듭니다.




03. 이제 Solid Layer에 Thicc Stroke 이펙트를 적용합니다. 이펙트의 맨 처음 옵션을 보면, Mask를 선택하는 옵션이 있습니다. Thicc Stroke 이펙트는 Mask에 적용되는 이펙트입니다. Solid Layer나 Shape Layer도 상관없습니다. Layer에 Mask만 있으면 됩니다. Thicc Stroke 이펙트는 총 4개의 옵션이 있습니다. Width Controls는 Stroke의 두께 부분을 조절합니다. Style은 Stroke의 앞부분과 뒷부분의 모양, 그리고 컬러를 조절합니다. Trim Paths는 Shape Layer에 있는 기능과 마찬가지로 라인 애니메이션을 만들어주는 기능을 합니다. Quality는 Stroke의 퀄리티를 조절하는 기능을 합니다. Mask1을 팝업 메뉴에서 선택해주면, 그림처럼 기본값으로 Stroke가 만들어집니다.



04. 앞서 열린 Mask Path에서 작업했다면, 이번에는 닫힌 Path에서 작업해보겠습니다. 원형 툴을 이용하여 Mask를 하나 더 추가합니다. 그런 다음에 Thicc Stroke 이펙트에 있는 옵션에서 Mask2를 선택합니다.



05. Toggle Transparency Grid를 클릭하여 배경 컬러를 투명하게 만들어보면, 닫힌 Mask Path에 어떻게 적용이 되었는지 좀 더 확실하게 확인할 수 있습니다.



06. 다시 Mask1으로 선택한 다음에 Width Controls 부분을 확인해보겠습니다. Width Start와 End 값을 같게 하면, 그림처럼 앞뒤가 똑같은 모양의 Stroke가 만들어집니다.



07. Width Multiplier는 정해 놓은 Start와 End 값을 배수로 커지게 해주는 역할을 합니다. 예를 들어, 위에 있는 Stroke는 Start 값을 200으로 하고, Multiplier를 1로 작업한 것입니다. 밑에 있는 Stroke는 Start 값을 100으로 하고, Multiplier를 2로 작업한 것입니다. 2개의 크기가 같다는 것을 알 수 있습니다.



08. 이번에는 Style을 알아보겠습니다. Cap을 Round로 하면, Stroke의 끝부분이 원형이 됩니다. Shape Layer가 가지고 있는 Cap 기능과 같다고 생각하면 됩니다. Butt로 설정하면, 그림처럼 원이 아닌 직선으로 바뀝니다. 사실 여기서 우리는 한가지 문제를 발견할 수 있습니다. Butt로 Cap을 바꾸었을 때, 그림처럼 중간 부분에 보기 싫은 라인이 생겨난 것을 발견할 수 있습니다.




09. 좀 더 확실히 확인하기 위해서 이번에는 Path를 좀 더 구부리고, Width 값을 크게 설정했습니다. Cap이 Butt일 때는 확실히 눈에 띕니다. 이 문제의 근본적인 원인은 Thicc Stroke가 어떻게 만들어졌는지를 알아보는 것부터 시작해야 합니다. 하나의 Path에 아주 많고 짧은 Stoke들이 모여서 만들어지는 것이 바로 Thicc Storke입니다. 우리 눈에는 마치 하나의 Stroke처럼 보이지만, 실제는 그렇지 않습니다. 그래서 Butt로 설정했을 때, 중간 부분을 이어주는 부분이 처리가 안되는 모양입니다. 물론, 그라데이션을 선택했을 때, 더 두드러지게 표시가 납니다. 이렇기 때문에, 웹상의 샘플들을 보면, 거의 대부분의 Cap 부분은 Round로 되어 있는 것을 알 수 있습니다.




10. Width Interpolation의 옵션을 Linear로 설정했을 때와 Smooth로 설정했을 때의 차이점을 확인해봅니다. Smooth로 설정하면, 자동으로 상당히 날렵한 형태로 End 부분을 만들어줍니다.


 

11. Color의 Mode 부분은 총 4개의 옵션으로 나뉘어져 있습니다. Solid, Gradient 2, Gradient 3, Gradient 4입니다. Gradient 뒤에 붙은 숫자는 컬러의 개수를 뜻합니다. Gradient 4는 총 4개의 컬러를 그라데이션할 수 있다는 뜻입니다.



12. Mode를 바꿔준 것들을 보면 이해가 될 것입니다.



13. Color 부분의 Cycle은 현재 Stroke가 가지고 있는 컬러를 반복시켜서 보여주는 기능을 합니다.




14. Cycle에 1을 입력하면, 정해진 시간 동안 현재 있는 컬러를 한번 더 보여준다고 생각하면 됩니다. Cycle을 애니메이션 시켜보겠습니다. 0초에 0, 1초에 1을 입력하고 애니메이션시키면, 그림처럼 1초 동안 한번 컬러가 다시 보여집니다. 현재는 Mode를 Gradient 2로 설정한 것입니다. 2개의 컬러로 설정하니까 문제점이 보입니다. 컬러가 Cycle될 때, 경계선이 보일 수밖에 없습니다. 




15. 그래서 이번에는 Gradient 3로 작업을 해보았습니다. 앞과 뒤의 컬러를 같은 흰색으로 하였습니다. 앞서 작업한 것과 같이 1초 동안 Cycle이 한번 바뀌도록 애니메이션을 만들어보았습니다. 훨씬 자연스러운 Cycle을 연출할 수 있습니다. Shape Layer의 Trim Path 작업 시, Offset 기능과 같다고 생각하면 됩니다.

 


16. 이번에는 Shift Colors에 대해서 알아보겠습니다. Color Mode를 Gradient로 설정하고 작업할 때, Shift Colors 버튼을 누르면, 설정된 컬러 값이 한 단계씩 밑으로 내려가면서 바뀌게 됩니다.



17. Reverse Draw Order 옵션은 말그대로 그리는 우선순위를 바꿔주는 것입니다. 컬러가 그라데이션이 되었을 경우, 2가지든, 3가지든, 그 순서를 바꿔주는 것입니다. 맨 처음 그림은 흰색-빨간색-흰색으로 되어 있습니다. 빨간색이 맨 앞에 있는 흰색의 윗부분에 칠해진 것처럼 보입니다. 하지만, Reverse Draw Order 옵션을 체크해주면, 흰색이 빨간색 위에 칠해진 것처럼 보여져서 흰색 부분이 더 많이 보입니다.



3. Shape Layer에 Thicc Stroke 이펙트 적용하기


01. 이번에는 Shape Layer에 Thicc Stroke 이펙트를 적용해보겠습니다. 사실 Thicc Stroke 이펙트는 Mask에 적용되는 방식이기 때문에, 어떤 Layer든지 Mask를 만들 수 있는 Layer에는 모두 적용이 가능합니다.



02. Shape Layer를 선택한 후에 펜 툴이나 도형 툴로 뭔가를 그리면, Group으로 인지를 하기 때문에, 그림처럼 Tool Creates Mask를 먼저 체크해야 합니다.



03. 그림처럼 Shape Layer에 Mask를 만들었습니다.



04. Thicc Stroke 이펙트를 적용하면, 그림처럼 앞서 Solid Layer의 Mask에 적용한 것과 동일하게 보여집니다.



05. Width Start와 End 값을 반대로 바꾸어서 입력하면, 그림처럼 라인의 두꺼운 부분과 얇은 부분이 바뀌게 됩니다. 여기에 Swap Colors 버튼을 클릭하여 컬러를 바꿔보았습니다.



06. 이번에는 Trim Paths에 대해서 알아보겠습니다. Start, End, Offset은 Shape Layer가 가지고 있는 Trim Path와 같은 기능을 합니다. Influences에 대해서 알아보겠습니다. Influences 옵션은 총 4개의 옵션이 있습니다. None은 기본값으로 아무런 영향을 받지 않는 것입니다. Width는 두께가 영향을 받는 옵션입니다. Color는 컬러가 있을 경우, 컬러에 영향을 받습니다. Width & Color는 두께와 컬러에 영향을 받습니다.



07.이제 컬러를 3개 정도 넣어서 애니메이션을 하면서 비교해보겠습니다. Influences는 Trim Path로 애니메이션을 만들어 보면 확실히 차이가 납니다. None으로 설정하고 애니메이션을 하면, 파란색-마젠타-흰색 컬러는 제자리에 있으면서 라인만 줄어드는 애니메이션이 만들어집니다. Width로 설정하면, 컬러부분은 None과 비슷하지만, Width 값을 최대한 유지하면서 애니메이션이 됩니다. 그래서 좀 더 라인의 두꺼운 부분이 두껍게 보여집니다. Color는 현재 파란색-마젠타-흰색의 3가지 컬러가 그대도 유지되면서 라인이 줄어듭니다. Width & Color는 Color처럼 3가지 컬러가 그대로 유지되면서 라인이 줄어듭니다. 대신 두께의 차이는 크게 차이가 나도록 보여집니다.



08. 마지막으로 Quality에 있는 Subdivisions Multiple에 대해서 이야기해 보겠습니다. Subdivisions Multiple은 밀도감이라고 이야기할 수 있겠습니다. Thicc Stroke 이펙트가 Mask Path를 라인으로 보이게 하는 원리는 하나의 라인이 아니라, 작은 선들의 모임이라고 말씀드리는 것이 더 이해가 쉬울 것 같습니다. Subdivisions Multiple의 기본값인 1일때와 5일때의 차이를 보면 확실히 알 수 있습니다.



09. 이번에는 앞서 설명 드리지 않았던 Width Controls에 있는 Vertex Feather Mode를 알아보겠습니다. 이 모드는 Mask Feather Tool을 사용해야 합니다.



10. 하지만, 여기에서 문제가 있습니다. Mask Feather Tool은 닫힌 Path에서만 사용이 가능하기 때문에, 일단 닫힌 Path로 만듭니다.



11. 그런 다음, Force Path Open을 반드시 클릭해야 합니다. 말 그대로 강제적으로 닫힌 Path를 열어주는 기능을 하는 옵션입니다. 체크하는 순간 그림처럼 마치 열린 Path처럼 Thicc Stroke가 보여집니다.


 

12. 그런 다음에 Mask Feather Tool을 이용하여 라인의 형태를 원하는 대로 만들어보면 됩니다.



13. Style에 있는 Width Interpolation을 Smooth로 설정하면, 전체적으로 형태가 부드럽게 변합니다.




4. Typo Animation


01. 이번에는 Thicc Stroke을 이용하여 간단한 타이포 애니메이션을 만들어보겠습니다. Type 툴로 원하는 글자를 입력하고, Create Masks from Text를 선택합니다. 서체를 Mask로 만들면, 그림처럼 닫힌 Path가 만들어집니다.



02. Thicc Stroke 이펙트를 사용하기 위해서 Path를 그림처럼 하나의 라인으로 만들어줍니다.



03. 여기에 그림처럼 각각의 철자에 Path를 더 추가하여 형태를 만들어줍니다.



04. 이런 스타일의 타이포 애니메이션을 만들 때 주의해야 할 것은 라인이 외부에서 들어오는 방향과 형태적인 느낌입니다. 정해진 것은 없으니 이런 저런 레이아웃을 잡아보고 작업을 하는 것이 좋습니다.



05. 사실 각 철자마다 키프레임 애니메이션을 할 것은 그리 많지 않습니다. 이러한 애니메이션에서 가장 중요한 부분은 바로 Trim Path에 있는 Start와 End 값을 어떻게 조절하느냐 입니다. 서체가 Path를 따라서 움직이다가 철자의 모양이 만들어져야 하는 것이 포인트입니다. 이 부분은 애니메이션을 하면서 조금씩 Start 또는 End 값을 조절해야 합니다.