프로젝트 진행할 때 움직이는 일러스트 디자인 통해 생동감 있게 보여주고 싶을 때 유용하게 사용할 수 있는 웹서비스 제공해주는 'Designstripe' 알아보았습니다
정적인 일러스트에 생동감을 더해주는 Designstripe
'Designstripe'는 움직임 없는 일러스트 디자인 파일을 간편하게 움직이는 일러스트 디자인 파일로 생성해주는 웹사이트로 애니메이션이 포함된 파일로 직접 편집하거나 움직임 없는 일러스트 파일을 다른 스타일로 편집할 수 있는 다양한 편집 기능을 제공해주는 웹서비스입니다.
Designstripe 주요 기능 살펴보기
이 웹사이트 도구 활용하는 방법으로 세 가지인데요 하나는 웹사이트에서 샘플로 제공하는 파일을 활용하는 방법, 그리고 자신 보유하고 있는 일러스트 파일을 직접 등록하는 방법 마지막으로 Designstripe 내에 제공되는 편집 기능을 통해 일러스트 편집 기능을 활용해 제작 후 등록하는 방법입니다
① 보유한 SVG 파일 직접 등록 후 애니메이션 추가 및 편집 기능
내가 보유한 일러스 파일 등록 후 애니메이션 기능 선택한 경우 애니메이션 실시간으로 확인할 수 있는 속도 기능, 스타일 선택할 수 있는 도구, 색상 스타일 편집 도구 기능들을 제공하여 내가 보유한 일러스트 파일을 자유롭게 편집할 수 있습니다
애니에이션 적용된 SVG 파일은 2가지 포맷으로 다운로드할 수 있습니다 하는 GIF 파일 또 다른 하나는 Lottie 파일인데요 이 파일은 움직이는 애니메이션에 대한 데이터 값을 JSON 형식으로 출력해서 실제 코드로 웹과 앱을 적용되게 해주는 기술입니다.
② Designstripe 내에 무료 일러스트 제공 애니메이션 추가 편집 기능
Designstripe 웹사이트 내에서 무료 일러스트 템플릿 제공하고 있습니다 만약 내가 보유하고 있지 일러스트 파일 없다면 이 웹사이트 네에서 제공되는 무료 일러스트 활용하여 애니메이션 추가부터 다양한 스타일 편집 기능을 활용할 수 있습니다
무료 제공되는 일러스트 로그인이나 회원가입 등 별도 과정 없이 내가 선택한 일러스트 템플릿을 편집할 수 있습니다. 다운로드 시 PNG, JPG 파일로 무료 다운로드 가능하면 만약 다른 파일 SVG 파일로 다운로드할 경우에는 이 웹사이트 회원가입 후 이용하실 수 있습니다. [Designstripe 바로가기]
'디자인 Tool' 카테고리의 다른 글
IT 디자인 주목하는 UI UX 디자인 툴 피그마(Figma) 알아보기 (0) | 2023.01.30 |
---|---|
웹플로우(Webflow) 포트폴리오 반응형 웹사이트 제작 노코드 툴 (0) | 2022.12.08 |
무료 영상 편집 프로그램 다빈치 리졸브 18 새로운 기능 및 다운로드 방법 (0) | 2022.10.06 |
TinyPNG 활용해 간편하게 사진 용량 줄이기 방법 (0) | 2022.10.03 |
간편하게 무료 로고 제작 사이트 Hatchful 사용법 (0) | 2022.09.28 |
댓글