설치 프로그램 없이 웹브라우저 만으로 투명 파비콘(ico파일) 만들기

제 블로그에 대단히 많은 관심이 있으신 분이 아니면 모르겠지만 (생각해 보니 제 블로그에 대단히 많은 관심이 있을 사람은 저뿐이군요. ^^;) 얼마 전 블로그 아이콘과 파비콘을 배경 없이 깔끔하게 변경했습니다. 포토샵을 다루시는 분들에게는 별일 아니겠지만 배경 이미지 없이 투명하게 아이콘(ico)을 만드는 일이 저 같은 그래픽 툴 문외한에게는 쉽지 않은 일인 데다가 아이콘 만들겠다고 그 비싼 포토샵을 구매할 수는 없죠. 😓

그래서 별도 프로그램 없이 웹으로만 아이콘을 만들 수 있는 방법을 알려드릴게요.

 

먼저 작업을 할 이미지를 준비합니다. 전 위 이미지를 가지고 작업했습니다. 제가 직접 그린 이미지는 아니고 꽤 오래전부터 사용하고 있던 이미지인데 제작자가 누군지 모르겠어요. 먼저 위 이미지의 투명화(배경을 없애는) 작업을 해야 하는데 전 belitino 님의 블로그에서 도움을 받았습니다.

 

PIXLR EDITOR에 접속하고 컴퓨터로부터 이미지 열기를 클릭해서 작업하려는 이미지를 불러옵니다.

 

이미지를 불렀으면 왼쪽 메뉴에 붉은 상자로 표시해 둔 마술봉 도구를 클릭하세요.

 

그리고 투명화할 곳을 선택해 주세요. 제가 작업할 이미지의 경우 흰색 배경이 하나로 연결되어 있지 않고 나누어져 있기 때문에 여러 번 클릭을 하셔야 하는데 이때는 Shift 버튼을 누른 채로 클릭하시면 됩니다. 위 이미지에서는 우측에 큰 흰 배경 하나를 남겨두고 총 4군데를 선택한 모습입니다.

 

그럼 다시 모두 선택을 하고 메뉴의 편집 > 반전선택을 클릭하시면 위 이미지처럼 배경이 아닌 본 이미지가 선택이 됩니다.

 

그럼 여기서 메뉴의 파일 > 새 이미지를 선택하시면 나오는 팝업에서 클립보드로부터 이미지 생성과 투명을 체크해 주세요. 그리고 확인을 클릭하시면.

 

새로운 창이 뜨면서 흰색의 배경이 투명화된 이미지가 나타납니다.

 

그럼 메뉴의 파일 > 저장을 클릭하시고 형식을 PNG(투명, 완전한 품질)로 꼭 바꾸신 후 확인을 눌러 저장하세요.

 

※ 좌측: 원 이미지, 우측: 투명 작업이미지

그럼 이렇게 투명화가 된 이미지를 얻으실 수 있습니다. 여기까지만 하시면 투명 이미지로 티스토리의 아이콘 등록이 가능해졌습니다. 그런데 파비콘은 png 파일이 아닌 ico 파일로 변환을 해야 합니다.
이제 png -> ico 파일 변환을 해 보겠습니다.

 

FavIcon Generator 사이트로 접속합니다. 위 이미지의 번호순대로 파일 선택을 눌러 작업된 png 파일을 선택 후 Create Icon을 클릭하여 변환 작업을 실행합니다.

 

하단에 16X16 사이즈의 파비콘이 생성된 걸 확인할 수 있습니다. Download FavIcon 버튼을 클릭해서 다운로드하시면 ico로 변환된 파일을 얻고 미션 성공.

그냥 제 글 보고 하나씩 따라 하면 할 수 있도록 쉽게 쓴다고 노력했는데 읽으시는 분들은 어떠실지 모르겠네요. 설치 프로그램 없이 티스토리 블로그에 사용할 투명 아이콘과 파비콘 만들기는 여기까지고요.

여러분들이 공감과 댓글을 남겨주시면 공감은 저에게 많은 힘이 댓글은 저의 더 많은 포스팅 작성에 도움이 됩니다. 고맙습니다. ^^