최근 이웃분의 타이틀을 아이콘파인더와 포토샵 바탕체만을 이용해서 변경해드리면서 
타이틀 변경부분만 포스팅 하려다가 처음부터 끝까지 전과정을 최대한 빨리 수정할수 있도록
한번에 모아봤습니다. 열심히 따라 하시면 10분안에(?) 변경이 가능하실것 같습니다 ^^;;; 

* 타이틀 이미지의 글씨폰트와 이미지배치는 못된준코님 스킨을 참고 했습니다. 

1분. Life in Mono스킨으로 설정하기

1. 스킨 저장하기 

- 혹시 모를일을 대비해서 안전하게 스킨을 저장해 놓습니다. 

 2. Life in Mono(Light) 기본스킨으로 변경을 해줍니다.


2분. 타이틀 이미지 재료와 문구 생각하기

 타이틀 이미지 캐릭터 찾기 

  이웃분의 블로그 이름이 별이의 세상 돋보기라서 아이콘파인더에서 star(별)로 검색을하고 
마음에 드는 별이미지(단순한 별그림이 아닌 캐릭터)를 찾았습니다. 그리고 별모양의 불가사리
캐릭터의 색상(AE486A)에 맞게 블로그 스킨색깔도 비슷한 톤으로 통일 시켜봤습니다. 
1. 아이콘파인더를 이용할때는 개인이 자유롭게 사용할수 있는지 라이센스를 확인해줍니다. 
2. Download PNG를 눌러서 이미지를 다운받습니다.

타이틀 이미지에 들어갈 문구 생각하기 


 타이틀에 들어갈 문구는 이웃분 블로그설명중 유용한 자료가 많은 블로그를 참고해서 
유용한 자료하면 생각나는 블로그로 정했습니다.

3분. 타이틀 이미지 만들기

캐릭터 크기조절


1. 오른쪽 마우스클릭 > 이미지 크기조절을 선택
2. 가로폭, 세로폭 143 픽셀로 설정 3. 승인을 눌러줍니다.  

타이틀 이미지 만들기



 먼저 포토샵을 실행시킨뒤 위의 타이틀이미지.psd를 불러옵니다. 

- 1번 레이어를 선택 > 자신의 블로그 이름으로 수정. ( 바탕체 50PT/ 포인트글씨 52PT )
- 2번 레이어를 선택한뒤 위에서 생각한 설명부분으로 수정. (바탕체18pt)
- 143픽셀로 수정해준 캐릭터 이미지를 3번 레이어 위에 위치하게 한뒤 3번 레이어삭제. 
- 4번 레이어 그림자 만드는 방법은 하단에 정리했습니다.
- 5번 레이어에 자신이 원하는 색상을 선택한뒤 페인트를 부으면 상단줄 색상이 변경됩니다.


그림자 만드는 방법


- 원형선택 윤관 도구를 선택 > 가로로 길게 늘린뒤 > 연한회색(c4c4c4)을 부으면 됩니다.


 
타이틀 이미지 완성된 모습 (클릭하시면 확대된 이미지를 보실수 있습니다.)



참고하면 좋은 포스팅

단순히 그림자 모양을 그려주기보다는 바닥에 비치는 타이틀을 만들어줘도 좋을것 같습니다.

바닥에 비치는 타이틀 이미지 만들기 : http://nextgoal.tistory.com/617

바탕체가 밋밋하다면 전단지 모양의 예쁜글씨체로 변경해주셔도 좋을것 같습니다.

전단지를 이용한 나만의 타이틀 이미지 만들기 : http://nextgoal.tistory.com/495


5분. 블로그스킨 상단 변경해주기

스킨위자드 설정변경

- 스킨위자드 > 타이틀 > 텍스트 높이를 200으로 수정해줍니다.

블로그 상단 HTML 변경


- HTML/css편집에서 파란글상자의 html부분을 상단부분 html.txt내용으로 수정해줍니다.
- background-color:#000000;에 색상코드를 수정해주시면 메뉴배경색을 변경할수 있습니다.



<div id="header">
  <div class="head-container">
    <!-- 블로그제목 -->
    <h1><a href="[##_blog_link_##]" title="[##_title_##]">[##_title_##]</a></h1>
    <!-- 블로그메뉴 -->
    <div id="blogMenu">[##_blog_menu_##]</div>
    <div id="searchbar">
     <div class="searchbar-left"></div>
     <div class="searchbar-container">
      <!-- 검색 모듈 -->
      <div id="searchBox">
       <s_search>
        <label for="search">search</label>
        <input type="text" name="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"/>
        <input value="검색" type="button" onclick="[##_search_onclick_submit_##]" class="submit"/>
       </s_search>
      </div>
      <!-- 카운터 모듈 -->
      <div id="counter">
       <ul>
        <li class="total"><span>Total | </span>[##_count_total_##]</li>
        <li class="today"><span>Today | </span>[##_count_today_##]</li>
        <li class="yesterday"><span>Yesterday | </span>[##_count_yesterday_##]</li>
       </ul>
      </div>
     </div>
     <div class="searchbar-right"></div>
    </div>
  </div>
 </div>
 <hr />
 <div id="body">
  <div id="content">
  <!-- 태그 -->
   <s_tag>

블로그 상단 CSS 변경

- 하단의 상단css.txt를 html/css편집 css 제일 하단에 추가시켜줍니다. 



1. 상단html에서 변경해준 색상과 통일을 시켜주셔야 합니다.
2. 마우스 올려놓았을때 변경되기를 원하는 색으로 수정해주시면 됩니다.


참고하면 좋은 포스팅

티스토리 메뉴설정 기능 200% 활용하기 : http://nextgoal.tistory.com/821


7분. 블로그 스킨 하단 변경해주기 

 하단 푸터 변경은 아래의 포스팅을 참고하시고 색상은 위의 타이틀이미지 색상과 비슷한톤에서
조금더 무게감 있는 색상으로 해주는것이 잘 어울렸던것 같습니다. 


Life in MOno 스킨 하단 푸터 변경하는 방법 : http://nextgoal.tistory.com/357


10분. 완성된 모습 

별이의 세상 돋보기 구경하러가기 :  http://joaramission.tistory.com/


기타. 디테일한 부분 수정해주기 



후기

 오늘 포스팅은 가독성은 전혀 신경쓰지 않고 머리속에 생각나는데로 스킨변경하는 과정들을
처음부터 끝까지 한번 정리해봤습니다. 자신의 블로그에 바로 적용하기가 부담스러우시다면
세컨블로그를 만드시고 한번 연습을 해보신뒤 원래스킨에 적용하는방법도 괜찮은것 같습니다. 
혹시 수정하시다가 어려운 부분이 있거나 잘못된 부분이 있으면 제보 좀 부탁드리겠습니다. ^^;



댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 우오오~멋진 팁입니다~!!!
    이웃을 위해 늘 헌신봉사하는 티비님 화이팅~!!!

    2010.12.16 17:42 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 오 부럽습니다. 나만의 스킨을 만드는 것은 너무 어렵더군요ㅠㅠ
    열심히 공부해서 나중에 저만의 스킨을 만들고 싶습니다 ㅎㅎ

    2010.12.16 17:46 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 비밀댓글입니다

    2010.12.16 17:58 [ ADDR : EDIT/ DEL : REPLY ]
  5. 아이콘파인더 저도 유용하게 사용중인데~ 역시 좋네요 ㅎㅎ

    2010.12.16 18:30 신고 [ ADDR : EDIT/ DEL : REPLY ]
  6. 멋진 팁이네요. ^^
    그런데 제시카만 눈에 들어오는건 ㅋㅋㅋ

    2010.12.16 18:34 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. ㅎㅎ 티비님의 강좌는 티메인에 올려야 한다니깐요.
    처음 접하시는 분들에게는 필수입니다. ^^

    2010.12.16 18:42 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. 오~ 예쁘다라는 생각뿐입니다.^^

    2010.12.16 18:45 신고 [ ADDR : EDIT/ DEL : REPLY ]
  9. 짬짬이 답방했는데
    왜 티비님이 빠졌을까요?
    이렇게 세심하게 설명해도 못 알아 듣는 사람들 있을까요?
    굄돌 빼고...ㅎㅎ

    2010.12.16 19:13 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 하고 싶긴한데 만지면 만질수록 뒷감당이 안되는것 같아
    소스는 못만지고 있습니다.
    포토샾도 잘 만지지고 티비님은 능력쟁이..^^

    2010.12.16 19:26 신고 [ ADDR : EDIT/ DEL : REPLY ]
  11. 저는 타이틀이 없는게 제 블로그의 멋(!) 이라 생각하는..
    무지를...계속 ㅋㅋㅋ 원하는 그림을 아직 못찾고 있답니다~;

    2010.12.16 19:29 신고 [ ADDR : EDIT/ DEL : REPLY ]
  12. 아이콘파인더, 상당히 좋더군요..^^ 저도 티비님 덕분에 좋은 곳을 알았습니다.ㅎㅎ
    지금까지는 대부분, 직접만들거나 구매해서 사용했는데..ㅋ 그런 수고스러움을 많이 줄일 수 있을 것 갔습니다.^^

    간단하면서도 멋진 스킨을 꾸미시는 티비님짱..^^

    2010.12.16 20:25 신고 [ ADDR : EDIT/ DEL : REPLY ]
  13. 세상구경님 정말 좋은 팁을 많이 주시는데 제가 따라가질 못해서...컴맹인 지라
    우와~ 하고 놀라고 갑니다 .^^

    2010.12.16 23:44 신고 [ ADDR : EDIT/ DEL : REPLY ]
  14. 티비님때문에 하고 싶은게 너무 많은데,요샌 애때문에 포스팅 하나 하기도 벅차네요
    요것도 우선은 즐겨찾기에 다 등록해놓고 틈만 노리고 있습니다.
    아침에 8시까지 겨우 댓글 달고 낮에는 시간이 없어서 늦게 방문했습니다. ㅠㅠ

    2010.12.17 01:39 신고 [ ADDR : EDIT/ DEL : REPLY ]
  15. 아직 포스팅 전이시네여 ^^ 이따가 다시 놀러 올께용~~ ㅎㅎ

    2010.12.17 07:53 신고 [ ADDR : EDIT/ DEL : REPLY ]
  16. 한번 따라해보는데..이상하게 안되네요..아오 승질나요 ㅋㅋㅋㅋㅋ 뭐가 문제지..ㅜㅜ

    2010.12.17 16:10 신고 [ ADDR : EDIT/ DEL : REPLY ]
  17. 티비님 블로그에서 모든게 해결가능하지요 ㅋ

    2010.12.19 09:58 신고 [ ADDR : EDIT/ DEL : REPLY ]
  18. 항상 좋은 포스팅 보고 많이 배우고 갑니다
    오늘 아이콘파인더 사이트에 대해서 포스팅 하고 있는대 티비님의 멋진 포스팅을 함께 소개하고싶어서
    제 포스팅글 하단에 링크걸어놨습니다^^
    자주 찾아뵙고 인사 올리겠습니다

    2011.06.02 20:21 신고 [ ADDR : EDIT/ DEL : REPLY ]
  19. 이 정보가 나에게 최상이다.이 웹사이트는 바위!. 전 그냥 꾸준히 새로운 도전과 이것이 게시 다양를 찾습니다.

    2012.06.07 20:39 신고 [ ADDR : EDIT/ DEL : REPLY ]
  20. 당신이 더 큰 디스플레이 화면과 브라우저 중요한있을 수 있습니다 애플 아이팟보다 PMP에서 그물 큰 금액을 확인하려고 할 때, 그럼에도 불구하고, 이것은 단순히 상관없는 인터넷 브라우저를 사용하는 동안 혹시 시간에 가정

    2012.06.07 20:45 신고 [ ADDR : EDIT/ DEL : REPLY ]
  21. 당신은 좋은 정보를 다음 있어요. 이것은 정말 이유로 대학에서 내 개인적인 문서의 기능을 우리 자신의 가정 교사가이 주제에 관한 우리 모두에게 요청을하는 데 도움이, 감사합니다!

    2012.06.07 20:52 신고 [ ADDR : EDIT/ DEL : REPLY ]