피그마로 커스텀 SVG 아이콘 생성하기
배경
원하는 아이콘은 하단에 DOUBLE CLICK 문구가 적힌 아이콘이었습니다. 하지만 무료로 제공되는 것은 글씨가 없는 것 뿐이었습니다. 그래서 직접 만들기로 했습니다
과정
1. 배경 제거하기
아이콘으로 쓰기 위해서는 이미지를 받았을 때 배경이 있는 이미지라면 배경을 제거해줘야 합니다.
단순한 이미지의 경우 아래 사이트에서 간단하게 제거할 수 있습니다.
https://www.iloveimg.com/ko/remove-background
이미지 배경 제거 기능
강력한 배경 제거 도구를 사용하여 온라인에서 이미지 배경을 제거하세요. 놀라운 정확성으로 원하지 않는 배경을 즉시 제거하는 이 AI 기반 도구로 편집 시간을 절약하세요.
www.iloveimg.com
2. svg로 변환하기
저는 svg 아이콘을 만들것이기 때문에 미리 svg로 변환해 줍니다.
아래 사이트에서 변환하면 간단하게 변환할 수 있습니다.
Convertio — 파일 변환기
300가지 이상의 포맷 지원 저희는 300가지 이상의 서로 다른 파일 포맷 간의 25600가지 이상의 서로 다른 변환을 지원합니다. 다른 어떤 변환기보다 많은 수입니다. 신속 및 간단 페이지에 간단히
convertio.co
3. figma 들어가서 작업하기
Figma: The Collaborative Interface Design Tool
Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.
www.figma.com
우선 위의 사이트로 들어가 줍니다.
회원가입을 해주고
new design file을 선택해서 만들거나 이미지를 해당 사이트에 드래그 해서 새 프로젝트를 시작해 줍니다.
그리고 아래 도구를 사용해 원하는 형태로 디자인 해줍니다.
그뒤 드래그 하여 두 객체 모두 선택해두고
Ctrl + g 를 눌러 그룹으로 만들어 줍니다.
마지막으로 우측의 사이드 바에서 색상 등 원하는 설정을 해주고 원하는 파일 형식을 선택할 뒤 내보내서 다운받으면 됩니다.
마무리
- 이 과정들을 거치면 간편하게 원하는 아이콘을 만들어서 사용할 수 있습니다.