Before starting to use Kwik in a real project, it is suggested to learn a few tips and some best practices first.
Using Kwik is not difficult. However, due the relationship of the Kwik plugin with your Photoshop layers, follow these simple tips to avoid some common issues. Kwik is very dependent on Photoshop layer naming. Wrong layer names can even block your preview process.
Although Kwik tries to find and fixes potential issues, sometimes it simply cannot. To avoid these issues, use the following conventions):
0) Jeffrey Tranberry’s posting about Photoshop tuning is interesting to be checked to guarantee the best possible performance: (CS5) http://blogs.adobe.com/crawlspace/2011/05/how-to-tune-photoshop-cs5-for-peak-performance.html and (CS6) http://blogs.adobe.com/crawlspace/2012/10/how-to-tune-photoshop-cs6-for-peak-performance.html
1) Project name: Avoid long names for your projects and, DO NOT use characters like <>%,#;!. They may conflict with the XML convention used in Kwik’s file project. Keep naming simple!
2) Layer names: Before you start adding buttons and animations, follow the rules below. It is much easier to add interactivity with the final names than edit all of them afterwards. Basic rules include:
- Avoid long names. All layer names become variables when exported, meaning they use more memory and are more difficult to read. Also, they are going to be shortening anyways, as Lua will not allow variable names with more than 15 characters.
- Avoid having multiple layers with the same name. Kwik will not export the second layer with the same name as it will overwrite the first one, (which will make the Lua code crazy). Kwik will provide an alert error if it finds layers with same name.
- As with Project names, when naming Layers, DO NOT use characters like <> %,#;!. These characters conflict with Lua language. Kwik removes these “strange” characters but, if they were used before in any button actions, it may generate errors during export.
- Do NOT name your layers as numbers. For example, a layer named 1, will generate an error. A layer named 01_Name will also generate an error. However, a layer named Name_01 will render without issues.
- Do not use Lua commands as names. For example, a layer named “if” will conflict with the command if. Some Lua commands are: if, end, local, transition, play. A full list of Lua commands is here. Kwik will generate an alert error if it finds layers with Lua commands as name.
3) Keep Layer Names Short: text layers names are originally created using the content of the text from the canvas. If you have a long paragraph, the layer name will be the entire content of the long paragraph! Long layer names cause problems in the generated code, so edit the layer names to make them shorter. (This is the most common problem we have seen from our users reporting issues.) And don’t forget all text, besides the ones used in the Sync feature, also exports as images.
4) Grouped layers: Kwik exports grouped layers as a single image. Use them to create more complex elements (for example, a multi-layered button with text, shadows, etc.), or for the creation of static elements. A common issue is to have all page elements in a group layer expecting they will render separately. If you have a group with several layers, try to flatten them whenever it is possible. It will make the export process much faster.
5) Create a background layer: Kwik must find at least one art layer in order to export. Whenever is possible, create it first. This is also used as the place for “page swipe” events – Kwik always uses the bottom layer of your PSD as background. If it cannot find it, an error occurs.
6) Universal projects: They are cool and expand your audience, right? Yes, but remember they duplicate image files, double your export time, add complexity to your code and, depending on the project, sometimes they just don’t make any sense! Can you really read a big paragraph on a 320×480 iPhone? If your audience is iPad users, do yourself a favor and create a project for iPad only. Since there are several new variations of the same device (Nook Color, Nook HD and Nook HD+, for example), when selecting a large device (for example the Nook HD+), 2 sets of images will be created, exactly like the Universal type of projects. If the smaller device does not have the same screen ratio, the scale will happen accordingly the settings from Project Properties.
7) Fireworks: Several designers like to start their project in Fireworks as it offers vector tools not available in Photoshop. When using PSD files created by Fireworks, please note that they do NOT come with the background layer (everything comes inside a group layer). As you read above, it will not work! To resolve this issue, if you are opening a PSD file from Fireworks, simply select all sub layers and move them outside the original folder they came in.
8) Button and Animation names: Although Kwik offers an auto-naming feature, try to enter your own names (follow the rules above). It will help you to quickly edit your actions from the project view. This is a time saver for project with several actions.
9) Export images only once: Whenever is possible, after renaming all the layers, export them (Publish button) before adding actions. You can do that by clicking the button Settings, then enabling the Export images checkbox. After the first export, disable the Export images checkbox. From now on, the Preview button will work much faster, exporting only the code (use it as much as need to tweak animations).
10) Don’t forget your icons and opening screen image: Kwik will help you to preview your project. However, your great comic or book will need the perfect icons (not the one we provide with Kwik’s logo) and a beautiful default screen (for iOS projects).