티스토리 뷰

포토샵에서 폰트어썸 사용하기

웹이나 웹을 디자인작업 할 때 주로 포토샵을 이용하여 작업을 하게 되는데요, 다른건 몰라도 꼭 들어가는 디자인 요소가 바로 '아이콘'입니다. 작지만 중요하고, 간단해 보이지만 막상 디자인하려면 은근 어려운 녀석인데요. 일일이 모든 아이콘을 디자인하기엔 시간이 들기에 시간에 촉박한 디자이너들은 무료로 제공하는 아이콘 디자인 세트를 다운받아 사용하게 됩니다. 이 마저도 일일이 다운받아야 하고 용량은 더 차지하는 골치거리가 생기게 됩니다.  

웹폰트형식으로 아이콘을 제공하는 폰트어썸은 이러한 디자이너의 고충을 이미 파악을 하고 아이콘을 포토샵에서 폰트를 사용하는 것처럼 수월하게 이용할 수 있도록 서비스를 제공합니다.


폰트어썸의 아이콘들을 포토샵에서도 동일하게 사용하는 방법에 대해서 소개하겠습니다.


폰트어썸 홈페이지 접속해서 있는 ‘Download’ 눌러서 폰트 다운받기

 

– Font Awesome 사이트에 접속해서 Download 버튼을 클릭합니다.

 

– 팝업창이 뜨면 아래쪽 버튼을 눌러 폰트를 다운받습니다.

 


② 다운로드한 폰트 컴퓨터에 설치하기

 

– zip 파일을 풀고 폴더를 엽니다.

 

– 여러개의 폴더중에 fonts 폴더를 엽니다.

 

– 자신의 컴퓨터에 맞는 서체를 설치합니다. 저는 윈도우를 사용해서 트루타입을 설치하겠습니다.

 


③ 폰트어썸 사이트 접속해서 icon 탭으로 이동하기

 

– 폰트어썸 사이트에 접속해서 icon 탭을 눌러 페이지를 이동합니다.

 

– 원하는 icon 을 찾은 뒤 클릭합니다.

 

– 아이콘을 드래그해서 복사(ctl + C)합니다.

 


④ 포토샵에서 폰트어썸 사용하기

 

– 포토샵을 열어 새창을 연 뒤 아까 복사한 icon 을 붙여넣기(ctl + V) 합니다. ‘ㅁ’모양이 정상입니다.
    폰트는 아무거나 선택되어 있어도 상관없습니다.

 

– icon을 붙여넣기 한 뒤 폰트명을 FontAwesome 으로 변경해줍니다.
    폰트 크기와 색상을 원하는데로 변경해주세요.

– 포토샵에서 폰트어썸이 적용되었습니다. 일러스트에서도 이와 같은 방법으로 사용하면 됩니다. 



이렇게 아주 간단히 포토샵에서 폰트어썸의 아이콘폰트를 사용하는 방법을 알아보았습니다!


출처 : http://html5around.com/wordpress/tutorials/css-fontawsome/

Recent Comments