1. 首頁
  2. »
  3. Illustrator
  4. »
  5. [教學] Illustrator 自定 SVG濾鏡特效,一點立即產生內陰影效果(含SVG濾鏡碼)

[教學] Illustrator 自定 SVG濾鏡特效,一點立即產生內陰影效果(含SVG濾鏡碼)

2020/09/14

梅問題-[教學] Illustrator 自定 SVG濾鏡特效,一點立即產生內陰影效果(附濾鏡碼)
  在Photoshop中,要製作內陰影的效果,是再簡單不過了,但若要在Illustrator中製作內陰影效果,那還真是一件相當麻煩的事,得先製作區塊錯位,然後執行差集,再套用模糊效果,最後再外面再加入一個挖空圖塊,才能製造出漂亮的內陰影效果,這看似簡單的效果,但製作過程卻相當的繁索,因此最近梅干發現一個超簡單的方法,只要自訂一個SVG濾鏡特效,立即就可產生內陰影的效果,且隨點隨套用,真是超方便的,有需要的朋友,也一塊來看看囉!


Step1
首先,先畫出一個區塊,再選擇 「SVG濾鏡 / 套用SVG濾鏡」 選項。
梅問題-[教學] Illustrator 自定 SVG濾鏡特效,一點立即產生內陰影效果(附濾鏡碼)


Step2
開啟「套用SVG濾鏡面板」後,再點下方的「新增SVG濾鏡」圖示。
梅問題-[教學] Illustrator 自定 SVG濾鏡特效,一點立即產生內陰影效果(附濾鏡碼)
Step3
這時就會開啟「編輯SVG濾鏡」面板。
梅問題-[教學] Illustrator 自定 SVG濾鏡特效,一點立即產生內陰影效果(附濾鏡碼)
Step4
接著再把下方的碼,貼入輸入框中後,再按「確定」。
<filter  id="InnerShadow-5-5-0.75-black">
    <!–   Shadow Offset   –>
    <feOffset  dx="5" dy="5"></feOffset>
    <!–   Shadow Blur   –>
    <feGaussianBlur  result="offset-blur" stdDeviation="3"></feGaussianBlur>
    <!–   Invert the drop shadow to create an inner shadow   –>
    <feComposite  in="SourceGraphic" in2="offset-blur" operator="out" result="inverse"></feComposite>
    <!–   Color & Opacity   –>
    <feFlood  flood-color="black" flood-opacity="0.75" result="color"></feFlood>
    <!–   Clip color inside shadow   –>
    <feComposite  in="color" in2="inverse" operator="in" result="shadow"></feComposite>
    <!–   Put shadow over original object   –>
    <feComposite  in="shadow" in2="SourceGraphic" operator="over"></feComposite>
</filter>

語法說明:
feOffset:陰影xy的位置
feFlood:陰影顏色與透明度
 flood-color:顏色
 flood-opacity:透明度
feGaussianBlur:陰影模糊強弱
stdDeviation:羽化強弱
梅問題-[教學] Illustrator 自定 SVG濾鏡特效,一點立即產生內陰影效果(附濾鏡碼)
Step5
當要套用剛所設定好的陰影效果時,只需到 「SVG濾鏡」選項中,點選剛所自訂的濾鏡特效。
梅問題-[教學] Illustrator 自定 SVG濾鏡特效,一點立即產生內陰影效果(附濾鏡碼)
Step6
鏘~鏘~這時區塊立即就會產生內陰影的效果,真的超方便的啦!
梅問題-[教學] Illustrator 自定 SVG濾鏡特效,一點立即產生內陰影效果(附濾鏡碼)