Photoshop Cs2 Rollover ,Down, Up, Out 버튼만들기

[윤응구]

포토샵으로는 롤 오버 되는 이미지 작업만 가능합니다.

1. 우선 롤 오버 만들 크기가 같은 이미지를 5장 을 불러옵니다.

   
 2. 이미지를 하나로 만들기 위하여 Layer2-4 이미지를 Background위로  드래그 합니다.

    아래 이미지참고.

3. 이미지레디를 클릭해서 이미지레디로 넘어갑니다.

 4. 레이어 팔레트에서 Layer 2 의 눈을 꺼줍니다.

     아래 Create rollover state 를 눌러 Over 를추가합니다.

Over 이 추가된 모습

 


5. Rollover State 의 Over 를 선택하고 레이어 팔레트에서

    가려주었던 Layer 2 의 눈을 클릭을 하여 보이게 합니다.

  이미지가 바뀐다.
 

6. 기본적인 롤 오버 효과는 마무리가 되었습니다.

  이제 정말 롤 오버 효과가 제대로 되었는지 확인해 볼까요.

  툴박스에서 Preview Document(Y)를 클릭합니다.
 

7. 이미지위로 마우스를 올러보세요.

  아래 이미지처럼 롤오버 되는모습이 보입니다.
 

8. 아래 Create rollover state 를 눌러 Down 를추가합니다.

 Down 을 선택하고 레이어 팔레트에서 Layer 1 눈을 켜줍니다.

9. 계속해서 같은 방법으로 Up, Out 를 적용합니다.

10. 마우스 우클릭해서 메뉴에서 Out 를 선택합니다.

    레이어 팔레트에서 Layer 4 눈을 켜줍니다.

11.  이제 다 되었네요 File->Save Optimaized As 를 선택합니다.

12. 대화 상자가 나타나면 적당한 저장 위치를 선택을 하고 아래와 같이 옵션을 설정한다음 저장을 합니다.
파일 이름: html문서의 이름
파일 형식:

은 HTML and Image를 선택하여 이미지와 html문서가

동시에 저장이 되도록 합니다.

All Slice를 선택하여 전체 슬라이스 된 조각이 저장이 되도록 합니다.
Selected Slice를 선택하면 선택한 이미지만 저장이 됩니다.

13. 저장한 위치를 볼까요. 어때요 딸기Rollover.html 문서가 있습니다.

     Images라는 폴더에는 각각의 롤오버의 이미지가 저장이 되었네요.

 14. html 팡일을 업로도해서 실행해보면 롤오버되는 모습을 볼수있습니다. 업로드방법은

     앞글을 참고하세요..

딸기Rollover.html

딸기Rollover_01-down.gif

딸기Rollover_01-out.gif

딸기Rollover_01-over.gif

딸기Rollover_01-up.gif

딸기Rollover_01.gif