Visual Assets

Welcome! Let's take a look at what makes up a Lightwell project.

The core of what makes up any Lightwell project are both visual and audio assets.
Did you know: ".lwp" is a file extension that stands for “Lightwell Project.”

Visual Assets will typically be comprised of raster or vector assets ( from the web or other tools like Photoshop or Sketch).

Preparation

Before beginning the walkthrough, ensure that you have a few images downloaded onto your desktop so you have something to work with. 

Things to keep in mind when sourcing images for your app project

PNG vs. JPG

PNG images allow you to utilize transparencies which makes it easier to layer them in other programs. If you’re cutting out a singular character, your best bet is to save each part out as a png.

JPG images are great for things like photos or background images and things with a lot of visual data.

If you use our Photoshop Extension to cut your layers into assets, you don’t have to worry about this!

Transparencies

Take a look at the below image. They are both the same, except for their file type. PNG’s are able to support different levels of transparency while JPG’s do not.

Layer Organization

If you’re bringing visual assets over from Photoshop, it’s best to come a little prepared by properly naming all your layers. Here are a few best practices so files aren’t overwritten:

Split Layers up as much as possible

Let’s say you’re trying to import a character. If you’d like to animate that character’s arms, legs or ears in Lightwell, make sure they are on their own separate layers!

Group and Label Layers

Keep organized by grouping layers and labeling everything appropriately. Check out the screenshot below or one of our templates to see how we do it!

Audio Assets

Audio Assets are easily found on a wide variety of sites and are usually made up of various sound effects, background music and other audio cues.

Download free audio asset packs here.

Create a New Project

Open Lightwell and after logging in, click on “Create a New Project”. It will ask you for a place to save it. Name your project file and then Save. You’ll then be brought to the App Overview Screen.

Scenes

Screens are a foundational element to building your app. Each screen represents a different visual screen in your app. You can have as many or as few as you like!

Adding Screens

You can add a new screen by clicking the “Add New Screen” button.

Navigating Screens 🚦

The best way to help users go between your app screens in Lightwell is with Interactions.

In your Interaction Manager, you can add "Go To" and select the Screen that you want to navigate to.


Did this answer your question?