이미지맵프로그램없이 이미지에 링크걸기
여러분 배너가 무엇인지 다들 아시죠?
흔히 인터넷뉴스를 볼라치면 광고가 뜬다거나 하는 그런것들이 다 배너인데요,
오늘은 제가 무료로 배너만드는 방법에 대해서 한번 알려드릴까 합니다.
일반직장인들이 배너를 만들일은 거의 없고 사업하시는 분들이나 블로그같은 것을
운영하시는 분들은 광고용으로 배너가 필요할 때가 많습니다.
하지만 배너 하나를 제작하는데에도 업체에서는 10만원이상을 요구할때가 많아서
적잖이 부담이 되곤합니다.
개인적으로 저도 7080기프트(www.7080gift.com)라는 판촉물사이트를 운영하고있는데
배너가 필요한 일이 생겨서 이참에 제가 직접 한번 제작해보기로 했습니다.
하지만 한가지 문제가 생기고 말았죠. 제 컴퓨터 사양이 낮아 포토샵을 깔면 컴퓨터가
느려지기때문에 포토샵없이 배너를 제작해야되는 상황이었거든요.
포토샵프로그램이이 있으면 편하긴 하겠지만 어쩔 수 없어서 저는 다른방법을 사용해보기로 했습니다. 그리하여 용량을 거의 차지하지 않고 사용법도 쉬운
"포토스케이프" 라는 이미지편집프로그램을 사용하여 배너제작을 해보았으니 포토샵이 없다거나 사용할 줄 모르시는 분들은 제 방법을 한번 참고해보세요.
▶ 추천포스팅 : 환상적인 휴양지 제주도를 가다! 4박5일 커플여행 제주도편
▶ 추천포스팅 : 포토샵없이 사진에 투명한 워터마크 새기는방법
▶ 추천포스팅 : 포토샵 기본강좌부터 고급강좌까지 무료사이트모음
▶ 추천포스팅 : 판촉물 40~60% 상시할인백화점 7080기프트 상품구경하기
<클릭 후 오른쪽상단 광고건너뛰기를 클릭하면 해당링크로 이동됩니다>
포토스케이프로 배너만들기
제가 오늘 만들배너는 카테고리같이 이미지의 특정영역(글씨나 그림 등)에 링크가 걸려있어 클릭시 해당주소로 바로 이동할 수 있는 이미지맵배너를
제작할건데요, 우선은 배너제작을 위해 이미지편집프로그램인 포토스케이프로 제가 원하는 이미지를 만들어야 합니다.
혹여 포토스케이프가 설치안되신 다운받으시면 되구요,
제가 만들 이미지는 생각보다 오래걸리는 작업이라서 만들어놓은 이미지는 마지막에 보여드리고 일단은 예로 간단한 이미지를 만들어 보겠습니다.
저는 "칼무리" 라는 프로그램으로 대충 바탕화면 아무곳이나 300*300 사이즈로 캡쳐하였습니다. 여러분은 무료이미지나 원하는 이미지로 만드시면 됩니다.
포토스케이프 사진편집으로 들어와 캡처한 이미지를 선택하고 페인트브러쉬를 이용해 하얀색으로 칠했습니다. 하얀색 바탕의 배너를 만들고 싶어서요 ㅋㅋㅋ
(처음에 하얀색을 캡쳐했으면 됐는데 귀찮아서 ㅋㅋ)
하얗게칠한 이미지위에 제가 원하는 글자를 넣기위해 하단 개체탭에서 T아이콘을 선택하여 입력하였습니다.
원하는 글귀를 다 집어넣어 하단 저장탭을 눌러 이미지를 저장하였습니다.
자, 이젠 배너로 쓸 이미지를 다 만들었으니 이미지를나눠 영역지정을 한 뒤 링크를 걸어줘야 합니다. 본래는 포토샵으로 해주어야 하는 작업이지만
굳이 포토샵없이도 작업을 할 수 있는 방법이 하나 있습니다.
이 방법은 매우 간단하고도 유용하며 정확도까지 높은 꿀팁인 정보라 공개하기 참 망설였는데요 ㅠㅠ 어쩔 수 없죠 ㅋㅋㅋ
"온라인 이미지 맵 에디트" (Online Image Map Editor)라는 외국사이트가 있는데요, 이미지의 특정영역을 선택하면 좌표가 표시되어 쉽게
이미지맵을 걸 수 있습니다.
온라인 이미지맵 에디터 홈페이지 : http://maschek.hu/imagemap/imgmap/
아래사진과 같이 파일선택 후 업로드버튼을 누르고 accept(동의)버튼을 눌러주시면 됩니다. 그러면 아까 제가 만들었던 이미지가 화면에 나타나는데
마우스를 이용하여 각기 영역지정을 해주시면 됩니다.
마우스를 드래그한다음 클릭까지 해야 영역이 지정됩니다. 영역이 지정되면 하단에 이미지맵코드가 만들어집니다.
혹여 영역을 잘못지정해서 삭제하고 싶다고하면 상단에 +,- 버튼이 있는데 마이너스를 클릭하면 선택한곳의 영역이 삭제됩니다.
작업을 마치면 완성된 코드를 복사해주세요.
완성된 코드는 간단히 메모장에 붙여넣기 하시고 약간의 수정을 하셔야합니다. 방금 복사한 소스의 맨처음과 맨뒷부분 1줄씩을 삭제하시고 나머지 코드를
제가 적어놓은 배너소스중간에 삽입해주시면 됩니다.
배너소스.txt
다음으로 내가 만든 이미지배너의 주소를 얻어야하기 때문에 온라인상에 사진을 올려야합니다. 저는 티스토리 블로그를 하나 개설해서 사진을 올려봤습니다.
사진을 올린페이지로 가서 마우스 오른쪽버튼을 클릭하여 이미지 주소를 복사해주세요. 저는 크롬브라우저로 해서 저렇게 뜨는데 익스플로러를
이용하시는 분들이면 속성으로 들어가시면 주소를 얻을 수 있습니다.
복사한 이미지주소를 아래사진 빨간줄이 그어져있는 곳에 붙여넣기해주세요. 실제 내 홈페이지에서 배너를 보여줄 수 있게 하는 주소인 셈입니다.
참고로 usemap="#001" 과 map name="001" 은 이름을 항상 똑같이 해주시기 바랍니다.
그리고 alt="" 는 신경안쓰시고 삭제하셔도 상관없고 title="" 은 해당부분에 마우스를 갖다대면 제목이 나타나게하는 기능으로 따옴표 사이에
원하는 제목을 입력하면되고 필요없다면 삭제해도됩니다. href="" 부분은 따옴표사이에 해당영역을 클릭시 이동할 링크주소를 입력해주세요.
target="" 은 클릭시 새창으로 열것이냐 말것이냐 부분이니 새창으로 열고싶으신분은 이렇게 target="_blank" 입력해주시면 됩니다.
자, 그렇다면 완성된 배너소스를 복사하여 제가 운영하는 사이트에 붙여넣어 보았습니다. 사이트마다 배너소스를 입력부분이 다 다르기 때문에
이것은 알아서 해결하시기 바랍니다.
아래보이시는 사진이 제가 3일에 걸쳐 만든 배너입니다. ㅠㅠ 별거 아닌것처럼 보이지만 디자인작업하는데 2일정도의 시간이 소요되었습니다.
그리고 글자마다 영역지정을 다 해주어 관련카테고리로 바로 이동할 수 있게 링크를 걸었기 때문에 링크만 50개만 넘습니다. ㅠㅠ
확인차 트로피라는 글자를 클릭해 보았더니 정상적으로 제가 입력한주소 트로피카테고리로 이동을 합니다. 3일동안 고생한 보람이 느껴지네요. ㅎㅎㅎ
배너만들기를 직접해보니 생각보다 어렵진 않습니다. 다만 이미지를 복잡하게 만들면 시간도 오래걸리고 짜증날 수도 있겠지만 그래도 업체에 맡겨서
쌩돈 나가는것보다 스스로 만들어보는것도 괜찮다고 생각합니다. 다만 업체에 맡기면 디자인이나 퀄리티가 훨씬 좋을 수 있지만 ㅋㅋㅋ
도움되셨다면 공감한번 눌러주세요~
▶ 볼만한동영상 : 고양이 밥 스틸하는 50cm대왕생쥐! 고양이는 무서워서 눈치만
▶ 볼만한동영상 : 10m 지옥의 불구덩이가 실제 존재! 투르크 메니스탄 불꽃구덩이
▶ 볼만한동영상 : 러시아 야말반도에 갑자기나타난 거대한구멍
▶ 볼만한동영상 : 아름다운 스타에서 놀랍게 변해버린 25인의 외국연예인들
▶ 볼만한동영상 : 고양이가 이상한 기운을 감지! 따라가 보았더니 아이가 공중부양
<클릭 후 오른쪽상단 광고건너뛰기를 클릭하면 해당링크로 이동됩니다>
