본문 바로가기

Works/iOS

MV5 아이폰 템플릿 활용해서 아이콘 제작하기

필요한 준비물: i - funbox , Photoshop cs 버전이상 

 


MV5 테마안에 동봉된 icon template 폴더에 들어갑니다.



그 안에보시면 icon@2x.psd 파일이 있습니다.



그것을 열어줍니다. 



포토샵이 실행되는동안 해당어플의 경로를 찾아보겠습니다. 아이펀박스를 켜고 사용자 어플리케이션으로 들어갑니다.



아이콘을 만들고 싶은 어플의 폴더로 들어갑니다. 저는 구글검색을 하겠습니다.



어플리케이션폴더안의 .app 확장자가 붙은 폴더 안으로 들어갑니다.



아이콘 파일을 찾습니다. 대부분 icon@2x.png 이거나, Icon@2x.png 입니다. 

 

아이폰은 대소문자를 구분하므로 파일이름의 대소문자가 매우중요합니다.



해당아이콘을 적절한 폴더에 복사합니다.



아이폰을 넣을 경로를 찾기 위해서는 info.plist 파일안에 정보가 필요합니다. 

 

더블 클릭해서 열었을때 연결프로그램창이 뜨신다면 메모장을 선택해주세요



파일을 열면 대충이런 모습입니다. 외계어가 마구 써져있지만 별거 아니니까 겁먹지 마시구요.



여기 CFBundleIdentifier 줄을 찾습니다. (찾기가 힘들때는 ctrl + F를 누르신뒤 'identi' 만 검색하시면 바로 찾아집니다.)



그리고 해당 key를 찾으셨으면 그 뒤에 있는 strings가 파일경로 입니다. 지금 같은 경우에는 com,google.GoogleMobile 이군요.



그 부분을 복사한뒤 해당테마에 Bundles 폴더에가서 새폴더를 만들고 이름을 붙여넣습니다. 



해당 어플의 아이콘폴더가 만들어 졌습니다. 비단 아이콘뿐만 아니라 어플 안의 다른 이미지를 바꾸고 싶을때 저 폴더 안에 넣으면 윈터보드에서 자동으로 적용이 됩니다. 



이제 포토샵으로 돌아가 봅시다. 아이콘을 포토샵 화면에 드레그 앤 드롭을 시키면 파일이 자동으로 열리며  

 

이동툴(V)를 누르시고 아이콘 템플릿 파일 위에 얹어 놓습니다.  (아니면 레이어 목록에서 마우스로 끌어다 놓으셔도 됩니다.)



그러면 파일이 붙여 넣어지게 됩니다. 



이동툴(v)로 위치를 맞게 조정해 주세요. 



그 다음 자동선택도구(W)를 선택하신뒤 G 글자를 선택합니다. 



사진을 잘못 잘라서 안보이는데 (ㅠㅠ) 상단 바에 보시면 가장자리 다듬기라고 있습니다.  그걸 눌러주세요



그러면 화면이 이렇게 바뀌면서 선택영역의 날카로운 모서리르 다듬을수 있습니다. 

 


해당 슬라이더를 이리저리 움직이시면서 최적의 값을 찾아주세요



최적의 값을 찾았으면 확인을 눌러줍니다. 그 상태에서 ctrl + C 그리고 ctrl + V를 해줍니다.


그러면 새로운 레이어가 생성되게 되며 글자만 복사가 됩니다. 이전에 썼던 아이콘 레이어 (여기서는 레이어22)를 꺼버립니다. (왼쪽에 눈모양을 누르시면 꺼집니다.)



템플릿 위쪽에 보시면 제가 이전에 만들어놓은 아이콘들이 있는데 거기다 오른쪽 마우스를 누르시고 '레이어 스타일 복사'를 누릅니다. 



그리고 아까 만들어 놓았던 G 글자만 따놓은 레이어에 대고 '레이어 스타일 붙여 넣기'를 누릅니다. 



그러면 아이콘이 테마에 맞는 아이콘 스타일과 비슷하게 바뀌게 됩니다. 



모서리가 지저분한것을 없애기 위해서 날카로운 부분을 지우개(E)로 다 지워 줍니다. (별다른 방법은 없고 오직 노가다 뿐입니다.)



그 다음 글자 레이어가 아니라 배경 아이콘 레이어를 선택한뒤(저는 초록색 아이콘을 활용하겠습니다.) 

 

색조/체도(ctrl + U)를 엽니다. 



슬라이더를 이리저리 움직이면서 원본아이콘과 비슷한 색으로 맞춰줍니다. 



아이콘이 완성 되었습니다. 



하지만 이렇게 만들어진 아이콘은 시스템 아이콘 전용입니다. 크기가 118X120이죠. 


이상태로 넣으면 마스크 크기보다 커져서 비율이 줄어들면서 검은테두리가 생기게 됩니다. 



그래서 아까 불러내었던 원본 아이콘 파일을 활용합니다. 이 파일은 크기가 114x114 입니다. 

 


이 파일에 대고 방금 만든 아이콘 글자와 배경 레이어를 레이어 툴에서 선택을 한뒤 마우스로 끌어서 



마우스로 끌어서 원본 아이콘위에 놓습니다. 



그러면 만든 아이콘 이미지가 복사가 되고 위치를 적당히 맞추신뒤 



원본 레이어를 꺼버리시고 파일을 저장하시면 됩니다. 

 

(이 상태에서 바로 저장을 하면 파일이름이 원본하고 같아지기 때문에 여러 아이콘을 만들때 햇갈리는 일이 없습니다. )



아이콘을 저장합니다. 

 


완성된 파일을 끌어다가 아이펀박스 해당폴더에 넣습니다. 

 


해당폴더에 잘 들어갔는지 확인을 해주시고 윈터보드에서 리스프링을 합니다. 


  • 변경전

  • 변경후