블로그에 파비콘과 블로그 아이콘을 만들어보겠습니다.
어찌 만드는지 잘 몰라 검색을 해보다가 Naturis님의 포스팅(
http://naturis.tistory.com/259
)을 참조했습니다.
파비콘이란 웹브라우져 창 맨 위 상단의 주소표시줄에 나오는 조그만 아이콘 같은 것입니다.
지금 제 블로그를 보고 계시다면 맨 위에 노란 모자를 쓴 아이의 모습이 바로 파비콘입니다.
블로그아이콘이란 블로그에 댓글 등을 달 때 블로거이름 옆에 마찬가지로 조그만 그림으로 표시되는 것입니다.
티스토리로 블로깅을 하는 환경에서 포토샵을 이용해서 해보겠습니다.
또한 대상이 되는 그림이나 사진은 기존에 가지고 있던 파일을 이용해서 하겠습니다.
자신이 포토샵이나 일러스트 등으로 그림이나 아이콘을 만들 수 있다면 밑에 방법을 참조하시면 어렵지 않게 하실 수 있습니다.
저는 직접 만들기는 실력이 안 되서 제 블로그에는 기존에 찍어놨던 조카 사진을 이용했고, 지금 설명 드리는 페이지에서는 윈도우즈에서 기본 제공되는 사진을 가지고 설명을 드리겠습니다.
덧) 티스토리에서 사진을 클릭하면 확대될 줄 알고 조금 작게 리사이즈해서 올렸는데, 어찌된 일인지 클릭해도 확대가 안 되네요. 사진 몇 개 중에 좀 작게 나온 것은 밑에 글로 자세하게 설명하는 것으로 하겠습니다.
일단 파일을 최종적으로 두개를 만들것입니다.
하나는 파일이름아무개.jpg
둘은 favicon.ico
첫번째 jpg 파일은 블로그 아이콘으로 쓰일 것이고, 이 jpg 파일을 웹사이트에서 ico 파일로 변환해서 두번째 favicon.ico를 만들고 그것으로 파비콘으로 이용하는 것입니다.
이 내용만 이해하시면 밑에 내용은 쉽게 이해되시리라 생각됩니다.
티스토리 관리자 화면에서 플러그인 화면으로 들어갑니다.
플러그인 설정 화면을 보시면 중간쯤에 위의 빨간 박스처럼
댓글/방명록 이모티콘 표시
블로그아이콘 표시
홈페이지 아이콘 표시(파비콘)
이런식으로 굵게 활성화가 되있는지 확인합니다.
만약에 안 되어 있다면 위의 빨간박스 오른쪽의 열십자 단추를 눌러서 각각 설정을 해주세요.
포토샵을 실행합니다.
File - Open을 화면처럼 실행합니다.
자신의 컴퓨터 하드 등에 저장된 원하는 사진이나 그림을 불러온 후
위의 사진처럼 순서대로 실행합니다.
위의 어두운 부분은 버려질 부분이고 밝은 부분만 쓰일 부분입니다.
밝은 부분에 대고 마우스 오른쪽 버튼 클릭 후 나오는 메뉴에서 crop을 선택해주세요.
컨트롤키와 알트키를 왼손으로 함께 누른 상태에서 알파벳 i키를 눌러주면 위의 창이 뜹니다.
안되시면 포토샵 메뉴의 image - image size로 클릭해서 들어가셔도 됩니다.
빨간박스에 각각 16 , 단위는pixels로 선택을 해주세요.
위의 화면대로 진행하시고 마지막에 OK를 눌러주세요.
잘라서 쓸 이미지를 파비콘이나 블로그 아이콘 용으로 이미지 사이즈를 줄여주는 작업이 되겠습니다.
화면 한 가운데 작아진 이미지가 보이시죠?
File - save for ....를 누르셔서 저장을 하겠습니다.
이 화면은 좀 작지요..
포토샵 개인 설정에 따라 화면이 좀 틀릴수 있지만, 파일 포맷은 Jpg로 하시고 화질은 Maxium 정도로 하시고 save 하시면 된다는 내용입니다. 워낙 용량이 적게 될테니 구지 midium이나 low로 하실 필요는 없으실 것 같습니다.
save 버튼을 누릅니다. 여기까지 작업으로 jpg 파일이 하나 완성되었습니다.
위에서 말씀드린 대로 이 파일은 블로그 아이콘으로 쓰일 것이고, 다시 파비콘으로 쓰이기 위해서 아래 사이트로 접속해서 ICO 파일로 또 변환을 할 것입니다.
로 접속을 합니다.
화면 왼쪽 부분에 Import Image를 클릭합니다.
찾아보기를를 클릭해서 뜨는 창에서 포토샵으로 만든 JPG파일을 선택해줍니다.
밑의 Upload버튼을 클릭합니다.
화면 중간 하단의 박스를 보시면 적용될 파비콘 모양이 미리 보여집니다.
그 밑의 Download Favicon을 클릭하셔서 원하는 자신의 컴퓨터 경로에 저장을 합니다.
파일이름은 아마 자동으로 favicon.ico으로 지정이 되셨을 것입니다.
이왕이면 포토샵으로 저장된 경로에 같이 하시는 것이 편리하시겠죠..
마지막으로 다시 자신의 티스토리 관리자화면의 환경설정으로 가셔서 위의 첫번째 빨간박스 찾아보기를 클릭하셔서는 포토샵으로 만든 JPG파일은 지정해주시고, 두번째 빨간박스 찾아보기를 클릭하셔서는 www.favicon.cc
에서 변경 저장한 favicon.ico을 지정해주시면 됩니다. 참고로 변경이 바로 되는 것이 아니고 시간이 좀 걸린다고 합니다. 어떤분은 2-3일 걸린다는 분들도 있던데 저 같은 경우는 한 반나절 지나니 적용이 되어 있군요. 티스토리의 html 소스를 어찌 수정하면 빨리 적용된다는 글도 본 것 같은데, 저 같은 경우 그냥 기다리는 편을 택했습니다.
덧)캡쳐해서 이렇게 설명하는 것이 다른 분들 것 볼 때는 몰랐는데 직접 해보니 시간이 꽤 걸리네요, 보시는 분들에게 아무쪼록 좋은 정보였으면 싶습니다.
'블로그' 카테고리의 다른 글
| 야후와 구글에 내 블로그 등록하기 (0) | 2010.02.13 |
|---|---|
| 네이버(naver),다음(daum)에 내 블로그를 등록하기 (4) | 2010.02.12 |
| 티스토리 블로그 카테고리 항상 펼친 상태로 수정하기 (0) | 2010.02.11 |
| 여러 사진을 한번에 용량 사이즈 변환하기 (1) | 2010.02.10 |
| 자축! 블로그 시작 .. (0) | 2010.01.15 |