포토샵에서 아이콘 만들어 내 블로그 즐겨찾기 아이콘으로 설정하기

제목이 너무 기네요.
꼭 블로그가 아니고 운영하고 계신 사이트에도 거의 동일한 방법으로 사이트 아이콘을 만들 수 있습니다.합니다.
웹 관련 일 하시는 분이시면 이미 제작법을 알고 계시거나 아래의 글을 읽으면 빠르게 이해하실 껍니다.


자 오늘은 포토샵에서 아이콘을 만들어 봅시다.

준비물 : 재료는 포토샵, 포토샵에서 아이콘 파일을 만들수 있게하는 플러그인, 그리고 이게 끝인가? 하~!


1. 포토샵에 플러그인 설치하기
포토샵은 기본적으로 윈도우즈 아이콘을 만들수 없습니다. 하지만 플러그인을 설치하면 가능합니다.
포토샵에서 아이콘을 만들수 있도록 해주는 플러그인을 무료로 배포하고 있네요 아래의 링크를 눌러 다운받고 앞축을 풉니다.
http://www.telegraphics.com.au/sw/dl.php?file=ICOFormat-1.6f9-win.zip

압축을 풀면 3개의 파일이 나오는데요 그중에서 ICOFormat.8bi 라는 파일을 복사해서
c드라이브 > Program File > Adobe >Adobe Photoshop CS3(버전에 따라 틀리겠죠 ^^) > Plug-Ins 에 복사를 합니다.

2. 아이콘 만들기

포토샵을 실행합니다.
일반적인 아이콘 크기는 16x16, 20x20, 24x24, 32x32, 48x48 정도인데요
보통 16x16, 32x32를 많이 만드는 것 같습니다.
아참~! 단위는 픽셀입니다.
포토샵을 실행하셨으면 키보드 Ctrl키와 n키를 눌러 새 작업창을 엽니다.
Name을 저는 j로 했습니다. Name은 영문 또는 숫자로 하시고 특수문자 사용하시면 안되며 띄어쓰기도 안됩니다.
크기는 가로 세로 16픽셀(픽셀입니다. 강조~!)로 하였습니다. 32x32로 작업 하실 분들은 가로 세로 32로 적으시면 됩니다.
OK누르시고...

자 Pencil Tool을 선택하여 자기가 원하는 색상을 선택하고 그림을 그립니다. 저는 그냥 검정색 J로 그렸습니다. ^^
나는 작업창이 손톱보다 작게나오는데 너는 왜 이렇게 크냐? 묻는 분들... -.-;;
키보드 Ctrl키와 +키를 같이 눌러보세요. 작업창이 커집니다. 반대로 - 도 눌러보세요. 포토샵 초보이신 분들 저에게 한 수 배웠습니다. ^^

원하는 그림을 다 그리셨으면 저장을 해야겠죠
Ctrl키와 S키를 같이 누릅니다.
아래와 같이 저장 창이 뜨면 아이콘 파일을 저장하실 폴더를 정하시고
Format 에서 ICO로 꼭꼭꼭 선택하시고 저장 버튼을 누릅니다.

3. 티스토리에 아이콘 올리기

자신의 블로그 관리자 페이지 > 스킨 > HTML/CSS > 파일 업로드로 가서 '파일업로드' 버튼을 눌러 위에서 만든 아이콘을 파일 찾아 업로드 해줍니다.

자~! 업로드는 했는데 실제 아이콘 파일이 어디에 저장되어 있을까요?
알아보는 방법은 자신의 티스토리 블로그 제일 처음 화면으로 갑니다.(로그인 되어 있는 상태여야 합니다)
이게 사용하시는 스킨마다 버튼 모양이 틀립니다. 제가 사용하는 스킨의 버튼은 아래와 같습니다.

관리자나 글쓰기 버튼 위에 마우스를 살며서 올려 오른쪽 마우스를 눌러 제일 아래의 속성을 누릅니다.

열린창에서 URL이 보이실 겁니다. 올리신 파일이 그 URL과 같은 위치에 있습니다.
마우스로 긁어 복사(Ctrl+C)합니다.

복사한 내용은 아래와 같습니다.
http://cfs.tistory.com/custom/blog/64/648864/skin/images/btn_admin.gif

아래의 태그 속에 복사한 주소를 넣습니다
<link rel="Shortcut Icon" href="파일 업로드로 올린 아이콘 파일 경로와 파일명" />

이렇게요
<link rel="Shortcut Icon" href="http://cfs.tistory.com/custom/blog/64/648864/skin/images/btn_admin.gif" />

그리고 태그의 마지막 부분의 btn_admin.gif 를 지우고 아까 파일 업로드 했던 아이콘 파일 명을 적습니다.
이렇게요
<link rel="Shortcut Icon" href="http://cfs.tistory.com/custom/blog/64/648864/skin/images/j.ico" />

자~! 마지막이네요 위에 완성된 태그를 마우스로 긁어 복사(Ctrl+C)합니다.

그리고 다시 자신의 블로그 관리자 페이지 > 스킨 > HTML/CSS > HTML/CSS 편집창에서 아래의 위치에 붙여넣기(Ctrl+V)를 하고 저장합니다.

자~! 끝입니다 자신의 블로그 메인 페이지로 가보세요.
아래 이미지와 같이 업로드 했던 아이콘이 표시될 것입니다. ^^ 즐겨 찾기 추가도 해보세요
즐겨찾기에도 아이콘이 따라 들어갈겁니다.

나는 아이콘 더 이뿌게 만들어 다시 올리고 싶다. 하시는 분들
자신의 블로그 관리자 페이지 > 스킨 > HTML/CSS > 파일 업로드에서 올리셨던 아이콘 파일을 삭제하시고 포토샵에서 다시 이뿌게 만들어 삭제했던 아이콘 파일 명과 똑같은 파일명으로 다시 업로드 하시면 됩니다.

행복한 하루 되세요~~~!