Convert your PSD layers to Illustrator SVG filter effects. Lightning Storm makes SVG filters and effects for Illustrator a breeze with support for complex Photoshop layer effects to SVG with our exclusive Filter Flow Technology. You can create your layer effects in Photoshop, then cut-and-paste the SVG filters into Illustrator – easy pezy!

IMPORTANT: SVG Filters require both Layer Kit - SVG View and Layer Kit - Pro.

Create your Effects in Photoshop

Create any custom layer effect in your PSD, Export Kit uses a custom Filter Flow Technology to ensure your Illustrator SVG effects are pixel-perfect. Effects in Photoshop will not render the same as a website, we strongly recommend you read more about Effects and Styles to learn which effects and properties are supported.

SVG Support is based on Photoshop/HTML rendering rules, not all Photoshop effects are supported in HTML and SVG Filters – additionally Photoshop is perfect, others are not!

Step 1: Use SVG View with Lightning Storm

Open Lightning Storm, enable Layer Effects, then copy the filter tag. Lightning Storm will render the full SVG layer element, but with Illustrator you will only require the actual filters rendered by Lightning Storm.

IMPORTANT: Some effects will require tweaking to get the optimal render, others require the correct properties applied.

Step 2: Paste the filter into Illustrator

In Illustrator, open your SVG Filters and click “New SVG Filter”. Then paste the code! That’s it, Export Kit will convert your Photoshop layer effects to the correct Illustrator SVG filters required to drop-and-go.

Step 3: Done!

Now you can use your custom Illustrator SVG filter with any design.

Example SVG Filters

Can’t wait or just want to see some examples, take a look a few filters created from Photoshop using SVG View.

NOTE: Remember to view source, these are pure SVG Paths and Filters created from Photoshop.

Glowing Rainbow

1
2
3
4
5
6
7

<filter id="heart_filter" x="-25%" y="-25%" width="150%" height="150%">
    <feOffset result="og-b" in="SourceAlpha" dx="0" dy="0" />
    <feGaussianBlur result="og-s" in="og-b" stdDeviation="3" />
    <feFlood flood-color="#f8f9f9" flood-opacity="1" result="og-f"/>
    <feComposite operator="in" in="og-f" in2="og-s" result="og-c"/>
    <feBlend in="SourceGraphic" in2="og-c" result="og" mode="normal" />
</filter>

Question This

NOTE: We will corect the stroke issue with SVG Paths in a new release of Lightning Storm.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<filter id="question_filter" x="-25%" y="-25%" width="150%" height="150%">
    <feOffset result="ffx-b1" in="SourceAlpha" dx="3" dy="3" />
    <feOffset result="ffx-b2" in="SourceAlpha" dx="-3" dy="-3" />
    <feOffset result="ffx-b3" in="SourceAlpha" dx="3" dy="-3" />
    <feOffset result="ffx-b4" in="SourceAlpha" dx="-3" dy="3" />
    <feOffset result="ffx-b5" in="SourceAlpha" dx="0" dy="3" />
    <feOffset result="ffx-b6" in="SourceAlpha" dx="0" dy="-3" />
    <feOffset result="ffx-b7" in="SourceAlpha" dx="3" dy="0" />
    <feOffset result="ffx-b8" in="SourceAlpha" dx="-3" dy="0" />
    <feMerge result="ffx-b">
        <feMergeNode in="ffx-b1" />
        <feMergeNode in="ffx-b2" />
        <feMergeNode in="ffx-b3" />
        <feMergeNode in="ffx-b4" />
        <feMergeNode in="ffx-b5" />
        <feMergeNode in="ffx-b6" />
        <feMergeNode in="ffx-b7" />
        <feMergeNode in="ffx-b8" />
    </feMerge>
    <feFlood flood-color="#000000" flood-opacity="1" result="ffx-bc"/>
    <feComposite operator="in" in="ffx-bc" in2="ffx-b" result="ffx-bg" />
    <feMerge result="ffx">
        <feMergeNode in="ffx-bg" />
        <feMergeNode in="SourceGraphic" />
    </feMerge>
    <feOffset result="ds-d" in="SourceAlpha" dx="5" dy="9" />
    <feGaussianBlur result="ds-s" in="ds-d" stdDeviation="1" />
    <feFlood flood-color="#000000" flood-opacity="1" result="ds-f"/>
    <feComposite operator="in" in="ds-f" in2="ds-s" result="ds-c"/>
    <feBlend in="ffx" in2="ds-c" result="ds" mode="normal" />
</filter>