안녕하세요. 오늘은 강좌가 아닌 그냥 진행상황 포스팅입니다.
생각보다 시간이 오래 걸리네요. ㅠ_ㅠ 이유는 아래 있습니다.
블로그 꾸미기를 하다가 -ㅠ- 이전글 다음글 버튼을 집어려고 했습니다.
초기 디자인은 Readiz님의 fastboot 스킨에서 참고해서 만드려고 했습니다.
제일 초기 디자인
Arrow 버튼 및에 단축키 문구를 추가해서 만드려고 했죠.
티스토리 단축키...
티스토리 블로그는 자체 제공하는 몇가지 단축키가 있습니다. Q: 관리자 (Admin),A: 이전 글,S: 다음 글,Z: 최근에 올라온 글,X: 최근에 달린 댓글,C: 최근에 받은 트랙백
Z, X, C 는 제대로 작동안하는 것 같네요...
근데 그냥 문구를 적으니 뭔가 허접해보여서..
구글링을 하게 됩니다. 이미지를 빼오기 위해서+_+!!!!!
그런데 아무리 찾아봐도 ㅠ 마음에 드는 디자인이 없어서.. 여기서 거의 하루 날림... 그까짓거 직접 만들어 보기로 결심을!!!!!!!!!!!!!!!!!!!!!
이전글 다음글 버튼을 직접 디자인해서 만들어보자!!!
 |  |
초중고등학교 미술시간 이후로 그림이라는 것은 그려 본 적이 없는데...
암튼 처음으로 디자인 작업을 해봅니다. ㅠ_ㅠ..
가장 초기 디자인은 ... 그냥 단순히 A 와 S에 알파벳 끝에 화살표를 붙여서 만들었습니다..
참 어떻게 이렇게 생각했지?... 완전 단순하게 생각했다가..
그리고 A를 가지고 놀던중 화살표를 만들던 중 아예 사각형안에 알파벳을 그려보았습니다..
나름 뭔가 모양이 괜찮아 졌습니다.. 이 프로토 타입(?) 콘티(?) 디자인을 가지고
연습장에 그려주었습니다.
그리고 완성한 디자인 짜잔~
연습장에 그린것을 사진으로 찍어서 일러스트로 갖고 와줍니다!!
일러스트 설치하고 요즘처럼 많이 사용하는 것은 또 처음이네요;;;;
진짜 일러스트는 단축키는 커녕 버튼 기능들도 몰랐는데.. 역시 부딪혀 보니깐 대충 어떤 건지는 알겠네요.
확실히 포토샵이 편집이 더 강점이라면 일러스트가 그리는게 훨씬 더 쉬운 것 같습니다.
※일러스트레이터로 만드는 것은 버튼을 이미지가 아닌 svg코딩으로 코드를 사용해서 html에 직접 넣기위해서 입니다!! 아래버튼은 이미지파일이 아닌 path태그로 만들 것이죠!
태그로 파일을 만들어 직접 부착하면 내부요소 제어가 가능합니다.
hover효과를 주기 위해 따로 여러가지 색상의 버튼을 만들 필요없이
CSS로 색상이나 크기변경이나 기타 애니메이션 효과를 줄 수 있죠.
완성 된 형태입니다.
일러스트는 고정점을 다루는게 가장 중요 하네요. 불필요한 고정점들은 없애주고
직선은 고정점 하나로 곡선은 2개의 고정점으로 둥글게 만들어주고...
기존 로고는 고정점 만질줄 몰라서..그냥 라이브추적만 해서 갖고왔는데
나중에 시간이 되면 로고 디자인도 고정점을 다듬어야겠네요.
아무튼 부착한 버튼입니다.
디자인 작업한다고 머리가 아파서 그냥 수박바 색으로 넣어났습니다.
만들 때는 원으로 감싸주는게 괜찮았는데 실제로 부착해보니 약간 느낌이 없네요.
아예 뒷배경을 빼버리는게 나을 것 같네요. 중앙도 뒤틀려버리고
애니메이션 hover 효과를 주고 싶지만 일딴 그건 다음기회에! ㅠ_ㅠ
주말에 맑은 정신으로 해야겠네요...
처음 직접 디자인을 해보는 것이라 나름 뿌듯하기도 재밌기도 하네요.
부착하는 방법도 완성편에서 한 번에 다루도록 하겠습니다!!
치환자가 업데이트 되어서 paging 치환자가 중복 사용이 가능합니다.
<s_paging>...</s_paging> 이부분을 보시면 쉽게 가능하실거에요
