[Galaxy Y GT-S5360 Themes and Apps] ismithx:
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.