Importing content from Photoshop file
Using Smart Importer, import content for the individual scenes of the Solution. It utilizes AI to analyze Photoshop files and detect, suggest, and create controls for the Scene Composer Solution. The user has the option to choose which control is intended for which image.
- Click Import > Smart Importer > From Local File… from the menu bar.
- A dialog box appears. Select the target Photoshop file for importing.
- For this tutorial, select Car_Cluster.psd
A preview of the Photoshop image is displayed along with a Layer Tree (Orange frame in the image below) which contains the layers in the .psd file shown in “tree” structure format. When an item in the tree is clicked, the right-side view beside it will show the suggested controls (Red frame in the image below) based on the image. The controls are sorted by the AI’s detection probability. Controls are reusable components in Scene Composer that are configurable to achieve a certain functionality in the solution.
Starting on the next section, a guideline on how to apply Controls to each item in the .psd file is introduced.
Gauge Controls
Apply Gauge control to the gauge-looking images on right/left side of the image.
1. Click the triangular icon beside Cluster for expanding the Cluster layer tree. (Orange frame in the image above)
- The target is to display Gauge left and Gauge right in the expanded tree.
2. Click Gauge left in the tree.
- A control list (Red frame in the image above) is displayed on the right side.
- These controls are categorized into AI detected Controls and other Available Controls.
3. Click Apply button on Gauge from the control list.
- This operation converts the Gauge left image into a Gauge control which can be used in Scene Composer.
- You can customize that control by configuring Appearance (Red frame in the image above) and Basic Properties tabs (Orange frame in the image above).
- Please configure Gauge left and Gauge right settings as seen below.
| Gauge Left | ||
| Operational tab | Target item | Setting Value |
| Control | Gauge | |
| Appearance |
Scale kmh Gauge Background BackgroundImage Pivot Point |
BackgroundImage BackgroundImage Centered |
| Basic Properties |
name InputMax RotationMax |
SpeedGauge 240 225 |
| Gauge right | ||
| Operational tab | Target item | Setting Value |
| Control | Gauge | |
| Appearance |
Scale rpm Gauge Background BackgroundImage Pivot Point |
BackgroundImage BackgroundImage Centered |
| Basic Properties |
name InputMax |
RPMGauge 8000 |
- By following the settings above, you can map correct images to CGI Studio Controls.
- Please note, if you don't set the BackgroundImage as mentioned above, CGI Studio will use the original image of the Gauge Control instead of the image from the Photoshop file.
5. Apply settings as seen below for the Text item under Gauge left and Gauge right.
- Please refer to Setting Properties of a Control how to apply a control function.
| Gauge left: 000 | ||
| Operational tab | Target item | Setting value |
| Control | Text Value | |
| Basic Properties | name | SpeedValue |
| Gauge right: 0000 |
||
| Operational tab | Target item | Setting value |
| Control | Text Value | |
| Basic Properties | name | RPMValue |
Status Indicators (top)
Apply Tell Tale control to the status indicator on the screen top. (Orange frame in the image below)
1. Click the triangular icon beside StatusTop below the Cluster layer tree.
- StatusTop is expanded and items Line and Telltales are shown.
2. Click the triangular icon beside Telltales in the tree.
- Telltales is expanded and IndicatorLeft, IndicatorRight, OpenDoors and so on are shown.
3. Apply Tell Tale (Red frame in the image above) control to OpenDoors, Engine, Airbag and Brake.
- Please refer Gauge Control section how to apply controls.
Status Indicators (bottom)
Apply Progress Bar and Text controls to the status indicator on the bottom of the screen (Orange frame in the image below).
1. Click the triangular icon beside StatusBottom below the Cluster layer tree.
- StatusBottom is expanded and items 78.321km, Petrol and Temp are shown.
2. Apply the settings below for 78.321km.
| Operational tab | Target item | Setting value |
| Control | Text Value | |
| Basic Properties | name | Odometer |
3. Click the triangular icon beside Petrol in the tree.
- Petrol is expanded and items PetrolControl, petrol icon, F and E are shown.
4. Apply the settings below for PetrolControl.
| Operational tab | Setting value |
| Control | ProgressBar |
5. Click the triangular icon beside Temp in the tree.
6. Apply the same settings as No.4 to TempControl that is shown below Temp layer tree.
- Please refer Gauge Control section how to apply controls.
Middle Section Display
Last step is to transform the middle part of the display. The goal is to create separate scenes for each scenario to display the Car Status, and Incoming Call.
1. Right-click on Car_Cluster under Scenes in the Import Settings.
2. In the context menu, select “Clone Scene…”.
3. In the Clone Scene dialog box, name the cloned scene as Car_Status.
4. Click the newly created Car_Status scene to display its Cluster tree.
5. Uncheck the checkbox of Car under Middle.
6. Then, mark the checkbox of Car_Status.
7. Repeat steps 1 to 6 above for Incoming Calls:
- create a clone of the Car_Cluster scene with the name "Incoming_Call"
- uncheck the checkbox of the "Car" group
- check the checkbox of the "Incoming Call" group
Finally, after everything is set, click the OK button of the Smart Importer dialog box.