DesignMyself

제 개인 블로그에 쓰던 스킨을 배포용으로 만들었습니다.
세가지 색상이 있으니 취향대로 골라쓰시면 되겠습니다.

태터툴즈 1.x 나 티스토리 사용자분은 스킨 폴더 하위의 "for Tistory, Tattertools"폴더에 들어가 있는 skin.html을 밖으로 덮어 씌워주세요.
그냥 쓰시면 textcubve에 추가된 커버 페이지와 리스트 페이지가 출력되서 스킨이 깨지니 Tistory나 Tattertools 사용자 분들은 꼭 skin.html 파일을 교체해주세요.

아직 생활이 여유롭고 즐겁던때 Tattertools 1.0 버전으로 올라가면서 만든, 개인적으로 많은 의미가 있는 스킨입니다. 신경을 쓴답시고 어찌어찌하다보니 배포가 많이 늦어졌습니다. 아직도 이걸 찾으시는 분들이 있을지 모르겟네요. 여하튼, 예뻐해 주세요. 스킨에 제 애정이 담겨있습니다. :)

1월 14일 오후 7시 이전에 받으신분들은 다시 받아서 적용해주세요.
아래와 같은 버그들이 수정되었습니다.

- IE6에서 댓글 입력창이 펼쳐지지 않던 문제.
- 태그 클라우드와 키워드의 링크가 서로 바뀌어있던 문제.
   ** 티스토리의 경우 키워드기능이 없어서 링크가 작동되지 않으니 참고하세요.


Lazylog Skin Download

textcube 1.5 버전 기반으로 만들어진 텍스트큐브용 스킨입니다.

이미지 사용을 줄이고 텍스트로 구성한 1단 스킨입니다. 세가지 색상으로 구성되어있고 아래 다운로드 링크에 모두 포함되어있습니다.

태터툴즈1.0x나 티스토리에서 사용할때에는 cover 페이지와 tc에서 추가된 trackback list등을 삭제하셔야 제대로된 화면을 보실수 있습니다.
태터툴즈 1.x 나 티스토리 사용자분은 스킨 폴더 하위의 "for TT1.x, Tistory"폴더에 들어가 있는 skin.html을 기존의 skin.html을 대체하여 사용하시면 큰문제 없이 사용하실수 있습니다.

PinkPianoPunkStar 스킨의 가로 사이즈 조절 방법에 대해서 다음 포스팅으로 정리할 예정이니 가로사이즈를 수정하고 싶으신분들은 참고하세요.

스킨에 버그나 문의 사항이 있으면 댓글로 남겨주세요~

PinkPunkPianoStar Skin Download

Crystal Blue 스킨을 수정한 Crystal Blue 2nd 스킨을 배포합니다.
designmyself.net의 튜토리얼을 통해서 수정 과정을 확인해 보실수 있습니다.
스킨 제작에 관심 있으신 분들에겐 도움이 될거라 생각합니다.

배포하는 스킨에 문제점이 있으면 이곳에 피드백 주시면 되겠습니다~

Crystal Blue 2nd Skin Download

첫번째 게시물을 올린지 너무 오랜시간이 흘렀네요.
이번에 스킨을 완료 시키고 배포까지 해보도록 하겠습니다.



헤더 부분을 수정하겠습니다.
제목 밑에 블로그의 copyright를 표기하도록 skin.html에 삽입하였고 css파일을 수정합니다.  
검정색이던 글자색과 크기를 변경하고 text-align 속성으로 가운데 정렬로 바꾸었고, 제목을 감싸고 있는 h1에 padding값을 넣어서 높이를 설정합니다. 그리고 추가시켜넣은 copyright 부분을 위해 스타일을 추가하였습니다.
최종 코드는 아래와 같습니다.

skin.html <h1><a href="[## _blog_link_ ##]">[## _title_ ##]</a></h1> <p><a href="[## _blog_link_ ##]"> [## _blogger_ ##]</a>'s Blog is powered by <a href="http://www.tattertools.com" onclick="window.open(this.href); return false">Tattertools</a></p>
style.css #containerTop h1 {font:3em Verdana; letter-spacing:-1px; text-align:center; padding:50px 0 6px 0;} #containerTop h1 a { color:white; } #containerTop h1 a:hover { color:red; text-decoration:none;} #containerTop p { text-align:center; color:white; font:10px tahoma, dotum; padding-bottom:15px;} #containerTop p a { color:white; font-weight:bold;}

사이드바의 제목들 색상이 예전 배경색과 동일한데 새로 바꾼 배경이미지와 어울리게 무채색 계열로 바꾸겠습니다. 저는 사이드바 제목 이미지들을 포토샵으로 불러온뒤 image / mode 에서 grascale로 바꿔 간단하게 흑백화 한뒤 저장하였습니다. 간단하게 흑백으로 이미지를 바꿀수 있지만 디테일한 조절이 필요하다면 따로 작업을 하시는게 좋습니다.


이렇게 스킨의 전체적인 수정 작업은 끝이났습니다. 이제 index.xml을 수정해보도록 하지요.
index.xml의 자세한 스펙은 이곳을 확인해보시면 됩니다. 각각의 항목의 용도와 어떻게 쓰이는지에 대해서 확인하실수 있습니다.
이번에는 베이스가 되는 스킨과 거의 대동소이한 모양이기 때문에 스킨의 이름만 수정하였습니다.
index.xml에 표기된 스킨의 이름이 다른 스킨과 겹칠 경우 겹치는 스킨중 하나만 태터툴즈 관리자 모드에 나타나게 되어 사용자에게 혼란을 줄수 있으므로 되도록 유니크하게 만들도록 합니다.
관리자 모드에서 보여지게될 preview.gif 이미지도 변환해서 넣었습니다.


자, 스킨이 완성이 되어 배포만 남았습니다.
원본 스킨에서 배경 이미지와 약간의 구조 변경만으로도 이렇게 원본과는 다른 느낌의 스킨을 만들어 낼수가 있습니다. 참 쉽죠?
완성된 파일은 www.tattertools.com의 스킨 게시판에 올리겠습니다. 베이스가 된 크리스탈 블루 스킨과 소스를 비교해보시면서 어떤 것들이 바뀌어서 새로운 스킨이 만들어진건지 확인해보시는것도 좋습니다.

Crystal Blue 커스터마이징 튜토리얼이 늦어지고 있어서 일단 bookskin을 배포합니다.
티스토리에 업데이트 된  스킨이며 태터툴즈와 텍스트 큐브에서 쓸수 있게 컨버팅 하였습니다.
스킨에 문제점이 있으면 이곳에 피드백 주시면 되겠습니다 :)

스킨 이름을 지어주신 윤호님께 여러의미의 감사를..

Book Skin Download

이곳에서 처음 진행되는 튜토리얼입니다. 일단은 간단하게 얼마전 공개한 crystal blue 스킨을 살짝 수정해봅시다.


먼저 포토샵으로 이미지 작업을 합니다. 크리스탈 블루가 밝은 형광빛 나는 색으로 취향을 좀 탈수가 있기 때문에 이번엔 어두운 배경을 사용합니다. 배경 이미지는 flikr에서 'Creative Commons 사용권이 있는 사진' 옵션을 켜고 검색해서 찾은 이미지입니다.

메뉴의 위치를 위로 옮기고 블로그 타이틀과 블로그 설명 문을 강조할 생각으로 헤더 영역의 중앙으로 옮겼습니다. 크기도 좀 키웁니다. 간단하게 작업할 생각이기 때문에 이미지 작업을 아주 완성도있게 할 필요는 없습니다. 대략적인 느낌을 눈으로 확인해보는데 주안점을 두고 디테일한 부분들은 코딩하면서 잡아주도록 하겠습니다.


CSS를 이용해 이미지로 바뀌어져 있는 블로그 메뉴 부분을 텍스트 링크로 바꿉니다. .blogMenu a 에 padding:16px 0 0 0; height:0; overflow:hidden; 속성을 삭제합니다.  .blogMenu .tab~~ 으로 시작되는 라인들도 지워, 메뉴별 배경 이미지도 삭제합니다.

이제 텍스트 메뉴가 나타나지만 간격이 좀 애매하네요.
각각의 메뉴에 margin-leftt:14px; 을 추가하여 메뉴간 간격을 조절하고 skin.html 에서 메뉴 이름을 영문으로 수정하고 admin으로 갈수 있는 링크도 추가했습니다.



.blogMenu의 배경색을 검정색으로 바꿔줍니다. 배경색을 깔고 나면 .blogMune 안에 위치한 메뉴들의 자리가 어정쩡한걸 확인할수 있습니다. 이건 .blogMenu에 padding값을 넣어서 수정했습니다. 그러면서 font 크기도 조절합니다.

이제 .blogMenu의 위치를 맨위로 올립니다. 올리는 방법은 여러가지가 있을수 있습니다만, 이번엔 간단하게 position 속성으로 띄운후, top:0; left:0; 속성으로 자리를 잡게 만들었습니다. 메뉴가 브라우저 끝부분에 안붙는걸 확인한뒤 margin값을 삭제했습니다. width:100%; 속성으로 가로길이를 브라우저 크기에 맞춥니다.



메뉴바 부분이 적절히 끝난것 같네요 :)
블로그 메뉴바를 커스터마이징하며 수정한 css파일을 비교해보면 아래와 같습니다.
설명이 애매해서 그렇지 실제로 보면 그리 많은 수정이 필요한것은 아닙니다.

수정전
.blogMenu { height:20px; margin-left:4px; margin-top:1px; overflow:hidden;} .blogMenu a { color:#ccc; padding:16px 0 0 0; height:0; overflow:hidden; display: block; float:left;} .blogMenu .desc { margin-top:-4px; font:0.9em dotum; letter-spacing:-1px; display:none;} .blogMenu li { float:left;} .blogMenu .tab_home a { background:url(images/menu_01.gif); width:59px;} .blogMenu .tab_medialog a { background:url(images/menu_02.gif); width:74px;} .blogMenu .tab_localog a { background:url(images/menu_03.gif); width:90px;} .blogMenu .tab_taglog a { background:url(images/menu_04.gif); width:73px;} .blogMenu .tab_guestbook a { background:url(images/menu_05.gif); width:68px;}
수정후
.blogMenu { height:20px; overflow:hidden; background:black; font:10px tahoma; padding:6px 0 0 0; position:absolute; top:0; left:0; width:100%;} .blogMenu a { color:#ccc; display: block; float:left;} .blogMenu .desc { margin-top:-4px; font:0.9em dotum; letter-spacing:-1px; display:none;} .blogMenu li { float:left; margin-left:14px;}


메뉴바를 수정했으니 이젠 배경 이미지 수정합니다. flickr에서 찾아낸 파일을 bg.jpg로 저장하여 images 폴더에 덮어넣은 후 이미지가 덮이지 않는 부분의 색상코드도 바꿔주었습니다. 라이센스를 표기하에 사용이 가능하다는 조항이 있으므로 skin.html을 수정하여 copyright에 링크도 삽입했습니다.
body {background:url(images/bg.jpg) center top no-repeat #323232; margin-top:40px; }
자, 이제 생각한 모양이 얼추 모양이 나오고 있습니다 :)
다음 포스트에서 블로그 타이틀의 위치를 조절하고 배포를 위한 준비를 해보겠습니다.

티스토리에 업데이트 된 Crystal Blue 스킨입니다.
태터툴즈와 텍스트 큐브에서 쓸수 있게 컨버팅 하였습니다.

Crystal Blue 스킨을 베이스로 커스터 마이징 튜토리얼을 진행할 예정이니 많은 관심을 부탁드립니다 :)

Crystal Blue Skin Download