글검색결과 [테터툴즈] : 4 개

  1. 2007/11/06 Aesthetics of COLOR 스킨 공개. (2)
  2. 2007/11/03 테터툴즈 스킨 Water Brush 공개. (12)
  3. 2007/10/15 Split Wide 스킨을 공개합니다. (1)
  4. 2007/10/12 Split Wide 스킨으로 블로그 단장하다.

Aesthetics of COLOR 스킨 공개.

Blog Skin | 2007/11/06 10:45

색의 3원소 노랑,빨강,파랑을 컨셉으로 스킨을 제작하였다.
원색을 주제로 하면 꽤 화려한 스킨이 나오겠지만 3원소는 포인트 컬러로만 사용을 하여
튀지않도록 하였다.
가장 심플한 디자인을 하기위해 처음에는 1단 스킨을 생각했으나,
역시 사이드바의 편의성을 무시할 수가 없었다.
그래서 가장 간단하게 나타날수 있는 사이드바로 제작을 하였다.
그리고 고급스러워 보일수 있는 배경을 제작하여 패턴으로 깔아주었다.
사용자 삽입 이미지
- 이미지를 클릭하면 확대된 이미지를 볼수 있습니다.-

사이드바는 처음에는 모두 타이틀만 표시되고 해당 타이틀을 클릭하면 내용이 나온다.
IE6.0,IE7.0,파이어폭스에서의 디자인을 맞추기위해 꽤나 고생을 했다.
사이드바의 내용을 표시하고 싶으면 skin.html파일의 해당항목에 style="display:none"를 삭재하면 로딩시 내용이 나타난다.
원하는 부분만 나타나게해도 좋을것 같다.

스킨다운로드 - 테터툴즈 스킨자료실
태그 : 테터스킨, 테터툴즈
트랙백 : 없음 | 댓글 : 2개
  1. heidi 2007/11/06 11:55 댓글수정 또는 삭제
    댓글에 댓글입력

    아이디어가 끊임없이 샘솟으시는군요. 블로그 이름처럼..
    정말로 뚝딱하면 멋진 결과물이 탄생하는 작업공장같아요.
    전 수정해서 쓰는 것도 한참 걸리던데.. 부러울 따름.. ^^;
    제작과정에 대한 멘트도 더해 주셔서 읽는 재미도 있구요.

    • Magnet T. 2007/11/06 14:25 댓글수정 또는 삭제

      감사합니다.^^;
      저도 스킨만들때는 꽤나 시간이 걸린답니다.
      그나마 지금은 어느정도 틀이 잡혀있어서 조금만 수정하면 되지만 그것도 컴퓨터마다 보이는게 달라서 수정하고...
      스킨만드는작업은 자그마한 수정의 연속인거 같습니다.

테터툴즈 스킨 Water Brush 공개.

Blog Skin | 2007/11/03 20:08

(본 포스트는 그림을 클릭하면 확대된 이미지를 보실수 있습니다.)

새로운 스킨을 제작하였다.
스킨에 중요한것은 넓은 포스트 화면, 650px이상의 가로크기를 만족해야했다.
그리고 포스트 배경은 하얀색 바탕이 좋다.
이러한 조건에 맞는 디자인의 컨셉을 잡기위해 자료를 수집하기 시작하였다.

인터넷 서핑중 어떤 이미지를 발견하였다.

사용자 삽입 이미지

위 그림은 이정웅 화가가 그린 서양화이다. 붓까지도 그린 그림이다.
일단 컨셉이 하얀색바탕이라 이런 붓자국이 잘 어울리겠다고 생각,
컨셉을 잡았다.
사용자 삽입 이미지

우선, 붓자국을 어떻게 표현할지 고민을 하였다.
이정웅 화가의 그림을 그대로 쓰고싶었지만 역시 좋은 방법은 아닌것 같았다.
역시 내작품을 만드는것이 중요하였다.
그래서 포토샵 브러시들을 사용하여 조합을 하였다.
인터넷에서 찾은 브러시들을 여러번 바꿔가며 찍어주었다.
사용자 삽입 이미지

꽤나 멋진 표현이 되었다.
 이제 시작부분을 완성하였으니 붓을 주욱 그어서 선을 만들어야한다.
사용자 삽입 이미지

인터넷에 있는 브러시들은 포인트용 브러시로 연결해서 선을 그리지는 못한다. 그래서 포토샵의 기본 브러시를 이용하여 선을 그려주었다.

한번에 주욱 긋기 보다는 여러번 그려서 모양을 만들어준다.




사용자 삽입 이미지

마우스를 원을 그리며 두껍게 만들어주는것이 포인트. 꼬리는 약간 얇게 표현해준다.
이제 시작부분과 합성을 해주면 된다.
사용자 삽입 이미지

꽤 좋은 표현이 되었다.
스킨은 메뉴의 화살표로 사이드바를 왼쪽 오른쪽으로 이동가능하다.
스킨은 테터툴즈 스킨 게시판에서 다운로드 받을수 있다.

스킨 다운로드
http://retro.tattertools.com/ko/bbs/zboard.php?id=skin

아래링크는 이정웅 화가 에대한 뉴스기사이다.
<서양화 붓 으로 그린 동양화 붓> - 연합뉴스 -
[adsense1]
태그 : 테터스킨, 테터툴즈
트랙백 : 없음 | 댓글 : 12개
  1. Unit 2007/11/04 01:53 댓글수정 또는 삭제
    댓글에 댓글입력

    멋진 스킨 입니다. 좀 더 일찍 보았다면 스킨 만드느라 삽질 안 해도 되는건데 아쉽습니다.
    그래도 다운 받아 놓았으니 마음 변하면 언제든 바뀔겁니다.
    스킨 감사합니다.

    • MagnetT 2007/11/06 10:48 댓글수정 또는 삭제

      감사합니다.
      나중에 사용하실때 블로그와 잘 어울렸으면 좋겠네요.^^

  2. studydoo 2007/11/07 05:08 댓글수정 또는 삭제
    댓글에 댓글입력

    안녕하세요
    깔끔한 스킨 잘 사용하고 있습니다 ㅎㅎ
    한가지 궁금한게 있는데요
    맨 위에 붓으로 그린듯한 이미지에
    제 블로그의 링크가 걸리게 하고 싶은데
    어떻게 해야할지 모르겠네요

    • MagnetT 2007/11/07 21:21 댓글수정 또는 삭제

      안녕하세요.
      음... 우선 윗쪽의 이미지는 배경으로 보이는것으로 아마 링크가 바로되지는 않을겁니다.
      그걸 <img>태그를 사용해서 해당이미지에 링크를 걸수도 있겠죠.

    • studydoo 2007/11/07 23:06 댓글수정 또는 삭제

      하하;; 네 근데 그걸 어떻게 해야할지 모르겠어서요
      top.jpg는 style.css에 있던데
      저기서는 링크가 걸리도록 해주지 못하나요?

    • MagnetT 2007/11/08 15:31 댓글수정 또는 삭제

      네.
      skin.html 파일의
      .
      .
      .

      <!-- 사이드 바 끝 -->


      <div id="content">
      <div id="top">
      </div>
      <hr />
      <s_list>
      .
      .
      .
      부부분의 <div id="top></div>사이에 다음 코드를 넣어주면 됩니다.
      <a href="/blog/" ><img src="./images/top.jpg"></a>

  3. 서툰걸음 2007/11/07 19:32 댓글수정 또는 삭제
    댓글에 댓글입력

    허락받을일이 있어서 남깁니다.. ^^

    하얀색으로 깔끔해서
    이 스킨을 다중사용자 메인블로그 스킨으로 사용하려고 하고 있거든요.
    그런데 제일 위에 있는 Water Brush 문구와
    왼쪽위에 있는 블로그 주소를 좀 변경해서 사용하면 안될까요..

    그냥 쓰면 전혀 다른 곳의 블로그처럼만 보여서요..
    괜찮은지 리플로 알려주세요.. ^^

    • MagnetT 2007/11/07 21:20 댓글수정 또는 삭제

      안녕하세요 ^^;
      하단부의 저작권 표시만 지켜진다면 수정하셔도 무관합니다.^^
      왼쪽의 주소는 당연히 해당블로그주소로 수정을 하시도록디자인한겁니다.^^
      그리고 스킨 제목도 바꾸셔도 괜찮습니다.
      좋은 블로그 꾸미시기바랍니다.^^

  4. Socia 2007/12/07 17:16 댓글수정 또는 삭제
    댓글에 댓글입력

    저도 서툰걸음 님처럼 수정해서 써도 되죠?
    정말정말 최고의 디자인입니다. 감사드려요. ^^*

  5. 샤샤 2007/12/24 13:20 댓글수정 또는 삭제
    댓글에 댓글입력

    안녕하세요^^
    스킨 잘 쓰겠습니다~~
    저도 살짝만 수정해서 쓸께요
    감사합니다^^

    • MagnetT 2007/12/26 10:07 댓글수정 또는 삭제

      네 멋진 블로그 만드세요.

  6. moongala 2008/07/11 17:41 댓글수정 또는 삭제
    댓글에 댓글입력

    지금까지 본 스킨 중에 최고 입니다.
    저도 수정 후 사용하려고 하는데 미리 말씀드리는게 예의 인것 같아 말씀드립니다.
    디자인 저작권자에 MagnetT님의 이름과 블로그 URL은 남겨 놓은 예정입니다.
    잘쓰겠습니다.

    티스토리에서도 적용이 되는것 같네요. ^^

Split Wide 스킨을 공개합니다.

Blog Skin | 2007/10/15 09:51

그동안 테터툴즈 스킨 자료실 에서 스킨을 가져다 쓰면서 고민이 많았다. 나에게 맞게 고쳐쓰려고하니 HTML을 안한지 몇년이 지난지라 도저히 손에 잡히지 않았던것이다.
그러던중 인터넷의 여기저기 자료를 찾으며 겨우겨우 완성하였다.
ie와 파이어폭스에서 테스트를 마쳤다.
사용자 삽입 이미지
심플한 스킨에 종이가 찢어진 효과로 포인트를 주었다.
Leezche님이 만드신 스킨의 CSS를 사용해 틀을 잡고 수정하였다.
IE와 파이어폭스에서 테스트결과 문제없이 출력이 된다.
HTML을 오랫만에 사용했더니 스킨하나 만드는것도 꽤나 어려운 작업이었다.
스킨 다운로드 : http://retro.tattertools.com/ko/bbs/view.php?id=skin&page=1&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=headnum&desc=asc&no=668
[adsense1]
태그 : 스킨, 테터툴즈
트랙백 : 없음 | 댓글 1개
  1. 콜린멕레이 2007/11/30 00:58 댓글수정 또는 삭제
    댓글에 댓글입력

    안녕하세요~ 스킨 아주 잘쓰고있습니다. 근데 한가지 물어볼게 있습니다. 사이드바에 최근의 댓글을 표시하려면 스타일시트의 태그를 어떻게 넣어야하는지 궁금합니다. css파일에는 그냥 overflow 히든설정으로 되어있던데

Split Wide 스킨으로 블로그 단장하다.

Magnet Diary | 2007/10/12 14:01

정말 오랜만에 HTML을 손댔다.
요즘에는 DIV태그를 사용하는게 대세인거 같아서 한참 DIV태그에대한 공부를 했다.
그래서 여러 스킨 자료들도 참고하고 CSS는 부분부분 가져오기도 했다.
그리고 파이어폭스에서의 호환성 문제로 꽤나 골치가 아팠다. 아직 100% 호환은 안되지만..
DIV...좋지만 처음사용해서 그런지 너무나 어렵다. 위치맞추기가..
사용자 삽입 이미지

이미지를 최소화하고 왼쪽의 찢어진이미지로 포인트를 주었다. 흰색의 배경이 넓으면 썰렁해보이기 때문,
나중에 소스를 수정해서 배포해야겠다.
태그 : 블로그, 스킨, 테터툴즈
트랙백 : 없음 | 댓글 : 없음
 이전  1   다음