[쉐이프레이어 확인]

  • shape layer 안의 contents 안에 도형레이어들이 쌓여지는 시스템
  • contents 옆의 add 부분을 통해서 도형을 이루는 구조를 만든다
  • path부분으로 기본적인 도형의 형태 만들기/기본 값은 화면 중앙 <옵션의 path는 다른 구조>
  • stroke 부분으로 path부분에 아웃라인을 만들어주기
  • fill부분으로 path부분 안쪽에 칼라 채우기

  • 각 부분을 만든 후 contents 안의 그룹 기능을 이용하여 하나로 묶어주는것이 가능 원하는 속성을 드래그 하여 넣어주면 ok

  • path: 기본적인 선의 형태를 만들어준다. 영상출력으로 되지 않으면 일종의 설계도 기능 <기본값은 화면 중앙>
  • stroke: 순차적으로 위에 있는 속성에 아웃라인을 만들어 주는 기능 점선과 선의 두께 색등을 조절 가능
  • fill: 안쪽에 채워지는 색상을 변경 가능 <그라디언트 옵션을 하게 되면 이름만 다르고 그라데이션 색상조절가능>
  • 옵션의 path: 팬툴을 사용하였을 경우의 옵션을 말하며 마스크와 같이 점의 위치가 바뀌는 애니메이션이 가능. 점의 추가와 점의 제거 핸들러 옵션도 똑같이 적용가능
  • 기본값이 화면의 중앙이 아니라 자신이 그려지는 위치가 중앙으로 인식
  • stroke옵션의 line cap의 경우 선이 도형이 되지 않았을때 끝나는 부분의 모양을 변경 가능
  • alt키를 눌러서 도형 그리기의 경우 path로 인식하여 점 추가 가능
  • 쉐이프레이어의 path옵션에서 마우스 우클릭으로 convert to bezier path 바꾸기 (*추천)
    • bezier path로바꾸는 순간 펜툴로 자유롭게 path 변경이 가능하나, 기존 기능을 쓸수 없기 때문에 기존 기능 다 활용후 'convert to bezier path로 바꾸는걸 추천!
  • 상단메뉴에서 bezier path 활성화후 그려주기

[디자인 옵션]

  • 컨텐츠 옆의 add 버튼을 눌러 추가 <적용시키기 전에 컨텐츠를 한번 꼭 클릭!>
  • merge path: 마스크 옵션과 마찬가지로 영역의 옵션 <차집합/합집합/교집합/여집합>
  • offset path: 영역의 확장값 <축소와 확대가 가능하며 라인 조인의 옵션이 포함> 확장의 개념에 복제의 개념이 추가 되어 패턴 디자인 가능
  • Pucker&Bloat: 모서리 부분이 안쪽이나 바깥쪽으로 이동하여 선을 베이지어(곡선)에 대한 옵션으로 바뀜
  • round corner: 각진 부분을 유선형으로 만들어 주는 옵션 (짱구 얼굴형 그리기 편하고, 펜툴 다루기 힘들때 활용하면 좋음!)
  • Twist: 도형을 원형으로 꼬아주는 형태
  • zigzag: 스트로크 부분을 산의 형태로 만들어 주는 옵션(유선형으로 변경 가능)

효과중 round 효과를 add하고 zigzag효과 위로 올리면 좀 더 부드러운 표현 가능(효과 적용할때도 효과의 위치 중요!!)

[애니메이션 옵션]

  • trim path: 선이 그려지는 애니메이션 <보통 안쪽의 fill 칼라 없이 사용>
  • wiggle path: 선이 흔들리는 옵션 <기본값만 되어 있어도 선이 움직이는 애니메이션 적용>
  • wiggle transform: 위치의 값에 랜덤값을 적용해주는 옵션
  • wiggle 이라는 옵션의 경우 wiggle / second 의 값이 존재
    • 이 값은 초당 키프레임의 갯수로 전체적인 애니메이션의 속도라고 보면 됨
    • 두번째로 기준값이 존재 하게 되는데 기준값의 경우 +-값으로 랜덤한 값이 적용이 됨(예:50 입력시 기본값이 300일때 250~350)


  • Repeater

1)사각형그리고 position애니메이션 적용(12시방향으로 위로)

2)꼭 레이어랑, contents 선택되어 있는상태에서 add, repeater 선택!

3)copies 갯수 5개 입력, 각도 360/5, position 0,0으로 설정

  • 리피터사용법
    • 쉐이프레이어 자체 애니메이션을 만든다(쉐이프레이어의 도형레이어 자체로 만들기/투명한 쉐이프레이어 트랜스폼X)
    • 리피터 적용(도형을 선택하면X, contents선택!)
    • 리피터의 복사할 갯수를 정해주고 리피터 안의 트랜스폼 설정을 통해 배치(카피갯수/ 포지션:0,0/ Rotation각도)
    • 기본값으로 포지션 100의 값이 정해져 있으니 주의!!
  • 리피터 적용(도형을 선택하면X)
    • 리피터의 복사할 갯수를 정해주고 리피터 안의 트랜스폼 설정을 통해 배치
    • 기본값으로 포지션 100 값이 정해져 있으니 주의!!
    • 선이 그려지는 애니메이션의 경우 trim path를 통해 만들어 준다.

+ Recent posts