2009/02/25 16:26
파비콘 한번 만들어봤다. ico 파일을 만드는 방법은 여러가지가 있다. ico 저작툴을 사용해도 되고 인터넷에서 ico파일로 변환해주는 사이트도 있다. 일단 기본적으로 포토샵을 이용해서 파비콘 이미지를 만들다 보니 이왕이면 포토샵에서 한방에 해결할 수 있는 방법이 없을까 싶어 ico로 바로 저장할 수 방법을 찾다 보니... 딱 내가 원하는 플러그인을 찾을 수 있었다.
telegraphics라는 사이트(자세히 둘러보진 못했지만 개인 디자이너의 사이트 같다.)에서 이 플러그인을 GPL로 배포하고 있다. 해당 사이트에는 포토샵 CS 및 CS2를 지원하며 (CS4를 사용중인데 여기서도 잘 작동한다.) 페이트샵 프로에서도 지원한다. 또한 리눅스 소프트웨어인 GIMP에서도 지원하는듯 하다.
telegraphics 사이트에서 ICO Format 메뉴를 타고 들어가면 윈도우 버전으로 다운받을 수 있다. 다운받은 후 압축을 풀면 3개의 파일이 있다. GPL관련 문서랑 ReadMe 파일 그리고 해당 플러그인 파일(ICOFormat.8bi)이 그것이다. 플러그인 파일을 포토샵 플러그인 폴더(CS4의 경우... C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins) 안에 복사해 두고 나서 포토샵을 띄워보자. (이미 포토샵이 실행중이라면 닫고 다시 실행시키자.)
이제 파비콘을 만들기 위한 이미지 작업을 하고 나서 파비콘으로 저장해보자. 저장할때 뜨는 대화창에서 파일 형식을 살펴보면 아래 스크린샷과 같이 "ICO (Winddows Icon) (*.ICO)"라는 항목이 보일것이다.
이 항목이 보이지 않는다면 다음을 확인해보자.
위에서 굵은 글씨로 된 부분은 업로드한 폴더의 경로를 입력해주면 되겠다. 이제 사이트를 새로고침 해보면 우리가 만든 파비콘이 짜쟌~~~ 하고 보일것이다.
만약 새로고침 해도 뜨지 않는다면 브라우저의 임시 파일들을 삭제하고 새로 띄워보면 되겠다. Fin~
telegraphics라는 사이트(자세히 둘러보진 못했지만 개인 디자이너의 사이트 같다.)에서 이 플러그인을 GPL로 배포하고 있다. 해당 사이트에는 포토샵 CS 및 CS2를 지원하며 (CS4를 사용중인데 여기서도 잘 작동한다.) 페이트샵 프로에서도 지원한다. 또한 리눅스 소프트웨어인 GIMP에서도 지원하는듯 하다.
telegraphics 사이트에서 ICO Format 메뉴를 타고 들어가면 윈도우 버전으로 다운받을 수 있다. 다운받은 후 압축을 풀면 3개의 파일이 있다. GPL관련 문서랑 ReadMe 파일 그리고 해당 플러그인 파일(ICOFormat.8bi)이 그것이다. 플러그인 파일을 포토샵 플러그인 폴더(CS4의 경우... C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins) 안에 복사해 두고 나서 포토샵을 띄워보자. (이미 포토샵이 실행중이라면 닫고 다시 실행시키자.)
이제 파비콘을 만들기 위한 이미지 작업을 하고 나서 파비콘으로 저장해보자. 저장할때 뜨는 대화창에서 파일 형식을 살펴보면 아래 스크린샷과 같이 "ICO (Winddows Icon) (*.ICO)"라는 항목이 보일것이다.
이 항목이 보이지 않는다면 다음을 확인해보자.
- 포토샵 플러그인 폴더에 해당 플러그인이 제대로 복사가 되었는가?
- 이미지 크기가 너무 큰 것은 아닌가? (파비콘은 보통 16X16 사이즈이다. 플러그인 테스트 한다고 너무 큰 이미지를 사용하면 해당 항목이 표시되지 않는것 같다.)
이제 파비콘을 만들었으면 사이트에 등록해볼 차례다. 우선 특정 폴더에 파비콘을 업로드 한 다음 아래 코드를 <head>태그 사이에 삽입하자. (티스토리는 블로그 관리자 화면에서 "환경설정 > 블로그 정보" 메뉴의 아이콘 항목을 통해 바로 설정할 수 있다.)
<link rel="shortcut icon" href="/favicon.ico" />
위에서 굵은 글씨로 된 부분은 업로드한 폴더의 경로를 입력해주면 되겠다. 이제 사이트를 새로고침 해보면 우리가 만든 파비콘이 짜쟌~~~ 하고 보일것이다.
만약 새로고침 해도 뜨지 않는다면 브라우저의 임시 파일들을 삭제하고 새로 띄워보면 되겠다. Fin~
TAG favicon,
ICO Format,
파비콘,
포토샵
