39
THEMES CREATION TUTORIAL

THEMES CREATION TUTORIAL - … · Creating Themes for Huawei Themes Store Creating Themes for Huawei Themes Store is EASY. You only need Photoshop, some designing skills …

  • Upload
    haque

  • View
    317

  • Download
    0

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 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 1/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:

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: 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: 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: 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 3: 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

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: 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:

2160x1920 pixels*72 DPI RGB

Creating Wallpapers: 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.

Editing icons 1/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 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.

Editing icons 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

Editing icons 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: 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: 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: 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: 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: 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: 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!

Contact

Email us if you have any questionThank you!

[email protected]