본문 바로가기

기타/디지털

이미지를 아이콘으로(폰트로) 만들기

#0
예전에 찾아뒀다가 나중에 써먹어야지 했던 건데 이번에 유어오운핏 사이트 만들면서 적용해봤다. 어떻게 만드는 지에 대한 디테일한 건 언급하지 않고 그냥 정리 겸해서 적는다.

#1
JPG 만들기

일단 아이콘화할 JPG를 만든다. 나는 바탕이 흰 JPG랑 바탕이 투명한 PNG 두 개로 해봤는데, 바탕이 투명한 PNG로 하려면 일러스트로 작업한 경계선이 깔끔한 이미지를 사용하고 그게 아니면 바탕이 흰 JPG가 더 낫다. 가급적 파일명을 영문명으로 하길. 이 파일명이 기본적으로 폰트화시켰을 때 불러들이는 값이 됨.

#2
Convert to SVG

https://www.online-convert.com/

위 사이트에서 Image Converter 셀렉트 박스에서 Convert to SVG 선택. 다음 화면에서 변환하려는 JPG 파일 업로드. 다른 옵션 별도로 조정할 필요까지는 없고 아래에 Convert file 클릭. SVG 다운로드.

#3
이미지 폰트화

https://app.fontastic.me

위 사이트 접속. 회원 가입 안 되어 있으면 회원 가입. 새로운 아이콘 생성을 위해 SVG 파일 불러들이기.(초기 화면 어디서 하는지 기억 안남. 찾아보기 바람.) 이미지가 10개면 10개의 SVG 파일을 불러들어야 한다. 단 한 번에 불러올 수 있다. SELECT에서 폰트로 만들 이미지 선택. CUSTOMIZE에서 각 이미지 폰트를 명명해준다. 기본적으로 파일명으로 셋팅됨. PUBLISH에서 DOWNLOAD. 이미지 폰트와 함께 css 다운받게 된다. 

#4
나머지는 알아서. 질문은 받지 않음.