Page 14 -

02 위로 열리는 자물쇠 잠금

UI 디자인하기

도형 도구를 활용하고 컬러 및 선형 그레이디언트를 적용하여 도형을 재구성한 다음 잠금 아이콘을 디자인
합니다. 잠금 아이콘에 마스크를 적용하고 트리거는 ‘탭’, 액션은 ‘전환’, 애니메이션은 ‘디졸브’를 설정하여 잠
CHAPTER 금 아이콘을 터치하면 자물쇠가 열리는 전환 애니메이션이 됩니다.

완성파일 : 자물쇠_완성.xd

01 자물쇠 형태의 아이콘 만들기

따라하기

01 시작 화면에서 ‘iPhone XR/XS Max/11 1 아트보드 제작
(414x896)’을 선택하여 새로운 아트보드
2 선택
를 만듭니다. 타원 도구( )를 선택하고 아트보
드에 드래그하여 W/H가 ‘160’ 크기인 정원을 그 4 설정
립니다. 오른쪽 패널에서 채우기를 ‘선형 그레이 8 이동
6 지정
디언트’로 지정합니다. 컬러 바에서 왼쪽 조절점
의 Hex를 ‘#C5D3EF’, 오른쪽 조절점의 Hex를
‘#7199E8’로 설정하고 그러데이션을 대각선 방 3 드래그
5 클릭
향으로 적용합니다.

7 설정

158 Part 3•UI 디자인 애니메이션 만들기