** 질문이 자주 올라와 따로 포스팅합니다.

가령, 질문 : "블로그 타이틀을 이미지로 바꾸려면 어떻게 해야 하나요?"
라고 물으시면, 성의 없고도 불친절한 데양은 이렇게 대답해왔습니다.
"이미지를 만들어서 블로그 타이틀을 대체하세요"

당연히 블로그 초보자나, HTML 소스 보는데 익숙하지 않거나 할 경우엔 '누가 그걸 몰라? 췟;;;'하고 돌아섰겠지요. 네, 죄송했습니다.

이제 알려 드리겠습니다. ^^;;

그 전에,
  • 소스편집 툴(소위 웹에디터)과 그래픽편집 툴이 필요합니다.
    • 웹에디터는 굳이 없어도 되지만, 제경우는 직업상 늘 사용하는 드림위버(http://www.adobe.com/products/dreamweaver/)를 이용했고 필요할 시 해당 툴을 사용한 화면을 캡쳐해서 첨부할 것입니다.
      물론, 일반 웹에디터(울트라에디터, 에디트플러스)를 사용하셔도 되고, 이런것들이 없는 경우엔 메모장!을 사용하셔도 됩니다.  
    • 그래픽툴은 요즘 포토샵은 거의 다들 갖고 계시죠? 네, 그럼 그래픽툴은 다른것을 염두에 두진 않겠으니, 다른 툴 사용자라면 알아서 적용하시면 될겁니다.
  • 제 스킨 [Beige_Daisy]를 사용하는 경우를 기준으로 설명드리지만, 여타의 다른 스킨도 유사한 방법일겁니다.

++++++++

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

  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라는 폴더를 통채로 스킨폴더에 업로드 후 적용하면 될것이고,
- 티스토리라면, "스킨 > 스킨선택 > 직접올리기" 에서 올리시고 적용하면 될겁니다.


헥헥헥,,, 어찌 설명이 잘 되었나 모르겠네요.
이런거 해본지가 너무 오래되서리;;;

제가 설명한 이외의 더 궁금한 것은 (예. 투명 이미지가 잘 안되요... 따위) 이곳말고 관련 포럼이나 QnA, 아니면 네이봉 지식인등을 이용하여 알아내시기 바랍니다. ^^;;;
(마무리는 여전히 불친절 ㅡㅡ+)


모두들, 즐 블로그 하세요 ^^*


 

posted by Daisy
http://daisy.pe.kr/trackback/285 관련글 쓰기
  • 블로그 타이틀 이미지로 만들어보기 Trackback from▒ 心中想友의 희망 스토리 ▒ 2007/10/17 08:29

    다음 링크를 찾아가보자^^;http://daisy.pe.kr/trackback/285

  • 티스토리 디자인 변경 팁 종합 정리 Trackback from12가지 재주가 있으면 굶어 죽는다 2009/04/19 19:22

    밑에 링크는 되도록 첫 게시자분을 링크했습니다. 첫 게시자분이 누군지 모를경우에는 제가 참고한 블로그를 링크했습니다. 카테고리 항상 펼치기 대부분의 스킨은 하위 카테고리가 열려있지 않기 때문에 항상펼치기를 원하시면 위의 팁을 적용해 보세요 본문의 [카테고리 더보기] 상자 위치 바꾸기 플러그인 조작으로 본문에 [카테고리리글 더 보기]를 하면 그 위치를 정할 수 없어 짜증날때가 있습니다. 이 해결해주는 팁입니다. 아이폰 스타일 메타사이트트 추천 버튼 여..

  • 티스토리 블로그 운영자에게 유용한 팁모음 Trackback from여기는 미나미32의 블로그 남풍(南風)입니다. 아아, 들리나요? 2013/03/15 21:38

    티스토리 블로그 운영자에게 유용한 팁들을 한번 모아봤습니다. 이미지 하나 없이 작성하는데도 각 블로그들 다 방문하고 확인하느라 시간이 많이 걸리네요. ^^; 좋은 팁을 오픈해주시거나 추..

  • 나비 2007/01/17 17:32

    헤헤~친절한 데이지님의 설명이 돋보이는 글이네요 :)

  • 동감 2007/01/17 20:15

    이부분은 의외로 쉽던데요.. 데이지님 스킨같은경우..
    스킨파일 열어보면.. 주석처리해놓으셨던데.. 고부분만 주석없애고 로고이미지 넣으면되니..ㅎㅎ
    포샵하기 귀차나서 로고 안했는데.. 이야기 들으니 또하고싶어지네요..ㅎㅎ
    그러고보니 티스토리가 오픈베타를 하고 사용자가 많아지다보니 데이지님 스킨 수요가 늘어 아무래도 질문자가 많아진듯 싶군요^^
    테터에서보니 데이지님 스킨 다운로드수가 하늘을 치솟더군요 --ㅋ

  • 벗님 2007/01/17 23:36

    지금까지 티스토리는 어떻게 이미지 파일을 올리는거지, 하고 궁금해 했었는데.. 역시서 답이 풀리는군요. 귀차니즘인가. ^^;

  • Hee 2007/01/18 21:59

    Daisy님이 만든 스킨의 인기가 워낙 높다보니..
    이런 친절한 안내까지 해주시는군요 :)

    요즘 블로그를 들어갈 때마다 익숙한 스킨이 뜨는 통에 깜짝깜짝 놀랍니다 ㅎㅎ
    왔던 곳인가? 하는 생각에 'ㅁ'
    스킨 정말 베리베리 굿 -_-)b

  • 파도소리 2007/02/08 20:35

    ^^ 애드센스도 센스있게 넣으셨군요.. ^^

    거부감 없이 좋아요~

  • 수이♥ 2007/12/15 18:18

    안녕하세요
    질문하나드리고싶어서요.
    음 다름이 아니라 데이지님 글대로 이미지 파일을 만들어서 등등 순서대로 했는데요
    미리보기를 누르니까 자꾸 '개체가 없습니다' 라고 팝업창이 뜨네요..
    무엇이 잘못된건지 모르겠네요ㅠㅠ
    다른 소스는 하나도 안건드리고 조심스럽게 타이틀부분만 편집했거든요
    혹시나.. 왜그런지 아시나요..?

  • 야짐히라 2008/04/05 16:47

    네모칸에 글씨쓰는것 어떻게 하나요???????????????????????????궁금해요 ㅜㅜ

  • 볼우물 2009/02/26 16:15

    좋은 정보 감사합니다. 구글 애드센스도 꾹 눌러주고 갑니다. 즐거운 오후되세요

  • Willlee 2009/10/26 10:08

    정말 감사합니다. 이렇게 글을 이해하기 쉽게 설명해주셔서 저도 타이틀을 바꿀수 있었습니다 한가지 궁금한게 있는데요 하단 애드센스 테이블 소스 좀 알 수 있을까요? 연한 그레이테이블이 저랑도 어울릴것 같아서요 꼭 좀 부탁드리겠습니다 ^^

  • 미나미32 2013/03/15 22:45

    좋은 팁 감사합니다~ 이웃링크추가하고 종종들리겠습니다. ^^
    관련 게시물을 작성한 관계로 트랙백 날려두었어요.