DesignMyself

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

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

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

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

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


Lazylog Skin Download

플릭커(www.flickr.com)는 온라인 사진 공유 커뮤니티로, 전 세계인들이 올리는 엄청난 양의 사진 데이타를 가지고 있는 사이트입니다. 방대한 양을 자랑하는 사이트 답게 둘러보다 보면 "지난 1분 동안 2,470장의 사진이 업로드 되었습니다." 같은 문구도 볼수도 있습니다. 정말 어마어마하지요.

자, 우리가 플릭커를 중요하게 봐야할건 저런 엄청난 데이타 양과 함께 이미지를 검색할때 CCL 옵션을 지원한다는 것입니다. 고급 검색 옵션에 CCL 라이센스 관련 조항이 있어 개인 블로그에 쓸 용도뿐만이 아닌 상업적인 이용에 무리가 없고 2차 저작물을 배포까지할수 있는 이미지를 검색할수 있습니다.

그럼 한번 블로그 스킨에 많이 쓰일법한 구름 사진을 한번 찾아보도록 하지요.
www.flickr.com에 접속한뒤 "cloud"로 검색을 합니다.
한국어 사이트가 서비스되고 있긴 하지만 영어권에서 강세인 사이트이기 때문에 검색어는 영어로 하는 편의 결과물이 훨씬 좋습니다.

결과물이 뿌려지는 화면에서 고급 검색 링크가 나타납니다. 클릭해서 고급 검색 옵션으로 넘어갑니다.
평소 검색엔진에서 보이는 모습과 대동소이한 고급검색 옵션들이 펼쳐집니다. 맨밑에 보면 CCL관련 옵션들이 보여집니다.


개인 용도로 사용하실 분들은 "Creative Commons 사용권이 있는 사진 내에서만 검색합니다." 옵션만 체크하고 검색하셔도 됩니다만, 저같은 경우는 배포용 스킨에도 쓰고 있기 떄문에, 또한 회사원 신분으로 쓰는 이미지이기도 해서 상업성을 띄고 있다고 할수도 있기 때문에 모든 옵션을 키고 검색합니다.




이렇게 CCL이 적용된 구름 사진을 293,608장 (대단하죠@_@) 검색할수 있습니다.
이제 적당한 이미지를 찾아낸후 스킨에 맞게 수정하고 사용하면됩니다.



여기서 중요!
이렇게 검색한 이미지를 사용한 결과물에는 원저작자를 표기해야합니다.
저같은 경우 스킨에 Background Images from pbyrne 같은 형식으로 표기하고 있습니다.

또한 CCL이 걸린 재료로 저작물을 만들었다면 배포시에 저작자표시-동일조건변경허락하에만 배포하실수 있습니다.  (위와 같은 방법으로 검색한 이미지의 거의 대부분이 저작자표시-동일조건변경허락 조항을 따르지만 이미지에 따라 다른 라이센스 조약이 걸려있는 경우도 있을수 있으니 사용전에 확인이 필요합니다!)



사실, 외국계 서비스이기도 하고 대부분의 사용자가 개인이기 때문에 저런 조항들을 지키지 않더라도 큰문제가 없을수 있습니다. 대리인을 고용해서 고소한다던가 하는 일은 아마 없을지도 모릅니다.
하지만 CCL이란게 저작물을 좀 더 쉽게 이용할수 있고 바람직하게 공유해보자란 취지로 생긴 약속입니다.
이게 있기때문에 우리가 좋은 이미지를 손쉽게 검색해서 사용할수 있는것이니 꼭 지키도록 합시다.
저작권을 표기하는 것, 배포시에 CCL을 따르는것, 그렇게 어려운 일이 아니잖아요 :)

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

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

Crystal Blue 2nd Skin Download

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