[Sketch] 스케치 이미지를 일러스트로 불러오는 옵션들 테스트



일러스트레이터에서 제작한 이미지를 스케치로 불러오거나, 스케치에서 제작한 이미지를 일러스트로 불러올때

그리고 이런 이미지들을 애프터 이펙트로 다시 불러와 사용할 때 몇가지 불편한 일들이 생긴다 ㅠㅠ

매번 나를가장 번거롭게 하는게 스케치에서 만든 이미지를 다른데서 사용할때 오브젝트를 감싸는 빈 사각형이 클리핑 마스크로 씌워지면서 그 사각형들을 일일히 제거하는게 엄청나게 번거롭다는것이다. 사각형을 걷어내다보면 오브젝트가 하나씩 떨어져나가기도 하고 내가 원하는 그룹핑이 깨지기도 한다. 때로는 스케치 상에서 회전값을 가지고 있는 오브젝트의 경우 애펙에서 열어보면 회전값이 0으로 되어있어서 일일히 패스를 열어 다시 수정해줘야 한다.

오늘 스케치 이미지를 일러스트로 불러와서 이미지를 수정한 다음에 (스케치는 아직도 자유로운 & 미세한 작업 하기에는 넘 불편하다) 애펙으로 불러가는 프로세스를 거치면서 몇가지 테스트를 해봄


방법 1 : 원하는 오브젝트를 선택하여 EPS로 Export 

방법 2: SVG 로 Export

방법 3 : PDF로 Export

방법 4 : 스케치에서 복사하여 일러스트 새 파일에서 붙여넣기


익스포트 해보면 세 가지 방식이 캔버스 크기도 다르게 잡히는걸 알 수 있다



첫번째, EPS로

캔버스에서 원래 있던 위치는 무시하고 크기도 무시하고 클리핑마스크 사각형 있음

스케치 크기 300 300 이었을때 일러스트 400 400으로 나오고, 스케치 50 50 인데 일러스트 300 300 으로 나온다. 기준이 뭔지 모르겠음



두번째 PDF, 

오브젝트 사이즈 만큼만 캔버스 사이즈가 맞춰서 들어온다.

그런데 외곽선 모드로 들어가보면 원래 스케치 캔버스 사이즈와 위치를 가늠할수는 있게 되어있음

클리핑 마스크 사각형 있음




세번째,  SVG

딱 오브젝트만 깔끔하게 뽑아오려면 SVG로 익스포트 하는게 가장 좋은 것 같다

오브젝트 사이즈만큼만 캔버스 사이즈 리사이징 되고, 클리핑 마스크 사각형 없음



네번째, 스케치에서 복사하여 일러스트 새 파일에서 붙여넣기

의외로 급할때 가장 자주 하는 방식인데, 더럽게 사각형들이 따라온다



추가 테스트 

SVG로 스케치 캔버스 전체를 익스포트 해보니, 스케치 내에서 그룹핑한대로 그대로 export 된다

이건 나중에 애펙에서 작업할때도 꼭 남아있는게 좋다



결론 : 급하더라도 SVG로 저장한 다음 불러오는 습관을 들여야겠다








[BodyMovin] 애펙을 JSON으로 바꿔주는 플러그인 업데이트 소식


Bodymovin

New version of Bodymovin

Version 5.1.1 (January 2018)


Big performance improvement for all web renderers. Very recommended to upgrade.
Some bug fixes.
Happy New Gregorian Calendar Cycle :)

Changes in this version:

## V 5.1.1
- Text Layer keyframed fix

Upgrade instructions:

To upgrade please refer to this FAQ: How to upgrade "Name Your Own Price" products.


이메일로 Bodymovin 플러그인 업데이트 소식이 날아왔다!

Lottie 와 Bodymovin 덕에 안드로이드, iOS, 웹에 쓰이는 애니메이션과 이펙트 작업에 여러모로 많은 도움을 받는 중이다

이번에는 전반적인 웹 렌더링쪽 퍼포먼스 향상과, 텍스트 레이어 관련 버그를 수정했다고 한다

실제로 돌려봤는데 이전과 어떤 점이 다른지는 정확히 모르겠으나 그냥 감사함


https://aescripts.com/bodymovin/

애프터 이펙트 플러그인이나 스크립트를 다운받을수 있는 aescripts로 가서 

좌측에 20달러라고 적힌 곳에 원하는 금액을 넣고, (0이라고 넣어도 된다) 장바구니에 넣은 후,

결제프로세스를 거치면 된다

유료로 구매하지 않고 원하는 금액을 지불하는 방식을 "Name Your Own Price" 제품이라고 하는데,

이런 제품은 모두 업그레이드시 새로 구매를 하는 프로세스를 거치는것이 규정이다.

업그레이드시 감사의 뜻으로 후원을 더 할수도 있으니까? 0ㅁ0


다운받은 후 ZXP Installer 로 설치하고 애펙을 재실행하면

Extensions 패널에 잘 들어감






[Sketch] 스케치 파일의 레이어를 애프터 이펙트로 Sketch2AE


맥에서 스케치 파일의 레이어를 애프터 이펙트로 옮겨주는 플러그인 Sketch2AE

https://google.github.io/sketch2ae/

이런 훌륭한건 도대체 누가 만드나 봤더니 역시 구글이었다..

디자이너들의 암을 깨끗히 낫게 하여주시는 감사한 존재








1. 다운받아서 스케치 플러그인 설치 - 새로운 파일에 아트보드에 원하는 스케치 레이어 넣고 플러그인 메뉴에서 세이브 






2. jsx 파일을 응용프로그램 내부에 애펙 ScriptUI Panels 폴더에 넣기! - 아까 저장한 sketchae 파일 불러오기

근데 여기서 json parse 에 에러가 뜬다 

........


여러 시도를 해봤는데

안보이게 가려둔 안쓰는 레이어는 다 지우고.. 

텍스트는 왠만하면 create outline (그럼 텍스트 애니메이션은 애펙에서 못해보는건가)


레이어를 한꺼번에 다 옮기는것보다는 그룹별로 따로 옮겨서 콤포지션을 만들고 그걸 합쳐서 하나의 파일로 만드는걸 추천!



-- 

지금 가장 확실한 방법은 텍스트 레이어를 깨는건데

홈페이지 샘플 영상을 보면 텍스트가 그대로 살아있다. 폰트와 텍스트를 영어로 바꾸었는데도 효과 없음

그냥 create outline 이 답인듯 

어차피 bodymovin - lottie 로 가려면 텍스트를 깨서 하는게 낫겠다 싶기도 하다.

아래는 깃허브에 로그인데 이번 버젼에서 따옴표 안에 텍스트 에러나는거랑 빈 오브젝트 에러가 고쳐지긴 했다고 한다