추석을 맞아 시간이 좀 생겨서 또 스킨 수정작업을 진행했습니다. 하하...

우선적으로 사이드바 메뉴에 들어가는 이미지들을 변경했습니다. 지난번에 사용했던 아이콘이 크기를 변경하면 약간 뭉개지는 현상이 있어서 새로운 아이콘으로 전체 변경해버렸습니다. 이외에도 크고작은 아이콘들의 변경이 있었구요. 간단히 정리해 볼께요.

- 사이드바 메뉴 이미지 변경 (전체)

- 글 하단 댓글, 트랙백 이미지 수정

- 링크에 마우스오버시 레인보우 효과 적용 (해당 소스 출처는 태그인넷입니다.)

- 게스트(비회원) 댓글/방명록 작성시 이름, 패스워드, 홈페이지 작성지 변경

- 상단 검색바 색상 및 레이아웃 변경

등 차차 수정해 가고 있습니다. 하하


그리고 작업중에 사용된 소스들은 모두 이 곳에서 다운로드 하실 수 있습니다.

또, 이번 스킨작업의 모티브는 Readiz님의 FastBoot 스킨입니다. 뭐.. 비교할 수 없을 정도로 허접하지만 아무튼요.


P.S.

아 그리고 이번 크롬 업데이트로 인해서 영문 폰트의 자간이 약간 맞지 않는 현상이 발생한다고 하네요. 폰트를 바꾸던지 조치를 취하도록 하겠습니다. (스킨상의 문제가 아님)

저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by 샤이닝론


스킨올린 후부터 계속적으로 작업이 이어지고 있습니다. 하.. 미흡한 부분이 한두군데가 아니더군요;;

- 댓글 쓰기 영역 이미지 적용되도록 수정

- 포스트 하단 댓글, 트랙백 갯수 확인부 이미지 적용되도록 수정

- 상단 헤더메뉴 해상도에 따른 변경 및 레이아웃 수정

- IE 8이하 버전에 대해 상단 헤더메뉴에 투명도가 지정되지 않았던 점 수정


화면 크기를 줄이면 헤더 이미지와 헤더 메뉴 및 검색창이 겹치던 문제를 해결하였습니다.


미디어 쿼리와 J쿼리를 이용하여 수정하였습니다.


화면 크기가 일정이상 (헤더이미지를 가릴 정도)으로 줄어들면 아래 메뉴가 생성됩니다. 

클릭시 활성화되어지고 다시 클릭시 사라지는 메뉴입니다.

또, 화면크기가 줄어듦에 따라 상단 메뉴와 검색창도 순차적으로 사라지도록 수정했습니다.

이외에도 HTML과 CSS 요소들을 정리하는 작업도 겸했습니다. 사용하실 분이 있을지는 음.. 모르지만 조만간 모든 블로거가 사용하실 수 있도록 CCL FREE의 스킨을 제작해서 내놓을 생각입니다.


현재 80% 작업 완료인것 같네요.

저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by 샤이닝론

안녕하세요, 오랜만에 블로그 디자인을 변경하게 되었습니다. 몇몇 주기적으로 찾아주시는 분들 생각에 오래된 이미지를 벗고 심플하고 단순한 2단 스킨을 제작하게 되었습니다. ^^


아직 제작이 끝나지는 않았습니다. 굳이 버전을 붙이자면자면.. V.0.3.6정도? (Meaning, 36% complete)

우선적으로 추가된 부분은 상단부의 검색창과 기능성 메뉴가 추가된 헤더부입니다.

해당부분은 Readiz (링크)님의 FastBoot스킨에서 착안해서 제작하게 되었고 아직 창크기에 대응해서 메뉴 위치를 다른곳으로 옮긴다거나 전체적인 헤더부 레이아웃 작업이 깔끔하게 끝나지는 않았습니다.


다음으로 블로그에서 가장 중요한 부분, 글을 읽는 포스트부분은 하.. 이전 스킨의 흔적이 많이 남아있기도 하고 댓글/트랙백 창은 여전히 수정이 필요해 보이는 부분중에 하나입니다. (이미지가 않나온다던가, 비밀댓글 영역의 글자색 부조화 등등) 포스트영역 크기 조정도 필요해 보이구요. 결론적으로 아직 산넘어 산이라는거..


사이드바.. 아직 완성도 20% 정도? 의.. 허접해 보이기에 극을 달리는 부분이라고 보이네요. (사실 헤더나 댓글영역도 마찬가지지만)


푸터는 꾸미려고 시도는 해보았지만.. 처절하게 실패 여기서 HTML과 CSS 공부가 많이 필요함을 절실히 느꼈습니다. 다른 부분은 기존에 틀이 짜여져 있어서 수정이 쉬웠습니다만 푸터부분은 기초적인 틀 없이 자체적으로 제작하려니 힘이 달리네요..


아무튼 스킨 제작에 사용되었던 소스들에 관해서 소개해 드릴께요.

첫번째로 전체적인 배경에 쓰였던 패턴 소스입니다.

(사이트 링크) 사이트를 방문하시면 다양한 패턴 소스가 있습니다. 무료 다운로드가 가능하니 참고하시면 될 것 같습니다. 깔끔한 옅은색 위주의 패턴부터 짙은색 위주의 패턴까지 다양한 패턴들이 많으니 사용영역에 따라 다르게 사용하셔도 될 것 같아요. (제가 사용한 패턴은 "Sativa"입니다.)

->스킨 최종본에서는 패턴이 변경될 수도 있지만 올려봅니다.


두번째로는 저를 힘들게 했던 각종 버튼과 메뉴에 쓰인 아이콘들입니다.

(사이트 링크) 제가 사용한 아이콘은 Vectory Mini라는 이름의 아이콘 세트이구요. 무료로 배포되는 아이콘이라 마음껏 사용하셔도 됩니다. 외에도 사이트에서 으마으마하게 많은 아이콘을 얻으실 수 있어요 ^^


하단 파일링크는 이번 블로그 디자인에 사용중인 아이콘 세트입니다. 

저작권상 문제가 있다면 항시 삭제될 수 있습니다!

vectory_mini.zip


그리고 현재 편집 및 제작중인 부분

더보기


저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by 샤이닝론

※ 본 저작물의 저작자는 Naver이며 저작권자 요청에 의해 포스트가 삭제될 수 있습니다.


네이버의 한글 가꾸기(?) 캠페인입니다. 네이버의 한글 캠페인은 애플의 맥 OS나 크롬 OS의 글꼴에서 선정되는 등 다양한 활동으로 이전부터 주목을 받았습니다. 저도 포스팅을 할 때 만큼은 왠만하면 표준 한글을 준수하려고 노력하고 있는데 쉽지 않네요.. 무튼 잡소리는 그만두고 시작해 보도록 합시다.

이번에 "한글 한글 아름답게"에서 배포될 것은 '문서 서식'입니다. 대학생이라면 모두들 "레포트"를 잔뜩 준비하시고 있으리라 생각됩니다. (필자 역시 마찬가지구요) 처음 대학에 입학하고 레포트를 받으면 '표지'라던지 '양식' 때문에 상당히 고민을 가집니다. 또, 레포트가 꼭 "문서"이지만은 않습니다. 거의 대부분의 학과에서 프리젠테이션이란 빠질 수 없는 항목 중 하나입니다. 이전부터 발표 수업이 화두가 되고 있는 만큼 ppt 준비는 거의 필수적인 항목이 되어버렸지요. 이번에 배포되는 프리젠테이션 문서 서식은 종류가 다양한 만큼 다방면에서 도움이 될 듯합니다. 필자역시 대학생이라 대학생 위주의 글을 작성하고 있기는 하지만 이외에 "공지문" "연말 결산표" "포스터" 등 다양한 서식들이 있습니다. 프리젠테이션이 직장인들에게 필수조건으로 꼽히는 만큼 각종 "포트폴리오"나 "기획안" 서식역시 포함되어 있습니다. 아.. 더이상 글로 설명드려 봐야 도움이 안되겠지요. 직접 가서 살펴보시고 원하는 서식의 다운로드가 가능합니다. 아, 또한 본 서식은 네이버 "나눔 글꼴"과 가장 잘 어울린다는거~ 잊지마시구요.

해당 링크
[네이버 "아름다운 한글문서"]
[네이버 "나눔 글꼴"]

많은 도움이 되시길.

저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by 샤이닝론


딱히 디자인이라고 할 건 없지만 오늘이 숭례문 복원 4주년이라고 합니다. 복원하시는 여러분 모두 힘내시고 어서 빨리 국보 1호! 숭례문 다시 볼 수 있었으면 좋겠습니다 ㅠㅠ..


마음껏 수정해서 사용하셔도 되고 사진의 출처는 "doopedia.com"입니다. 삼각형 배너로 자르려고 했는데 쉽지 않네요;;
저작자 표시 비영리
신고
Posted by 샤이닝론


이번 포스팅에서는 이번에 제작했던 스킨에 대해서 포스팅해볼까 합니다. 솔직히 약간 실망하신분들도 있으리라 생각은 드는데 첫작 치고는 괜찮다는 생각도 듭니다. 처음 만들어 보는건 아니지만 제 블로그엔 처음 적용시켜 보는 스킨이라 적용할 때 문제점도 있었고.. 무튼 포스팅 시작해 보도록 하겠습니다.

// 스킨 레이아웃 //
스킨에서의 레이아웃은 상당히 중요한 부분입니다. 레이아웃에 따라 사이드바 내의 메뉴 구성과 배경 이미지의 배치가 달라지기 때문이지요. 초기 레이아웃을 사이드바 양단으로 구성해 봤는데 이상해서 결국엔 한쪽 사이드바로 바꾸었습니다. 훨씬 괜찮더군요 후후.. 레이아웃을 대충 구성하고 나면 이제..
블로그 스킨 레이아웃 가이드 : [BLOG*SUSPECT]

//배경 이미지//

배경 이미지를 넣어야 하는데 가장 어려운 부분입니다. 배경 이미지를 너무 산만하게 하면 글의 집중도를 떨어뜨릴 수 있기 때문이지요. 그래서 몇몇 스킨들은 헤더(대문) 이미지만으로 배경을 꾸미기도 합니다. 저 역시 헤더 이미지로 대문을 꾸미고 나머지 배경은 패턴을 적용시켰습니다. 패턴은 무료 포토샵 리소스 사이트를 통해 쉽게 구하실 수 있습니다. 다음은 패턴 구한다고 알아본 사이트들입니다.

더보기

//클라우드 메뉴//
다음으로는 오른쪽에 붙어있는 사이드 메뉴입니다. 이부분은 원래 처음 구상때는 빠져있었었는데 바다 카페 회원분들이 많이 오셔서 그에 관한 링크들을 넣으려고 제작한 부분입니다. 그외 다른 링크들도 추가할 예정이구요. 자바 스크립트를 이용해서 제작된 메뉴이고 출처는 [KIRINYAGA] 입니다.

//그외에//
다른 사이드바 메뉴 및 소스들은 직접 제작한 것들입니다. 사실 어바웃 디자인이라고 하기도 무안한 허접한 디자인이지만 블로그에 대한 애착심이 그만큼 크기에 제작하게 되었습니다. 현재 스킨 버전은.. 한.. 0.7.8 정도인 것 같고 1.0.0이 되면 배포를 생각해 보도록 하겠습니다. (물론 헤더 이미지 제거 후) 누가 받아갈지는 의문이지만 말이죠.. ㅋㅋ 무튼 여기서 포스팅 마치겠습니다.
저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by 샤이닝론

메인 및 이미지 수정중 좋은 폰트를 무료로 받을수 있는곳을 찾았습니다.~^^

헤움이라는 곳인데 무료로 폰트를 배포하네요. (단, 회원가입을 하셔야합니다.)

아래 그림은 글꼴 Preview입니다. (문제가 소지가 있을시 삭제합니다.)


          홀릭스체의            Preview 입니다.




헤움 네모 굴림(좀 긴듯)체의            Preview 입니다.


헤움 네모 고딕체의            Preview 입니다.


이건 이름이 따로 없구요 (통칭 : 크라운피쉬체) 아무튼 Preview입니다.


이정도면 무료로 나누어 주기 아까운듯 하지만, 너무 좋은 서비스 인듯 싶네요 ㅎㅎ!

저작자 표시
신고
Posted by 샤이닝론