웹디자인 강의
Photoshop 반투명 롤오버 이미지 만들기 - [난이도下]
2004.07.21 01:22
시작하기 앞서서
중복이면 대략 낭패 ㅡ.ㅡ
미흡하지만 삼가단어는 제발 난입 하지 않았으면 하는 바램입니다.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1. 명확하게 하기 위해서 나중에 보여 줘야 할부분의 화면의 크기를 정한다
Ex) 150px X 100px
![1.gif](/files/attach/images/19360728/015/422/019/1.gif)
2. Ctrl + N 을 사이즈를 150 x 100으로 한 후 새화면을 불러낸후
새화면 에서 Ctrl + A를 눌러 전체 선택 한 뒤
Edit - Stroke 에 들어가서 사이즈를 1로 해서 외각선을 그어 준다
![2.gif](/files/attach/images/19360728/015/422/019/2.gif)
3. 이미지를 반투명으로 저장해서 Save for Web 외각선만 나오게 한다
![3.gif](/files/attach/images/19360728/015/422/019/3.gif)
4. 실제로 홈페이지 화면에 외각만 있는 화면을 집어 넣어 본다
메뉴를 만들자 하고자 하는 부분의 화면 캡쳐
PrintScreen Sys Rq 키를 눌러 준면 OK !
![45.gif](/files/attach/images/19360728/015/422/019/45.gif)
5. 포토샵에서 Ctrl + N 해서 새화면 불러낸 후
Ctrl + V 눌러서 이전에 캡처한 화면 붙여 넣기
6. 캡처한 화면을 배경으로 한 후 메뉴를 2개 만든다.
하나는 그냥 보통 메뉴 다른 하나는 반투명이 들어간 메뉴
![1.gif](/files/attach/images/19360728/015/422/019/1.gif)
![2.gif](/files/attach/images/19360728/015/422/019/2.gif)
7. 이후 완성본에서 원본의 외각선과 배경을 지워준다.
복사본은 외각선과 배경을 지워주지만 배경에서 반투명이 포함된
부분은 지움 안된다 !!!(용량줄이기 신공)
(왜냐면 배경은 어짜피 홈페이지에서 보여주기 때문 또한
외각선 안지우면 대략 낭패 ㅡ.ㅡ;;)
![1.gif](/files/attach/images/19360728/015/422/019/1.gif)
![2.gif](/files/attach/images/19360728/015/422/019/2.gif)
8. 그러면 반투명이 들어간 롤오버 이미지 완성
이것을 통해 플레시가 보여주는 반투명 효과를 볼 수 있습니다 ^-^/
그외에도 대략 응용하면 나름대로 쓸모가...
GIF는 투명은 되는데 반투명이 안된다는 사실이 매우안타까움을 느끼면서...이만 마침니다.
중복이면 대략 낭패 ㅡ.ㅡ
미흡하지만 삼가단어는 제발 난입 하지 않았으면 하는 바램입니다.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1. 명확하게 하기 위해서 나중에 보여 줘야 할부분의 화면의 크기를 정한다
Ex) 150px X 100px
![1.gif](/files/attach/images/19360728/015/422/019/1.gif)
2. Ctrl + N 을 사이즈를 150 x 100으로 한 후 새화면을 불러낸후
새화면 에서 Ctrl + A를 눌러 전체 선택 한 뒤
Edit - Stroke 에 들어가서 사이즈를 1로 해서 외각선을 그어 준다
![2.gif](/files/attach/images/19360728/015/422/019/2.gif)
3. 이미지를 반투명으로 저장해서 Save for Web 외각선만 나오게 한다
![3.gif](/files/attach/images/19360728/015/422/019/3.gif)
4. 실제로 홈페이지 화면에 외각만 있는 화면을 집어 넣어 본다
메뉴를 만들자 하고자 하는 부분의 화면 캡쳐
PrintScreen Sys Rq 키를 눌러 준면 OK !
![45.gif](/files/attach/images/19360728/015/422/019/45.gif)
5. 포토샵에서 Ctrl + N 해서 새화면 불러낸 후
Ctrl + V 눌러서 이전에 캡처한 화면 붙여 넣기
6. 캡처한 화면을 배경으로 한 후 메뉴를 2개 만든다.
하나는 그냥 보통 메뉴 다른 하나는 반투명이 들어간 메뉴
![1.gif](/files/attach/images/19360728/015/422/019/1.gif)
![2.gif](/files/attach/images/19360728/015/422/019/2.gif)
7. 이후 완성본에서 원본의 외각선과 배경을 지워준다.
복사본은 외각선과 배경을 지워주지만 배경에서 반투명이 포함된
부분은 지움 안된다 !!!(용량줄이기 신공)
(왜냐면 배경은 어짜피 홈페이지에서 보여주기 때문 또한
외각선 안지우면 대략 낭패 ㅡ.ㅡ;;)
![1.gif](/files/attach/images/19360728/015/422/019/1.gif)
![2.gif](/files/attach/images/19360728/015/422/019/2.gif)
8. 그러면 반투명이 들어간 롤오버 이미지 완성
이것을 통해 플레시가 보여주는 반투명 효과를 볼 수 있습니다 ^-^/
그외에도 대략 응용하면 나름대로 쓸모가...
GIF는 투명은 되는데 반투명이 안된다는 사실이 매우안타까움을 느끼면서...이만 마침니다.
![](http://imtough.made.com/bbs/data/1/8"./files/attach/images/19360728/015/422/019/1.gif"</div)
댓글 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
그런데 저런 기법이 있었다니+_+