Theme Design Manual v1.9 en

Outline
1.Steps to Creating Theme Packs

2.Theme Pack -- How to Use the Photoshop Template
3.Table of Design Content
4.Design Content of Free Theme Packs
4.1 Design Content
4.11 Lock screen
4.12 Launcher
4.13 10 Default App Icons (Launcher Icons)
4.14 Download Notication Icon (Notication)
4.2 Different Types of Layers
4.21 Editable Layers
4.22 Text Layers
4.23 Placeholder Layers
4.24 Other Elements Layers
4.3 More on the Editable Layers
4.31 Image Elements on the Lock Screen
4.32 Image Elements on the Launcher
5. Design Content of "Paid" Theme Packs
5.1 Design Content
5.11 Weather icon
5.12 30 Default App Icons (Launcher icons)
5.13 Quick Settings Page(Quick Settings)
6. Using Photoshop Actions for Automatic Cropping
6.1 Loading Actions
6.2 Executing Actions
6.3 Verifying the Cropped Image Files
7. Theme Name and Text Color Code Tables
Designer Community P 0 1 / 2 7
1.Steps to Creating Theme Packs

1. Install the default Roboto font.
2. Open the .psd template le in Photoshop.
3. Replace the contents of the image layers in various Photoshop templates in
the order described. During your design, hide or show respective placehold
layers, text layers, or other layers as instructed.
4. After the contents of the image layers have been created, verify if the
position and size of each icon and symbol are correct, and that the struc
ture and name of each layer are identical with the original Photoshop
template.
5. Save your creation as a new .psd le.
6.Load the Photoshop actions then execute the Theme actions to complete the
required cropping.
7. Open theme_data_color.xlsm, then ll in the Meta Data and color code
information.
8. The nal items to be submitted are two zip les. Please name them according to the following format and upload them to your personal page in the
ASUS
designer website:
a Theme_Filename in English_Image.zip (contains the zip le of completed cropped
images pack + Excel le)

b Theme_Filename in English_PSD. zip (contains the .PSD le of the completed creation)
2.Theme Pack : How to Use the Photoshop

Template
Thank you for joining us as a ZenUI creative designer. The purpose of this
Photoshop template is to guide you through our theme creation process. We
will keep the descriptions on the names and layer structures as simple and
clear as we possibly can to help you complete your ZenUI Theme Pack design
accurately and efciently.
A Theme Pack is a background theme that can be applied on the Launcher,
Lock Screen and Quick Settings page. It is made up of wallpapers, app icons,
text colors, and other items. There are two types of Theme Packs, Free and
Payable types, which encompass different scopes of design. Before you start
creating your designs, please read and understand the requirements for each
of these types, then let your creative juices ow, while creating various exciting themes.
Before you begin, please note the following:

Before opening the Photoshop template, please install the Roboto font,
Android's default font to avoid font-matching errors in Photoshop. The layers
marked yellow
the Photoshop template are editable. Please retain
the positions and contents of all other layers.
3. Table of Design Content

Design Area
Free
Lock Screen
1 Background Wallpaper
9 App Shortcut Icons
1 Complete Preview Image
01_layout.psd
10 App Icons
30 App Icons
01_layout.psd
Total Number of Default

Launcher App Icons
(Launcher icon)
10 in total
30 in total
04_ic_30.psd
Icon for Download

Complete Notication
(Notication icon)
1 Theme Icon
1 Theme Icon
02_ic_launcher.psd
Weather Icon
(Weather)
Does not allow change of

color/image
Allows change of colors
03_weather.psd
Quick Settings page

(Quick Settings)
X Non-customizable
1 Header Background &

Backgrounds of Shortcut
Icons in different modes
05_quick_setting_layout.psd
06_quick_setting_9patch.psd
Theme name and text color

code xls tables
Some parts need to be lled
All parts need to be lled
theme_data_color.xlsm
Launcher
Payable
PS_Template Filename
( Does not allow change of image )
A FreeTheme Pack comprises the following set of customizable items:
Lock Screen
01_layout.psd
Launcher
01_layout.psd
Icon for Download

Complete Notication
02_ic_launcher.psd
Theme name and text

color code xls tables
A PayableTheme Pack comprises the following set of customizable items:
Lock Screen
01_layout.psd
Launcher
01_layout.psd
Quick Settings page

05_quick_setting_layout.psd
06_quick_setting_9patch.psd
Weather Icon
03_weather.psd
Icon for Download

Complete Notication
02_ic_launcher.psd
Preview image of App icons

(30 icons)
04_ic_30.psd
Theme name and text

color code xls tables
4. Design Content of Free Theme Packs

4.1 Design Content
The Photoshop template (01_layout.psd) is composed of two customizable screens,

namely, the Lock Screen and Launcher, explained below:
4.11 Lock Screen
This is the screen you see when you turn on your mobile from standby mode.
Its layers are found in the lockscreen folder in the Photoshop template
(01_layout.psd). (Highlighted in red in the gure below)
The Editable Layers for the Lockscreen are marked in yellow

1
2
3
, and include:

Includes the glow effect to be applied on the
selected icon, and masks for other non-default
Apps
Colors of the text on the screen
(
Green layers)
Lock Screen Wallpaper
Default mode
When pressed
4.12 Launcher
This is the rst screen displayed when the mobile phone is unlocked; it is also
the main screen from which various functions are selected.
Its layers are found in the Launcher folder in the Photoshop template
(01_layout.psd). (Highlighted in blue in the gure below)
The Editable Layers of the Launcher are marked in yellow
and include:
1 10 default app icons

2 Masks for third-party (non-default) apps
3 App-Group folders
4 Text color codes (Green layers)
5 All app icons
6 Page Icons
7 Launcher wallpaper
To avoid having an overly long screen shot, the

Text Layers
are not shown in the gure above,
you can open the launcher text folder to view the

textual content, and change the colors of the text
where necessary. Other than colors, you should
not make any other changes.
4.13 10 Default App Icons (Launcher Icons)
The App Icons on the Launcher that can be redesigned are:
[Design Pointer]
In your design, you should take into account the users habits and the usability of your creation. When creating new images for the App Icons, on top of
visual presentation considerations, try to maintain the same or similar design
concepts as the default ZenUI elements, and make modications based on
them. This can help users comprehend and recognize established symbols and
elements.
4.14 Download Notication Icon (Notication)
This is the icon displayed after the theme has been successfully downloaded
by the user.
[Design Pointer]
Simply change the elements in the yellow layers in the Photoshop template
(02_ic_launcher.psd) and apply masks on top of them.
4.2 Different Types of Layers
The Photoshop template has four types of functional layers. Aside from the
Editable Layers highlighted in yellow
and the Text Layers highlighted in
green
, there are also Placeholder Layers and Other Elements Layers.
4.21 Editable Layers
These include wallpapers, and other elements, such as icons and symbols. This is where designers showcase their creativity. You can create
themes of different styles and characters by modifying or replacing
the contents of these layers. These editable layers are marked in
yellow and are unlocked so you can freely edit them. For further
details on this type of layers, see 4.3 More on the Editable Layers.
4.22 Text Layers
These include the text displayed on screen, such as unlock prompt,

carrier name, app names, etc. The fonts and sizes of these texts are
preset by the system and are not within the scope of theme pack
design. They are only shown as references for your design.
Only text colors and text shadow colors can be customized in Text
Layers. For more details on specifying text color codes, refer to
7. Theme Name and Text Color Code xls Tables
4.23 Placeholder Layers
These layers specify the positions of various elements (E.g.: App icons
1-6) to be cropped from the Editable Layers. The boundaries of the
crop areas are dened by orange blocks. The areas bounded by the
orange blocks are where cropping will take place later; so every image
element must be positioned within the boundaries of the corresponding orange area.
To prevent unwanted changes, all Placeholder Layers must be locked.
The gure below shows how the Placeholder Layer Launcher App Icons
Area appears in the layer view and the editing screen.
4.24 Other Elements Layers
Other Elements Layers are not editable, but will be displayed on

screen.
These image elements will show up on screen as reference during preview. You cannot change their colors or modify them in any other way.
All Other Elements Layers are locked.
1 Status bar
2 Time & Weather
3 The Google Search widget in the Launcher
4.3 More on the Editable Layers
This section provides detailed descriptions on the content and design considerations
related to various image elements in the Editable Layers.
4.31 Image Elements on the Lock Screen
Wallpaper
The dimensions of the Lock Screen wallpaper are 1080 x 1920 pixels/72dpi.
[Design Pointer] On top of visual presentation considerations, when designing wallpapers, you will need to ensure that the text and symbols on the
wallpaper are clear and identiable.
Shortcut icon
The Lock Screen can display three App Shortcut Icons at any one time; in the
Photoshop template, they are likewise placed in xed display positions as a
set of three.
[Design Pointer] When creating your design, please use the original sequence
and positions to prevent cropping errors.
shortcut icon 1-3
The following Shortcut Icons in numerical order are: Camera, Phone, and
Messaging.
shortcut icon 4-6
The following Shortcut Icons in numerical order are: Browser, Calendar, and
Email
shortcut icon 7-9
The following Shortcut Icons in numerical order are: Gallery, Contacts, and
SuperNote
Shortcut glow
The glow effect to be applied to a Shortcut Icon when it is pressed should

have dimensions of 260 x 260 pixels/72dpi, and should be aligned to the
position of the rst shortcut icon.
[In the illustrated example below] The gure on the left shows the glow effect
on its own; the gure on the right shows the effect being applied to a Shortcut Icon.
Shortcut mask
In the Lock Screen Settings, if the selected shortcut is for an app other than
the 9 default items, you will need to place the icon for this App in the image
in this layer. After merging, this icon will become the shortcut icon for this
App.
[In the illustrated example below]
Evernote and Google Map are placed into the shortcut mask.
4.32 Image elements on the Launcher (the sequence of the

contents of this section has been changed)
Default Icons (Launcher App icons)
This layer contains 6 App icons; refer to the gure below for the items and
their positions (the placeholder frames in orange display the statuses).
[Design Pointer] These default Launcher Icons must be placed in their original
image positions and sequence, to prevent cropping errors.
Masks for Third-Party Apps
When the user adds a non-default App onto the Launcher, the original icon
for this App will combine with the contents in the three layers of the
Third-Party App Mask Group to form a visually consistent presentation.
a.upon layer:is the topmost layer for visual effects, and is usually used for
enhancing the lighting effects of the icons; it is unaffected by
masks, as it is the topmost layer in the Photoshop template.
b.mask layerto be specically used for masking areas on the icons of
third-party Apps.
c.back layer It is the background at the base, and is not affected by masks.
The icons from left to right are: the upon layer, mask layer, the facebook
third party App icon, the back layer, and the nal integrated product. Icons
inside the red frame will not having masking effects on the upon layer above
it or the background on the back layer.
Folders
Users can group a few apps on the Launcher into a folder to organize based
on categories.
Folder layer is used for designing the appearance of the folder backgrounds.
The icons within it are for illustrative purposes only. The third-party icons
you designed can be used to replace the four default Google third-party
icons.
An example of the Google folder is shown below.
Text Colors (launcher text)
You can change the text color in the Photoshop template to suit your design
and customize text shadow colors. However, when deciding on text color and
their shadows, you should consider the readability of the text against the
background, and ensure that the text can be easily read.
White text &

black shadow
(default)
Yellow text &

no shadow
Green text &

red shadow
More App Icons (all app)
The all app icon_n and all app icon_p images in the Photoshop template are
located at the bottom-center of the Launcher; pressing this button will switch
from the main screen to the screen displaying all Apps.
The app icon_n is displayed by default; all app icon_p is the glow effect
applied when the button is pressed.
[Design Pointer] The entire image must lie within the orange placeholder
frame.
Default mode
all app icon_n
(n=normal)
When pressed
all app icon_p
(p=press)
Page Icons
These are used to represent the total number of pages in the Launcher, and
the current page being displayed. Generally, the number of dot-like images
represent the total number of pages. And the horizontal bar-like image represents the current page.
[In the illustrated example below] There are a total of ve pages on the
Launcher, and page three is currently displayed.
The page icons 3 layer is the image for the current page displayed, while page
icons 1.2.4.5 is the image for other pages.
The layers and editing screen for page icons are shown.
a page icons 3
5.Design Content of Paid Theme Packs

5.1 Design Content
5.11 Weather Icon (Weather)
This is the Weather icon for the Lock Screen and Launcher. You may change
its colors, but cannot change the default design of the icon.
Simply change the color of the green layer in the Photoshop template
(03_weather.psd).
5.12 30 Default app icons (Launcher icons)
Other than the icons of the 10 free default Apps, there are another 20 customizable App Icons on the Launcher, including:
5.13 Quick Settings Page (Quick Settings Layout)
In this view, users can congure the available features very quickly. Two
Photoshop templates have to be designed, namely, the main page
(05_quick_setting_layout.psd) and the program extension image, 9-patch
(06_quick_setting_9patch.psd). Details of which are as follows:
5.131 Main Page(05_quick_setting_layout.psd)
There are four areas of design in the Photoshop template (05_quick_setting_layout.psd): header, brightness control slider, functions
panel, and others.
Header:
The following items are found on the header: 1. Time and Date
Display, 2. Fixed Function Shortcut Buttons, and 3. Clear Notications
Button.
1. Time and Date Display:
On top of changing the colors in the psd layers, you will need to enter
the corresponding color codes in the xls tables later on.
2. Fixed Function Shortcut Buttons:
In the order from left to right, they are:
a. Fast Setting Options / b. Settings / c. User, respectively. Tapping on
these buttons will lead the user to the corresponding pages.
[Design Pointer] You can design the background image for this area,
but the transparency of the image should not be lower than 60%.The
background of the Clear Button may also be changed according to
different design themes.
Before cropping the completed design, the completed 2. Fixed Function Shortcut Buttons icon must be merged with function buttons
normal (normal mode) and function button press (pressed mode), and
the layer names should be retained.
function bottons normal

(Normal mode)
function bottons press

(Pressed mode)
Brightness control slider:
The two icons at each end serve different purposes. By sliding the
circular icon in the middle of the bar along the slider, the user can
adjust screen brightness to a comfortable level.
Tapping it will direct

the user to the detailed
settings page for Display
This is the auto-brightness

button
[Design Pointer] You can customize the icon in the middle of the
slider, but the widest part of this icon must be the middle region in
order to avoid breaks in the line, as shown in the gure below.
Right sample
Wrong sample, icon and line

are not coherence.
Functions Panel
The Functions Panel is made up of two parts. You can only design the
circular background of the buttons, but not the circular pictures on
top. Under default settings, these two parts are differentiated by
different colors.
Settings tools: The four buttons placed

on the rst row corresponds to the
functions that the users use most often;
tapping these buttons will direct the
users to the corresponding function
pages or execute the functions directly.
Settings items: Buttons other than

those on the rst row are ON-OFF
buttons.
[Design Pointer] The OFF mode of the Settings items can be differentiated by applying low saturation/low brightness effect, which is more
intuitive and easier to understand.
Above are samples, left icon(Vibrate) are ON buttons,

right icon (One hand op...)are OFF buttons.
Settings tools - System Optimization (Boost):

This is the function button for releasing more memory; it can enhance
system performance and conserve power for the phone.
There are two modes: 1. Normal mode, 2. Alert mode. The colors of the
text may be different for the two modes.
normal mode
alert mode
1. Normal mode: indicates that the phone memory is within the usable
range; colors and designs are consistent with the Settings tools and
its outer arc is formed from a two-color gradient layer.
2. Alert Mode: an alert button that indicates that the phone memory is
about to be full; for alerts, distinct colors are usually used; its outer
arc is formed from a three-color gradient layer.
5. 132 Program extension image, 9-patch, page
There are four different areas of design in the Photoshop template

(06_quick_setting_9patch.psd): Clear Button color, screen brightness
slider, background colors for the main page (quicksettings - background), and colors of the borders.
These layers are all marked in green; you can only change colors, but
not the contents; you will have to rst complete the design of
05_quick_setting_layout.psd, and then update these layers with the
colors and transparencies corresponding to each area; after this is
completed, all that remains to be done is cropping.
[Design Pointer] The 9-patch/border line/area locked layers cannot be
modied, else cropping errors may occur at later stages.
6.Using Photoshop Actions for Automatic

Cropping
Once the Photoshop template is complete, the various icons, symbols and wallpapers
must be cropped into individual image les, given correct le names, and placed into
corresponding folders. This section explains how the Photoshop action function
can be used to complete these procedures.
6.1 Loading Actions:

1.Open the Action window in Photoshop
2.Press the menu button on the top-right corner of the Action window to display the
menu, and then select Load Action
3.Locate and load the Photoshop action le, Theme_ Pack_Action_2016.atn. The pack
action set, Theme_Pack_Action_2016, will appear at the bottom of the actions list. It
comprises six sets of actions, namely lock_screen, launcher, ic_30, weather, quick_setting_layout, and quick_setting_9patch.
6.2 Executing Actions

[Design Pointer] If your operating system is Mac, please refer to the document
Template_&_Action/Photoshop_Action_MAC on how to crop the images. Follow the
steps in the document and convert the le. Then input the converted le into
Photoshop to complete the cropping.
1.If your operating system is Windows, before executing the Photoshop actions,
please unzip Theme_Folder.zip included in the compressed le on to the D:\ of your
computer directly, so as to save you time on creating the folder manually. Please
refer to the following gure for the structure of the folder:
2.Open the completed le of your creation. Ensure sure that your layer names and
structure have not been changed in your nal design, and all layers have been set
to visible.
3.Select the corresponding name from the action list, and then press the play
button.
If any error message appears during the execution, please
check the following:
a Has the provided Roboto font been installed on the

computer?
b Has the structure or names of the layers in the Photoshop template been changed?
6.3 Verifying the Cropped Image Files

After Actions are successfully executed, please go to D:\Theme_Template\res and
verify that the image les within in have been correctly exported, and please verify
that the number, names and sizes of the les and elements are correct.
Image les that should be included in each folder include:
assets
In assets\previews, there are
2 image les for the Free
version, and 4 image les
for the Payable version:
Free version
(2 images)
Payable version
(4 images)
Launcher sub folder in the [Res]
folder:
In res\Launcher\drawable-nodpi,
there are 17 image les for the
free version, and 37 image les for
the Payable version:
Free version
(17 images)
Payable version
(37 images)
In res\Launcher\drawable-xxhdpi,
there are 3 image les
res
res\Lock Screen\drawable-nodpi
Lock Screen sub folder in the [res] folder:
In res\Lock Screen\drawable-nodpi,
there is 1 image le:
res\Lock Screen\drawable-sw320dp-hdpi
res\Lock Screen\drawable-sw360dp-xhdpi
res\Lock Screen\drawable-sw360dp-xxhdpi
The Payable version also includes

the QuickSettings sub folder
in the [res] folder:
res\QuickSettings\drawable-nodpi
there are 3 image les:
(Transparency cannot be less than 60%)
res\QuickSettings\drawable-sw360dp-xhdpi
resQuickSettings\drawable-sw360dp-xxhdpi
The Payable version also includes

the Weather sub folder in the
[rro] folder
rro\Weather\drawable
there is 1 image le:
\rro\Weather\drawable-sw360dp-xhdpi
\rro\Weather\drawable-sw360dp-xxhdpi
Finally, compress the cropped images in D:\Theme_Folder, including all folders, into
a zip le, to be uploaded on to the website later on.
7.Theme Name and Text Color Code .xls Tables

Executing the relevant Actions in Photoshop can generate the image les required to
create the theme pack. In addition to these image les, you will also need to provide
basic information on that theme, and the color codes for the text on screen must be
entered in the Excel le attached to the Photoshop template.
When you open theme_data_color.xlsm, you will see ve worksheets: Meta-data,
APP_Lock screen, APP_Launcher, APP_Quick settings, and RRO_Weather, as explained
below.:
[Design Pointer] For the Free version, you will only have to enter information for the
rst 3 tabs; for the Payable version, you will have to enter information in all ve
tabs.
The Meta-data worksheet comprises basic information on the theme; the required
elds include:
ID (English only): English name of the theme
pack; it should comprise only alphanumeric
characters. It is recommended that you use the
English name of the theme.
Name: Chinese name of the theme pack.
Author: Name of designer (please enter your
name).
Description: Provide a short description on
the theme.
Color codes in the [APP_Lock screen] worksheet include:
Asus_lockscreen_quick_access_hint_text: The color of the

numbers in the shortcut icon (such as: the number of unread
SMS messages, unread E-mails, and missed calls etc.)
Asus_lockscreen_indication_textview_color: The text color
of the unlock prompt.
Asus_lockscreen_carrier_text_color: The text color of the
carrier name.
Color codes in the [APP_Launcher] worksheet include:

asus_launcher_color_icon_labelThe text color of the App
names on the Launcher
Asus_launcher_shadow_enabled: Should text shadow be
applied on the names of the Apps on the Launcher (Yes/No).
asus_launcher_shadow_large_colorColor of the shadows
applied on the names of the Apps on the Launcher (including
transparency setting)
[Design Pointer] Text colors are specied in hexadecimal format; you can nd the
hexadecimal color value of the current color in the Photoshop Color Picker.
[Transparency Settings] In the xls worksheet you will nd 2 -bit transparency values
in multiples of 5. Fill in the 2-bit values corresponding to the transparencies you
require in your design into provided cells.

Theme Design Manual v1.9 en

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Theme Design Manual v1.9 en

Transféré par

Droits d'auteur :

Formats disponibles

Outline

1.Steps to Creating Theme Packs

1.Steps to Creating Theme Packs

images pack + Excel le)

2.Theme Pack : How to Use the Photoshop

Before you begin, please note the following:

3. Table of Design Content

Total Number of Default

Icon for Download

Does not allow change of

Allows change of colors

Quick Settings page

1 Header Background &

Theme name and text color

Some parts need to be lled

All parts need to be lled

( Does not allow change of image )

1 Complete Preview Image

A FreeTheme Pack comprises the following set of customizable items:

Icon for Download

Theme name and text

A PayableTheme Pack comprises the following set of customizable items:

Quick Settings page

Icon for Download

Preview image of App icons

Theme name and text

4. Design Content of Free Theme Packs

The Photoshop template (01_layout.psd) is composed of two customizable screens,

4.11 Lock Screen

The Editable Layers for the Lockscreen are marked in yellow

9 App Shortcut Icons

The Editable Layers of the Launcher are marked in yellow

1 10 default app icons

To avoid having an overly long screen shot, the

are not shown in the gure above,

you can open the launcher text folder to view the

4.13 10 Default App Icons (Launcher Icons)

The App Icons on the Launcher that can be redesigned are:

4.14 Download Notication Icon (Notication)

4.2 Different Types of Layers

4.21 Editable Layers

4.22 Text Layers

These include the text displayed on screen, such as unlock prompt,

4.23 Placeholder Layers

4.24 Other Elements Layers

Other Elements Layers are not editable, but will be displayed on

4.3 More on the Editable Layers

4.31 Image Elements on the Lock Screen

shortcut icon 1-3

shortcut icon 4-6

shortcut icon 7-9

The glow effect to be applied to a Shortcut Icon when it is pressed should

4.32 Image elements on the Launcher (the sequence of the

Default Icons (Launcher App icons)

Masks for Third-Party Apps

Text Colors (launcher text)

White text &

Yellow text &

Green text &

More App Icons (all app)

5.Design Content of Paid Theme Packs

5.12 30 Default app icons (Launcher icons)

5.13 Quick Settings Page (Quick Settings Layout)