티스토리 파비콘 설정과 ico 파일 만들기
오늘은 티스토리 블로그에 아이콘(icon)과 파비콘(favicon)을 설정하는 방법을 알아보겠습니다. 그리고 포토샵을 이용해서 아이콘 만들기를 직접 시도해보았는데 그 과정을 소개하겠습니다.
티스토리 블로그에 아이콘을 등록하기 위해서는 확장자가 JPG, PNG, GIF 으로 된 파일형식이어야 합니다. 그리고 파비콘을 설정하려면 ICO 파일이 있어야 합니다. 여기서 파비콘(favicon)은 Favorite 와 Icon의 합성어로 즐겨찾기에 추가되었거나, 열려있는 웹 페이지 이름 앞에 나오는 작은 그림을 말합니다. 그리고 ICO 파일은 아이콘 파일형식으로 여러분의 PC 바탕화면에 놓여있는 '바로가기' 등의 파일에 그림을 넣어주는 역할을 담당합니다. 그리고 주의할 점은 파일형식만 바꾸었다고 해서 이미지가 잘 노출되는 것은 아닙니다. 파비콘의 경우 이미지 크기가 너무 크면, 그림이 보이지 않게 됩니다. 직접 해보겠습니다.
<이번 포스팅에서 알 수 있는 것>
1. 일반 이미지를 ICO 파일로 변환하기
2. 티스토리 블로그에 아이콘과 파비콘 등록하기
3. 포토샵으로 간단한 아이콘 파일 만들기
1. ICO파일 만들기
사용하고 싶은 JPEG, GIF, PNG 형식의 파일이 있어야 합니다. 아직 없는 경우는 포스팅 하단 3번에 포토샵으로 아이콘 만드는 방법을 설명하였으니 참고해주세요.
우선 GenFavicon 에 접속하게 되면 위와 같은 화면을 볼 수 있습니다. png를 ico로 변환하는 사이트중 가장 심플하고 수행능력이 좋다고 생각하는 곳 입니다. 그리고 아래의 작업들을 차례로 진행합니다.
첫 번째로 '파일 선택'을 눌러서 변환할 파일을 불러옵니다. 파일크기 맥시멈은 4MB 입니다. 그리고 하단에 있는 Upload Image 버튼을 눌러주세요.
파일 업로드를 하시면 이미지의 여백을 설정하는 자르기 화면이 출력됩니다. 파비콘은 웹 상에서 아주 작은 그림으로 보여지기 때문에 중심이 되는 사물에 최대한 꽉 차도록 잘라주세요.
두 번째로 변환할 ICO 파일의 크기를 고르는 화면입니다. 가로 세로 32*32 사이즈로 선택해 주세요. 그리고 하단에 있는 Capture & Preview 버튼을 클릭합니다.
클릭하면, 위 사진과 같이 미리보기 화면이 나옵니다. 실제 웹에서 사용할 경우 이렇게 작은 사이즈로 출력됩니다. 여기서 다운 받는 버튼이 두 개인데, 앞에 있는 Download Favicon 버튼을 누릅니다. 그럼 ICO 파일로 저장이 될 것 입니다.
2. 티스토리에 아이콘, 파비콘 설정하기
처음에 설명한대로 아이콘은 JPG, PNG, GIF 파일이 필요하고, 파비콘은 ICO 파일이 있어야 합니다. 각 파일이 준비되었다면 블로그 관리모드로 들어가 봅시다.
왼쪽 하단에 환경설정 중 기본정보를 누릅니다.
기본정보로 들어가면 화면 중앙에 아이콘, 파비콘 설정화면이 나옵니다. 준비한 파일을 각각 첨부합니다. 첨부가 끝났으면 반드시 '저장' 버튼을 누르셔야 합니다.
저장을 한 후, 웹 페이지 창을 완전히 닫고 다시 열면 위와 같이 파비콘이 등록된 것을 확인 할 수 있습니다. 보통은 위의 작업까지만 하면 그림이 잘 출력되는데 만약 안 된다면 아래작업을 추가로 해주세요.
HTML/CSS 의 파일업로드 화면으로 이동합니다. 그리고 아까 변환한 ICO 파일을 추가 합니다. 반드시 파일명을 'favicon'으로 업로드해야 합니다. 파일목록에 <images/favicon.ico> 으로 등록되었는지 확인해 주세요.
그리고 HTML로 들어가서 찾기(컨트롤+F)로 /head 를 검색합니다. 바로 위에 보라색 소스를 삽입해 줍니다. 그럼 파비콘이 잘 나올 것 입니다.
3. 포토샵으로 아이콘 만들기
원래는 파비콘 설정하는 방법만 쓸려고 했는데, 아이콘 파일을 직접 만들어 올리는게 생각보다 재밌는 것 같아서 같이 소개합니다.
현재 지식전당포 웹 페이지의 파비콘과 아이콘은 이렇게 만들었습니다. 포토샵 CS5로 작업했고 저 같은 초보도 할 수 있는 쉬운 작업이었습니다.
전체화면으로 보면 버튼이 잘 보일 줄 알았는데 잘 안보이네요. 아래 순서를 참고해 주세요.
포토샵을 실행하여 '글 상자' 또는 '도형'으로 마음에 드는 기본 문양을 그립니다.
photoshop 우측 하단에 있는 레이어 화면에서 방금 만든 글상자를 더블클릭 해봅니다.
레이어 스타일을 설정하는 화면이 나오는데, 여기서 어떻게 설정하느냐에 따라 자기만의 개성있는 아이콘을 만들 수 있습니다. 저는 우선 <획>에 체크표시하고 편집했습니다.
<획>의 기본설정은 '색상'으로 되어있는데 그레이디언트가 더 멋있는 것 같아 이것으로 변경했습니다. 그리고 획 크기도 10px 로 늘렸습니다.
그리고 <그레이디언트> 에서 작은 삼각형 버튼을 누르면 다양한 문양을 선택할 수 있습니다. 저는 '파스텔'이 멋진 것 같아 이것으로 선택했습니다.
획 설정을 변경했으면 일단 확인을 누릅니다. 지금까지는 문양의 테두리만 꾸몄기 때문에 이제는 문양의 내부에 '잘 어울리는 색상'을 넣겠습니다. 포토샵 우측에 있는 문자 박스에서 <색상>이라고 적힌 컬러를 클릭합니다.
색상 선택창이 나오게 됩니다. 아무 색상이나 선택해도 상관없지만 이미지에서 인접한 컬러와 유사한 채도 또는 명도로 선택하면 세련된 이미지를 생산할 수 있습니다.
따라서 포토샵 왼쪽 도구에서 <색 추출>을 선택합니다. 그리고 획에 있는 색을 추출하여 비슷한 명도로 조절한 후 확인을 누릅니다.
다시 레이어 스타일로 들어가서 이번에는 <패턴 오버레이>를 설정해봅니다. 저는 자갈 패턴이 마음에 드네요.
제법 보기좋은 그림이 완성되었습니다. 파비콘 여백이 흰색이면 너무 흔한 것 같아 검은 색으로 바꿔보겠습니다.
완성되었습니다. 친환경 블로그의 아이콘으로 사용하면 괜찮을 것 같습니다.
마음에 드는 사진과 그림은 보통 저작권 때문에 블로그 아이콘으로 사용하기 어려운 점도 있고 블로그에 대한 애착이 많이 생기니 로고를 직접 만들어 보기로 했습니다. 아직 아이콘, 파비콘 설정 안하신 분들 오늘 한번 만들어보세요.
