# Recommended PSD Layers Structure for Smart Importer When creating PSD files using Adobe Photoshop, it is recommended that the naming and structure of the Photoshop layer controls be pre-matched to SceneComposer. This will allow for smooth application of controls and their properties when importing with SmartImporter. The list below shows the Controls that will be assigned in Scene Composer via Smart Importer. Press the links on each Control to jump to the page showing the recommended layer structure in detail. It is important to note that the Smart Importer cannot process effects, masks, filters in Photoshop. Therefore, if you want to use these features, please rasterize the images in advance. Some Controls are included in the sample file "IVI\_Sample.psd" and are explained with specific examples.
--- #### PSD layer settings for Control In this section, the recommended layer configuration in PSD file is described for each control. And, you can confirm its configuration in the sample file about CheckBox, Gauge, IconButton, RadioButton, and TextButton. - Setting Group name is optional, but it is recommended to use the Control name (as seen in Scene Composer) - It is also recommended to use the property names (as seen in Scene Composer) as layer names (in Photoshop), but please don't use spaces in the layer names.
#### CheckBox The CheckBox Control can easily be configured with a text, images for a normal and a pressed state as well as for a selected and a selected pressed state.
Group name CheckBox
Layer SelectedImage
SelectedPressedImage
NormalImage
PressedImage
#### Gauge The Gauge allows to rotate a needle on a background according to its input value.
Group name Gauge
Layer NeedleImage
BackgroundImage
#### IconButton IconButton has similar functionality as the standard button, but in addition an icon (image) is placed on top of the button.
Group name IconButton
Layer NormalImage
PressedImage
FocusedImage
IconNormalImage
IconPressedImage
#### RadioButton The RadioButton Control can easily be configured with a text, images for a normal and a pressed state as well as for a selected and a selected pressed state.
Group name RadioButton
Layer NormalImage
PressedImage
SelectedImage
SelectedPressedImage
FocusedImage
RadioButton (In the image, it is RadioButton\_Outside\_air to distinguish it.)
#### TextButton The TextButton Control offers an easy way to define all different states of a button and an action that is performed when clicking it.
Group name TextButton
Layer NormalImage
PressdImage
FocusedImage
#### AnalogClock An analog clock with images for the certain needles (hours, minutes, seconds).
Group name AnalogClock
Layer SecondsNeedleImage
MinutesNeedleImage
HoursNeedleImage
FaceImage
#### Breadcrumb A Breadcrumb shows the history/flow through the screen hierarchy and allows user, for example, to navigate between scenes using breadcrumb's elements.
Group name Breadcrumb
Layer Name
EllipsisText
#### Button The Button Control offers an easy way to define all different states of a button and an action that is performed when clicking it.
Group name Button
Layer NormalImage
PressedImage
FocusImage
#### CircularSlider Circular slider is a control that allows user to set the value using circular slide movement or directly indicate value on slider's bar.
Group name CircularSlider
Layer BackgroundImage
ActiveImage
ThumbImage
ThumbImagePressed
FocusImage
#### GroupBox The GroupBox offers an easy way to combine RadioButtons to a RadioButtonGroup.
Group name GroupBox
Layer BackgroundImage
#### InputField The InputField contains an editable text.
Group name InputField
Layer CaretImage
BackgroundImage
FocusedImage
#### Menu Icon The MenuIcon Control is an “icon” like in graphical environments of most known operating systems.
Group name MenuIcon
Layer Image
BackgroundImage
#### Menu Item A MenuItem is a basic building block of MenuScreens. It can represent for example an application or a deeper level in a menu hierarchy.
Group name MenuItem
Layer FocusImageOnSelection
FocusImageOnDragging
DeleteButtonNormalImage
DeleteButtonPressedImage
Image
#### Menu Screen The Control represents a menu in the form of a grid of icons (instances of the Menu Item Control).
Group name MenuScreen
Layer BackgroundImage
FocusBorderImage
#### Mesh2D Performs a perspective projection of a 3D rotated effect based on the configured origin, rotation and field of view.
Group name Mesh2D
Layer Image
#### MultiStateButton The MultiStateButton Control offers an easy way to define all different states of a button.
Group name MultiStateButton
Layer ButtonState1Bmp
ButtonState2Bmp
ButtonState3Bmp
ButtonState4Bmp
FocusedImage
#### PageIndicator A Page Indicator is a control that indicates currently visible page of set and provides method to switch to another page directly by click or if focused on a stepping manner using rotary action input.
Group name PageIndicator
Layer PressedImage
SelectedPressedImage
SelectedIndicatorImage
IndicatorImage
SelectedIndicatorPressedImage
IndicatorPressedImage
#### Roll The Control represents a vertical list of numeric values from a specified range with a specified step.
Group name Roll
Layer DecorationImage
TextEditBackground
#### SpinBox A spin box or spin button is a control that enables users to increase or decrease the number value by a specific increment via clicking an up or down arrow button.
Group name SpinBox
Layer BackgroundImage
ArrowUpNormalImage
ArrowUpPressedImage
ArrowDownNormalImage
ArrowDownPressedImage
#### ToggleButton The ToggleButton Control offers an easy way to define all different states of a toggle button and an action that is performed when clicking it.
Group name ToggleButton
Layer FirstImage
FirstPressedImage
SecondImage
SecondPressedImage
FocusedImage
#### TouchIndication The TouchIndication indicates the location of touch events.
Group name TouchIndication
Layer Image