Loading...

Lightning Storm CC Panel

Lightning Storm is a plugin for Adobe Creative Cloud to convert your PSD, AI and INDD files to HTML5, CSS3, JavaScript, iOS, Android, WordPress and more.

You must be a registered member to use Lightning Storm.

lightning_storm_cloud

Status

ONLINE

API Server

ONLINE

Build

v17.0216.05

Release

Feb 16, 2017

Step 1: Download Lightning Storm.
Step 2: Install in CS6 - CC2017.
Step 3: Learn How-to Use Export Kit.

(Release Notes)


Using the Lightning Storm CC Plugin

This guide will explain the basics of getting started with the Lightning Storm CC BETA. Because this is a BETA release, the server may not always be online.

Using Lightning Storm for InDesign or Illustrator?


Multi-language support native to your local settings

Login

Login to Lightning Storm CC using your username or email and password registered with our website. Once you are successfully logged in, you will see the panels.

Can I login on different machines?

Yes you can login on any machine anywhere in the world with Lightning Storm installed.

Can I login with multiple sessions?

Yes, if you have more than one key of any product then you get an additional session per. Note that each session may have different keys active.


15 Languages Available

Ask us to translate yours!

中国DeutschčeštinaEnglishEspañolFrançaisitalianoहिंदी日本人한국어فارسیελληνικάPolskiPortuguêsPусский


View your current data usage with each session

Freelancer Mode

Freelancers can get started right away with Lightning Storm and build any project with all environments, features and options available.

Once you reach your limit, you will need to visit our Shop to purchase additional packages.

View Data Usage rates.


View your active sessions when you login
All active keys are displayed per session

Active Info

Customers have a clear view of all active keys, and live sessions. If you have more than one of any key, you are able to login with an additional session per.

Purchase Lightning Storm for all keys.
Depending on your order, you may have different keys enabled in each session.
IMOPRTANT: Sessions are FIFO (First-in-first-out), meaning if you login too many times - your oldest session will get kicked-out.


View your PSD or AI layers as code in over 15 environments
Save any folder or layer as an image in one click
Crystal clear code translated from your PSD or AI layer
Custom layer options to personalize the code view
Open any folder or layer as a new PSD or AI document

Layers Panel

Convert your Photoshop Layers to HTML5, CSS, Android UI, Swift and more; application-ready code, or cut-and-paste the modified design changes, in the drop of a combo… box!

Layer Views
WebHTML5SVGPHP
StylesCSS3LESSSASS
WPF /.NETASPSilverLightVBXAML
AndroidUIStyles
iOSStoryboardSwiftXCode
ScriptJSjQuery
DataInfoJSONXML

Learn more about Layers Panel


Export all layer as image assets +Sprite Sheets
Instantly save your design as an image +watermarking
Save your design as multiple image sizes
Batch resize all images within any folder
Create and modify your design from JSON

Images Panel

Export your Photoshop layers or document as PNG, JPG or GIF images. Each image output type has custom options for optimal output rendering in your interactive project.

With Image Kit Pro, you can also take quick snapshots of your document or add a watermark for personal or business protection. You can also create common or custom icon sets for use with any project, or sprite sheets for animations and asset reduction.

Learn more about Images Panel


Resize or guide your design to match common sizes
Custom guide options for accurate measurments
Apply custom guides to your document, folder or layer
Instantly clear all document guides

Guides Panel

Create standard and customized guides for accurate layouts in your Photoshop project. Guides can be pre-set with any number of columns, rows or padding for use with your Photoshop Layers, Folders and Document.

You can also customize the guide output location for each element individually.

Canvas Layout

Preset your project with common design sizes for both guides and the document canvas. Stop worrying about “how big should this be?”.

Learn more about Guides Panel


Validate and rename layers on the fly
Add Layer Tags for custom functionality with exports
Custom UI Builder for easy to create designs
Batch process multiple PSD or AI exports +custom options

Tools Panel

Get quick access to common Photoshop tools required to speed up both your design and export time.

Layer Tags

Quick and easy reference to the general Export Kit Layer Tags library, with notes and references for each type and arguments.

Note: For WordPress users, visit our official WordPress Layer Tags page for more info.

More Options To Come

We are always updating our application and we are still porting features from our previous v127 version into Lightning Storm… we will keep everyone posted on our progress.

Learn more about Tools Panel


Export your PSD or AI to over 10 environments
Include image asset in your export +optional type
Custom environment options for exports +templates
Custom Layer and Output options to personalize your export
Save all folder assets as individual PSD or AI files
Align your output to match any project requirement

Exports Panel

The Export Kit Panel is the ultimate tool for both designers and developers to turn your Photoshop PSD to HTML5, Android XML, WordPress, and more… in one click. Export your Photoshop PSD with lightning fast speed to almost any code environment.

Outputs
WebPHPHTML5CSS3
ScriptJSjQuery
DataJSONXML
AdvancedAndroidiOSWPFWordPress

Learn more about Exports Panel


Export Log

View your progress as you export your design
Detailed output log of all layers and folders processed
Error logs for easy debugging

Log Files

Export Kit will log each process as your document exports. You can track the progress of your export, along with your layers per second (LPS) speed, fixes and warnings.

Use this information to both speed up your exports and correct errors in the output.

Faster LPS

You can improve your LPS in a few ways:

1. Close all your folders
+20% Speed
2. Use Smart Object Oriented Photoshop (SOOP) +1000% Speed - not kidding!

Fixes

You should always do your best to correct fixes, but these bugs will not affect your output.

Warnings

You must correct warnings, as these bugs will affect your output.

Learn more about the Export Process


Important DATA Information

Data Usage

You can track your data usage at any time in-app. This panel will reflect your current session information including requests and data.

Estimated Data Usage
*Open the plugin*1.1 MB
Stats10 B
Layers300-700 B
Exports (Basic)10-300 KB
Exports (Advanced)2-8 MB

Data usage includes both information you send and receive, to and from the server.


Feedback

Your comments and feedback will always help to improve Lightning Storm - so don't be shy!

Known Bugs

Code Output Spacing

There may be some extra white space in the code output files when exporting (not always) - fix coming.

[Tab] with Adobe CC

It is natural to press [Tab] when entering your login information, but Adobe CC takes over the [Tab] button and will cause you to go "Full Screen" in Photoshop - be careful.

Editing Custom Output Options

Issue

When editing custom options, pressing [Enter], or [Arrow] keys on the keyboard will have no effect. The reason this happens is because Photoshop will use these keyboard events to control layer elements.

Solution

If you keep your mouse INSIDE the edit area you can use your keyboard keys normally.

Illustrator PARM Error

Illustrator has a KNOWN BUG (since CS2...) with scripting where it will produce a PARM error – once this happens, you MUST quit and restart Illustrator. This bug is known to happen RANDOMLY and WITHOUT CAUSE: Why do I see PARM error in Illustrator?.

Docking Issue – CC2015x

Issue

CC2015 has updated its architecture and docking can cause an unexpected reload of the plugin – this causes Export Kit to think you are sending invalid requests.

Solution

Remove the Plugin Panel from the current location and load it separate - learn more.

WP Nav Menu Background

Issue

We did not escape the image location (when using image backgrounds for menu items), causing the code to break.

Solution

Use shapes with WordPress menu item backgrounds, this will avoid the error and save on bandwidth - fix coming.

Start Your 14 Day Free Trial

Get instant access to your 14 Day Free Trial and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, Contact Us or check the Community FAQs for assistance.

Connect With Us

NEW FASTER NETWORK - Please report any errors to Support.