웹디자인 강의
Flash 플래시에서 포토샵에서 작업한 깔끔한 투명 이미지 임포트 시키는 방법
2005.04.19 06:16
웹 디자이너나 홈페이지 제작하시는 분들이 가질 수 있는 의문중에 하나가 '플래시도 포토샵에서처럼 알파(자연스러운 투명)값이 그대로 적용된 투명이미지를 불러와 작업할 수 없느냐?'하는 것이 아닐까 합니다.
물론 웹디자인 내공(?)이 입신의 경지까지 이르신 분들은 아시겠지만 제 주변에 이와 비슷한 질문을 하셨기에 그 비법(?)에 대해 설명해드리도록 하겠습니다.^^;
먼저 설명에앞서 웹 상에서 가장많이 사용되는 투명이미지의 포맷형식 중에 하나가 바로 GIF이미지 일것입니다.
근데 아시겠지만 GIF이미지가 웹 전용이미지이다 보니 플래시에서 인클루드 시켜보면 투명 색으로 지정된 특정 색상을 제외하곤 포토샵에서 처럼 알파값은 전혀 적용되지 않는다는 것을 아실겁니다.
근데 포토샵에서 만들어 낼수 있는 투명이미지의 포맷 형식중의 하나인 'PNG' 파일 포맷만 잘 만들어 포토샵에서 인클루드 시켜준다면 플래시에서도 포토샵에서 작업하던 레이어 고대로 불러올 수 있답니다.
그럼 지금부터 그 방법에 대해 설명드리도록 하겠습니다.
강좌에 사용된 이미지는 실제 제눈을 포토샵에서 쪼꼼... 진짜 아주 쪼꼼 편집한 이미지를 사용하였습니다.(포토샵이 역시 조킨 조아...ㅋㅋ)
1. 먼저 포토샵에서 플래시에 인클루드 시킬 이미지나 텍스트 작업을 마친뒤 아래그림처럼 Background 레이어의 '눈' 표시를 클릭하여
Background 레이어가 안보이도록 해줍니다.
2. 그러면 아래그림처럼 Background레이어가 감춰져서 알파(투명도)값이 적용된 그대로 보여지는것을 알 수
있습니다.
3. 이제 알파값이 그대로 적용된 PNG파일을 만들어 보도록 하겠습니다. 상단메뉴의 [File]-[Save for Web]나
단축키 [Alt+Shift_Ctrl_S]를 하여 Save For Web 대화상자를 활성화 시켜줍니다.
※ 저장하기에 앞서 1번 작업에서 해준 Background레이어는 반드시 숨겨준 상태에서 이 작업을 해야한다는 것입니다.
4. Save For Web 대화상자가 활성화 되면 (①)Preset탭에서 PNG-24로 체크하시면 아래그림처럼 세부속성메뉴로 바뀌는데
그 속성값도 아래그림처럼 모두(②, ③) 바꾸어 주거나 제대로 선택되었는지 확인후 [SAVE]버튼을 클릭하여 저장하고
플래시 작업으로 넘어갑니다.
5. 플래시에서 상단메뉴의 [File]-[Import]-[Import to Stage]나 단축키 [Ctrl+R]을 눌러 포토샵에서 작업한 PNG파일을
임포트 시켜주고 이제 원하는 플래시 작업을 하시면 됩니다.^^
6. 아무변화가 없는것 같나요? Background색상이 흰색으로 지정되어 그런것 처럼 보이지만, 아래그림처럼 배경색상을 마음대로
바꾸어 보시면 GIF이미지를 임포트 시킨것과 어떻게 다른지 확실히 알수 있을겁니다.^^
7. 어떤가요? 포토샵에서 레이어 작업하는것과 별반 다를게 없이 이미지 전체에 알파값이 그대로 적용되어 있지 않나요?
8. 미리보기 [Ctrl+Enter]하셔서 확인해 보세요. 참고로 PNG 임포트 효과를 확실히 보여드리기 위하여 배경 이미지를
넣어봤습니다.^^
PS.... 강좌에 사용되는 이미지는 이미지박스를 이용하라?........ 용량이 어림도 없네요;;
하시면서 잘 안되거나 궁금한 점은 코멘트 남기시거나 biz@cmmate.com으로 메일 주시면 답변드리도록 하겠습니다.
멋뜨러지고 주겨주는 홈페이지를 만들고자 하시는 분들께 이 강좌를 바칩니다.
물론 웹디자인 내공(?)이 입신의 경지까지 이르신 분들은 아시겠지만 제 주변에 이와 비슷한 질문을 하셨기에 그 비법(?)에 대해 설명해드리도록 하겠습니다.^^;
먼저 설명에앞서 웹 상에서 가장많이 사용되는 투명이미지의 포맷형식 중에 하나가 바로 GIF이미지 일것입니다.
근데 아시겠지만 GIF이미지가 웹 전용이미지이다 보니 플래시에서 인클루드 시켜보면 투명 색으로 지정된 특정 색상을 제외하곤 포토샵에서 처럼 알파값은 전혀 적용되지 않는다는 것을 아실겁니다.
근데 포토샵에서 만들어 낼수 있는 투명이미지의 포맷 형식중의 하나인 'PNG' 파일 포맷만 잘 만들어 포토샵에서 인클루드 시켜준다면 플래시에서도 포토샵에서 작업하던 레이어 고대로 불러올 수 있답니다.
그럼 지금부터 그 방법에 대해 설명드리도록 하겠습니다.
강좌에 사용된 이미지는 실제 제눈을 포토샵에서 쪼꼼... 진짜 아주 쪼꼼 편집한 이미지를 사용하였습니다.(포토샵이 역시 조킨 조아...ㅋㅋ)
1. 먼저 포토샵에서 플래시에 인클루드 시킬 이미지나 텍스트 작업을 마친뒤 아래그림처럼 Background 레이어의 '눈' 표시를 클릭하여
Background 레이어가 안보이도록 해줍니다.
2. 그러면 아래그림처럼 Background레이어가 감춰져서 알파(투명도)값이 적용된 그대로 보여지는것을 알 수
있습니다.
3. 이제 알파값이 그대로 적용된 PNG파일을 만들어 보도록 하겠습니다. 상단메뉴의 [File]-[Save for Web]나
단축키 [Alt+Shift_Ctrl_S]를 하여 Save For Web 대화상자를 활성화 시켜줍니다.
※ 저장하기에 앞서 1번 작업에서 해준 Background레이어는 반드시 숨겨준 상태에서 이 작업을 해야한다는 것입니다.
4. Save For Web 대화상자가 활성화 되면 (①)Preset탭에서 PNG-24로 체크하시면 아래그림처럼 세부속성메뉴로 바뀌는데
그 속성값도 아래그림처럼 모두(②, ③) 바꾸어 주거나 제대로 선택되었는지 확인후 [SAVE]버튼을 클릭하여 저장하고
플래시 작업으로 넘어갑니다.
5. 플래시에서 상단메뉴의 [File]-[Import]-[Import to Stage]나 단축키 [Ctrl+R]을 눌러 포토샵에서 작업한 PNG파일을
임포트 시켜주고 이제 원하는 플래시 작업을 하시면 됩니다.^^
6. 아무변화가 없는것 같나요? Background색상이 흰색으로 지정되어 그런것 처럼 보이지만, 아래그림처럼 배경색상을 마음대로
바꾸어 보시면 GIF이미지를 임포트 시킨것과 어떻게 다른지 확실히 알수 있을겁니다.^^
7. 어떤가요? 포토샵에서 레이어 작업하는것과 별반 다를게 없이 이미지 전체에 알파값이 그대로 적용되어 있지 않나요?
8. 미리보기 [Ctrl+Enter]하셔서 확인해 보세요. 참고로 PNG 임포트 효과를 확실히 보여드리기 위하여 배경 이미지를
넣어봤습니다.^^
PS.... 강좌에 사용되는 이미지는 이미지박스를 이용하라?........ 용량이 어림도 없네요;;
하시면서 잘 안되거나 궁금한 점은 코멘트 남기시거나 biz@cmmate.com으로 메일 주시면 답변드리도록 하겠습니다.
멋뜨러지고 주겨주는 홈페이지를 만들고자 하시는 분들께 이 강좌를 바칩니다.
댓글 5
-
박혁철
2006.01.01 18:38
홈때기님 감사해요..!! -
사야오빠
2005.04.20 20:01
이미지박스 용량을 늘리려면 Eccen님에게 쪽지를 보내시면 된답니다. -
RiFF
2005.05.14 01:22
오오... 저같은 플래시 초보들에게는 아주 획기적이네요...=ㅅ=b -
인천사람
2005.05.29 12:31
Good !!.입니다. -
앙큼녀
2007.12.15 01:19
오호~.....