[Guide] [MeByDesign] MIUI Theme Contest: Online Theme Editor Guide

Online Theme Editor Guide

You All know We arebringing amazing contest for India “India theme contest” #MeByDesign to inspire MIUI theme developers and otherdesigners from India. The contest will be 6 months long, so even if you mightnot know anything about MIUI themes, but you’re a good designer, you still haveenough time to learn about themes and participate.

So here is our first Theme Development Tutorialguide for Online theme editor tool.

Stick with us for next news update and beprepared for India’s Frist Biggest theme Contest  #MeByDesign.

 

Prerequisites for developing a theme online

• Registered Account on designer.xiaomi.com .
• Working Internet Connection.
• Design Ideas and Files (Like:wallpaper, Icons etc.)

You are ready to go.  designer.xiaomi.com/

Step 1:-Go to online web tool http://theme.mi.com/editor

• Click on Get Started Button.

Step 2:-Login in your mi account which has already got the designer permissions.

  

• See how to apply designer permissions.

Step 3:- After Login you will get Editor Home Page.

• Click On Create a Theme (For Create New Theme)
• Click MIUI Theme Account (For Your Theme Status Uploaded Earlier )

Step 4 :- Now You are in the Theme Tool Editor

Lock Screen Template

Select one of three Lock (Different unlocking Patterns).

5-point unlocker

• Four app unlock (Home,Call,Messaging,Camera)
• Music player on lockscreen in built.
• Multifunction at same screen
• Unlock Method：You need to drag circle which is in center to the app icon which you wants to unlock.

3-swipe unlocker

• Three app unlock (Home,Camera,Call).
• You can put any Quote / Notice on Lockscreen (Text).
• Unlock Method：Swipe up from desired app icon for unlock/open app.

Slide right to unlock

• Very simple unlocker style.
• Unlock Method:Simply Slide the lock button on screen and follow the given path.

Select Any Unlocker style and click Next button

Step 5:-  Edit Lockscreen

1.  Lock screen Wallpaper

• Click on Change button.
• Upload your Lockscreen wallpaper.
• Dimension should be 720×1280 px & JPG format
• Click next button.

2.  Add lock screen text (Optional if you don’t want any text you can left it blank)

  

3.  Now upload unlocker icons & mask

• Mask is a layer on unlocker(Optional,can put blank png)

Step 6:- Home screen wallpaper

Click on Change and Upload Wallpaper

• Wallpaper Dimension should be 1440x1280px.
• Format should be JPG.

Wait for upload and click next.

Step 7:-  Home screen Icons

  Click on edit button visible bellow the icons and upload your icon.

• There are 32 icons to be changed.
• Each icon format is .png.
• Dimension should be  192x192px (not more neither less).
• You cannot skip any icons (should change all icons ).

After finishing all  click on next button.

Step 8 :- Other Icons

Change Icons for downloaded apps.Click on edit button visible bellow the icons and upload your icon.

• There are 4 type of icons to be change.
• Icon background ( cover visible background of app ).
• Icon pattern ( pattern for downloaded app icon).
• Icon mask (visible area for user (black color filled area is only visible ) ).
• Folder background (this will be the background for icon folder).

Step 9:- System UI colors

Change UI colors

• Choose the foreground and background colors and images that are displayed.
• Change will reflect in (notification shade, Phone, and Messaging apps).
• Chose colors from color picker or you can directly enter color value in the textbox.
• 1st Color will reflect in Navigation bar (top and bottom bar used for navigation) .
• 2nd color will reflect in elements & text which will appear on Navigation bar.

Step 10 :- System UI Images

Change UI  Images

• Upload the Top-bar and Bottom-bar images which will be reflect inside apps.
• Upload image will be in .png format and dimension should be exact.
• Here background image will reflect in lots of places in theme so color of background should be compatible with font colors and other UI components.

After finishing all the uploads click  next button.

Step 11 :- Dialer UI

Dialer UI Change

• Dialer Background (720x484px & .png format).
• Bottom Bar image (720x160px & .png format ).
• Dial button Normal/Pressed both condition (388x162px).

Click on upload button for each image and upload your image.

After finishing all the uploads click  next button.

Step 12 :- Messaging UI

Here you need to change only one image which is edit button (compose).

Dimension should be 80x90px & .png format.

*Note :- better if you will not give any background to button image like in above image.

Step 13 :- Notification Shade

Here you will Change

• Toggels color using color picker or can directly enter value in textbox.
• Upload  notification shade background (720x1060px & .png format).

After finishing all the uploads click  next button   .

Here You are done with all theme development . Now check all the changes you made by clicking

On icons visible on left side of tool editor and confirm your theme design.

*Check all the  dots under left side icons of tool  are Blue or not

Step 14 :- Final Publish Step

Fill up all the fields.

• Theme Name.
• Designer Name (Your name / Your group name).
• Description of your theme based on your theme name or theme idea.

Congratulations You are done !!!!!!!!  

Here you can see Preview of your theme by clicking on Save & Preview button.

You can save your Theme .mtz file by clicking Download beta button. When you done with all of these you can submit your theme for review. By clicking on button Submit for review button.

For  online Doc.Link:- Online Documents

For a pre-announcement for the MIUI Theme Contest in India, click here>>

Source- MIUI Forum