[Video - 30 mins] Psd Layers to Hardware Based Layers in 30 mins or Less!

In the next 30 minutes, you will learn how to use Adobe Photoshop and Altia ProtoProto to prepare graphics in Photoshop that are importable as individual layers for optimized GUIs running on hardware platforms that have hardware-based layers. Using this method, you will create one object per layer, which affords the hardware to clock the images straight from flash using DMA, thereby using very little RAM. The video concludes after showing how to import the content into Altia Design, set up your layers, and define screens of the GUI using the Layer Manager.

The content of this video is summarized and referenced per section by video time:code in the slides below:

https://altia.zendesk.com/attachments/token/mA0K1DgsHfaB9VKMZJFSuxNsb/?name=Psd+Layers+to+Hardware+Layers_v1bs.pptx

After watching this video, you might want to view the follow-up video (https://altia.zendesk.com/entries/44820289--Video-30-mins-Optimizing-Layers-within-the-Layer-Manager-using-custom-palette-colors-and-optimal-me) that shows how to optimize your GUI further by having custom color palettes created in Photoshop. Using custom palettes allow you to reduce overall color usage from thousands to a few hundred, across the entire GUI!

 

PHOTOSHOP TIP: Depending upon the psd file you are working with, the Adobe Photoshop "Layer Comps" feature may have been used to show the various screens which that psd can provide. You always want to run PhotoProto with the "Create Multiple Screens Using Layer Comps" check box UN-checked in the Altia PhotoProto - Build Prototype script export option dialog. For now, Layer Comps are not useful/supported in the Psd to HW Layers workflow described above. However, you can still benefit from the use of Layer Comps. Please see below:

Scenario 1: the Layer Comps are well-formed, and do not cause any PhotoProto script errors when running. In this case, to export each Layer Comp as a separate set of objects simply do the following:

1) Open the Layer Comps palette, then apply the desired Layer Comp.

2) Run PhotoProto, ensuring that the "Create Multiple Screens Using Layer Comps" check box is UN-checked.

3) Repeat steps 1 and 2 for each layer comp you want to export.

 

Scenario 2: You want to use the Layer Comps, but performing steps 1 and 2 above cause PhotoProto to throw errors.

This is usually caused by the layer comp erroneously hiding a needed layer (all layers within PhotoProto object groups must be visible, for example).

In this case, you can kill off the hidden layers (usually fixes the export error, but may not include all of the layers you expect). To do so, you make a filtered/narrowed version of the psd file, then run PhotoProto on that.

1) Open the Layer Comps palette, then apply the desired Layer Comp.

2) After applying the Layer Comp, filter the Layers palette by visible layers, as shown using the small filter toggle/filter type in the screenshot:

filter_layers_01.png

3) Select All filtered layers using Alt+Ctrl+A, then within the Layer palette's top-right drop-down menu, and choose "New Group from Layers..."

filter_layers_02.png

4) Before doing anything else, turn OFF layer filtering by clicking the small red toggle switch:

filter_layers_03.png

5) Within the Layer palette's top-right drop-down menu, choose "Delete Hidden Layers"

6) Run PhotoProto, ensuring the "Create Multiple Screen Using Layer Comps" check box is unchecked. This filtered/trimmed psd file will not only export faster, since there are far fewer layers, but it should run without any errors that Layer Comps can erroneously cause by hiding too many layers. NOTE: This sequence of events is only really needed if you ran into trouble using the steps in Scenario 1 above.

 

CONTROL CODE TIP: Here is some helper logic that is similar to what is used in the video to update many layers at once. Feel free to copy/paste/modify in your dsn as well!

GLOBALS holder_str_var
//
GLOBALS anim_suffix
//
GLOBALS disp_prefix
//
//
//
WHEN update_layers_now == {}
 //
 // change the display object prefix, range start, range end, anim_suffix, and desired value for each call
 //
 CALL update_layers {"display" 1 300 "palette" "mypalname.pal"} {}
 //
 END  
//
ROUTINE update_layers {disp_prefix start end anim_suffix disp_val} {}
 //
 EXPR loop_cnt {start}
 EXPR loop_end {end + 1}
 LOOP loop_cnt < {loop_end}
  //
  EXPR holder_str_var {[$format "%s_layer_id" disp_prefix]}
  EXPR @holder_str_var {loop_cnt}
  EXPR holder_str_var {[$format "%s_layer_%s" disp_prefix "format"]}
  IF @holder_str_var == 5 OR @holder_str_var == 6
   EXPR holder_str_var {[$format "%s_layer_%s" disp_prefix anim_suffix]}
   EXPR @holder_str_var {disp_val}
   //
   //
   END  
  EXPR loop_cnt {loop_cnt + 1}
  END

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.