Visual Filters | Down Level Static Filters

Visual Filters

Visual Filter란 무엇일까? 아마 Photoshop 과 같은 그래픽 프로그램을 써 본 사람이라면 이 filter란 단어가 매우 익숙하겠져? 요즘 6.0 버전을 보니까 웬 만한 필터는 기본으로 포함하고 있던데, 낮은 버전에서는 거의 다 plugin으로 설치해서 사용했던 기억이 나는 군요. 이 사람도 원래 그래픽을 아주 못하는 편은 아닌데 요즘은 CAD나 플래쉬 같은 Vector Graphic 프로그램이나 가끔 만지작 거릴 뿐 이미지 처리하는 프로그램은 시간이 많이 걸려서 손 대기 싫어 거의 안 댑니다. 아니 사실 이미지 처리하는 프로그램으로 Macromedia 사의 Fireworks를 사용하지만 사실 그 것도 Vector Graphic 이거든요.

무슨 말이 하고 싶어서 그러냐?... 과거에는 이미지 처리하는 프로그램(포토샵 같은)을 쓰기 싫어도 다른 방법이 없었기 때문에 하는 수 없이 사용했지만 지금은 그럴 필요가 전부는 아니지만 많이 없어졌기 때문이죠... 흠... 벌써 눈치들 채셨겠지만 바로 요 Visual Filter 때문입니다...^^ Rollover Button 이라고 들어는 보셨겠죠. 바로 요런 효과를 내는 button 말입니다. 이거를 Filter Scripting을 사용하지 않으면 그림이 2개가 필요하답니다. OnMouseOver 때의 그림과 평상시와 OnMouseOut 때 사용할 2개의 그림 말이지요...흠흠... 그러나 filter를 사용하면 아주 간단하게 똑 같은 효과를 낼 수 있을 뿐더러 다른 효과를 내기 위해 그림을 수정하는게 아니라 Script 몇 자만 바꾸면 된다는 거져... Filter를 알고 부터 훨씬 많은 일을 할 수 있기도 했구요. 또 눈에 보기도 좋지 않습니까.

그러면 이 마당에서 어떻게 이런 간편한 Filter라는게 등장하게 되었는지 간단히 알아 보겠습니다. 그건 바로 Computer Game 덕분이라고 할 수 있습니다. 저도 게임을 좋아하고 즐기는 편입니다만(스타크 원년 멤버이고 제 나이에서는 거의 임요환, 홍진호, 박정석... 등등 이라는 평을 듣습니다...^^ 정말 이래니깐요...) 게임이 요구하는 사양이 높아지면서 특히 그래픽 하드웨어는 급속한 발전을 했습니다. 물론 컴 자체도 엄청 속도가 빨라졌구요. 혹시 486으로 Photoshop 에서 emboss나 graphic pen 같은 필터 처리를 해 본 경험이 있는 사람은 알겠지만 하나 처리하는게 세월이죠 세월... 그러나 팬티엄의 등장으로 향상된 Computing power를 가지게 되면서 이런 Filter의 사용이 가능해 진거죠...

이 페이지에서 다루는 filter들은 MS Windows 에서 사용하는 여러분 들이 잘 알고 있는 Direct-X 그래픽 가속기에 의해 처리되는 Procedual surface 라는 Render 방식으로 변형(Transform) 처리됩니다. 또한 여기서 다루는 내용은 IE4.0에서 사용되던 Down level Filter 들임 또한 알려 드리고 Up level Filter 들은 Web design Menu에서 다루기로 결정했습니다. 아마 이 사이트 문서 중에서는 보기 드물게 시각적인 효과가 높은 페이지가 되겠네요.

원래 이 사람이 겉 모습 보다는 내용에 치중하는 편이라 시간내어 내용 채우기에 급급하다 보니 겉 모양이 영 엉망이로군요. 하지만 웬 만큼 내용이 차면 얼굴 화장에도 신경을 써야 되겠죠. 궁금한 점은 게시판을 이용해 주시구요... 이제 스타크나 한판...^^

필터에 따라 매개 변수가 있는 것이 있고 없는 것이 있는데 아래와 같이 사용합니다.

위에서 설명했으므로 생략함. 그림 위에 마우스 커저를 올리면 효과를 알 수 있습니다.

*  : style로 background-color를 지정하지 않았거나 transparent로 지정해야 작동하는 Property
% : Percentage 0 ~ 100의 수치를 사용 가능함

Visual Filter Properties
Property	Argument
alpha	alpha filter는 이미지나 block-level element의 배경이나 text 등의 내용물에 투명도를 조절하는 filter로서 0, 1, 2, 3 의 4 가지 종류의 style이 적용되며, style이 0 일때는 opacity 만 적용되고, 1일 때는 모두 적용되며, 2나 3일 경우 opacity와 finishopacity 2 가지만 적용됩니다. style alpha filter type, 0 : 균등, 1 : 선형, 2 : 원형, 3 : 4각형 opacity %, style=1 일 때는 전체 투명도, 2나 3일 대는 중심부 투명도, 0 : 완전 투명, 100 : 불투명 finishopacity %, style 이 2나 3일 때 외곽 투명도 startx, finishx %, 왼쪽 border의 시작 투명도(startx)에서 오른쪽 border(finishx) 까지의 Gradient, style=1 일 때만 적용 starty, finishy %, 위쪽 border의 시작 투명도(starty)에서 아래쪽 border(finishy) 까지의 Gradient, style=1 일 때만 적용 style="filter:alpha(style='0', opacity='25');" style="filter:alpha(style='1', opacity='0', finishopacity='100', startx='0', finishx='100', starty='100', finishy='0')" style="filter:alpha(style='2', opacity='100', finishopacity='0');" style="filter:alpha(style='3', opacity='100', finishopacity='0');"
blur	blur filter는 물체가 움직일 때 동선을 따라 생기는 잔상 효과를 말 합니다. 마치 야간에 축구 중계를 보면 공이 날아가면서 꼬리가 생기는 것 비슷한 효과. add filter 속에 그림이 포함 되었을 경우 그림까지 잔상 처리를 할 것인지의 여부, 즉, 그림까지 같이 뭉겔거냐 말거냐... 값은 true(Default), false direction 0 ~ 359도, 잔상이 생기는 방향 strength 잔상이 짙게 생기는 정도 0 ~ style="filter:blur(direction='45', strength='7', add='false');" style="filter:blur(direction='45', strength='7', add='true');"
chroma	chroma filter는 지정하는 color를 투명(transparent)하게 만듭니다. 하지만 경계선이 anti-alias(글꼴 가장자리를 매끈하게 다듬는 것 처럼) 처리된 경우에는 깨끗하게 빠지지 않져... color 색상은 Color 참조. style="filter:chroma(color='#ffffff');" white red green style="filter:chroma(color='skyblue');" style="filter:chroma(color='skyblue');"
fliph	에~ 별거 읍써요. 수평으로 디벼 버립니다. white red green style="filter:fliph();" style="filter:fliph();"
flipv	수직 디비기. white red green style="filter:flipv();" style="filter:flipv();"
*glow	glow filter는 테두리(edge)에 타는 것 같은 효과를 주는 filter color 색상은 Color 참조. strength 두께. 0 ~ 255 의 정수 white red green style="filter:glow(color='red', strength='10');" style="filter:glow(color='red', strength='10');"
gray	gray filter는 그림이나 물체를 gray tone으로 바꿔 줍니다. white red green style="filter:gray();" style="filter:gray();"
invert	내용물의 색상(hue), 채도(saturation), 명도(brightness)를 역으로 바꿉니다. white red green style="filter:invert();" style="filter:invert();"
*mask	mask filter는 아주 재미있고 독특한 filter 져... 이 filter의 기능은 내용물 중에 투명한 부분은 지정한 color로 채우고, 불투명한 부분은 투명하게 만들져... 투명한 부분이 있어야 하기 때문에 배경색을 transparent로 했습니다. color 색상은 Color 참조. white red green style="background-color:transparent;filter:mask();" style="background-color:transparent;filter:mask();"
*shadow	shadow filter는 지정하는 색상과 방향으로 그림자를 만들어 줍니다. 그림자를 투명한 면에 만들어 주기 때문에 배경색은 역시 transparent. color 색상은 Color 참조. direction 0 ~ 359도, 광원의 방향 strength 0 ~ 255, 그림자의 두께 white red green style="background-color:transparent;filter:shadow(color='orange', direction='315');" style="background-color:transparent;filter:shadow(color='orange', direction='315');"
*dropshadow	dropshadow는 shadow처럼 입체적인 그림자를 만들지 않고, 2차원 적인 그림자를 만듭니다. color 색상은 Color 참조. offx 수평 방향의 그림자 거리, (-) 는 왼쪽 (+) 는 오른쪽. offy 수직 방향의 그림자 거리, (-) 는 위쪽 (+) 는 아래쪽 white red green style="background-color:transparent;filter:dropshadow(color='gray', offx='5', offy='-5');" style="background-color:transparent;filter:dropshadow(color='gray', offx='5', offy='-5');"
wave	wave filter는 좌우나 아래위로 물결치는 것 같은 효과를 내는 filter. add wave filter 효과에 이미지를 포함 시킬 것인지의 여부. true, false(Default) freq 수평으로 생기는 물결을 개수. Defaulte 3 lightstrength 빛의 강도. 0 ~ 100%. Default 100 phase freq 에 의해 생기는 수평 물결 sine 파의 시작위치. Default 0 strength wave filter 효과가 좌우로 퍼지는 범위. 1 ~ . Default 5 white red green style="filter:wave(lightstrength='100', freq='3', strength='0', phase='0', add='true');" style="filter:wave(lightstrength='100', freq='3', strength='0', phase='0', add='true');" white red green style="filter:wave(lightstrength='100', freq='3', strength='0', phase='0', add='false');" style="filter:wave(lightstrength='100', freq='3', strength='0', phase='0', add='false');"
xray	x-ray film 같은 효과를 내는 filter. white red green style="filter:xray();" style="filter:xray();"

이 문서의 저작권은 www.cadvance.org 에 있습니다.