블로그 타이틀을 이미지로 바꾸기

데이지님의 블로그에서 인용

기본순서는 다음과 같습니다.

1. 스킨을 다운 받는다.
2. 블로그 타이틀 이미지를 만든다.
3. 스킨파일(skin.html)을 열어 블로그 타이틀 치환자부분을 이미지 태그로 대체한다.
4. 블로그 계정에(티스토리도 해당) 이미지를 포함한 스킨파일을 업로드 한다.

대강 아시겠죠? 그렇습니다. 쉽고 간단한 작업입니다.
자 그럼 순서대로 더 자세히 말씀드려 보겠습니다.


1. 스킨을 다운받는다.

- 태터툴즈 스킨게시판(http://www.tattertools.com/ko/bbs/zboard.php?id=skin )이나, 스킨을 만들어 배포하시는 분들의 블로그에서 맘에 드는 스킨을 다운받습니다.
일반적으로 태터툴즈 스킨은 거의 태터툴즈 스킨게시판에 올라오는 편이나, 그저 본인 블로그에서만 배포하는 분들도 있습니다. 머, 알아서 찾아 다녀야겠죠. ^__^


2. 블로그 타이틀 이미지를 만든다.

이왕이면 스킨에 어울리는 이미지를 만들기로 합니다.
해당 스킨이 적용된 블로그나 다운받은 skin.html 파일을 브라우저로 열어 캡쳐해서 사용하면 되겠네요.

작업하기 편하라고 타이틀 치환자를 지우고 브라우저로 열었습니다.

캡쳐하기?
캡쳐프로그램(snagIt 등)을 사용하거나 윈도우자체의 캡쳐기능을 사용합니다.

윈도우자체의 캡쳐기능 - 키보드의 Print Screen키를 누르거나 또는 활성창만을 캡쳐하려면 alt키를 누른채 Prt Scr키 를 누르면 캡쳐된 화면이 윈도우즈 클립보드에 임시로 들어갑니다.

- 포토샵에서 새파일을 만들어 (File>New 또는 Ctrl+N) 캡쳐한 화면을 붙여넣기 (Ctrl+V) 하고,
타이틀 부분에 적당한 이미지를 만듭니다.

제 경우는 Type을 이용한 텍스트 이미지일 뿐 이지만, 나름 괜찮습니다. ^^*

배경 이미지에 질감처리가 되있으므로(잘 보이지 않겠지만 ^^;)  이왕이면 블로그 타이틀 이미지의 배경이 투명이면 좋겠군요.

- 타이틀 이미지 영역만 적당한 사이즈로 자른후(crop) 투명한 이미지로 만들어 줍니다.

투명한 이미지
1. 타이틀로 쓰일 레이어(제경우라면 텍스트 레이어)와 캡쳐화면 레이어를 Merge 합니다.
2. Merge된 레이어에서 투명하게 할 부분을 선택합니다. (Magic Wand Tool  사용 )
3. 선택된 부분을 지웁니다.
4. 백그라운드 레이어를 비활성화 합니다.

5. 포토샵의 (File > Save For Web)을 이용해 웹용 이미지로 저장합니다.
- 저장 포맷은 Gif(Transparency 체크), 저장위치는 해당스킨폴더(Beige_Daisy)내에 있는 images 폴더에 저장되어야 합니다.

자, 이제 이미지는 다 만들었습니다. 왠지 이미지 만들기 강좌처럼 된거 같아 '캡쳐부터 -> 이미지 만들기까지' 과정을 접으려(more.. less..) 했는데, 자꾸 프로그램 에러가 나서 7번이나 강제종료 했어요 ㅡㅜ.

이제 이미지를 타이틀 부분에 넣을 순서.

3. 스킨파일(skin.html)을 열어 블로그 타이틀 치환자부분을 이미지 태그로 대체한다.

- skin.html 파일을 열어 타이틀 치환자를 찾습니다. (##_title_##)

- 이미지 태그로 바꿉니다.

폴더경로에 주의합니다. ^^

이왕이면, 타이틀 치환자는 지워버리지 말고 타이틀 이미지의 alt 속성으로 이용해줍니다.


4. 블로그 계정에(티스토리도 해당) 이미지를 포함한 스킨파일을 업로드 한다. - 설치형이라면 Beige_Daisy라는 폴더를 통채로 스킨폴더에 업로드 후 적용하면 될것이고,
- 티스토리라면, "스킨 > 스킨선택 > 직접올리기" 에서 올리시고 적용하면 될겁니다.

<img src"./images/title.png" alt="Beat Inertia and Gain Momentum"/>