THEMES CREATION TUTORIAL

Creating Themes for Huawei Themes Store

Creating Themes for Huawei Themes Store is EASY.

You only need Photoshop, some designing skills and our free Theme creation tools.

There are 3 steps on the Theme creation process:

1. Design your Theme (wallpaper, icons etc.) using our Theme Template
2. Use our Theme Tool to combine all created assets into a Theme package.
3. Upload your Theme package to our Themes Store via Huawei Developer
Alliance http://developer.huawei.com/consumer/en

And you’re done!

THEME TEMPLATE & TOOL
Download the required files 1/2

To start the Theme creation you will need 2 files*

“Themes template.zip” and “Themes Tool (xx-bit).zip”

*These files are available at HuaweiMobileServices.com:

https://huaweimobileservices.com/themes-creation.rar

Please note: Themes tool works only on Windows machines, 32 bit or 64 bit file version according to your computer system.
Download the required files 2/2

The file “Themes template.zip” will be used to create the design layout of the Theme.
It should have the following 5 files:

The “Theme Tool (xx-bit).zip” is the software that will be used to create the Theme.
It should have the following 11 files:
Themes template.zip: All design templates in one place

Use Themes template to create your own Theme design with Adobe Photoshop.
Themes template elements 1: Wallpapers
Each Theme has 2 wallpaper images, the “unlock screen wallpaper” and the “main screen wallpaper”.
The correspondent files for them are: “preview_unlock_0” and “widget_0”.

preview_unlock_0 widget_0
(lock screen wallpaper) (main screen wallpaper)
Themes template elements 2: Widget_0
Addition to the main screen wallpaper, the file “widget_0.psd” can also be used to create the widgets layout
and basic 8 icons.
 Themes template element 3: Unlock screen
The file “4.0unlock.zip” is used to create the text layout and any other element that will be displayed in the unlock screen
Themes template element 3: Icons
The files “widget_0.psd”, “icons_0” and “icons_1” should be used to design all other Icons for your Theme.
Please note: Designing new icons is optional. You can also use default Android icons with your Theme.

icons_0 icons_1
HOW TO DESIGN A
WALLPAPER
Creating Wallpapers
There are 2 different wallpapers used in the Theme: unlock screen wallpaper is the image displayed when the
phone is locked and the home screen wallpaper is the wallpaper used after the phone is unlocked.

unlock screen wallpaper home screen wallpaper

Creating Wallpapers: Unlock screen
The unlock screen wallpaper template is called ”preview_unlock_0.psd” and it is used to set your image in the correct proportion.
See examples on the reference file “4.0unlock.zip”.

The resolution for the

unlock screen wallpaper is:
1080x1920 pixels
72 DPI in RGB

You will need to export 2 versions of your wallpaper image:

1. One named preview_unlock_0.jpg which will be used as an preview image on Themes store. This image should include the date
and time and ”Slide to unlock” text as its only for preview.
2. One named unlock_wallpaper_1.jpg without any text as it will be the real unlock wallpaper used inside the Theme.
Creating Wallpapers: Home screen
To edit the home screen wallpaper you will need to open the file “widget_0.psd”.
The Wallpaper layout is located in the layer group “home wallpaper(must be widescreen)”.
Double click “F1_$_home_wallpaper_0” layer and place your wallpaper image there.

The resolution for the

home screen image is:
2160x1920 pixels*
72 DPI RGB

*End user can move the Home

Screen image..
HOW TO DESIGN THE ICONS
Creating Icons: Required files
To edit the ICONS you need 3 PSD files: “ widget_0.psd ” “ icons_0.psd ” and “ icons_1.psd ”

widget_0 icons_0 icons_1

Creating Icons: Size

The images for the icons should be

192x192px 72 DPI and RGB format
Editing icons 1/4
We are using the file “widget_0.psd” here as an example, the same method is used for the files “icons_0.psd” and “icons_1.psd”

Each layer inside the group

”icons” is an icon. Double click the
layer to modify the icon image.

Open the file and double click the group”icons”.

The sub group ”0” is related to the second line of 4 icons.
Sub group ”1” is related to the first line of 4 icons.
Editing icons 2/4
When you are editing the icon you want to change, simply paste your design over / on top of the default icon layer.
Editing icons 3/4
After you have placed your design as the first layer, delete or make invisible the original design layer.

Now save the changes and go back to the main file “ widget_0.psd ”.
Repeat the process to all other icon layers that you want to modify.
Editing icons 4/4
Inside the PSD file “icons_0.psd” there's an group named “Other Icon” which has 3 layers: Border, Mask and Background.
The visuals of this group will affect all the icons inside your Theme, so if you modify these layers all the icons in your Theme will
obey the layout modification (Also app icons like Facebook). Doubleclick the layer you want to edit.

Path:
Do system icons >
7 > Other icon

There’s 3 options of modification: border (frame), mask (shape) and background. In the example bellow the background
is transparent.

=
Mask (shape) Border (Frame)
HOW TO PACKAGE
YOUR THEME
Theme Tool: Create a new Theme file
When your Theme visual designs are ready its time to use the Theme Tool.
It´s a software which is used to combine all the files into a Huawei Themes file (.HWT)

Start creating the Theme file by clicking ”New”. After that you will need to fill the My Theme form: Name, designer,
creator, description etc.
Note: You don´t need to fill the “Version” as it will be set when the Theme file is ready.
 Theme Tool: Import files
Choose the files you want to import: Lock Screen, Widgets (including Home page wallpaper) and/or Icons.
Not imported files will use default Android items.

Note:
Please ignore
Homepage and all
menu choices
below it.
 Theme Tool: Import Lock screen
Add your Lock Screen Themes package by choosing the Lock Screen tab, click ”+” button and select the 4.0unlock.ZIP file.
After this the imported files can be seen on the screen and you can jump to Widgets tab.

Please note: Your Lock screen files should be compressed into a 4.0unlock.ZIP before importing them to the Themes tool. Make sure that you
compress only the ”preview_unlock_0.jpg”, ”unlock_wallpaper1.jpg and the ”unlock-folder” in to the zip file. There shouldn´t be any extra files
on the package.
Theme Tool: Import Widgets and Home Screen

Add your Widgets and Home Screen to the Themes package by choosing the Widgets tab, click ”+” button and
select the widget_0.PSD file.
After this the imported files can be seen on the screen and you can jump to Icons tab.

The widget_0.psd file brings both

8 main screen icons (HiApp, Themes,
Settings, Camera, Phone, Contacts,
Messages and Browser) and the
home screen wallpaper to the Themes
package.
Theme Tool: Import Other Icons

Add your custom icons to the package: Import the the 2 icon PSD files that you modified (icons_0.psd and icons_1.psd).
Choose them together and click Open. After this: The imported files can be seen on the screen side by side.

Please note you can skip this step if you haven´t done any custom icons.
 Theme Tool: Export Theme Package

The last step is to export the Theme files, just click the button Export Theme Package and save it to you selected folder.

Theme Tool packages the added design files into a .hwt file (Huawei Themes) which can be uploaded to the Themes Store via
Huawei Developer Alliance (developer.huawei.com).
MAKE THEME COMPATIBLE WITH ALL
HUAWEI OS VERSIONS
What is EMUI (Huawei OS)?

EMUI stands for Emotion UI and it´s the name of Huawei´s smartphone software, that sits on top of the Android OS
and gives Huawei phones a distinctive look and feel.

EMUI 4 New EMUI 5 was launched 11/2016.

Making your Theme compatible with EMUI 5.0 – 1/5
By default all Themes created with the Theme Tool are EMUI 4 and you will need to make them EMUI 5 compatible so that
your Theme works on all phones. Start this by doing a copy of your packaged Themes file.

Step 1: Step 2:
Rename your Theme file from .hwt to .zip and Rename the icons file to .zip
extract the files.
Making your Theme compatible with EMUI 5.0 – 2/5

Step 3:
Delete these 3 files from the unzipped Themes package (these are not needed on EMUI 5.0 version):
com.android.gallery3d, com.android.mediacenter, com.huawei.android.totemweather

EMUI4.0 Theme EMUI5.0 Theme

Making your Theme compatible with EMUI 5.0 – 3/5
Step 4: Delete extra files from Icons folder
Open Icons.zip and go to Dynamic_icons folder and delete the sub folder ”com.android.calendar”. Save the zip.

EMUI4.0 Theme EMUI5.0 Theme

icons icons
Making your Theme compatible with EMUI 5.0 – 4/5
Step 5: Edit Theme XML file
Open the file description.xml from Main folder using a Notepad and change the version number from 4.0.1 to 5.0.1.
Save the file.

EMUI4.0 Theme EMUI5.0 Theme

description.xml description.xml
 Making your Theme compatible with EMUI 5.0 – 5/5

After you have done all the changes you will need to do the reverse compress & rename.

Step 6: Step 7:
Rename the Icons.zip to Icons (without any ending) Select all files in the Main folder and zip it.
Rename the .zip package to .hwt
TESTING THE THEME
Test your Theme 1/2

Before upload the Theme file to the Theme Store test your .hwt file in your device or send it to us and we will test the file.
Connect your mobile device to your computer and drag your Themes file to the folder:
Computer\Device Name\Internal storage\HWThemes
Test your Theme 2/2
Open your Themes app, go to Local Themes, select the Theme you create and click Apply.

Congratulations you have created your first Theme!

Contact
Email us if you have any question
Thank you!

themeseu@huawei.com