현재 이 블로그의 오른쪽 사이드바 하단부를 보면 위로 올라가는 애니메이션 배너가 하나 보일꺼에요^^
일종의 홍보효과라고 할까요. 인터넷 서핑을 하다가 접하는 대부분의 사이트들은 광고가 없는 곳이 없을 정도죠.
그런 광고들을 자세히 살펴보면 유독 배너광고가 많은데요. 블로그를 운영하는 분들도 이런 배너를 하나 달아두는 것도 좋은 효과를 가져올 수 있습니다.
생각하기 나름이지만 가령..여러개의 블로그 혹은 사이트를 운영한다면 방문자들의 눈에 들어오는 배너를 붙어두는 것이 필수가 아닐까요?.
이번 시간에는 블로그 배너를 움직이는 gif로 만든 이미지로 활용하는 방법에 관한 내용입니다.
사이드바 하단부에 붙어있는 로렌네소품가게라고 적혀있는 배너는 위쪽방향으로 올라가는 애니메이션 형태의 배너입니다..의외로 아주 간단한 방법이니까 배너를 만들려는 분들은 참고하시면 좋을듯 하네요.
평소에 움짤만드는법을 잘 알고 계시는 분들에게는 별로 도움은 안되구요. 초보자들에게는 정말 쉽게 따라할 수 있는 손쉬운 방법이에요~
움짤만드는법에는 포토샵을 비롯한 다양한 프로그램을 사용할 수 있지만.. 이건 본인 취향에 따라서 다릅니다^^ 저같은 경우는 포토스케이프를 사용했습니다.
전혀 복잡하지도 않고 편리하거든요~ 포토스케이프를 실행시키면 위와 같은 화면이 나오는데 메뉴들 중에서 'GIF애니메이션'을 클릭해주세요~
GIF애니메이션(움직이는 GIF만들기)로 들어가보면 왼쪽에는 파일을 선택할 수 있는 곳이 보이고 가운데는 그 파일을 드래그해서 추가할 수 있는 곳..그리고 오른쪽에는 설정부분이 보입니다.
움짤만드는법에 익숙한 분들이라면 여러개의 사진을 불러온 다음..정말 자유자재로 시간도 설정하고 재미있게 만들 수가 있겠지만.. 한번도 해본적이 없는 초보자라면 특별히 신경쓸 부분은 없구요.
간단하게 그냥 전환효과 변경만 설정해주면 됩니다..물론 그전에 사이즈 조절은 해줘야겠죠^^
전환 효과 변경모드로 들어가보면 상,하,좌,우로 움직이는 방향을 선택할 수 있고..배경색도 지정해서..마치 움직이는 듯한 모습을 연출할 수 있답니다.
하나만 선택할 수 있는데 바로 적용이 되어서 실제로 어떻게 보여지는지 확인할 수 있죠.
그런데 여전히 '움짤'이 무슨 뜻인지 모르는 사람들도 많습니다. '움직이는 짤방'의 줄임말이라고 하는데요...'짤방'은 디시인사이드라는 커뮤니티에서 최초로 등장한 속어라고 하네요.
움짤만드는법(움직이는 gif만들기)과 블로그 배너넣기
게시판에 글을 쓸때 사진을 올리지 않으면 짤리기 때문에 그런 표현을 쓰기 시작했고 지금은 인터넷상에서 거의 일반화가 되어버린 말이죠. 짤방은 '짤림방지'라는 뜻^^
아무튼 포토스케이프로 간단하게 움짤만드는법는 여기까지였구요. 이번에는 그렇게 만들어진 움짤을 블로그에 넣는 방법에 대해서 알아보겠습니다.
위에서 만든 움짤(움직이는 GIF파일)은 블로그 HTML/CSS 설정 바로 옆에 있는 '파일업로드'에 저장해주고...그 이미지 URL을 복사해두세요. 나중에 배너로 링크를 걸어줘야 하기 때문이죠.
사이드바에 배너를 넣어주는 방법은 두 가지가 있는데요..하나는 html편집창에 바로 소스를 넣어주는 방법이고..다른 하나는 사이드바 태그입력기를 사용하는 방법이에요. 여기서는 두번째 방법을 사용해보았습니다.
사이드바 설정 메뉴로 들어가보면 수많은 모듈들이 보이는데 오른쪽을 보면 실제 사이드바에 표시되는 모듈을 확인할 수 있습니다.
제가 만들어놓은 배너는 하단부에 표시되고 있으니 사이드바 가장 밑에 있는것이 당연하겠죠^^
예를 들기 위해서 태그입력기를 사이드바에 추가하는 모습을 캡쳐해보았습니다.. 위와 같이 드래그해서 넣어주기만 하면 되요. 너무 간단하죠?
추가된 태그입력기의 '편집'기능을 눌러주면 이름과 치환차를 넣을 수있는 공간이 나타납니다.
이름은 넣어줘도 안넣어줘도 노출이 되지 않는 부분이니까 상관이 없습니다. 하지만 나중에 구분이 되어야 하니 넣어주는 것이 좋아요~
실제로 사이드바에 적용한 움직이는 gif배너의 소스입니다. 여기서 가장 중요한 부분은 배너를 클릭했을때 이동되는 주소와 노출되는 이미지에요^^
<a href>안에는 배너 링크주소를 넣어주고.. 그 밑에 있는 <img src>에는 아까 위에서 저장해두었던 이미지url주소를 붙여넣어주면 됩니다.
이렇게 소스를 완성했다면 태그입력기의 치환차 부분에 넣어주고 저장하기만 하면 사이드바에 움직이는 gif배너가 정상적으로 노출이 되기 시작하겠죠.