Embed Size (px)
Citation preview
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 Template2. 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
To start the Theme creation you will need 2 files*
“Themes template.zip” and “Themes Tool (xx-bit).zip”
*These files are available at Dropbox:
https://www.dropbox.com/sh/upu5a55e4fc8r3q/AADPxfb-CL6UYSisUNMny1U0a?dl=0
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 1/2
OR
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:
Download the required files 2/2
Themes template.zip: All design templates in one place
Use Themes template to create your own Theme design with Adobe Photoshop.
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
(lock screen wallpaper)
widget_0
(main screen wallpaper)
Themes template elements 1/4: Wallpapers
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 elements 2/4: Widget_0
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/4: Unlock screen
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
Themes template element 4/4: Icons
HOW TO DESIGN A WALLPAPER
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 1/3
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 pixels72 DPI in RGB
Creating Wallpapers 2/3: Unlock screen
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 dateand 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.
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:
2162x1922 pixels*72 DPI RGB
Creating Wallpapers 3/3: Home screen
*End user can move the Home Screen image.
HOW TO DESIGN THE ICONS
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: Required files
The images for the icons should be 192x192px 72 DPI and RGB format
Creating Icons: Size
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”
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.
Each layer inside the group ”icons” is an icon. Double click the layer to modify the icon image.
Creating Icons: Editing 1/4
When you are editing the icon you want to change, simply paste your design over / on top of the default icon layer.
Creating Icons: Editing 2/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.
Creating Icons: Editing 3/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.
There’s 3 options of modification: border (frame), mask (shape) and background. In the example bellow the background is transparent.
Mask (shape) Border (Frame)
=
Path: Do system icons >7 > Other icon
Creating Icons: Editing 4/4
HOW TO PACKAGE YOUR THEME
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 1/6: Create a new Theme file
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.
Theme Tool 2/6: Import files
Note: Please ignore
Homepage and all menu choices
below it.
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.
Theme Tool 3/6: Import Lock screen
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.
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.
Theme Tool 4/6: Import Widgets and Home Screen
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.
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.
Theme Tool 5/6: Import Other Icons
Please note you can skip this step if you haven´t done any custom icons.
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).
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 6/6: Export Theme Package
MAKE THEME COMPATIBLE WITH ALL HUAWEI OS VERSIONS
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.
What is EMUI (Huawei OS)?
New EMUI 5 was launched 11/2016. EMUI 4
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 2: Rename the icons file to .zip
Making your Theme compatible with EMUI 5.0 – 1/5
Step 1: Rename your Theme file from .hwt to .zip and extract the files.
EMUI4.0 Theme EMUI5.0 Theme
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
Making your Theme compatible with EMUI 5.0 – 2/5
EMUI4.0 Theme EMUI5.0 Theme
icons icons
Open Icons.zip and go to Dynamic_icons folder and delete the sub folder ”com.android.calendar”. Save the zip.
Step 4: Delete extra files from Icons folder
Making your Theme compatible with EMUI 5.0 – 3/5
EMUI4.0 Theme EMUI5.0 Theme
description.xml description.xml
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.
Step 5: Edit Theme XML file
Making your Theme compatible with EMUI 5.0 – 4/5
After you have done all the changes you will need to do the reverse compress & rename.
Step 6: Rename the Icons.zip to Icons (without any ending)
Step 7: Select all files in the Main folder and zip it. Rename the .zip package to .hwt
Making your Theme compatible with EMUI 5.0 – 5/5
TESTING THE THEME
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 1/2
Open your Themes app, go to Local Themes, select the Theme you create and click Apply.
Test your Theme 2/2
Congratulations you have created your first Theme!
ADD A NEW THEME TOHUAWEI THEME STORE
Step 1: Click on “New Product”
Add your Theme to Huawei Theme Store- add product1/2
Step 2: Choose “Theme”
Step 3: Click on “+ Browse File” to upload your Theme package
Add your Theme to Huawei Theme Store-add product2/2
Step 4: After uploading the file, you have 3 ways for adding services, you can also update or delete this file:
1.Button in Product List page
2.Button in Theme page
3.Button in Theme Services page
Add your Theme to Huawei Theme Store-add service 1/2
Step 1: Click on “Add Service”, choose “Huawei Themes” and go to the Service editing page
Step 2: Agree to the “Theme Center License Agreement” and select “Continue”
Add your Theme to Huawei Theme Store-add service 2/2
Step 3: Fill in the form, select “Save” to save it as draft. Click on “Publish” to publish the service
Step 4: Afterwards, contact your dedicated Huawei Business Operation Manager to audit your service request
If the audit is done, you can edit your service information to update or apply for withdraw (if its Service Status is ‘on shelf’)
