웹디자인 강의
Photoshop 반투명 롤오버 이미지 만들기 - [난이도下]
2004.07.21 01:22
시작하기 앞서서
중복이면 대략 낭패 ㅡ.ㅡ
미흡하지만 삼가단어는 제발 난입 하지 않았으면 하는 바램입니다.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1. 명확하게 하기 위해서 나중에 보여 줘야 할부분의 화면의 크기를 정한다
Ex) 150px X 100px

2. Ctrl + N 을 사이즈를 150 x 100으로 한 후 새화면을 불러낸후
새화면 에서 Ctrl + A를 눌러 전체 선택 한 뒤
Edit - Stroke 에 들어가서 사이즈를 1로 해서 외각선을 그어 준다

3. 이미지를 반투명으로 저장해서 Save for Web 외각선만 나오게 한다

4. 실제로 홈페이지 화면에 외각만 있는 화면을 집어 넣어 본다
메뉴를 만들자 하고자 하는 부분의 화면 캡쳐
PrintScreen Sys Rq 키를 눌러 준면 OK !

5. 포토샵에서 Ctrl + N 해서 새화면 불러낸 후
Ctrl + V 눌러서 이전에 캡처한 화면 붙여 넣기
6. 캡처한 화면을 배경으로 한 후 메뉴를 2개 만든다.
하나는 그냥 보통 메뉴 다른 하나는 반투명이 들어간 메뉴


7. 이후 완성본에서 원본의 외각선과 배경을 지워준다.
복사본은 외각선과 배경을 지워주지만 배경에서 반투명이 포함된
부분은 지움 안된다 !!!(용량줄이기 신공)
(왜냐면 배경은 어짜피 홈페이지에서 보여주기 때문 또한
외각선 안지우면 대략 낭패 ㅡ.ㅡ;;)


8. 그러면 반투명이 들어간 롤오버 이미지 완성
이것을 통해 플레시가 보여주는 반투명 효과를 볼 수 있습니다 ^-^/
그외에도 대략 응용하면 나름대로 쓸모가...
GIF는 투명은 되는데 반투명이 안된다는 사실이 매우안타까움을 느끼면서...이만 마침니다.
중복이면 대략 낭패 ㅡ.ㅡ
미흡하지만 삼가단어는 제발 난입 하지 않았으면 하는 바램입니다.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1. 명확하게 하기 위해서 나중에 보여 줘야 할부분의 화면의 크기를 정한다
Ex) 150px X 100px

2. Ctrl + N 을 사이즈를 150 x 100으로 한 후 새화면을 불러낸후
새화면 에서 Ctrl + A를 눌러 전체 선택 한 뒤
Edit - Stroke 에 들어가서 사이즈를 1로 해서 외각선을 그어 준다

3. 이미지를 반투명으로 저장해서 Save for Web 외각선만 나오게 한다

4. 실제로 홈페이지 화면에 외각만 있는 화면을 집어 넣어 본다
메뉴를 만들자 하고자 하는 부분의 화면 캡쳐
PrintScreen Sys Rq 키를 눌러 준면 OK !

5. 포토샵에서 Ctrl + N 해서 새화면 불러낸 후
Ctrl + V 눌러서 이전에 캡처한 화면 붙여 넣기
6. 캡처한 화면을 배경으로 한 후 메뉴를 2개 만든다.
하나는 그냥 보통 메뉴 다른 하나는 반투명이 들어간 메뉴


7. 이후 완성본에서 원본의 외각선과 배경을 지워준다.
복사본은 외각선과 배경을 지워주지만 배경에서 반투명이 포함된
부분은 지움 안된다 !!!(용량줄이기 신공)
(왜냐면 배경은 어짜피 홈페이지에서 보여주기 때문 또한
외각선 안지우면 대략 낭패 ㅡ.ㅡ;;)


8. 그러면 반투명이 들어간 롤오버 이미지 완성
이것을 통해 플레시가 보여주는 반투명 효과를 볼 수 있습니다 ^-^/
그외에도 대략 응용하면 나름대로 쓸모가...
GIF는 투명은 되는데 반투명이 안된다는 사실이 매우안타까움을 느끼면서...이만 마침니다.

댓글 3
-
e u n g - a
2004.07.21 23:39
-
Root
2004.07.21 08:15
PNG 포맷은 알파채널을 지원합니다.
대신 IE가 알파채널 png 지원이 안되는게 문제인데...
약간의 꽁수를 써주면 ie에서도 알파채널 png가 먹습니다. -
Root
2004.07.21 08:19
근데 홈페이지 만들때 쓰려니깐 투명한부분이 회색이 되는거예요T-T
그런데 저런 기법이 있었다니+_+