반응형

맥 아이콘 추출과 만들기, 변경까지 아이콘에 관한 내용 총망라

반응형
728x170

제 OS X 버전은 엘 캐피탄(El Capitan) 버전 10.11.1입니다.


저는 앱에 관한 포스팅을 할때는 글과 함께 항상 아이콘 이미지 파일을 같이 사용하고 있습니다. 글로만 설명드리는것보다 시각적으로 봤을때 더 이해하기도 쉽고 구분도 잘되기 때문인데요. 


저와 같이 아이콘 파일의 추출은 블로그 포스팅 용도뿐만 아니라, 프레젠테이션을 위한 문서를 만들때 사용을 하시던지 자신의 맥을 나만의 맥으로 꾸미고 싶으실때 사용하실 수 있습니다.  


앱 아이콘을 얻을 수 있는 방법은 여러가지가 있지만 그 중에서 간단하고 쉽게 접근할 수 있는 몇가지 방법에 대해서 적어보려고 합니다. 


이번 포스팅 에서는 공을 많이 들인 만큼 기존의 아이콘 추출에서부터 아이콘 직접 만들기iOS 아이콘 추출어플의 아이콘 변경하기 까지 아이콘 변경에 관한 사항을 총 망라한 포스팅입니다. 



이 포스팅의 전체적 내용 ▼


  기존의 아이콘 가져오기(만들어진 아이콘 추출하기)


■ 직접 저장

앱 스토어에서 아이콘 추출하기

▶ 앱 제작사 사이트 방문 (앱스토에 없는 어플)


■ 정보 가져오기를 통한 방법(정보창을 이용한 방법)

● 클립보드에 저장 A

아이폰, 아이패드 등 iOS 앱의 아이콘을 추출하는 방법 (아이튠즈 보관함 이용) 

● 클립보드에 저장 B

● 클립보드에 저장 C

             

▶ 미리보기 앱으로 추출하는 방법.  

▶ 사진 편집 앱에 붙여넣기 후 이미지 파일로 저장하는 방법. 


■ 미리보기를 이용한 방법



  커스텀 아이콘 만들기 (아이콘 직접 만들기)

● Kakumaru Punch (무료)

● Icns Builder (무료)



  아이콘 변경하기



  기존의 아이콘 가져오기(만들어진 아이콘 추출하기)


직접 저장


앱 스토어에서 아이콘 추출하기


앱 스토어에서 아이콘을 클릭한채 

드래그하여 데스크톱으로 끌어다 놓으면 png 포맷으로 저장이 됩니다. 




앱 제작사 사이트 방문 (앱스토어에 없는 어플)


앱스토어에 등록되어 있지 않은 어플의 아이콘을 저장하기 위한 방법이며 

앱 제작사의 사이트를 방문하여 아이콘을 클릭한채로 드래그하여 저장을 합니다. 





정보 가져오기를 통한 방법(정보창을 이용한 방법)


클립보드에 저장 A (아이튠즈 보관함 이용)

클립보드에 저장 B

클립보드에 저장 C

               

▶ 미리보기 앱으로 추출하는 방법.  

▶ 사진 편집 앱에 붙여넣기 후 이미지 파일로 저장하는 방법. 


이에 관한 설명은 아래글부터 쭈욱 나와있습니다. 



클립보드에 저장 A

아이폰, 아이패드 등 iOS 앱의 아이콘을 추출하는 방법 (아이튠즈 보관함 이용)



아이콘을 추출할 앱을 선택합니다. 

마우스 우클릭을 하고 정보 가져오기를 선택하거나,

 command + i 를 눌러 정보 창을 엽니다. 





 정보 창 왼쪽 상단에 위치하고 있는 아이콘을 클릭하여 선택해 준 후 

command + C 를 눌러 클립보드에 복사해 줍니다. 





클립보드에 저장  B


파인더 창에서 응용 프로그램 폴더로 이동을 하여 

아이콘을 추출하고자 하는 앱을 선택한 후 command + C 를 눌러줍니다. 


클립보드에 저장  C


파인더 창에서 응용 프로그램 폴더로 이동하여 아이콘을 추출할 앱을 클릭하여 선택한 후,

 우클릭을 하여 [정보 가져오기]를 눌러주거나 command + i 를 눌러 정보창을 열어줍니다.




정보창에서 좌측 상단의 아이콘을 클릭하여 선택을 해준 후 

command + C 를 눌러 클립보드에 복사를 해줍니다. 

여기까지는 파일 생성전에 클립보드에 저장을 하는 3가지 방법입니다. 






위 A, B, C 방법으로 저장된 클립보드 내용을 다음과 같이 2가지 방법으로 파일을 생성합니다.


1. 미리보기 앱을 통해

2. 포토샵과 같은 사진 편집 앱을 통해



▶ 미리보기 앱으로 추출하는 방법.  


미리보기 앱을 실행한 후 메뉴 막대에서 [파일] → [클립보드에서 신규] 

또는 단축키 command + N을 눌러줍니다. ▼




다음과 같이 앱에 포함된 파일들은 제외하고 아이콘만 미리보기 응용 프로그램에서 불러오게 됩니다. 

사이즈가 클 경우 미리보기 메뉴 막대에서 [도구] → [크기 조절] 을 선택하여 크기 조절이 가능합니다. 




크기 조절을 한 후 승인을 눌러줍니다. 




크기 조절이 완료된 아이콘을 선택한 후 미리보기 창 화면 밖으로 드래그 해줍니다. 




다음과 같이 tiff 형식의 파일로 바탕화면에 저장이 된 것을 볼 수 있습니다. 

이 파일형식으로도 아이콘 변경이 가능하지만 png파일로 바꿔보도록 하겠습니다. 




위에서 저장한 tiff 이미지 파일을 더블클릭하여 미리보기로 열어줍니다. 




미리보기 메뉴 막대에서 [파일] → [보내기]를 선택합니다. 




포맷 형식을 PNG로 선택한 후 저장을 눌러줍니다. 




파일이 PNG 형식으로 저장이 되었습니다. 

PNG 포맷의 경우 용량이 커지게 되지만 

배경을 투명하게 할 수 있기 때문에  블로그등에 삽입하기에 적합한 형식입니다.  


 다양한 이미지 포맷에 대한 비교와 자세한 설명은 제 이전 포스팅

맥화면캡쳐 하는방법(스크린샷 하는 방법, 파일변경 방법) ◀ 를 참고해주시기 바랍니다. 




사진 편집 앱에 붙여넣기 후 이미지 파일로 저장하는 방법. 


포토샵을 실행합니다. 

포토샵 메뉴 막대에서 [파일] → [새로 만들기]를 선택합니다. 





사이즈는 클립보드에 저장된 이미지의 크기대로 자동으로 폭, 넓이가 산정되기 때문에 

확인만 누르시면 됩니다.  ▼ 




캔버스에서 command + V를 눌러 붙여넣기를 합니다. 





원하는 사이즈로 리사이즈를 하기 위해서 

 포토샵 메뉴 막대에서 [이미지] → [이미지 크기]를 선택합니다. 




이미지 크기 조절 창이 뜨면 사이즈를 입력하고 확인을 누릅니다. 

저는 512*512 픽셀로 이미지 크기를 조절하였습니다. ▼



사이즈 조절 후 

포토샵 메뉴 막대에서 [파일] → [내보내기] → [PNG으(로) 빠른 내보내기] 를 누릅니다. 





"다음 이름으로 저장" 창이 나타나면 파일명을 입력하고 저장을 눌러줍니다. 






■ 미리보기를 이용한 방법


 독 막대의 미리보기에 아이콘을 추출한 어플을 드래그하여 끌어다 놓습니다. 

저는 데본씽크 앱을 예로 해보겠습니다. 




데본씽크 어플 속에 있는 모든 잡다한 리소스들이 미리보기 축소판 보기로 나타납니다. 스크롤을 내려 대표 아이콘을 찾아줍니다. 쭉 내려가다보면 icns 확장자가 붙은 대표 아이콘을 찾을 수 있습니다. 대표 아이콘은 하나 이상의 여러 이미지 파일로 구성되어 있는 icns  포맷으로 되어 있습니다. 

파일 이름 왼쪽에 있는 삼각형 모양의 그림을 누르면 

icns 패키지 안에 있는 모든 이미지 파일들이 표시가 됩니다. 1024, 512, 256 픽셀등으로 사이즈가 나뉘어져 있는데 그중에서 선택을 한 후,  

드래그를 하여 미리보기 창 밖으로 끌어다 놓으면 tiff 포맷으로 저장이 됩니다. 


 



icns, tiff 포맷 형식말고 블로그에서 대중적으로 사용하고 있는 png 포맷으로 저장하기 위해

저장할 아이콘을 선택하고 우클릭을 해줍니다. 

그 후 나타나는 창에서 [다음으로 보내기]항목을 선택합니다. 



다음과 같은 창이 나타나는데 포맷 형식을 고르고 저장을 누르면 됩니다. 



이때 한가지 팁은 포맷 형식을 고를때 option 키를 누른 상태에서

포맷 메뉴를 선택하면 다음과 같이 GIF, BMP, 포토샵, TGA 등 

이미지 포맷의 개수가 19개로 늘어나게 됩니다. 

 


위와 같이  "다음으로 보내기" 를 통해 파일 포맷을 고르고 저장을 누르게 되면 

아래와 같이 여러 포맷형식의 이미지 파일을 저장할 수 있습니다. 




아이콘도 지식재산권과 관련이 있으므로, 상업적인 이용은 권리자의 승낙이나 동의가 없는 이상 절대 불가함을 알려드립니다. 




  커스텀 아이콘 만들기 (아이콘 직접 만들기)



이번에는 제작사가 만든 아이콘이 아니라 사용자가 직접 만드는 커스텀 아이콘에 대해서 적어보겠습니다. 


주로 아이콘 이미지 파일 형식의 사이즈는 

소형 (160*160px)

중형 (512*512px)

대형 (1024p*1024px)

3가지로 생각을 해볼수 있습니다. 


저는 코코  사진으로 한번 만들어 보겠습니다. 





사진은 포토스케이프나 포토샵과 같은 이미지 편집 프로그램을 통해 적당한 위치를 잘라내고 사이즈 조절을 해줍니다. 저는 512*512 픽셀의 크기로 조절을 해주었습니다. 그러나 보시다시피 노란색으로 표시한 부분처럼 각 모서리 부분이 둥글게 되어 있어야 하는데 그렇지 못합니다. 





이럴때 필요한 어플이  바로 이 어플입니다. 


Kakumaru Punch (무료)


모서리를 둥글게 처리하기 위해 'Kakumaru Punch'라는 앱입니다. 포토샵을 이용해서도 할수 있지만 , 직관적이고 초보자도 쉽게 바꿀수 있는 이런 용도의 앱들이 사용하기 편리합니다.  


Kakumaru Punch 앱을 실행한 후 모서리를 둥글게 처리할 이미지를 드래그 하여 줍니다. 

이 앱을 사용하기전에 아이콘을 만드려는 파일이 JPG 포맷일경우 

포토스케이프나 포토샵, 미리보기 등을 이용하여 JPG형식을  PNG 포맷으로 바꿔줍니다. 




이미지 파일을 드래그해 준 후의  Kakumaru Punch 앱의 화면입니다.  

아래의 숫자는 모서리 둥근 정도를 나타내는데 

여러번 해본결과 45가 제일 적당한 사이즈 인거 같습니다. 조절을 해준 후 저장을 눌러줍니다. 

저장을 하면 모서리 남은 부분을 투명하게 처리해주는 PNG 확장자 파일로 저장이 됩니다. ▼




변경 전 



변경 후 





Icns Builder (무료)


해상도가 높은 이미지를 넣어주면 16x16 픽셀에서부터 1024x1024 픽셀의 아이콘을 사이즈 별로 만들어주는 아이콘 생성 어플입니다. 아이콘을 만들 때 Mac OS∙iOS∙Android 중에서 어떤 플랫폼을 선택하느냐에 따라 해상도 규격을 자동으로 맞춰줍니다. 




플랫폼 뿐만이 아니라 xcAsset와 icns 방식도 선택이 가능한데 두가지의 차이점은 아래와 같습니다. 

Save xcAsset 선택시 다음과 같이 다양한 사이즈의 아이콘 파일들이 생성이 됩니다. 


Save icns 선택시 하나의 icns 포맷의 파일이 생성됩니다. 



  아이콘 변경하기


새로 만들었거나 저장한 아이콘을 미리보기 앱을 통해서 열어줍니다. 





command + A 키를 눌러 아이콘 이미지 전체를 선택하고 

command + C 를 눌러 클립보드에 복사합니다. 




그리고 아이콘을 바꿀 어플의 정보 창을 열어줍니다. (앱 선택 후 마우스 우클릭을 하여 정보 가져오기를 누르거나, command + i 를 눌러줍니다.) 

 


저는 오토메이터로 만든 "모든 응용프로그램 한번에 종료하기 앱"을 선택하였습니다. 

이 앱을 만드는 방법에 대해서는 다음에 포스팅해 보겠습니다. 



아이콘을 바꿀 앱의 정보 창이 열리게 되면 

아이콘을 클릭하여 선택 후 command + V 키로 붙여 넣으면 완료입니다.  


다음과 같이 앱의 아이콘이 바뀌어 있습니다. 

변경된 아이콘을 원래대로 돌려놓고 싶으시면

아래의 정보창에서 좌측 상단 아이콘을 클릭한후 

delete 키를 눌러주면 원래의 아이콘으로 돌아옵니다. 




자기만의 맥을 꾸미길 원하시는 분들께서는  

한번쯤은 멋드러진 아이콘 제작을 해보시는것은 어떻신가요? 





참조



Kakumaru Punch for Mac - Sheepapp ◀ 링크


Icns Builder ◀ 링크


반응형
그리드형

이 글을 공유하기

댓글