티스토리 링크용 배너 만드는 방법을 정리해 봤어요。
저희 티스토리 이웃인 "코리안박님의 세상읽기" 링크용 배너를 만드는 과정인데 참고해 보세요。
(포토샵 기준이에요…^-^)
① 우선 배너를 만들 이미지를 준비하세요。 (이미지 없이 만들어도 상관 없어요…^-^)
전 인터넷 검색에서 코리안박님이 배너에 쓰신 이미지를 구했어요。
파일 메뉴에서 신규 (단축키 콘트롤키+O)를 선택하고 신규창이 팝업되면、
적당한 크기(폭、높이)를 입력한 후에 엔터키를 치거나 확인을 누르면 돼요。
그 다음 도구에서 (아래 화면에서 왼쪽 직사각형 모양으로 생긴것)
문자 도구(영어 "T"자 메뉴를 클릭)를 선택하고、
작업창을 클릭해 적당한 글을 써 넣으면 돼요、간단하죠…^-^
(위에서 아예 "배너 틀"을 만들고 텍스트를 쓰셔도 무관해요)
저는 몇일전 만들어둔 제 티스토리 배너를 꺼내 크기를 같게 해서 틀을 짰어요。
Windy sky 스킨 사이드바 배너의 크기는 폭 180픽셀 정도가 적당하더라고요、
그래서 최종적으로 배너를 저장할 때는 180픽셀로 만드셔야 해요。
하지만 작업할때는 편집하기 편해야 하니까 조금 큰 크기로 작업창을 만들어 작업하는게 숴워요…^-^
※ 전 폭 320、높이 110정도로 작업했어요。
준비해둔 배너용 이미지를 곱게 단장해주고、
(아래 그림 왼쪽 큰 그림 : 이미지를 편집하는건 각자 다 다르니까요、알아서…^-^)
이미지를 복사해 배너틀에 들어가기 적당한 크기로 줄여 아래 그림처럼 배너틀에 붙여 넣어주세요。
편집한 그림을 그대로 줄여(이미지 메뉴→이미지 크기에서 폭 넓이를 줄이시면 됩니다) 붙여 넣거나、
실수할 경우를 대비해 복사한 후 새 작업창을 열어 붙여넣고、
새 작업창에서 이미지를 줄여 붙여 넣으셔도 돼요…^-^
※ 이미지 복사하기는 레이어(오른쪽 제일 아래 반전된 칸들이 있는 부분)에서
복사할 그림(이미지 레이어)이 선택된 상태에서 "컨트롤키+C"를 누르세요。
④ (②)번에서 만들어둔 글씨 (텍스트 레이어) 를 선택하고、
※ 글씨를 써둔 작업창을 마우스로 클릭하고 레이어 중에서
"T자 그림"이 있는 글씨칸을 (레이어) 선택 하세요…^-^
도구 막대에서 이동 메뉴를 누르고 "배너틀" 작업창으로 드래그 하면 "배너틀'에 글씨가 생겨요…^-^
(아래 그림 노란 화살표)
위치를 요리조리 움직여봐서 적당한 자리에 글씨가 자리를 잡게 해주세요。
⑤ 이제 마무리 단계에요。
글씨와 그림이 적당한 곳에 위치했으면 파일 메뉴에서 웹용으로 저장을 눌러보세요。
(단축키는 콘트롤+쉬프트+알트+S)
그럼 아래 그림처럼 나오는데 마음에 들면 엔터를 누르거나 저장을 눌러 저장하시면 된답니다。
이것이 원본 파일이 되고요、
티스토리에 적용하려면 자기 스킨에 맞는 사이즈로 이미지 크기를 줄여 저장하세요。
※ "따로 저장 (콘트롤+쉬프트+S) "을 눌러 .psd 파일로 저장해두면 나중에 편집할때 더 쉬워요…^-^
보기 좋게 해주려면 스타일에서 "경사와 엠보스"를 주거나
"그림자"를 넣어주어도 되는데 말이에요、전 그림자를 넣었어요。
그림자를 주려면、우선 캔버스 크기를 그림자 크기 정도로 늘려주세요。
레이어에서(오른쪽 아래) 배너 그림이 있는 레이어를 선택한 후
마우스를 더블 클릭해 "레이어 스타일" 메뉴를 띄우세요。
"레이어 스타일" 메뉴에서 "그림자 효과"를 선택해 그림자의 크기와 거리、
그림자 색상을 지정해주고 승인을 누르면 그림자가 생긴답니다…^-^
완성된 코리안박님의 티스토리 블로그 배너에요…^-^
요건 windy sky 스킨에 맞춰 크기를 줄인 사이드바용 배너。(이미지 크기만 줄여서 저장하셔도 된답니다)
windy sky 스킨 사이드바에 맞춰 완성한 코리안박님 티스토리 배너…^-^
그런데 웹서핑을 하다 보면 링크용 배너를 올려두신 분들이 계세요。
이런 분들의 배너는 이미지를 다른 이름으로 저장해서 자기 블로그등에 올려두고 링크를 걸거나、
사이드바 크기에 맞춰 이미지를 줄여 링크를 걸면 된답니다。
아래 그림은 제가 좋아하는 池澤春菜(이케자와 하루나)님의 블로그에 있는 링크용 배너。
※ 다음달 말에 미니 앨범『光の花束 (빛의 꽃다발)』이 발매된다고 하네요…^0^
● 이제 배너를 티스토리 사이드바에 올려두는 방법을 알려드릴께요…^-^
완성한 배너를 티스토리 블로그에 포스트를 하나 써서 올려두고、
포스트에 있는 배너용 그림에 마우스 오른쪽 버튼을 눌러 속성을 눌러보세요。
속성을 누르면 나오는 정보중에 "주소(URL)"를 복사하세요。
그리고 티스토리 내블로그 "관리" → "스킨메뉴" 에서 "사이드바 설정"를 눌러주세요。
"사이드바 설정"을 누른 후 아래 있는 "사용 가능한 사이드바"에서 "HTML 배너출력"을 드래그해서
위에 있는 "사용중인 사이드바"에 적당한 곳으로 끌어 놓아 자리를 잡게 하세요。
그리고 금방 자리 잡아준 "HTML 배너출력"에 있는 "편집" 단추를 눌러 링크할 사이트 주소와
아까 복사해둔 배너 이미지의 주소를 링크 태그를 사용해 적어 넣으면 됩니다…^-^
● 새창에서 링크가 열리는 태그를 쓸 경우 아래와 같이 쓰시면 됩니다。
화면에 실제로 출력되는 배너를 보고 정렬이나 줄띄우기、폰트 속성 태그를 추가하셔도 된답니다…^-^
(아래 그림 참고하세요)
위의 링크 태그를 텍스트로 첨부해 놓을께요. 붉은 글씨 부분을 지우고 고쳐 쓰세요…^-^
↓
Link_tag.rtf그럼 아래 그림처럼 배너 링크 태그를 적어 넣고 "확인"을 누르고、
화면 아래 중앙의 "저장"을 누르면 사이드바에 배너가 표시돼요。
배너 위치가 마음에 안 들면 다시 "사이드바" 메뉴로 들어와서 자리를 옮겨 보세요…^-^
티스토리 블로그에 배너를 넣은 모습이에요…^-^
티스토리 Black Gum님의 블로그와 제 블로그 링크용 배너 압축파일
↓
black_gum_banner.zip티스토리 코리안박님의 블로그와 제 블로그 링크용 배너 압축파일…^-^
↓
