컴퓨터 엑셀 워드 포토숍 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Previous Post 보청기 등의 기계 장치 없이 '소리'를 크게 듣는 법[Perl/펄] 윈도우용 액티브펄(ActivePerl) 다운로드 설치법[건강] 예풍혈(턱관절 부근) 지압: 치통, 잇몸 질환, 두통, 시력 향상에 효과블로그가 구글에 잘 인덱스 안되던 이유를 좀 알게 됨예전 포스트들이 구글에서 잘 검색되지 않아 고민 중[RSS & Atom 리더] 한RSS (www.hanrss.com) 가 가장 쓰기 편했다[추억의 스냅샷] 핫메일(Hotmail)의 2000년 3월의 화면들구글 어스(Google Earth)에서 자금성(자장면집 아님), 피라미드 발견[Winamp/MP3플레이어] 최고의 윈앰프 스킨들 모음집VMware 가상 PC 소프트웨어로 또 한 대의 PC를 만들어 보자

블로그 디자인을 결국 잡지 형태로 변경

Thursday, March 09, 2006

상단에 배경 그림을 넣어야 할지 끝까지 고민했다. 왜냐하면 페이지 상단에 그래픽이 있으면 시선을 분산시켜서 정작 포스트 내용에 집중할 수 없기 때문이다. 그러나 상단 우측의 빈 공간이 계속 마음에 걸렸다. 디자인의 관점에서 보면, 이곳에 빈 곳이 있어서는 곤란했다. 즉 여백으로서도 작용하지 않는 매우 까다로운 빈 공간인 것이다. 그래서 무채색에 가까운 그림으로 시선의 분산을 방지하는 한편 공간을 메우는 방법을 택했다.

사이드바의 글자들(About Me 등)도 비슷한 문제를 겪었는데, 일반 잡지들에서 흔히 하듯 단어의 첫 글자에만 색을 주는 것으로써 그럭저럭 해결했다.



기술적인 측면들:



블로그 헤더를 수정하는 것에는 기술적인 어려움도 있었다. 블로거닷컴의 템플릿 에디터에서 편집하는 것은 힘들고 시간도 걸렸기에, 파이어폭스로 블로그 페이지의 HTML을 하드에 저장해 놓고, 그 저장해 놓은 HTML을 PC에서 텍스트 에디터로 직접 고치는 방법을 택했다. 그런 후 그 결과를 블로거닷컴의 템플릿에 반영해 주고 블로그를 재게시했다.

헤더의 배경 그림 등의 필요한 그래픽 파일들은, 일반 사진을 블로그에 올리는 방식으로 우선 올려둔 후, 그 주소를 템플릿에 입력하면 된다. 그런데 블로거닷컴에서는, GIF를 잘 올릴 수가 없었다. 애니메이션 GIF는 100%가 JPG로 변환되어 버리는 것은 물론, 면적에 비해 조금이라도 용량이 큰 GIF, 일부 투명 GIF를 올리면 랜덤하게 JPG로 변환되어 버렸다. 그리고 JPG도 고화질 JPG는 저화질 JPG로 자동 변환되어 업로드되었다. 이러한 것의 원칙도 분명치 않아서, GIF/JPG 파일들의 원본이 그대로 업로드될 때도 있었고 안될 때도 있었다. (물론 blogger.com 이 아닌 자기 소유의 서버에 그림이 저장되어 있다면 이런 문제는 생기지 않을 것이다.) 아무튼 blogger.com에 그림 파일들을 올리는 것조차도 상당히 힘이 들었다.




[임시 포토샵 강좌(?)] '웹페이지와 블렌딩되는 배경 그림' 만들기:



헤더의 배경 그림은 현재, 유화붓과 와인잔 사진으로 되어 있고, 좌측의 녹색(#88BB22) 웹페이지의 색과 서서히 섞이게 되어 있다. 원래 이런 식의 배경 그림은 '알파 채널(alpha channel)'을 가진 그림을 사용해야 한다. 즉 단계적인 투명도를 가진 그림을 사용해야 하는데, GIF는 1단계뿐인 단순한 투명도를 가지고 있어 사용할 수 없고, (필자가 알기로) JPG는 투명도를 지원하지 않고, PNG는 알파채널을 지원하지만 정작 웹브라우저에서 PNG의 알파채널을 지원하지 않는다. (다만 IE 7에서는 이것을 지원하는 듯하다)

이런 복잡한 문제가 있었기에 어쩔 수 없이, 좌측의 녹색(#88BB22)과 부드럽게 블렌딩되는 JPG를 만들 수밖에 없었다.

(1) 배경으로 쓸 작은 그림의 좌측 변을, 사각 선택 툴(Rectangle Marquee Tool)로 1~3cm쯤 선택. (이러면 하얀 점선이 사각형으로 움직인다.)

(2) 포토샵(Photoshop) 메뉴: Select/Feather/Feather Radius 를 75픽셀쯤 주어 선택 영역을 부드럽게. (선택 영역이 부드러워진 정도를 육안으로 보기 위해서는, 포토샵 7의 경우, q키를 누른다. q를 한번 더 누르면 원래 상태로 돌아온다.)

(3) 전경색을 #88BB22 로 정확하게 지정

(4) Alt+Delete 키를 7~8회 누름

(5) "Save for Web" 등으로 저장. 되도록 고화질로 저장해야, 그림이 웹페이지와 섞이는 Gradation 이 부드럽게 된다. 단, blogger.com이 자동으로 저화질로 변환하여 업로드할 수 있으므로, 실제로 업로드된 파일이 방금 만든 원본인지 아니면 blogger.com이 손댄 것인지 살펴 봐야 한다.





참고:




이것은 blogger.com 의 "Son of Moto" 템플릿(Template)을 수정한 일부이다.



페이지 상단(헤더)을 수정하는 핵심 클래스들:

#blog-header        {
       color:#FFFFFF;
       margin:0 auto;
       padding:0 0 15px 0;
       background:#88BB22;
       border:0;
       background-image:url(http://적당한 그림 파일 경로);
       background-repeat:no-repeat;
       background-position:bottom right;
       }

#blog-header h1        {
       font-size:24px;
       text-align:left;
       padding:15px 20px 0 20px;
       margin:0;
       }

#header_bottom_border { background:url(http://www.blogblog.com/moto_son/headbotborder.gif) top left repeat-x; }





상단 헤더 부분의 템플릿:

 <div id="blog-header"><span id="top"></span>
 <h1>

   <MainPage>
     <a href="<$BlogURL$>"><span style="color:#FFFFFF;">m</span><span style="color:#DFEBED;">wultong</span> <span style="color:#FFFFFF;">B</span><span style="color:#DFEBED;">log</span> <span style="color:#B3D8BB; font-weight:normal;">―</span> <span style="color:#FFFFCC;">소설</span> <span style="color:#DDFFAA; font-weight:normal;">/</span> <span style="color:#FFFFCC;">IT</span></a>
   </MainPage>

   <ArchivePage>
     <a href="<$BlogURL$>" class="wasabi-hover wasabi-push"><$BlogTitle$> &nbsp; <span style="color:#F4D74F;">◀</span><span style="color:#FDC06D;">◀</span><span style="color:#F9AC3A;">◀</span> <span style="color:#FFFFFF;">Home</span></a>
   </ArchivePage>

   <ItemPage>
     <a href="<$BlogURL$>" class="wasabi-hover wasabi-push"><$BlogTitle$> &nbsp; <span style="color:#00FF00;">◀</span> <span style="color:#FFFFFF;">Home</span></a>
   </ItemPage>

 </h1>
 <p style="font-family:'굴림'; font-size:11pt;"><$BlogDescription$></p>
 </div>
 <div id="header_bottom_border">&nbsp;</div>

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top