How to work with templates

If you would like to use Adobe Photoshop to edit images in your theme, you can use the Photoshop templates specially made for Theme Creator to make the design work easier. How to do this is described in the steps below.

Before you begin, we assume you have a theme project that you want to work with open in the Theme Creator tool. If you have not yet done so, follow steps A and B in Get Started to set up Theme Creator and create a project. You will also need to download the Photoshop templates from here.

The Photoshop templates group UI elements into screen views according to similar appearance and functionality. Each customizable UI element is a Smart Object in the Photoshop file.

When working with templates, you will normally work with both Photoshop and Theme Creator open at the same time. The following steps show you how to use the Photoshop templates to edit the Smart Objects that correspond to UI elements you want to customize. Then you can export the images from Photoshop to examine the individual resources, and further refine the components in Theme Creator. Finally, you can build and install the theme on a connected device directly from Theme Creator.

 

Step A. Open a template in Photoshop
  1. Unpack the Photoshop templates. A good location is a subfolder in your projectroot so that you may edit them for your project.
  2. In Photoshop, open the template PSD file named named SystemUI_NavBar_StatusBar_NavigationButtons.psd in the Lollipop folder from your templates folder.
    Note:
    Examine the layers. Some of the layers contain the resource image designs, and some are there for other purposes. For example, the top layer contains a brief explanation of what the template is for and how to use it.
  3. When you open the template, a help text is displayed as the top layer. After reading the help text, hide the top layer to start working with the resource images.

    Adobe Photoshop template with help text layer.

    Adobe Photoshop template with help text layer.

  4. To keep your work area clean for your design work, turn off the Slices view. Choose View > Show, and uncheck the Slices. Each template is organized into slices for web viewing, with predefined positions, sizes, and names. These slices are used to export your designs, and you should not modify them, but you don’t have to show them while you are working on your design.
Step B. Make a change in the graphics

To illustrate the process of editing different UI elements, we will change the color of the graphic for the Navigation bar Home button. You can then repeat this process for all the UI elements you want to customize.

  1. In the Layers palette, expand the layer group xxhdpi > navigation_keys > Normal, and select the layer named xxhdpisomc_navbar_home_btn. This is the layer that contains the component of the Navigation bar Home element.

    Theme template open in Adobe Photoshop.

    Theme template open in Adobe Photoshop.

  2. Click Add layer style in the Layers palette, and select Color Overlay.
  3. Change the color to #336699 and note the change of color of the home icon.

    Changing the color of the home icon.

    Changing the color of the home icon.

  4. If you want to have landscape support, make the same color change to the layer xxhdpi_somc_navbar_home_btn_land. As the name indicates, this is the layer for the landscape version of the same element.
Step C. Export your design from Photoshop

When you have made a design change, you need to export the graphics from Photoshop to produce images which Theme Creator can read.

  1. First, hide the layer folders called “Help: Hide me first” and “Hide me before exporting”.
  2. Show the Slices view, to make sure none of your graphics has moved out of the slice boundaries. Go to View > Show, then check Slices.
  3. Choose File > Save for Web. You can ignore any errors related to the large canvas size.

    Export your graphics with the Save for Web command.

    Export your graphics with the Save for Web command.

  4. In the Save for Web dialog, you must not change these default settings:
    • Preset is “PNG-24”.
    • Transparency is selected.
    • Interlaced is not selected.
    • The Matte dropdown is not active.

    When you have verified these settings, click Save.

  5. In the next dialog, choose your destination folder. The destination folder must be somewhere in your projectroot folder from step B on the Getting started page.Important: Do not change the default file name.Tip: If you want to, you can organize your project files further by creating a subfolder in your projectroot folder and making that your export destination. However, you should not move files after they have been linked into your theme as described in Step D. Link the images and view your changes below.
  6. Choose the following settings:
    • Format: Images Only.
    • Settings: Custom.
    • Slices: All User Slices.
  7. Click Save.
Step D. Link the images and view your changes

To be able to view the changes you made in step C in Theme Creator, you need to link the images to your theme project.

  1. Switch from Adobe Photoshop to the Theme Creator tool.
  2. In the menu bar, click on File > Scan for images. A list will appear with all the images you exported from Photoshop in step C.
  3. Click on Use selected images to link the images to your theme.
  4. To preview the result of the change, select Home in the navigation tree.

Note: You only need to link your images once. After an image has been linked to your project, you can perform a new export from Photoshop and the new version of the image(s) will be brought in automatically, provided you export to the same location and with the same file name.

In order to see how your theme looks on a real device screen, you must have an Xperia smartphone or tablet connected to your computer. Learn how to do this on the Test and verify page.