웹마스터 팁

  2. Support
  3. 웹마스터 팁

아름지기식 홈페이지 만들기4

2002.03.12 00:11

아름지기

음..벌써 포(4)네요..^^
하하..근데..내용은 별거없죠..그냥..뜬 구름 잡는 소리만 늘어 놨으니..
암튼, 그래도 강좌는 계속 진행됩니다..(우와 멋지다,짝짝!! -.-;;)

그럼, 쓰리에서 약속 했던것처럼..이젠, 제 홈페이지를 세세히 뜯어
벗겨드리겠습니다..^^

===================================================
[이미지레뒤3.0을 이용해서 번쩍 번쩍이는 상단 메뉴바를 만들기]

일단 샘플을 먼저 구경하시구,


샘플보러가기(아름지기라고 쓰여있는곳에 마우스를 올려 보세요)

대강 만드느라..좀 안멋지네요..하지만, 기술만 알믄 자기가 활용하기
나름이니깐, 열분두 번쩍번쩍 롤오버메뉴바를 만들어 보세용..

-------------------------------------------------
일단 이미지 레디3.0을 엽니다.
그리구나서, 물론,새창을 열어야 겠죠..
새창을 열기 File>New
사이즈는 가로1500px, 세로60px
- 그렇게 하는 이유는 아무리 해상도를 높이 보는 사람이라도
그정도 크기까지는 넓게 보지 않기 때문에, 1500px의 사이즈로
메뉴바를 만들면, 위가 메뉴바 이미지로 꽉 차 보입니다.
흠..말이 좀 헤깔리긴 하지만, 이해 하는 사람은 이해 할걸로 알고, skip



암튼 전 넉넉하게 1500 x 60의 새창을 열었습니다.

그리고 배경색을 넣어 줍니다..
이때 번쩍이는것을 더욱 실감있게 만들어 줄라면 진한계열의 색을
써주세요..(저는 군청색비스무리한 색깔을 사용했습니다)

그리고 한픽셀을 선택하는 툴로
(툴바에서, 영역을 선택하는 툴 - 그중 세로로 한픽셀만 선택하는툴)
각각의 버튼 영역을 선택하여 페인트 툴로 칠해 줍니다
-이해 하시겠나? 이렇게 말로 풀어 설명하려니...
쩝 암튼, 그래도 포샵 조금은 써보신 분이라면 무난히 이해 하시리라 믿고,
(혹시라도 모르시는것 나오믄, 멜 남겨 주세요 ghapild@yahoo.co.kr)

그렇게 영역을 나누고 그에 맞는 글자를 써넣고 알맞게 꾸며줍니다..
뭐 여기 까진 자기가 만들기 나름이니깐, 알아서 자신에 맞게 만드시길
바랍니다.





뭐, 자신이 독창적으로 만드는게 어렵다면 제가 만든 디자인 하고
똑같이 해보셔두 되고요..^^

(여기서 잠깐, 전에 누차 강조했던 "모방"이라는 것은, 이런 부분입니다.
처음엔 남이 한걸 따라해 보세요..그러다 보면 자신의 스타일도 변합니다.
그리고 중요한건, 모방한다고 해서, 아주 복제 하는 것이 아닌 바에야
차이점이 생깁니다. 또다른 창조물인 샘이죠..
물론 근본적인 틀은 참조한 사이트를 크게 벗어 나지 않겠지만,
이곳 저곳의 이런부분 저런 부분 모방하여 만들어 가다보면
결국엔 자신의 실력/노하우도 쌓여가게 될것이고,
나중엔, 모방 할 필요없이 자신만의 실력으로 예쁜 홈페이지를 제작할수
있게 될겁니다. 물론 끈임없는 노력을 계속한다면 말이죠..^^)

암튼, 이미지레디로 이뿌게 제가 만든 사이트의 상단 버튼 부분의 디자인을
했다고 칩시다.

그후에 이젠 이것을 버튼으로 만들어야 합니다.

그전에 마우스를 올려놓았을때 변화될 부분을 미리 만들어 놓아야 합니다.

자 그러기 위해선 레이어 부분의 최상단에 새레이어를 추가해 주고,
레이어를 버튼으로 쓰일곳의 수 많큼 열어줍니다.

저같은 경우는 버튼으로 나뉘어진 부분이 6개라 레이어를 6개
추가하였습니다.




그후에 버튼하나의 영역만큼 하얀색으로 칠해줍니다.


이때 중요한건 꼭 버튼하나의 크기만큼 레이어에 하나씩 만들어 주어야
한다는 점입니다.  


흠 이과정이 무사히 끝났으면 그다음 단계는 지금까지 만들었던
부분의 레이어를 숨겨야 합니다.
레이어 창에 눈깔 비스무리 하게 생긴 버튼을 체크해제 해줍니다.


자 그러면 이제는 롤오버 효과를 주어야 합니다.
이미지 레디에 애니메이션 버튼, 참 유용한 녀석이죠..
이것을 활용해서, 효과를 주겠습니다.

window>animation 활성화 시키구,

슬라이스 툴을 활성화 시킵니다.



(여기서 잠깐,슬라이스 툴에 대해 짚고 넘어가죠..
포토샵에서 이녀석은 홈페이지를 만드는데 정말 중요한 역할을 하는
녀석이라고 말하고 싶습니다. 이녀석은 두종류가 있는데,
하나는, 이미지를 나누어 주는 역할을 하는 녀석(?)과 이미지에 버튼속성을
부여해 주는 녀석이 입니다...녀석녀석 하니깐 웃기다구요?? 하하, 포토샵은
제 벗이라 구럽니다 구랴 -_-;; 암튼 각설하고,
이미지를 나누어 주는 녀석은 html로 따지면 <tr><td>명령어를 수행해
주는 역할을 하고, 버튼속성을 부여해 주는 녀석은 <tr><td>안에 자신이
원하는 값을 부여하도록 하는 역할을 한답니다.
<tr><td>는 테이블을 이루어 주는 html 명령어 랍니다..
모르시는 분은 html 강좌사이트에 가서 알아 보고 오시길..^^;
그러니깐 이녀석들만 있다면 테이블하나는 이뿌게 뚝딱 하며 만들수 있다는
아름지기 생각입니다.

두녀석은 활성화되어있는 그녀석(?)을 오래 눌르고있으면 만나실수
있습니다 =..=;; )




아무튼 나누어 주는 녀석으로 테이블을 그러주고,



속성을 불어 넣어주는 녀석으로 나누어준 부분을 더블클릭한다





그다음에 활성화된 애니메이션 부분에 다음과 같이 실행해 준다.



이다음이 중요 합니다.
전에 감추어 놓았던 지금부분의 레이어 눈을 활성화 시키고
투명도를 30%로 맞추어 줍니다.





이런 방식으로 다음 레이어를 추가 하고 이번에는 투명도를 80%에
맞추어 놓습니다.
그리고 하나를 더 추가 해서 전에 체크했던 눈알을 다시 체크해제 합니다.
그러면 하나의 롤오버버튼이 완성됩니다.
짠!~
지금까지의 작업진행을 확인하려면
file>prewiew in>internet explorer 을 실행합니다.

자..그러면 다른 버튼들도 위엣 방식과 마찬가지로 진행해 나가면 되겠습니다.
(화 힘들다.. -_-;)

암튼 그렇게 버튼을 완성시킨다음
file>save optimized 를 눌러 알맞게 이름을 지정하고 저장해 주면
버튼 만들기 작업이 끝납니다..

그후에 자신이 직접 만들어 놓은 explorer 페이지를 더블클릭해서
확인해 보면 됩니다..

(여기서 주의할점.
이렇게 나눈 것들은, 기본적으로 topmargin(위쪽여백) leftmargin(좌측여백)
이 적용되어있질 않기 때문에,위쪽과 좌측에 꼬옥 붙힐려면 소스보기를 해서
topmargin="0" leftmargin="0"를 <body>안에

<body topmargin="0" leftmargin="0" <=== 이렇게 넣어 주면 됩니다.)

암튼 이렇게 롤오버 버튼 이미지가 완성됩니다.


===========================
휴!~ 정말로 힘들군요..
앞으로 걱정이네요..^^
하하, 하지만 약속은 약속/싸나이가 칼을 뽑았으면
무라도 썰라는 옛말이(?) 있듯이..
전 계속할겁니다..

담 강좌는 그럼..이런것들을 이용해서 이쁘게 메인페이지를
만드는것을 알려드리도록 하겠습니다..
여러분 고생많으셨구요..
오늘 하루 좋은 하루 되시길..바랍니다.

(글구 잊지마세요..테이블을 만들어 주는 이쁜녀셕들(?)^^
글구..롤오버 버튼을 만들때의 투명도 제어하기)

다소 횡설수설 된 감이 있긴하지만, 그래도 열심히 했으니깐,
구박하지 마시구, 5탄때 뵙겠습니다.


지금까지 한것 완성판 보기






























































































이 게시물을
수정 삭제
좋아요
목록
태그 쓰기