블로그를 시작하고 드디어 3번째 이사(?) 블로그 스킨 작업이 마무리가 되어가네요.
스킨을 변경 할 때마다 새로운 마음으로 시작 하는 것 같아서 뭔가 뿌듯하고
기분이 좋습니다. 블로그 스킨의 가장 마무리를 장식할 부분이라고 한다면
저는 로고 작업이라고 생각하네요.
한 눈에 자신만의 블로그 개성을 표현할 수 있고
방문객들에게 오랫동안 블로그의 기억 할 수 있게?
기억하기 쉽고 아름다운 블로그의 이름과 로고는 매우 중요 한 것 같습니다!
블로그의 화룡점정!!
(코코소프트는.. 제가 어릴 때 코코폰인가? 그거 갖고 싶어서 그냥 만들었던 기억이.. 너무 어릴 때라서..ㅋㅋ
암튼 네이버 다음 네이트 등등 웬만한 포털과 사이트들
게임 아이디나 전부 cocosoft 였네요.
최근 몇 년 전에는 게임앱 개발 회사 중에 코코소프트라는 이름 회사도 생겼던데 ㅠ 저랑 무관합니다.ㅠ
게임을 너무 좋아해서ㅋㅋ 게임을 만드는 회사를 다녀보고 싶기도 하네요.ㅋㅋ)
제 스킨은 몇몇분들은 익숙하게 느끼셨을텐데
바로 맥OS를 보고 꾸민 스킨입니다. ㅎㅎ
배경은.. 스노우레오파드로 시작해 지금은 마운틴 라이언 배경을 사용 하고있어요.
매버릭스나 엘 케피탄 우주 배경이 아니라 전부 이상해서요.. ㅠ_ㅠ
좌측이 제일 처음 사용 했던 맥os스킨 우측이 두 번째로 사용했던 마크쿼리 스켈레톤 3.0.5 반응형웹 스킨
그리고 지금 사용하고 있는 흉내내기님이 제작한 CCZ-CROSS 스킨 입니다.
사이트의 헤더 부분이 없어서 로고를 둘 곳이 없어서 사이드바로 로고를 제작하여 배치 하였습니다.
스킨 원래 기존 배경은 너무 예뻐서 본문 상단 제목과 로고 배경으로 사용을 하였습니다.
상단 본문 제목 부분에 배경을 넣고 싶으신 분들은 CSS 수정 .hd 부분에 background 속성 설정만 해주시면 됩니다.
/* 헤더부분 새롭게 추가*/
.hd {
background: url(./images/bg.svg) center no-repeat;
}
현재 최종적으로 완성된 로고 입니다. 마우스를 올리면 효과가 생기죠?!! ㅎㅎ
클릭하면 제일 위로 갑니다.
본격적으로 로고 만들기
제작 과정을 하나씩 알아보겠습니다.
로고를 만드는 방법은 여러가지가 있습니다. 단순히 텍스트로 표현 할 수 있고
심볼과 함께 사용 하는 경우도 있습니다.
저도 처음에는 텍스트만 사용하다가 심볼마크와 함께 사용하고
지금은 최종적으로 켈라그라피 로고를 사용 하고 있습니다.
아는 여자동생에게 점심값만 주고.. 아주 저렴하게.. 부탁했는데
매우 퀄리티가 너무 좋아서 정말 미안하고 고맙네요! ..ㅠ_ㅠㅎㅎ
지금은 웬만한 CF와 TV프로그램의 켈라그라피와 전시회까지 하는 분이랍니다!!
일러스트레이터를 할줄아시는분이시나 디자인감각이 있으신 분들은 직접 ㅠ 로고를 디자인을 해보실 수 있겠지만ㅠ_ㅠ
저는 전혀.. 그리기에는 디자인 소질 감각이 없어서.. ㅠ_ㅠ svg-editer 사이트를 사용해보셔도되고!
텍스트로 작성하실 분들은 https://www.google.com/fonts 에서 미리 글씨와 글꼴체를 확인 가능합니다.
블로그 로고 만들기 사이트 모음
블로그 로고 제작 사이트들은 따로 포스팅으로 정리를 해두었습니다!!
심볼과 함께 제작해주는 사이트들도 많으니 디자인이 힘드신 분들은 사이트로 제작하시는 것도 추천드려요!
저도 따로 켈라그라피 로고를 사용하기전에는 로고사이트를 이용해서 제작했습니다.
심볼과 함께 로고를 만들 수 있는 로고 가든을 개인적으로 추천하네요.
로고를 준비 할 때는
뒷배경은 투명인 PNG이미지를 준비하는게 좋습니다.
배경을 추가해서 디자인을 하거나 스타일을 줄때도 편하기 때문이고
로고 자체를 바로 사용해도 블로그 스킨 배경이 바로 적용 되기 때문이죠.
다양한 로고를 꾸미는 방법이 있지만 제가 사용한 방법은
포토샵의 클리핑 마스크라는 기능을 사용했습니다.
글자나 이미지 안에 배경을 집어 넣을 수 있는 기능으로
레이어 관리 영역F12에서 사용할 배경레이어와 로고를 사이의 붉은 테두리 부분을 Alt키와 함께 클릭하면 됩니다.
본인의 취향에 맞춰서 로고를 만들어줍니다!!
그리고 저도 음.. 코코소프트만 보니깐 지겨우니간 테스트용으로
AOA 크림 혜정 움짤을 준비해봤습니다.
티스토리 스킨 편집에 들어가서 로고 파일을 업로드 해줍니다.
그리고 HTML 편집으로 스킨을 넣을 위치를 잡아줍니다.
만약 사이드바에 위치를 넣을 때는 [관리]->[꾸미기]->[사이드바]->[태그입력기]를 통해서 넣는 것보다
직접 HTML에서 편집하는 것을 추천합니다. 스킨을 저장 및 불러오기를 할 때
사이드바 태그입력기를 해서 넣은 것은 초기화 되어버려서 다시 설정을 해줘야 하기 때문입니다.
<s_sidebar_element> 부분을 찾는 다면 넣는 위치를 쉽게 찾을 수 있습니다. 해당코드는 사이드바 영역 코드입니다.
사이드바 로고 배치하기 - html 수정
<s_sidebar_element>
<!-- 로고 배치시키기 -->
<div class="module">
<div class="logoeffect">
<a href="/" class="blog-title"></a>
</div>
</div>
</s_sidebar_element>
이렇게 추가 해주면 사이드바 관리화면에서도 기본 모듈로 잡혀서 순서 변경은 쉽게 가능합니다.
로고 이미지 파일을 <img> 태그를 사용해 직접 넣지 않고 백그라운드로 넣었습니다.
차이는 아래 포스팅에서 확인하시면 될 것 같아요!
http://cocosoft.kr/354 - [CSS]티스토리 하단 출처 이미지 넣기 및 위젯 순서 변경 정리
본인이 마음에 드는 방식으로 이미지는 넣으시면 됩니다!
이제 해당 클래스들의 속성을 줘 보겠습니다. 이번엔 CSS 편집해서 추가 해줍니다.
먼저 .module 속성 주기 - CSS 수정
.module{
position:relative;
margin:25px
}
만약 CCZ-CROSS 스킨을 사용 중이신 분들은 넘어가셔도 괜찮습니다.
바로 로고를 넣지않고 .module 속성을 안에 넣는 이유는 로고의 가운데 정렬을 쉽게 하기 위해서 입니다.
쉽게 말하면 하나의 module클래스박스를 만들고 그안에 blog-title div박스를 가운데에 위치 시키는거죠
.module 속성이 설정되어 있기 때문이에요! 만약 다른 스킨을 사용 하시는 분들은
해당 클래스 속성을 추가해주거나 기존 사용 하시는 사이드바 설정 클래스를 맞춰 주시면 됩니다.
본인의 스킨에 맞게 margin 값을 조정 해주시면 됩니다.
이번엔 .blog-title 속성 주기 - CSS 수정
.module .blog-title {
position: relative;
display: block;
text-align: center;
max-width: 170px;
height: 170px;
margin: 20px auto 10px;
background-image: url(https://t1.daumcdn.net/cfile/tistory/21161A4256C1E99132);
background-position: center;
background-repeat: no-repeat;
}
이번엔 이미지가 들어갈 .blog-title 클래스의 속성을 주는 것입니다.
이렇게만 설정해도 로고가 표현이 되고 배치가 완료 될 것입니다.
마찬가지로 margin 값과 사이즈 값(max-width,height)은 본인에 입맞에 맞게 조정 해주시면 됩니다.
파일을 업로드해서 스킨에 넣었다면 background-image: url(./images/당신의로고파일명.png); 이런식으로 집어넣으면 되겠죠?
이번엔 .logoeffect 속성 주기-마우스오버 효과 - CSS 수정
.logoeffect .blog-title{height:170px;width:170px;background-color:rgba(53,53,53,1);box-shadow:0 0 0 2px #353535;border-radius:50%}.logoeffect .blog-title:hover{cursor:pointer;animation:bounceOut .4s linear}@keyframes bounceOut{0%{box-shadow:0 0 0 4px #353535;opacity:1}25%{box-shadow:0 0 0 1px #353535;opacity:1}50%{box-shadow:0 0 0 6px #353535;opacity:1}75%{box-shadow:0 0 0 3px #353535;opacity:1}100%{box-shadow:0 0 0 2px #353535;opacity:1}}
마우스가 올라가실에 마우스 오버효과를 주는 CSS입니다. 간단하게 pure CSS만으로 효과를 줄수있습니다!
코드가 길어서 압축시켜 났습니다. 전부 복사해서 붙혀넣기 하시면 됩니다. 대충 수정 하셔야 하는 부분이 보이실거에요!
width,height,background-color 값을 수정 하시면 됩니다. 특히!
rgba(53,53,53,1);
#353535;
background-color 값 을 rgba로 준 것은 위 코드(border-radius,box-shadow)는 구형 익스플로러 ie8이하에서는 보이지 않기 때문에
배경색이 보이지 않게 하기 위해서 rgba 값으로 적어 준거에요. 두 코드는 동일한 색입니다.
무슨 말인지 이해 하셨으려나 ㅠ_ㅠ
암튼 rgba 소스는 구형 브라우저에서는 보이기 않기 때문에ㅎㅎ ccz-cross스킨은 ie8이하도 호환하기 때문에 섬세하게 설정한 부분이에요.
넣고 싶은 테두리 색상은 네이버에서 색상표를 검색하시면 쉽게 코드값을 알수 있을거에요!
CSS 코드 최종 삽입이 된다면 아래와 같이 적혀있겠죠?!
완성된 로고 예제 입니다!!
클릭하면 제일 위로 갑니다.
그럼 다들 본인만의 스타일로 예쁜 블로그 로고를 꾸미는 것을 해보시길 바랄게요+_+
기회가 된다면 아래 처럼 ㅠ path class 선으로만든 로고에 도전을 해보고 싶네요!!
시간이 오래 걸릴 것 같지만 최종적으로 코드를 사용해서 로고를 만드는게 목표입니다!!+_+ㅋㅋ
See the Pen Happy Valentine's Day by Nate Wiley (@natewiley) on CodePen.
