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

 
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>




tag: blogger
블로거 | 구글블로그 | Blogger.com + blogspot.com

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

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