Beautiful Widgets Skins - Guide and Gallery

by Paul M. Zahorosky of JerseyBoy Design

I just created my first skin for Beautiful Widgets and thought I would start a thread for two reasons:

1. To show other people how easy it is to create custom skins for this wonderful application.

2. To have a place for skin developers to showcase their work with a gallery of screenshots. I figure this may help to catalog the majority of the skins that are and will become available as well as allow people to see the skins full-sized in various configurations.

The only rules I have for this thread are: skin developers- please feel free to post any and all screenshots or downloadable files of your work for Beautiful Widgets- however, please keep your screenshots to 750-pixels wide or less (so the thread doesn't get "stretched" wide so people have to scroll horizontally).

Now, on with the show...

Creating skins for Beautiful Widgets:

1. The first thing to do is to install Beautiful Widgets onto your device.
2. Go to Beautiful Widgets | LevelUp Studio and download the files for the widgets you want to customize (they are located on the right-hand column under "Skin Development Kit".
3. Unzip the files and get to work!
4. You will need an image editor (Adobe Photoshop - free trial, Adobe Fireworks - free trial, or GIMP - completely free) that can save and edit .png's.
5. The "Skin Development Kit" simply comes with a basic set of file "templates" to use. Just open each file in your editor, adjust it the way you like, and save it (preferably as a filename other than the original - always good to save the originals for later use).
6. Make sure you save all files as .png's except for the final screenshot, which must be a .jpg 240x140. Put them all in a folder with the correct additional files (the .nomedia and .[filename] docs), and copy them to your phone under "data->beautifulwidgets->skins" (or "tskins" for toggle skins/"wskins" for weather skins).
7. After it looks good, send it off in a email to the developer to have it added to the official Beautiful Widgets Skins Download Library.

NOTE: Remember that you must have all of the files complete for the skin to work. This means all number digit files from 0 to 9, the "dots" file, optional "am" and "pm" files (these are not in the templates-but are approximately 42x31 in pixel dimensions), and all six background images (this is to make sure that it works on all devices).

The weather skin templates are just separate images for 20 different types of weather.

The toggle skin templates are only for the background of the widget and the on/off "lights". Apparently, the actual image for the option or feature the widget controls is not changeable.
NOTE: the GPS toggle uses only the "toggle_background".

Any questions, I (or someone else watching) will be glad to help.

Links to image samples throughout this post:
Click on a thumbnail to go direct to the post with full-size images.


Home Skins:



Toggle Skins:



Weather Skins:

 

Here is the first skin I made for Beautiful Widgets:





It is available as a download through the Beautiful Widgets app.

Title: paulmz_wood_carved

NOTE: I didn't know until after I uploaded this skin that the "am/pm" was also able to be skinned. I may revise this one in the future to correct the problem. Also, I haven't created matching weather icons yet, but they are on the drawing board.

 

Title: kaffeesatz

 

Uploaded with ImageShack.us

Title: crate

 

Title: gsp

(Garden State Parkway... a little homage to my home state.)

 

Uploaded with ImageShack.us

Title: square-glow

 

Unfortunately, the live weather is one thing that Sense does and others can't really copy. If you are using Beautiful Widgets, however, you can use the Beautiful Live Weather, which is just a live wallpaper of the waving grass but it changes with the weather (daytime, nighttime, snow, etc.) and shows full-screen animations very similar to Sense.

Other than that, this is one of the few drawbacks I see in stopping the use of Sense. Since it's strictly decorative, I don't see it as important... It does look cool, though.

 

glockjs,

Your image above is too large for the thread. Please resize it to less than 750 pixels wide, post a thumbnail with link, or place in "hide" tags.

Thanks.

 

Uploaded with ImageShack.us

Title: disconnect-switch

This one can come off a bit small for some screens- but I have wanted to do a switch like this for a while and I finally sat down to draw it.

 

Uploaded with ImageShack.us

Title: three_bars

 

Uploaded with ImageShack.us

Title: traffic_light

 

JunBringer:

Thanks! Keep an eye on this thread. I have more on the drawing board.

ALSO: Anyone else who is making skins for Beautiful Widgets... feel free to post screenshots here!

 

whopper:

Check you Beautiful Widgets version. There was an update on Nov. 10th to version 3.23 that added some stuff (toggle skins included).

I don't think it's an automatic update... may have to be done manually.

NOTE: If you're looking to get the "traffic light" (or "three bars") toggles, I only sent them to the developer Friday night so they probably won't show up on the downloads until at least Monday.

 

VSUCHD1:

Are you placing the actual widget on your homescreen?... or just going straight into the app for the settings?

It is a widget app. You have to long-press on an empty spot on your homescreen to place the widget (ie: "Beautiful Home Weather" - 4x2, "Beautiful Smaller Home Weather" - 4x1, or "Beautiful Weather" - no clock).

Hope this helps.

 

This is a simple all-text weather skin I made to go with the Kaffeesatz home skin. Of course it can be used with any other home you like.



Uploaded with ImageShack.us

Title: kaffeesatz_type

 

This one may or may not look good depending on the home or weather widget you're using... but I've been meaning to make this one for a while.



Uploaded with ImageShack.us

I think this one might be worth showing the 20-different weather images:









Uploaded with ImageShack.us

Title: Window