본문 바로가기

디자인 자료실/디자인_티스토리 스킨

티스토리 스킨 [레드계열] 또 한번 시원하게 쏩니다~!!

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

이번에도 어제에 이어 티스토리용 스킨 한가지 더 배포합니다~

물론 무료로 배포하는 거구요~

저같은 초보블로거분들을 위한 스킨이예요~~^^


오늘 배포하는 스킨은 레드계열 스킨입니다.

물론 색감이 너무 화려하고 강렬해서 쉽게 사용하기는 힘들듯 보이지만...
저같이 한번에 강렬한 인상을 주거나 창조적인 일을 하시는분들은 괜찮을듯 싶네요~ ^^

물론 너무 강렬해서 난 안되겠다 싶으시면 아래 화이트계열 버전을 사용하시면 되세요~




이번일을 계기로 앞으로 꾸준히 티스토리용 스킨을 만들어서 배포 할 생각입니다.

그렇다고 당장 고급 프로그래밍 코드가 들어간것은 지양 할거구요

쉽고 간편하게 사용할수 있는 스킨에 주력 하려고 합니다

어제 소개 해 드렸다시피 이제 티스토리용 기본 버전 중에서도 상단 메뉴를 맘대로 수정 할 수 있게 기능이
들어가 있거든요~

머~~ 저까지 고급 스킨을 굳이 안만들어도 다른 고수분들께서 잘 만들어서 배포하시기에~~헤헤.
(아~~ 사실 머.. 전 고수가 아니기에 고급스킨까지는....어흑...ㅜㅜ)


아참~!! 혹시나 사용하시면서 디자인을 어떻게 변경했으면 좋겠다~~

어느 사이트 또는 어떤 블로그 스타일의 디자인 스킨이 나왔으면 좋겠다~

이런 좋은 의견 있으시면 제 블로그에 방명록이나 스킨관련 포스트글에 댓글로 달아주세요~

예시)
http://www.stylelink.pe.kr 블로그 또는 사이트의 디자인이 너무 맘에들어요~
이런 디자인느낌 나오게 스킨좀 만들어주세요~~(이왕이면 특징을 설명해주시면 좋죠~)

이렇게 요청해주시면..
최대한 제 생각이 아닌 요청받는 의견을 최대한 수렴하여 먼저 제작하도록 하겠습니다~



서론이 또 길었습니다~~ ^^;




자~~그럼 오늘도 신나게 달려보겠습니다~~~~!!


티스토리에서 제공하는 기본스킨을 가지고도 충분히 멋지고,
다양한 스킨제작을 할수있다는 것을 우리는 앞으로 점차적으로 알게 될것입니다.

어렵고 힘들게 만들어 자유롭게 스킨변경이 힘들기보단...
쉽고 간결하게 만들어서 시대의 흐름에 맞게 변경하는것이 또하나의 전략입니다.

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

스킨적용 설명은 어제의 화이트계열 스킨과 거의 동일합니다.
해서 중복되는 설명부분은 그대로 인용하겠습니다.



 1. 무료배포하는 레드계열 티스토리 스킨

티스토리 스킨 [레드계열] 또 한번 시원하게 쏩니다~!!

위의 화면이 오늘 두번째로 배포하는 레드계열 스킨입니다.

해당 전체화면은 아래와 같습니다.(해당 스크린샷은 현재 운영하고 있는 제 블로그의 화면입니다.)

티스토리 스킨 [레드계열] 또 한번 시원하게 쏩니다~!!

화이트계열 스킨처럼 오늘 배포하는 스킨도 양쪽배경이 자연스럽게 나오는 형태입니다.

그럼 이제 본격적으로 시작해보도록 하겠습니다.
다들 준비가 되셨는지요~~?? 그럼 오늘도 지치지마시고 화이팅입니다~~ 아자아자!!! *^^*





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

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

티스토리 스킨 [레드계열] 또 한번 시원하게 쏩니다~!!

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


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

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


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



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


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

티스토리 스킨 [레드계열] 또 한번 시원하게 쏩니다~!!

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

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

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


티스토리 스킨 [레드계열] 또 한번 시원하게 쏩니다~!!

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


해당 티스토리에서 제공하는 스킨을 사용하는 이유는 어제도 설명해드렸다시피..
오늘도 제공하는 스킨은 기본스킨에 충실한 디자인만 변경된 스킨이기 때문입니다.


오늘까지 2개이상 스킨을 직접 적용해보시면 누구든지 쉽게 스킨을 원하시는 디자인으로 제작 할 수 있습니다.


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


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


티스토리 스킨 [레드계열] 또 한번 시원하게 쏩니다~!!

여기까지 잘따라 하셨나요?? ^^

오늘은 어제처럼 휴식시간없이 그냥 쭉~쭉~~ 진행하도록 하겠습니다.

한번 해본작업이니 휴식이 없더라도 금방 하실거라 믿습니다~~~ ^^




 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]라는 이미지 화일이 있을겁니다.

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

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


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


티스토리 스킨 [레드계열] 또 한번 시원하게 쏩니다~!!

어떠세요? 오늘은 어제한번 해보셨던 거라 쉽게 적용되시죠? ^^



자~~그럼 이제 마무리작업을 하겠습니다.





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


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

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

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



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

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


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


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


티스토리 스킨 [레드계열] 또 한번 시원하게 쏩니다~!!

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

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


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


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


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



아울러 가운데 상단부분에 보시면 가운데 원모양의 검정 빈공간이 있습니다.


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

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



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


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

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


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




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


어떠세요?? 오늘도 직접 해보시니 별거 아니시죠??

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



어제 한번 따라해보신분은 아마도 짦은시간안에 성공했을거라 믿어 의심치 않습니다~~^^여디

그럼 여기서 어제 알려드린 팁을 한번더 설명 해드립니다~~

추후 해당 부분은 꼭 따로 포스팅을 하겠습니다.





 5. 보너스 팁 하나~~


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

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

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

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


티스토리 스킨 [레드계열] 또 한번 시원하게 쏩니다~!!


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



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


티스토리 스킨 [레드계열] 또 한번 시원하게 쏩니다~!!


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

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



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

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


티스토리 스킨 [레드계열] 또 한번 시원하게 쏩니다~!!


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


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


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

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


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

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

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


자~~오늘도 잘 따라해주셔서 감사합니다~~^^



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

다음 스킨은 최대한 빠른 시간안에 제작하여 배포 할 수 있게 노력하겠습니다~


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


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


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

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

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