블로그 타이틀을 이미지로 바꾸기 - 2007/01/17 16:54
** 질문이 자주 올라와 따로 포스팅합니다.
가령, 질문 : "블로그 타이틀을 이미지로 바꾸려면 어떻게 해야 하나요?"
라고 물으시면, 성의 없고도 불친절한 데양은 이렇게 대답해왔습니다.
"이미지를 만들어서 블로그 타이틀을 대체하세요"
당연히 블로그 초보자나, HTML 소스 보는데 익숙하지 않거나 할 경우엔 '누가 그걸 몰라? 췟;;;'하고 돌아섰겠지요. 네, 죄송했습니다.
이제 알려 드리겠습니다. ^^;;
- 소스편집 툴(소위 웹에디터)과 그래픽편집 툴이 필요합니다.
- 웹에디터는 굳이 없어도 되지만, 제경우는 직업상 늘 사용하는 드림위버(http://www.adobe.com/products/dreamweaver/)를 이용했고 필요할 시 해당 툴을 사용한 화면을 캡쳐해서 첨부할 것입니다.
물론, 일반 웹에디터(울트라에디터, 에디트플러스)를 사용하셔도 되고, 이런것들이 없는 경우엔 메모장!을 사용하셔도 됩니다. - 그래픽툴은 요즘 포토샵은 거의 다들 갖고 계시죠? 네, 그럼 그래픽툴은 다른것을 염두에 두진 않겠으니, 다른 툴 사용자라면 알아서 적용하시면 될겁니다.
- 웹에디터는 굳이 없어도 되지만, 제경우는 직업상 늘 사용하는 드림위버(http://www.adobe.com/products/dreamweaver/)를 이용했고 필요할 시 해당 툴을 사용한 화면을 캡쳐해서 첨부할 것입니다.
- 제 스킨 [Beige_Daisy]를 사용하는 경우를 기준으로 설명드리지만, 여타의 다른 스킨도 유사한 방법일겁니다.
++++++++
기본순서는 다음과 같습니다.
- 스킨을 다운 받는다.
- 블로그 타이틀 이미지를 만든다.
- 스킨파일(skin.html)을 열어 블로그 타이틀 치환자부분을 이미지 태그로 대체한다.
- 블로그 계정에(티스토리도 해당) 이미지를 포함한 스킨파일을 업로드 한다.
대강 아시겠죠? 그렇습니다. 쉽고 간단한 작업입니다.
자 그럼 순서대로 더 자세히 말씀드려 보겠습니다.
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라는 폴더를 통채로 스킨폴더에 업로드 후 적용하면 될것이고,
- 티스토리라면, "스킨 > 스킨선택 > 직접올리기" 에서 올리시고 적용하면 될겁니다.
헥헥헥,,, 어찌 설명이 잘 되었나 모르겠네요.
이런거 해본지가 너무 오래되서리;;;
제가 설명한 이외의 더 궁금한 것은 (예. 투명 이미지가 잘 안되요... 따위) 이곳말고 관련 포럼이나 QnA, 아니면 네이봉 지식인등을 이용하여 알아내시기 바랍니다. ^^;;;
(마무리는 여전히 불친절 ㅡㅡ+)
모두들, 즐 블로그 하세요 ^^*
-
블로그 타이틀 이미지로 만들어보기
Tracked from ▒ 心中想友의 희망 스토리 ▒ | 2007/10/17 08:29 | DEL다음 링크를 찾아가보자^^;http://daisy.pe.kr/trackback/285
-
티스토리 디자인 변경 팁 종합 정리
Tracked from 12가지 재주가 있으면 굶어 죽는다 | 2009/04/19 19:22 | DEL밑에 링크는 되도록 첫 게시자분을 링크했습니다. 첫 게시자분이 누군지 모를경우에는 제가 참고한 블로그를 링크했습니다. 카테고리 항상 펼치기 대부분의 스킨은 하위 카테고리가 열려있지 않기 때문에 항상펼치기를 원하시면 위의 팁을 적용해 보세요 본문의 [카테고리 더보기] 상자 위치 바꾸기 플러그인 조작으로 본문에 [카테고리리글 더 보기]를 하면 그 위치를 정할 수 없어 짜증날때가 있습니다. 이 해결해주는 팁입니다. 아이폰 스타일 메타사이트트 추천 버튼 여..
