스이디: 스타트업에서 이거저거 하는 디자이너

스케치 동그란 프로그래스 바 그리기. radial progress bar 본문

팁, 노하우, 알아냄/디자인

스케치 동그란 프로그래스 바 그리기. radial progress bar

didQk 2019. 5. 2. 23:50

https://www.invisionapp.com/inside-design/sketch-tutorial-radial-progress-bars/


이 블로그가 제일 적당한 듯.


1. 원을 그리고

2. 라인 보더를 두껍게 주고

3. 보더 속성에서 갭을 9999로 입력

4. dash 부분을 원 그리는 공식대로. 지름 * 원하는 비율 * 3.14

    예를 들어 원 지름이 400 이고 65%만큼 호가 그려지길 원하면 400 * 0.65 * 3.14 를 데쉬 부분에 입력하면 됨

5. 원을 원하는 모양으로 회전시킨다.


6. 만약 원을 키우고 싶다면, 마우스로 늘리지 말고 scale 메뉴로 150%, 200% 이런 식으로 조절하면 딱 맞춰서 바뀐다.

   마우스 드레그로 늘리면 내가 설정한 비율이 깨져버림.

Comments