Homepage 형 블로그 만드는 방법 2탄!
홈페이지 형 블로그 만들기 1탄에서는
블로그 상단에 사진을 넣는 것까지 했구요
2탄에서는 본격적으로
메뉴를 만들고
이동이 가능하게끔 해 보도록 할게요
홈페이지 형 블로그를 만들 때에는
이미 크롬을 쓰시는 분들도 계시겠지만
html 관련 작업을 할 때에는
Chrome 으로 들어가 주세요
윈도우 익스플로러(IE)에서는
html 기능이 먹지 않는 경우가 있거든요
크롬으로 블로그에 들어가셔서
F12 를 클릭
오른쪽에 html 코드창이 보일 겁니다
다른 건 손대지 마시고
오른쪽 상단에 점 세 개짜리를 클릭
메뉴가 열리면 Settings 클릭
Debugger 에 Disabled JavaScript 체크 확인
처음엔 Settings -> Preferences 에
이 부분이 안 보여서 당황하시겠지만
아래쪽으로 스크롤을 내리다보면 있답니다
체크되어 있는 것을 확인하면 X 눌러서 꺼주세요
그리고 블로그 투명한 위젯을 놓았던 쪽에
마우스로 블록을 씌우면
위처럼 파란색 5개가 보이실 거예요
이 부분에 칸을 맞춰 넣으면
우리가 흔히 보는 Homepage 처럼 메뉴를 클릭해서
그쪽으로 이동할 수가 있어요
따라서 파란색 부분을
캡처해서 저장해 주시구요
포토샵 cs6 한글판에서
배경과
파란색부분을 캡처한 사진
2장을 불러와주세요
(단축키 : Ctrl + O)
그럼 포토샵 화면에는 2개의 사진이 있는 상태일 겁니다
그 다음 투명위젯 사진을 원래 배경사진 위에
덮을 건데요
여기에서 잘 따라와 주세요
먼저
배경이 아닌 투명위젯 사진이 선택되어 있는 상태여야 합니다
뭐가 선택되어 있는 상태인지 모르시다면
위에 빨간색으로 표시된
사진이름이 적힌 부분만 마우스로 클릭해 주세요
그럼 사진이 선택됩니다
그리고 포토샵 한글판의 왼쪽 도구 모음에서
빨간색 네모친 부분이
Move tool 인데요
화살표아이콘을 한 번 클릭하고
그림위에서 마우스 클릭
손떼지 않고 드래그 하면 사진이 옮겨집니다
그래서 위 사진처럼
원래 배경과 투명위젯만 자른 부분이 잘 맞도록
위치를 맞춰주세요
위 사진이
배경으로 쓰일 사진 위에
홈페이지처럼 메뉴를 넣을 파란색 부분을 겹쳐놓은 사진이랍니다
투명위젯들이 약간 흐리게 보이는 이유는
제가 뒷배경과 잘 맞추려고
투명도를 조절해서 그런 건데요
포토샵 cs6 한글판에서
window -> layer 도구를 열어
Opacity와 Fill 부분의 숫자를 낮춰주면
투명도를 조절하실 수 있답니다
그리고 위에처럼 제가 쓰고싶은 메뉴이름을
놓고싶은 자리에 놓으면 되는데요
저는 위 사진과 같은 그림으로
홈페이지 형 블로그를 만들 예정이랍니다
화면위에 글씨를 쓰기 위해서는
포토샵 왼쪽 도구에서 T 를 클릭하고
원하는 위치에 마우스로 커서를 놓으면
글씨를 쓸 수 있습니다
글씨체나 크기 변경은
Window -> Character
도구를 열면 되구요
보통은 오른쪽에 있는데
처음 포토샵을 사용하시는 분들은
캐릭터 도구가 안 열려 있을수도 있답니다
위 사진처럼 저는
글자들의 위치를 맞춰주고 싶어서
photoshop Rulers 기능을 썼습니다
사진에 눈금이 표시되어 있지 않다면
View -> Rulers 클릭
가로줄은 위 눈금에서 클릭하고 드래그
세로줄은 옆 눈금에서 클릭하고 드래그하면
저렇게 위치를 맞출 수 있답니다
그리고 추후에도 수정할 수 있는
위 배경을 psd 파일과 jpg 파일로 각각 저장해 주세요
psd 파일은 포토샵에서 수정할 수 있도록 함이고
jpg 파일은 블로그에서는
상단에 그림파일만 업로드가 되기 때문에
따로 저장을 하는 것이랍니다
자 여기까지 만들었으면
이제 저 글자들의 위치를 확인해서
html 코드를 작성해 볼게요
메뉴들 위치를 동일하게 만들어서
아래 작업을 한 번만 하시는 분들도 계시지만
그냥 투명위젯 5개를 각각 다 해볼게요
왼쪽 도구에서 사각형 아이콘을 클릭
투명위젯 크기에 맞게 드래그 해 주구요
맨 처음 사용해 봤던 포토샵 도구의 크롭툴(crop)을 클릭해서
위처럼 하나만 남도록 해 줍니다
그리고 각각 jpg 파일로 저장해 주세요
저는 '자른부분 1~5' 라고 저장했구요
원래 배경에서 자르고 난 뒤
다시 열어서 하지 마시고
Window -> History
도구를 보면 지난 과정이 나와있으니
윗부분을 다시 클릭하면 처음 사진이 보일 거예요
그렇게 해서 5번을 반복하면
좀 덜 힘들거예요
이렇게 자른부분 그림 5개를 모두 저장하면
각 사진에서 글자의 위치를 알기 위해
IMAGE MAPIC 이라는 프로그램을 사용합니다
보통은 이 프로그램을 사용하는 것 같더라구요
아래를 클릭하시면 바로 다운받으실 수 있답니다
image mapic 을 다운받아 열기
open image for mapping 창이 나옵니다
자른부분 1개를 선택해서 열기 클릭
위의 사진처럼 보이면
빨간색 점선아이콘 클릭
(저는 사각형부분에 url 을 걸 예정입니다)
동그란 빨간색 부분의 아이콘 클릭
바로 area shape 에 coords 라고
위치가 출력되는 것을 볼 수 있습니다
위치만 복사해서 꼭 메모장에 적어 놓으세요
위치를 적어야 할 게 많답니다
위와 같은 과정을 5번 반복하면서
아래처럼 좌표값을 적어줍니다
제가 하고싶은 Homepage 형 블로그상단이
저렇게 생겼기 때문에
각각 좌표값을 구했는데요
만약 메뉴가 놓이는 모양과 위치가
다 같다
그렇다면 한 번만 해줘도 상관없습니다
투명위젯 안에서의 좌표값이
어디인지를 알기 위해 하는 작업이니까요
그리고 다시 포토샵 한글판 화면으로 돌아옵니다
이번에는 투명위젯 크기랑 똑같은
투명한 사진파일을 하나 만들 거예요
File -> New
(단축키 : Ctrl + N)
투명위젯과 같은 크기인
width : 170, height : 550
배경색 : Transparent
OK를 클릭하면
위처럼 파일이 하나 만들어 지구요
File -> Save for Web
을 클릭해서
Preset : PNG-8
로 선택하고 저장해 줍니다
이제 이 투명파일을 비공개로
올려서 이미지 주소 복사를 해 주어야 합니다
스마트에디터로 써도 상관없지만
저는 Naver blog 글쓰기의 이전버전으로 쓸게요
투명한 파일이기 때문에
글을 올려도 보이지 않구요
이미지가 있는 곳에서
마우스 오른쪽을 클릭해
이미지 주소 복사를 클릭해
메모장에 같이 적어놔 주세요
블로그에서 주소를 알아야 할 부분이 또 있는데요
바로 클릭하면 그 카테고리로 이동해야 하기 때문에
블로그 카테고리들도
각각 주소를 알아야 합니다
익스플로러 : 카테고리에서 오른쪽마우스 -> 속성 -> 주소(URL)
크롬 : 카테고리에서 오른쪽마우스 -> 링크주소복사
그리고 각각 주소를
모두 메모장에 입력해 놓습니다
그리고 관리에서 위젯 부분을 다시 들어갈게요
저는 처음에 사용했던 투명위젯들과 구분하기 위해
새로 만들어 줬는데
사실 메뉴가 있는 투명위젯에서만
edit 를 누르고
코드를 바꿔줘도 상관없어요
그래도 일단 저는 새로 만드는 것으로 해 볼게요
저는 1~5까지 모든 곳에 메뉴가 들어가 있기 때문에
새로 5개를 만들어 주어야 합니다
위젯코드
<img src="투명이미지주소" usemap="#map"/>
<map name="map">
<area shape="rect" coords="이미지좌표1" target="_blank" href="링크주소/>
<area shape="rect" coords="이미지좌표2" target="_blank" href="링크주소/>
<area shape="rect" coords="이미지좌표3" target="_blank" href="링크주소/>
</map>
"_top" : 새창으로 열기
"_blank" : 현재창에서 열기
파란색으로 친 1~5까지의 위젯들이
새로 코드를 작성해서 넣은 위젯들입니다
메뉴들이 사진의 어디에 위치해 있는지 확인하시고
그에 맞는 좌표값과 카테고리주소를 잘 넣으셔야 해요
위젯코드에서
만약 메뉴가 1개라면 area shape 부분은 1개만 들어갈 것이고,
메뉴가 5개가 위치해 있다면
area shape 를 연달아 5개를 적으시면 됩니다
그리고 투명위젯들은 없애주고
새로만든 위젯들을 위에 나란히 배치해주면 됩니다
이제 공간확보를 위해 처음에 필요했던
투명위젯은 더이상 필요없게 되었습니다
그래서 굳이 메뉴가 들어가 있지 않은 투명위젯이라면
그 자리에 그냥 놔둬도 되는 것이구요
공간확보는 해야 하니까요
저는 5개의 위젯에 모두 메뉴가 들어가 있어서
새로 위젯들을 만들어 주고
투명으로 썼던 5개의 위젯은
체크를 해제했습니다
그리고 적용을 시키면
이렇게 홈페이지 형 블로그 메인화면이 완성 되었습니다!!
타이틀에는 링크를 넣지 않았구요
아래 메뉴들에만 링크를 넣어서
Homepage처럼 메뉴 위에 마우스를 갖다대면
화살표 모양으로 변해 바로 이동이 가능하답니다
홈페이지 형 블로그 만드는 건
생소해서 어렵게 느껴지시는 거지
절대 어려운 건 아니니 차근차근 따라해 보세요>_<
* Homepage blog, 홈페이지 형 블로그 만드는 방법 1탄 보러가기 *
[코딩IT] - [Homepage blog]포토샵 cs6 한글판을 이용한 홈페이지 형 블로그 만드는 방법 1탄
