티스토리 스킨 무료로 배포합니다.~ [화이트계열]

블로그 초보자용 티스토리 배포합니다~~!!
블로그 초보자용 티스토리 스킨 배포합니다~~!!

오늘은 예고 해드렸던것처럼 티스토리 스킨을 무료로 배포하려 합니다.

머~~ 그렇다고 대단한 스킨을 만들어서 배포하는건 절대~절대~ 아니구요~


보통 스킨제작을 초,중,고급 3가지 형태로 굳이 나누어보자면..

지금 제가 배포하는 스킨은 아마도 초급자용이라 생각하시면 될듯합니다.


누구나 그렇듯 막상 블로그를 시작하려고 하면..
이상하리만큼 스킨에서 시간을 오래잡아먹고, 또한 많은 고민을 하게됩니다.

저또한 몇일밤을 고민하고 또 고민하고...ㅜㅜ

그러면서 티스토리 스킨들을 어떻게 변경해야 하는지 공부도해보고..
이리저리 검색을 통해서 다른 블로거님들의 포스트도 찾아서 보기도하고..

헌데...

아직까진 다른 블로거님들이 배포하시는건..
중고급 실력자들을 위한게 더 많더라구요..

스킨설치 및 각종 CSS 수정 및 HTML코드 수정까지...어흑...ㅜㅜ



해서~~~

짜짜잔~~~~~ 제가 과감히 용기내어 아주아주 초급자용 스킨을 배포하게되었습니다.



서두가 너무 길었지만..
본론에 들어가기에 앞서 한가지 저같은 막 시작하는 분들을 위해 한가지팁을 알려드리자면..


블로그스킨은 처음부터 욕심내서 만들기보단..
어차피 운영하면서 지속적으로 꾸며가는것이 가장 좋을듯합니다.


다들 잘아시겠지만.. 티스토리측에서도 현재 아주 활용성이 너무나도 좋은 각종 스킨들을
기본적으로 레이아웃별로 제공하고 있는데..

여기서 조금만 관련팁을 알고 스킨변경작업을 하신다면..
아주 깔끔하고도 훌륭한 스킨이 탄생할거라 저는..음...저는 굳게 믿습니다~^^:


자~~그럼 지금부터 오늘 무료로 배포하는 스킨에 대해 시작해보겠습니다~

티스토리의 기본제공 스킨만 적용할줄 알면 누구나 쉽게 멋진 스킨을 제작 할 수 있습니다. 이는 앞으로 저와 함께 하시면 곧 진리처럼 들리게 될것입니다. ^^

이글을 보시는 분들은 위의 말을 맘속에 한번 더 되새기면서 천천히 순서대로 시작해보도록 하겠습니다.

1. 무료배포하는 화이트계열 티스토리 스킨

위의 화면이 오늘 배포하는 화이트계열 스킨입니다.

해당 전체화면은 아래와 같습니다.(해당 스크린샷은 기존에 작업하여 운영했던 블로그의 화면입니다.)

위의 전체스크린샷을 보시면 양쪽배경이 상단부분에서 중단되었지만...
오늘 배포하는 스킨은 세로길이가 아무리 길어도 자동으로 배경이 자연스럽게 들어가도록 할것입니다.

그럼 이제 본격적으로 시작해보도록 하겠습니다.
다들 준비가 되셨는지요~~?? 훕훕!!! 끝까지 지치지말고 따라오시길 바랍니다~ 아자아자!!! *^^*

tistory_white_skin.zip

위의 스킨을 먼저 다운받아서 본인의 컴퓨터 원하시는 곳에 다운받습니다.

다운을 받으시고 압축을 해제하시면 아래와 같은 화일들과 폴더가 보이실 겁니다.

위와 같이 화일들이 보이시면 일단 반은 성공하신겁니다~ ( 설마 정말 반은 끝났다고 믿으시는건 아니시죠??...^^:)

혹 하나하나 따라하기 힘드시거나 시간이 없으신분은 압축화일을 해제하시면 skin.html 화일의 내용을
관리자메뉴 [스킨] > [HTML/CSS 편집] 화면에서 skin.html 소스안에다가 그대로 전체를 복사해서
붙여넣기 하시고, 다운받은 화일의 images폴더의 모든 이미지를 [파일업로드]화면에서 올리시면
오늘 세팅할 스킨 그대로 적용됩니다~~

( 단, 샘플화면처럼 메인화면구성과 사이드바의 내용은 적용되지않습니다.. 참고해주세요~)

그럼 위의 다운 받은 화일들을 가지고 이제부터 본격적인 스킨세팅 및 적용에 들어가겠습니다.

2. 티스토리에서 기본제공하는 스킨적용하기

다음단계로 들어가시기전 본인이 가입하고 만든 티스토리 관리자화면으로 이동합니다.

위의 설명대로 관리자 상단메뉴에 보시면 3번째 [스킨] 이란 대메뉴가 보이실겁니다.

여기서 해당 메뉴에 마우스를 올려놓으시면 자동으로 하위메뉴가 펼쳐 보이시는데...

이때 총 6개의 하위메뉴중 가장 첫번째자리에 위치한 [스킨선택] 이란 메뉴를 클릭하여 페이지 이동합니다.

스킨선택으로 페이지 이동하시면 아마도 큰 이변이 없는한 모든분들이 지금 위의 화면처럼 첫화면이 동일하게
보이실겁니다.

일단은 지금은 제가 무료배포하는 스킨을 다운받아 적용하는것이기에 위화면의 설명처럼..

(왜 다른스킨은 안되냐고 물으신다면...답은 없습니다만..
제가 디자인스킨 제작시 위의 스킨으로 적용하여 만든것이기에 그렇다는 말밖엔...^^:


즉, 해당 스킨에 맞추어 최적화 한것이라 이해해주시면 됩니다.
다른 스킨도 적용하게 해달라하시면... 추후 가장많이 사용하는 레이아웃스킨 몇개를 의견받아 추가적으로
더 배포할수 있게 노력해보겠습니다.


허나 이번에만 따라해보시면, 굳이 제가 따로 배포하지 않아도 쉽게 어떤 스킨을 적용하셔도 멋진 스킨을 제작하실수
있을거라 믿습니다~~ 그...그쵸??? ^^;)


위에서 2번줄, 왼쪽에서 4번째 스킨인 [Pure Black] 스킨을 바로 클릭하여 적용합니다.


그러면 아래와 같이 해당 스킨이 적용된 화면에서 바로 블로그 첫화면으로 이동하시면 다음과 같이 보이면 정상입니다.

여기까지 하셨으면 정말 반은 끝난것입니다~~ 이번에는 제말 믿으셔도 됩니다~ *^^*

자~~ 다음단계로 가기전에 잠시 자리에서 일어나 스트레칭도 한번 훅~~훅~ 하고..
화장실도 다녀오고~~ 차도 한잔 만들어서 잠시 휴식을 취한후 또 시작하도록 하겠습니다~

(약 5~10분정도의 휴식시간이 끝났다고 가정하에...흠흠....)

잠시동안의 휴식은 달콤하셨나요?? 그럼 이제 다음단계로 기분좋게 넘어가보도록 하겠습니다~~

3. 기본적용한 스킨에 [스킨위자드] 이용하여 세팅하기

이번에는 본격적인 세팅에 들아가도록 하겠습니다.

자~ 다시 블로그첫화면에서 아까 관리자메뉴의 [스킨선택] 메뉴화면으로 다시 이동합니다.

화면이동하시면 아래와 같은 화면이 상단에 보이실겁니다.

화면내용처럼 [스킨위자드] 메뉴를 클릭합니다.

그러면 위화면처럼 블로그 첫화면으로 이동되면서 화면에 [스킨위자드] 라는 설정화면 박스가 나타날것입니다.

여기는 총 3가지의 설정메뉴가 있습니다.

[배경] - 이곳은 말그대로 화면전체배경을 설정하는곳입니다.
이곳에서 우리는 화면 양쪽에 글내용이 길던 짦던 상관없이 배경이 나오도록 설정을 할것입니다.

[타이틀] - 이곳에서는 블로그상단의 화면즉 블로그타이틀과 기본적인 블로그4개메뉴가 있는 화면상에서 검게 보이는 상단부분전체를 변경할것입니다.

[게시글] - 이곳에서는 상단부분과 오른쪽 사이드바를 제외한 블로그내용이 들어가는 영역에 대한 설정을 할것입니다.

그럼 작업순서대로 [게시글] 설정부터 하나씩 들어가겠습니다.


1) 게시글 설정

게시글 부분은 기본 세팅한 블로그의 레이아웃 사이즈설정 및 기타 포스트 내용이 들어가는 제목과 내용에 대한
설정을 하는 곳입니다.

이 부분을 먼저 하는 이유는 게시글 영역 넒이를 설정해야 배포해드린 각 배경 사이즈들이 딱 맞게 들어가기 때문입니다.

해서 이 부분을 먼저 하는 것이니, 후에 스킨 제작시에는 별도의 순서없이 하셔도 무방합니다.

위의 화면을 보시면 [게시글]에 대한 설정부분이 보여집니다.


여기서 (1)항목의 글영역의 넒이부분을 650 사이즈로 변경적용합니다.


※ 글영역 넒이를 650픽셀으로 하는 이유는 개인적으로 그동안 많은 디자인작업을 거친결과 내용부분의 영역이 650픽셀
사이즈가 가장 보기좋고 안정적으로 보여졌기 때문입니다.


허나 이는 절대적은 아니며, 지극히 저 개인적인 취향 및 의견이기에 애써 부정하시거나 화내실 필요는 없습니다.^^:
여기에서는 배포하는 스킨의 글영역 넒이가 650픽셀로 설정되어 제작 되었기에 추가 설명을 하는것입니다~

글영역 넒이를 설정하셨으면 그다음으로는 각자 본인 취향대로 제목 글자색과 게시글 글자색의 색상 및 글꼴,크기를
설정하시면 됩니다.

전 이 부분은 따로 건드리지않고 기본 설정대로 하였습니다.( 기본설정의 가독성이 좋은편이라..^^:)

설정을 하고 적용을 하면 화면 사이즈가 기존보다 약간 더 커진것을 확인할 수 있습니다.



2) 타이틀 설정

게시글설정이 몸통 뼈대를 만든것이다 비유한다면, 타이틀 설정부분은 얼굴, 헤어 스타일등을 담당한다 보시면 됩니다.

타이틀 설정에는 총 3가지의 설정메뉴가 있습니다.


[이미지], [직접올리기], [텍스트] 이렇게 3개로 구성 되어져 있습니다.


우리는 여기서 [이미지]메뉴를 제외한 나머지 2개메뉴를 이용하여 설정을 완료 할 것입니다.


먼저 위의 화면처럼 [타이틀] > [텍스트] 설정 메뉴로 들어 가보시면 높이를 설정하는 부분 있습니다.

여기서 150픽셀로 수정 적용 하시면 됩니다. ( 이또한 배포스킨이 150픽셀에 맞추어 제작 되었졌기 때문입니다.)


글자색상부분은 원하시는 색상과 글꼴, 크기로 하시면 되지만.

우리는 설정그대로 수정없이 사용하겠습니다. (스킨과의 조화를 위해...추후 제작시에는 변경하시면 됩니다.)

다음으로 [텍스트] 설정메뉴로 오시면 위 화면과 같이 총 4군데의 설정부분이 있음을 볼수있습니다.

이는 추후 배경쪽 설정작업과 거의 유사하기에 여기서 잘 따라하시면 배경설정은 쉽게 하실 수 있습니다.


(1)번 항목에서는 원래크기로 설정을 하시고 (그래야 상단스킨에 사용할 이미지사이즈가 알맞게 적용됩니다.)


(2)번 항목에서는 정렬을 가운데 상단으로 설정하시면 됩니다.


(모든 스킨제작시에는 가운데,상단기준으로 하면 편리합니다. 그래야 해상도에 따라 모니터사이즈가 커지거나 작아져도 가운데 정렬를 기준으로 이쁘게 보입니다. 배경 설정 또한 같은 이치입니다.)


(3)번 항목 배경색에는 [#1e2326]값을 입력합니다. 이유는 사용된 기본 배경색이 [#1e2326] 이기 때문입니다.


(4)번 항목에서는 다운받은 images폴더의 skin_top.jpg 화일을 업로드하시면 화면처럼 적용된 것을 확인 할 수 있습니다.



자~~ 여기까지 하셨으면 아마도 블로그화면의 화면사이즈와 타이틀바가 들어간 모습을 눈으로 직접 확인하시면..
아마도 힘이 더욱더 나실겁니다~~ 이제 거의 다 왔습니다~~ 조금만 더 힘내시고 화이팅 하시길 바랍니다~^^



3) 배경설정

끝으로 배경은 [이미지]메뉴를 이용하기보단 [직접올리기]메뉴를 이용하여 설정하도록 하겠습니다.
이유는 현재 우리는 직접 만든 스킨을 가지고 스킨적용을 하기 때문입니다.

그럼 [직접올리기] 메뉴를 클릭합니다.

위의 화면이 [직접올리기] 메뉴를 이용한 배경설정을 하는방법입니다.


그럼 화면을 보면서 순서대로 해보도록 하겠습니다.


(1)번 항목은 배경에 이미지를 사용할것인지 아니면 이미지를 사용하지않고 그냥 배경색상만으로 할것인지 설정하는
부분입니다. 여기서 우리는 위에서 다운받은 배경스킨을 적용하기위해

[이미지 사용]부분에 체크를 한후 오른쪽의 셀렉트박스에서 4번째 상하반복으로 선택을 하겠습니다.

이때 상하반복으로 선택하는 이유는 제가 배포하는 배경을 상하반복으로 사용하게끔 만든것이기에 그렇습니다.

추후 블로거분들은 본인이 직접 만드시는 배경을 원하시는 설정대로 하시면 됩니다.
(참고로 각 설정들이 어떻게 적용되는 각각 적용해보시는것도 추후 스킨수정에 도움이 되실겁니다.)
 

(2)번 항목은 (1)번 항목을 다하셨으면 다음으로 [정렬]부분을 설정하는 부분입니다.

우리는 여기서 가운데 상단정렬로 지정을 할것입니다.

그래야 이미지로 만든 배경이 상단가운데를 기준으로 위에서부터 상하반복으로 계속 배경이 이어지기 때문입니다.


(3)번 항목은 혹시 모를 배경을 위해 한번 더 배경 이미지와 같은 색상으로 한번더 [배경색상]을 넣어주기 위함입니다.
여기서 우리는 배경색상값을 [#1e2326]으로 설정하겠습니다.


(4)번 항목은 위의 (1)~(3)번 항목까지 다하시고 난뒤 마지막으로 다운받은 images폴더에 보시면 [skin_bg.jpg]라는 이미지 화일이 있을겁니다.

해당 이미지를 [찾아보기]버튼을 이용하여 업로드를 합니다.

그러면 화면에 업로드한 배경이미지가 적용된것을 볼수있습니다.


아래 화면이 배경설정까지 적용한 최종화면입니다.

어떠세요? 제가 설명을 잘못해 조금은 지루하고 힘들게 따라오셨지만..

그래도 설정을 다 끝마치고 나니 한결 맘도 가벼우시고, 기분도 좋아지시지 않으시나요? ^^



여기까지 잘 따라하셨으면 98% 스킨작업이 완료된것입니다~



그럼 나머지 2%가 도대체 무엇이냐구요??

대체 멀 더해야 스킨작업이 끝날지 답답하시다구요??



아~~ 한번만 더 숨을 고르시고 아래 내용을 살펴 보시면 아마도 아~~하~~ 하실것이니...

마지막 화이팅을 내시길 바랍니다~~~ 아자아자~!! ^^

4. 마지막 마무리를 위한 세팅작업

이제 정말 마지막 세팅 작업입니다~ 더이상은 없습니다~~ ^^;

그러니 끝까지 지치지 마시고 힘 내시길 바랍니다~~~


마지막 마무리를 위한 세팅작업이 대체 무엇인지 궁금하시죠?

아마도 이글을 보시고 따라하신분들 가운데는 엇??? 왜 내스킨의 타이틀바 검정바 배경이 짦거나 길지??

하시는 분들이 있으실 겁니다~~



맞습니다~~!!!!! 바로 그부분을 깔끔하게 처리하기 위한 마무리작업입니다..

다운받은 폴더에 보시면 [skin_top.psd] 화일이 있을겁니다.


이는 상단스킨에 사용된 포토샵 원본화일입니다..


포토샵에서 해당 화일을 열어보시면 다음과 같은 화면으로 구성되어져 있습니다.

죄송하게도 디자인에 사용된 각 디자인적 요소는 배포를 할수가 없어서..ㅜㅜ

상단스킨에 사용된 디자인부분은 따로 수정 및 변경을 할수없게 하나의 레이어로 되어져 있습니다.


(이부분은 다른 오해는 없었으면 합니다. 원본자체를 배포하면 상업적목적으로 사용하시는 분들이 계셔서요.ㅜㅜ)


허나 보시면 아시겠지만 왼쪽 타이틀바가 위치하는 검정배경바 부분과 오른쪽 배경바는 따로 되어져 있습니다.


여기서 각 타이틀에 맞는 길이에 따라 왼쪽과 오른쪽 검정메뉴바를 늘이거나, 줄이는 작업을 하신후 jpg로 저장하셔서 사용(업로드) 하시면 됩니다.~



아울러 가운데 상단부분은 현재 빈공간으로 되어져 있습니다.


이는 사용하시는 분들의 블로그 로고를 따로 넣을수 있게 공간을 비워둔것이니.

사용하시는 분들 취향대로 로고나 기타 디자인적 요소를 넣으시면 되겠습니다~



아참... 오른쪽 하단에보시면 작은 글자로 저의 블로그 주소가 들어가 있습니다.


이는 다른목적이 있어서가 아니구요..

최소한 해당 스킨을 배포하는 사람이 누구인지..
나중에라도 다른 스킨을 서로가 공유할수 있도록 스킨배포하는 블로그로 쉽게 찾아오게 하기위한 의미도 있지만
제블로그가 이제막 시작이다보니 많은 분들이 알아보시고 자주 찾아뵐수있도록 넣은것이니..


부디.... 노여움이나 다른 오해는 안하셨으면 합니다..


(꼭 저작권같은 제블로그 주소가 거슬린다 생각하시면... 따로 해당 사유와 함께 요청해주시면....
머~~ 제가 힘이 있나요...^^: 블로그주소가 없는 원본으로 드릴수 있게 배려 하겠습니다.)




아~~~ 정말 스킨적용에 대한 모든것이 끝이 났네요~~


어떠세요?? 한번 직접 해보시니 별거 아니시죠??

누구던지 쉽게 원하시는 디자인으로 하실수 있으시겠죠? ^^



처음부터 화려하고 여러가지 기능이 들어간 스킨을 만들면 금상첨화겠지만..

저처럼 이제막 시작하는 초보 블로거들은 스킨하나 맘대로 하지못해 맘 한구석 속상할때가 있어서요...ㅜㅜ

하오니.. 본 포스트를 보시고.. 이게머야??? 겨우 이정도가지고 배포를 해?? 나라도 하겠다~~~ 하고
비웃지 마시구요~~ 고수가 있으면 하수도 같이 존재 한다는걸 조금만 이해 해주시면 더욱더 감사하겠습니다~~


그래주실거죠? ^^

아?? 정말요?? 정말 그래주실거예요?? 넘넘 감사합니다~~

그럼 한가지더 팁을 공개 해드립니다~~

추후 따로 포스트를 작성하려고 했는데..

혼자 원맨쇼를 하면서 하다보니 기분이 업이 되어서... 일단 간단하게라도 팁하나 공개합니다~~
(어익후... 저 정말 혼자 잘놀죠??? ㅜㅜ)

5. 보너스 팁 하나~~

사실상 팁이라기보단 새로운 기능 하나 소개하려구요~
(좀더 상세한 설명은 추후 다시 세부적으로 포스팅을 하겠습니다~)

아시는 분은 잘아시겠지만..

티스토리 관리자 메뉴에보시면 없던 메뉴가 생겼습니다.

바로 [스킨] >[메뉴설정] 이란 메뉴입니다.

만약 기존 스킨을 사용하시고 계신분이면 위의 화면처럼 보이실거구요...



오늘 저랑 새롭게 스킨을 제작하신분은 아래화면처럼 메뉴화면이 보이실 겁니다..

이렇게 달리 보이는 이유는 해당 기능이 얼마전 새롭게 추가된 기능인데...

기존 사용자들은 해당 기능을 사용할 수 있는 스킨이 아니라서 메뉴가 안보이고 안내화면만 보이시는 겁니다.



그럼 어떻게 사용하느냐??

바로 티스토리 기본 제공 스킨 리스트 화면에 보시면...

위 화면과 같이 [M] 모양의 아이콘이 있습니다..


해당 아이콘이 있는 스킨은 블로그 상단 기본 메뉴를 사용자 맘대로 추가, 수정, 변경을 할 수 있습니다.


아주 대단한 위력의 신기능이죠~~~^^

사실 이기능때문에 제가 기본 제공 스킨가지고 스킨 제작하여 배포하려고 맘먹은 것이거든요~


이기능이 예전에 없어서 메뉴를 만들거나 추가할때 따로 CSS의 지식이나 HTML의 기본 지식이 없으면..

감히 엄두도 못낼 스킨작업이었는데..

해당 기능이 있어서 이제는 블로그 사용자가 원하는 메뉴를 언제든 맘대로 추가할수도..
수정할수도 있고 링크 또한 원하는 페이지나 사이트 주소로  얼마든지 가능하거든요~~


한번 이글 보시는 분들은 사용해보세요~~ 이거보시면..

우와~~이제 힘들게 스킨안만들어도 되겠구나~~하고 만세를 부르실......거...죠?? ^^:

전 개인적으로 만세를 불렀답니다~~~ 오호호...


여튼 해당 기능의 자세한 설명은 빠른시일안에 포스팅 하도록 하겠습니다.


오늘은 여기까지만 이런 팁이 있다는것만 알아주시고~

이제부터는 어렵게 스킨을 안만들고 기본 제공스킨으로도 얼마든지 원하는 스킨을 손쉽게 만들수 있구나~~

하고 몸과 맘으로 흠뻑 느껴주시기만 하면 되겠습니다~~~ ^^



그럼 전 첫 무료배포 스킨에 대한 설명을 여기서 마치구요~

내일 다시 레드계열 스킨 공개를 위한 준비를 하겠습니다~~


끝으로 이글을 보신분들 너무너무 감사합니다~~


저는 여러분의 추천과 구독~~~으로 힘을 먹고 삽니다~~오호호 ^^


저를 기분좋게 해주시면 이후로도 많은 스킨을 만들어 배포하겠습니다~~

그럼 오늘하루도 모두들 기분좋은 하루되시구요~~

무조건 화이팅입니다~~ 아자아자~~!! *^^*