브라우저 탭의 마스코트 나만의 favicon을 만들자

 

favicon은 주소창(인터넷 익스플로러의 경우)과 브라우저 탭에 붙는 작은 이미지를 말합니다. 아래 예제 이미지의 브라우저 탭 앞에 붙은 아이콘이 파비콘인데요….
처음에는 장식효과로 favicon을 주로 사용하였지만, 요즘은 그 작은 favicon이 사용자의 인지도를 높이는 효과가 있기에 너도나도 사용하게 되었답니다. 그래서 만약 일부러 favicon을 바꿔주지 않는다면, 내가 사용하고 있는 서버나 블로그 회사의 favicon이 자동으로 나오게 되어있구요.

favicon을 만들수 있도록 해주는 사이트는 여러곳이 있지만, 그 중에서 favicon.cc를 통해서 한 번 만들어 보겠습니다.

http://favicon.cc

위의 링크를 통해서 파비콘 만들기 사이트로 이동해 주세요.

오늘 만들 favicon은 코끼리 윗쪽에 붙어있는 벽시계로 만들어 볼 생각입니다.

편의를 위해서 파비콘 제너레이터를 크게, 그리고 모델이 되는 웹사이트를 작게 줄여서 창 2개를 나란히 띄워 주세요. 그래야 그림을 그리기가 쉽겠죠.

favi02

 

시작하기 전에, 도구들에 대해서 집고 넘어가자면요.
우측 Color Picker의 길게 뻗은 파렛트를 이용해서 대략의 색상을 선택하고 세부 색상은 넓은 사각형 모양의 파렛트에서 선택합니다.
파렛트 바로 아래에 투명도를 조절하는 도구가 있구요.
그 아래 내가 선택한 색상들이 자동으로 배열됩니다.
그 아래 “transparent”로 잘못된 부분을 지울 수 있구요.
그 아래 “pick existing color”를 채크하면 왼쪽 도화지에서 맘에 드는 색상을 선택할 수 있습니다.
그 아래 “move”는 왜 있는지 모르겠어요. 거의 필요 없슴다.

시계 테두리를 그려주기 위해서 짙은 갈색과 옅은 갈색으로 윤곽을 잡아줍니다.

favi03

 

파비콘을 만들면서, 상단의 “favicon.ico Generator” 브라우져 탭을 자주 채크해 주세요. 거의 실시간으로 내가 그린 모양이 현재 탭에 반영됩니다. 시계의 갈색 테두리가 완성되었으면 안쪽의 푸르스름한 부분을 표현해 주는데, 이때 투명도를 잘 이용하시면, 파스텔 효과를 줄 수 있을 뿐만 아니라 선이 부드러워집니다. “Transparency”를 지우개쪽으로 가져갈 수록 투명에 가깝게 됩니다.

favi05

 

내가 사용한 색상들이 6개 까지 남아 있지만, 그 이전 것을 사용하고 싶은 경우는 “스포이드”를 이용해서 왼쪽 도화지에서 원하는 색상을 추출하세요.

favi06

 

 

시계 가운데 부분을 거의 투명에 가까운 푸른색으로 채워 주고 시계 침을 그려 넣으니, 당당한 시계로 변신 *^^*

favi07

 

 

이제 스크롤바를 이래로 내려서 “Download Favicon”을 누르면 16×16픽셀의 favicon.ico가 내 컴퓨터 안에 저장됩니다.
서버를 사용하고 계신분들은 ftp 접속 하셔서 favicon.ico를 찾아서 덮어 씌우시면 되구요.
블로그를 이용하시는 분들은 “환경설정”등에 접속하시면 업로드 하는 곳이 있습니다.

약간의 연습이 필요하지만, 생각보다 쉽고 재미납니다. 한 번 시도해 보세요.

favi08

Comments

comments

You may also like