THEMES CREATION TUTORIAL

Transcription

1 THEMES CREATION TUTORIAL

2 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 And you re done!

3 THEME TEMPLATE & TOOL

4 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: Please note: Themes tool works only on Windows machines, 32 bit or 64 bit file version according to your computer system.

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

6 Themes template.zip: All design templates in one place Use Themes template to create your own Theme design with Adobe Photoshop.

7 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 (lock screen wallpaper) widget_0 (main screen wallpaper)

8 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.

9 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

10 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

11 HOW TO DESIGN A WALLPAPER

12 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

13 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.

14 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..

15 HOW TO DESIGN THE ICONS

16 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

17 Creating Icons: Size The images for the icons should be 192x192px 72 DPI and RGB format

18 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.

19 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.

20 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.

21 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)

22 HOW TO PACKAGE YOUR THEME

23 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.

24 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.

25 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.

26 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.

27 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.

28 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).

29 MAKE THEME COMPATIBLE WITH ALL HUAWEI OS VERSIONS

30 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.

31 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: Rename your Theme file from.hwt to.zip and extract the files. Step 2: Rename the icons file to.zip

32 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

33 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 icons EMUI5.0 Theme icons

34 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 to Save the file. EMUI4.0 Theme description.xml EMUI5.0 Theme description.xml

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

36 TESTING THE THEME

37 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

38 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!

39 Contact us if you have any question Thank you!