[웹인] Google 사이트 도구 (21) - 투명 배경의 favicon 이미지 만들기

본 게시물에서는 투명한 배경의 favicon 이미지를 만드는 방법에 대해 알아보자.

[파비콘(favicon)]이란 Favorites와 Icon의 합성어로 인터넷 웹 브라우저의 주소창이나 탭에 표시되는 웹 사이트나 웹 페이지를 대표하는 아이콘이다. 우리가 제작 중인 사이트에 파비콘을 등록하기에 앞서 파비콘 이미지를 먼저 만들어보자.

본 게시물에서는 배경이 투명한 파비콘을 만들어본다. 먼저 투명한 배경의 PNG 그림 파일을 만들고 크기를 조정하여 파비콘을 제작하는 단계로 진행한다. 이를 위해서는 이미지 편집 도구를 활용해야 하는데 포토샵 등은 다루기가 어렵고 부담스러울 수 있으니 웹 상에서 사진 보정을 하거나 간단한 이미지를 만들 수 있는 [픽슬러(Pixlr)] 사이트를 이용하고자 한다. 브라우저를 실행하고 [http://pixlr.com/editor/]에 접속한 후 [새 이미지 생성]을 누른다.

[새 이미지] 창이 나타나면 [투명]에 체크하고 [확인] 버튼을 누른다.

그러면 투명 레이어가 생성된다. 이 레이어로 편집하고자 하는 이미지를 불러오기 위해 [레이어]-[이미지를 레이어로 열기]를 누른다.

[열기] 창에서 'UI.png'를 선택한 후 [열기] 버튼을 누른다. 'UI.png'는 본 게시물의 하단에 첨부되어 있다.

'UI.png'가 아래 그림과 같이 투명 레이어 안에 놓여진다.

왼쪽의 도구창에 있는 [자르기 도구] 버튼을 누르고 'UI.png' 영역을 선택하고 마우스를 클릭한다.

메시지 창이 나타나면 [예] 버튼을 누른다.

그러면 아래 그림과 같이 'UI.png' 영역만 남게 된다. 이어서 도구창에 있는 [마술봉 도구]를 선택하고 'UI.png' 영역의 배경을 클릭한다. [Delete] 키를 눌러 선택한 배경을 삭제한다. 

그러면 아래 그림과 같이 배경이 지워지며 뒤에 있던 투명 레이어 영역이 나타난다.

파비콘 이미지는 보통 16 x 16 픽셀 또는 32 x 32 픽셀 크기를 사용한다. 파비콘 이미지 크기로 조정하기 위해 [이미지]-[이미지 크기]를 누른다.

[강제 비율]에 체크를 풀고 [넓이], [높이] 모두 32 픽셀로 한 후 [확인] 버튼을 누른다.

이미지 크기가 아래 그림과 같이 32 x 32 픽셀 크기로 작아진다.

지금까지 편집한 이미지를 저장하기 위해 [파일]-[저장]을 누른다.

[이름]을 'favicon', [형식]을 'PNG (투명, 완전한 품질)'로 한 후 [확인] 버튼을 누른다.

그러면 폴더에 아래 그림과 같이 32 x 32 픽셀 크기의 PNG 파일이 저장된다.

이 파일의 확장자를 ico로 수정한다. [Google 사이트 도구]에서는 반드시 'favicon.ico'로 파일명이 되어야만 파비콘으로 동작하게 된다.

※ 첨부 파일 (마우스 오른쪽 버튼을 눌러 다운받는다.)