themes creation tutorial - huawei mobile themes for huawei themes store creating themes for huawei...

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

Post on 16-Mar-2018

218 views

Category:

Documents

6 download

Embed Size (px)

TRANSCRIPT

  • 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 youre done!

    http://developer.huawei.com/consumer/en

  • 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

    https://www.dropbox.com/sh/upu5a55e4fc8r3q/AADPxfb-CL6UYSisUNMny1U0a?dl=0

  • 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 groupicons. 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.

    Theres 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. Its 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 dont 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 shouldnt 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 havent 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 its the name of Huaweis 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. S

Recommended

View more >