글자에 효과넣기

 

앞의 것과 반복 되는 것도 있습니다.

(1)Glow 효괍니다....

(1)Glow의 효괍니다. 포토샵에서 outer grow와 비슷. FILTER: Glow(color=#0080ff,strength:2);FONT-FAMILY: 바탕; FONT-SIZE: 12pt; HEIGHT: 20px;LINE-HEIGHT: 200%; WIDTH: 100%" > 파란색으로 된 부분이 여기서 포인트지요. #0080ff 라는 색상으로 두께를 2만큼 주어서 그로우 효과를 표현했다는 이야깁니다. 글꼴은 바탕체로 글 크기는 12pt로 설정했다는 이야기지요. 폭은 20px로 설정하고요. 글 색깔은 white 로 설정했습니다. 빨간색으로 된 이 부분이 중요한데 먼저 width와 height 를 꼭 설정해 주셔야 효과가 먹습니다.px 단위나 % 단위 아무거나 가능합니다. line-height를 쓰는 이유는 필터 효과가 적용되는 범위가 커지면. 효과가 짤릴 위험이 있습니다. 보통 9pt나 10pt 글꼴에서는 150% 이상의 줄건격을 설정해 주셔야 합니다. 15pt에서는 200%가 적당하구요.

(2)그림자 Shadow 효과...

(2)번 효과도 멋있지요.포토샵에서 drop shadow 비슷 FILTER:Shadow(color=#9999FF,direction=115); FONT-FAMILY: 바탕; FONT-SIZE:12pt; FONT-WEIGHT: bold; HEIGHT: 23px; LINE-HEIGHT: 200%;WIDTH: 100%" > 파란색 부분에서 #9999ff가 새도우 색깔이고, direction=115는 새도우 효과의 적용 각도입니다. 참고로 direction=0은 새도우가 위로된 효과,direction=180은 밑으로 된 효과입니다. (1)번과 같이 빨간색으로 된 부분을 주의하셔야 합니다.

(3)웨이브효과

(3)번 효과는 Wave 필터를 적용 FILTER:Wave(add=0,freq=2,lightstrength=5,phase=50,strength=3);FONT-FAMILY: 바탕; FONT-SIZE: 12pt; FONT-WEIGHT: bold; HEIGHT: 10px; LINE-HEIGHT: 200%; WIDTH: 100%" > 파란색 부분에서 딴건 재껴두고 freq와 lightstreng,strength에 대해서만 설명드릴께요. 나머진 잘 몰라서freq :: wave 필터 적용값 lightstrength :: 적용되는 글자의 밝기를 strength :: wave 필터의 강도(freq하고 유사함) 여기서도 저기 빨간색으로 되어있는 곳에 유념하시구요

(4)Blur필터를 적용

(4)번 효과는 원래 글자에 blur필터를 적용 FILTER:Blur(add=1,direction=145,strength=4);FONT-FAMILY: 바탕; FONT-SIZE: 12pt; FONT-WEIGHT: bold; HEIGHT: 10px; LINE-HEIGHT: 200%; WIDTH:100%"> 파란색 부분에서 add :: 0일때 글자 색상과 그림자 색상이 같게 설정 , 1 일때 유사한 색상으로 설정 됩니다. direction :: shadow 효과에서 본 옵션이죠. 그림자 각도를 나타내는 겁니다. strength :: 효과가 나타나는 범위랍니다. 3이나 4정도가 적당합니다.

(5)글자가 투명해지는 효과

(5)번 효과는 알파 필터를 글자에 적용시켜 본 것입니다. FILTER:Alpha(opacity=80,finishopacity=0,style=1,startX=0,startY=0,finishX=90,finishY=0);FONT-FAMILY: 바탕; FONT-SIZE: 12pt; FONT-WEIGHT: bold; HEIGHT: 10px; LINE-HEIGHT: 200%; WIDTH: 300px" > 파란색 부분을 설명드리죠. 좀 복잡해 보이죠 opacity :: 투명 적용 시작부분의 투명도를 설정하는 부분입니다. finishopacity :: 투명도가 끝나는 지점의 투명도를 설정하는 부분입니다. style :: 1로 설정하시면 서서히 투명해지는 fade 효과가 나옵니다. 2,3은 글자에 뿌옇게 구름과 같은 효과가 적용되더군요 startX, startY :: 효과가 시작되는 X지점(가로)과 Y지점(세로)의 위치를 설정하는 곳입니다. finishX, finishY :: 효과가 끝나는 끝지점을 나타냅니다. 마찬가지로 빨간색 부분을 주의하셔야 하는데 height,weight 옵션을 반드시 px 단위로 주셔야 합니다. % 단위로 하면 효과가 이상하게 나옵니다. 적용될 글자 길이를 적당히 계산하셔서 px 단위로 설정하세요. 이것도 상당히 괜찮은 효과니 잘 활용하세요

부시시한 필터효과~

많이보는효과죠~~!

보기 좋죠!