포토샵에서 만든 원형 프로그레스바(Circle Progress Bar)를 에펙으로 불러와서 슬라이스 할 영역에 맞게 이미지 시퀀스 파일로 만드는 방법에 대해 알아보겠습니다.
포스트 작성을 위해서360x640픽셀의 GUI화면에 x, y좌표 45, 220 위치에 270x270픽셀 사이즈의 원형 프로그래스바가 있는 샘플화면을 준비했습니다. (*좌표맞춤 설명을 위해 사이즈를 표기하였고, 꼭 이 사이즈일 필요는 없습니다. ) 이 원형 프로그레스바의 진행 애니메이션을 만들고 시퀀스 이미지로 익스포트(저장)해보도록 하겠습니다.
(*이미지를 클릭하시면 크게 보실 수 있습니다.)
 |
 |
 |
작업의 순서는 총 4단계입니다.
글을 작성하다 보니 페이지가 길어져서 다음과 같이 2개의 파트로 나누었습니다.
Part1. 에펙에서 GUI화면의 원형 프로그레스바 크기와 좌표에 맞게 크롭 하기
2. 불러온 GUI화면에서 원형 프로그레스바 크기와 좌표에 맞게 콤포지션을 크롭 하기
Part2. 원형 프로그레스바 애니메이션을 만들어서 시퀀스 이미지로 익스포트 하기
3. Trim Path 기능으로 원형 프로그레스바 애니메이션 만들기
Trim Path 기능으로 원형 프로그레스 애니메이션만 만드실 분은 바로 Part2 링크를 클릭하시면 됩니다.
Part1. 에펙에서 GUI화면의 원형 프로그레스바 크기와 좌표에 맞게 크롭 하기
1. 에펙에 콤포지션으로 psd화면 불러오기
먼저 작업할 psd를 에펙으로 드래그 또는 File > Import > File로 불러옵니다.
이때 불러올 psd에서 원형 프로그레스바는 레이어 그룹으로 미리 묶여있도록 합니다.
에펙으로 psd 파일을 불러오면 Import File 팝업창이 뜹니다. Footage를 선택하고, import Option에 Create Composition에 체크를 하고 Import 버튼을 클릭해서 불러옵니다.
Layer Option을 선택하는 창에서는 Editable Layer Styles를 선택하고 OK버튼을 클릭합니다.
그림과 같이 상위 콤포지션 그룹 2개와 레이어 폴더가 보입니다. Circle_Progress2가 가장 상위의 콤포지션이고, 그 안에 Circle_Progress가 들어있고, 그 안에 세부요소 콤포지션과 레이어가 들어있는 구조입니다.
Circle_Progress 2를 마우스 오른쪽 클릭 > Composition Settings를 클릭해서 콤포지션의 설정을 확인합니다. Width값이 360px, Height값이 640px, Frame Rate는 30 Frames per second, Duration은 3초(90 Frame)+11 Frame 즉 101 프레임입니다.
2. 불러온 GUI화면에서 원형 프로그레스바 크기와 좌표에 맞게 콤포지션을 크롭 하기
Circle_Progress를 더블 클릭해서 들어가 보면 psd의 레이어와 동일한 순서와 레이어 이름으로 에펙의 타임라인에 레이어가 있는 것을 볼 수 있습니다. 이 중에 프로그래스바 레이어 그룹인 progress 콤포지션을 슬라이스 영역으로 지정한 영역(반투명 핑크색 Guide영역)과 동일한 사이즈로 크롭(Crop) 해 주도록 하겠습니다.
(전체 화면 애니메이션을 확인할 필요 없이 프로그레스바 영역의 애니만 필요하신 분은 포토샵에서 크롭 해서 프로그레스바 영역만 애니로 만드셔도 된답니다.)
위의 프로젝트 리소스 창에서 Circle_Progress Layers폴더 왼쪽의 화살표를 클릭하면 폴더 내의 하위 레이어들이 보입니다. 여기에서 progress 콤포지션을 선택> 마우스 오른 클릭해서 Compositon Settings 창을 오픈합니다.
상단의 Advances 탭을 엽니다. Anchor를 가장 첫 번째 네모박스로 설정합니다.
다시 Basic탭으로 돌아가서 width값을 전체 360px에서 프로그레스바 영역(핑크색영역)의 오른쪽 마진 값인 45px를 뺀 315px로 수정합니다. Height값도 전체 640px에서 아래쪽 마진 값인 150px를 뺀 490px로 수정하고 OK버튼을 클릭해서 창을 닫습니다. 마진 값만큼 잘린 것을 확인할 수 있습니다.
왼쪽과 위쪽도 같은 방법으로 잘라줍니다. Advanced에서 Anchor점을 가장 오른쪽 아래 점으로 선택합니다.
Basic탭에서 프로그래스바 영역(핑크색영역)인 width: 270px Height: 270px로 수정한 후 ok를 클릭해서 설정 창을 닫습니다. 위의 화면과 같이 정확한 사이즈로 크롭 되었습니다.
그런데 상위 콤포지션인 Circle_Progress로 돌아와서 확인해 보니 프로그레스바의 위치가 핑크색 영역보다 위쪽으로 나가 있습니다. 이것은 Progress 영역의 기준점(Anchor Point)이 전체화면의 기준점(Anchor Point)보다 아래에 위치해 있기 때문입니다. 그 차이만큼 Progress의 중심점을 위쪽으로 옮겨주어야 합니다.
포토샵에서 확인해 보면 프로그래스바의 기준점은 전체화면의 기준점보다 35px이 많은 135px입니다. 전체화면의 기준점과 동일하게 맞추려면 기준점을 100px이 되어야 합니다.
에펙으로 돌아와서 progress 레이어에서 Transform을 열고 Anchor Point의 y좌표를 100으로 수정해 줍니다. 그러자 핑크색 영역에 정확하게 프로그레스바가 들어옵니다.
지금까지 에펙으로 GUI화면을 불러와서 원형 프로그레스바 크기와 좌표에 맞게 콤포지션을 크롭 하는 방법을 알아보았습니다. 이제 Progress 콤포지션을 더블 클릭해서 열고, 프로그레스 애니메이션을 만들면 됩니다.
포스트가 길어져서 애니메이션은 페이지를 나누어서 작성했습니다. 아래의 링크를 클릭하시면 다음 페이지로 이동합니다.
Part1. 에펙에서 GUI화면의 원형 프로그레스바 크기와 좌표에 맞게 크롭 하기
2. 불러온 GUI화면에서 원형 프로그레스바 크기와 좌표에 맞게 콤포지션을 크롭 하기
Part2. 원형 프로그레스바 애니메이션을 만들어서 시퀀스 이미지로 익스포트 하기
3. Trim Path 기능으로 원형 프로그레스바 애니메이션 만들기
'Study > Tool' 카테고리의 다른 글
| [Figma] 피그마에서 이미지 사이즈가 다르게 익스포트 될때 해결 방법 (4) | 2024.01.27 |
|---|---|
| [Figma] 피그마에서 텍스트 한번에 선택 후 텍스트 속성 바꾸기 (1) | 2023.12.31 |
| [Blender] 블렌더로 네온사인 발광효과 만들기 / Eevee, Cycles 렌더러 (5) | 2023.12.17 |
| [에펙] 원형 프로그레스바 시퀀스 이미지 만들기(2/2) (2) | 2023.07.20 |
