IN PROGRESS
HOW TO CREATE BEAUTIFUL UCCW SKINS
0. Contents
Introduction
About UCCW
Basic UCCW Usage
How to build skins
Designing
1. Introduction
I am aware that there are in fact many other UCCW guides out there. I won't be focusing much on how to do this or that... What I want to teach you is how to create beautiful and functional skins. As such the sections of this tutorial focusing on the actual widget building will be short, and may not cover everything that UCCW offers, but the design section will have a lot more content
2. About UCCW
UCCW or Ultimate Custom Clock Widget is a software developed by our own vineetksirohi.
XDA link: http://xdaforums.com/showthread.php?t=1386987
Play store link: https://play.google.com/store/apps/details?id=in.vineetsirohi.customwidget
3. Basic usage
UCCW has two parts. One is the widget that is added to the homescreen, the other is the app in the launcher that can be used to:
1. Import skins
2. Edit skins
3. Export skins
The editor has several features
1. The menu bar above
Add/remove button - add or remove various widget components such as date and time etc.
Component selector - select which component you are currently editing
The sort button - choose which components appear above the others
3. The preview area - allows you to move the currently selected component ( don't use this, it's better to move the components more precisely)
4. The editing area - has several panes which can be navigated by sliding to the left and right.
5. The menu. - the most important things here are the save button and the option to turn hotspot mode on and off. When hotspot mode is off you can edit widgets by clicking them on the homescreen, when it is on you can use the shortcuts defined in the skin.
As far as the features of UCCW that I generally use:
0. General - background, hotspots that can be assigned to different actions
1. Clock - as time or by separate parts (hours, minutes)
2. Date
3. Battery - circle, bar, status, level
4. Calendar - next event time, next event text
5. Notifications - missed calls, text messages, unread gmail, next alarm time
4. How to build skins
Please refer to the following videos by mycolorscreen on youtube
Part 1: http://www.youtube.com/watch?v=s5X0ZCI5Kg0
Part 2: http://www.youtube.com/watch?v=t5c2Sa9UGG0
Part 3: http://www.youtube.com/watch?v=Dz2zf_AJRFc
At the end of this you should have a basic idea of how to deal with the different components. Now time for me to add my part
Advice:
1. Always move components so they align with each other, pixel for pixel.
2. Always start your widget with a nice good size like 400 x 100 for a 4x1 widget. This is to make it easier for you to create background images
3. Be consistent with your use of colors and font size, unless variety is part of your design
4. Try to size components appropriately so that they stay within the bounds of the widget.
5. Designing
IMPORTANT: a UCCW skin without a proper background or forethought design will always look ugly/disappoint you. You must first spend a good amount of time looking for inspiration and sketching initial designs before you execute and make the skin.
i. Inspiration
Look for user interfaces in movies (like Iron Man) and websites such as Google images, deviantart, or look at desktop customization software such as Rainmeter. Don't attempt to copy someone elses work. Instead, choose elements of other works you like, and combine them with your imagination.
ii. Initial design
Whip out your pencil and paper, or if you're good enough, a tool like Photoshop or Fireworks. I totally recommend pencil and paper as it is the fastest. Sketch a design. Don't attempt to make UI elements too small (in the name of readability). Don't make it too fancy unless you know it's gonna work out for you. Don't feel bad if your first designs look lackluster. It's a learning process and your first skins might not look as you want, but you will reach there eventually.
iii. More advice
Start with basic widgets such as date/time/battery. The first thing to do is to set your wallpaper to a contrasting color, and then being positioning the text and other components. Next, create a background image. I recommend Paint.NET to create it.( http://www.getpaint.net/ ). Ideally, the background should provide bordering for the various components of the widget, and it should be designed in a way that it does not lose quality if used on a higher quality screen (simply: avoid curved edges and stick to rectangular/straight designs). The most part of the background image should also be slightly transparent as this looks the best.
iv. Yet more advice
You will need time to play around with your widget and experience it to see if it looks good and it it handles different content nicely (i.e. different lengths of text in a component). Try to use it for at least a couple days before you release.
HOW TO CREATE BEAUTIFUL UCCW SKINS
0. Contents
Introduction
About UCCW
Basic UCCW Usage
How to build skins
Designing
1. Introduction
I am aware that there are in fact many other UCCW guides out there. I won't be focusing much on how to do this or that... What I want to teach you is how to create beautiful and functional skins. As such the sections of this tutorial focusing on the actual widget building will be short, and may not cover everything that UCCW offers, but the design section will have a lot more content
2. About UCCW
UCCW or Ultimate Custom Clock Widget is a software developed by our own vineetksirohi.
XDA link: http://xdaforums.com/showthread.php?t=1386987
Play store link: https://play.google.com/store/apps/details?id=in.vineetsirohi.customwidget
3. Basic usage
UCCW has two parts. One is the widget that is added to the homescreen, the other is the app in the launcher that can be used to:
1. Import skins
2. Edit skins
3. Export skins
The editor has several features
1. The menu bar above
Add/remove button - add or remove various widget components such as date and time etc.
Component selector - select which component you are currently editing
The sort button - choose which components appear above the others
3. The preview area - allows you to move the currently selected component ( don't use this, it's better to move the components more precisely)
4. The editing area - has several panes which can be navigated by sliding to the left and right.
5. The menu. - the most important things here are the save button and the option to turn hotspot mode on and off. When hotspot mode is off you can edit widgets by clicking them on the homescreen, when it is on you can use the shortcuts defined in the skin.
As far as the features of UCCW that I generally use:
0. General - background, hotspots that can be assigned to different actions
1. Clock - as time or by separate parts (hours, minutes)
2. Date
3. Battery - circle, bar, status, level
4. Calendar - next event time, next event text
5. Notifications - missed calls, text messages, unread gmail, next alarm time
4. How to build skins
Please refer to the following videos by mycolorscreen on youtube
Part 1: http://www.youtube.com/watch?v=s5X0ZCI5Kg0
Part 2: http://www.youtube.com/watch?v=t5c2Sa9UGG0
Part 3: http://www.youtube.com/watch?v=Dz2zf_AJRFc
At the end of this you should have a basic idea of how to deal with the different components. Now time for me to add my part
Advice:
1. Always move components so they align with each other, pixel for pixel.
2. Always start your widget with a nice good size like 400 x 100 for a 4x1 widget. This is to make it easier for you to create background images
3. Be consistent with your use of colors and font size, unless variety is part of your design
4. Try to size components appropriately so that they stay within the bounds of the widget.
5. Designing
IMPORTANT: a UCCW skin without a proper background or forethought design will always look ugly/disappoint you. You must first spend a good amount of time looking for inspiration and sketching initial designs before you execute and make the skin.
i. Inspiration
Look for user interfaces in movies (like Iron Man) and websites such as Google images, deviantart, or look at desktop customization software such as Rainmeter. Don't attempt to copy someone elses work. Instead, choose elements of other works you like, and combine them with your imagination.
ii. Initial design
Whip out your pencil and paper, or if you're good enough, a tool like Photoshop or Fireworks. I totally recommend pencil and paper as it is the fastest. Sketch a design. Don't attempt to make UI elements too small (in the name of readability). Don't make it too fancy unless you know it's gonna work out for you. Don't feel bad if your first designs look lackluster. It's a learning process and your first skins might not look as you want, but you will reach there eventually.
iii. More advice
Start with basic widgets such as date/time/battery. The first thing to do is to set your wallpaper to a contrasting color, and then being positioning the text and other components. Next, create a background image. I recommend Paint.NET to create it.( http://www.getpaint.net/ ). Ideally, the background should provide bordering for the various components of the widget, and it should be designed in a way that it does not lose quality if used on a higher quality screen (simply: avoid curved edges and stick to rectangular/straight designs). The most part of the background image should also be slightly transparent as this looks the best.
iv. Yet more advice
You will need time to play around with your widget and experience it to see if it looks good and it it handles different content nicely (i.e. different lengths of text in a component). Try to use it for at least a couple days before you release.
Last edited:
