skin/crystal blue 2nd

[ crystalBlue 2nd ] 스킨을 수정해 봅시다. - 02 -

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



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

skin.html
style.css

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

기존의 사이드바 이미지를 배경색에 맞춰서 흑백으로~


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


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