Beautiful Widgets Skins - Guide and Gallery

[paulmz]

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:

 

[paulmz]

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.

 

[doctorbabe]

Nice skin! And great idea for a thread too. I had no idea how to create skins. Let's see if I'm brave enough to try it sometime.

 

[paulmz]

Title: kaffeesatz

 

[paulmz]

Uploaded with ImageShack.us

Title: crate

 

[paulmz]

Title: gsp

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

 

[paulmz]

Uploaded with ImageShack.us

Title: square-glow

 

[posttal]

Nice..I just installed beautiful widgets but didn't know you could make your own.I have a question maybe you could answer.When you click on the weather and lets saw its snowing..it shows snowflakes...or rain if its raining.Is there a way to make it do that on the homescreen ?
On my HTC Incredible it would do that when you first turned on the screen from being off or in sleep mode.It was cool to have it show it raining or clouds blowing when you unlocked it..you knew in an instant what was going on outside.Beautiful widgets have the same animation but not on the home screen..you have to actually go into the weather to see them.

 

[posttal]

P.S. are these and other custom themes available for download or are they just personal themes for the user.

Never mind..i found them.I was looking at the weather widgets and it seems the custom backrounds are in the clock section.

 

[reinbeau]

Nice..I just installed beautiful widgets but didn't know you could make your own.I have a question maybe you could answer.When you click on the weather and lets saw its snowing..it shows snowflakes...or rain if its raining.Is there a way to make it do that on the homescreen ?
On my HTC Incredible it would do that when you first turned on the screen from being off or in sleep mode.It was cool to have it show it raining or clouds blowing when you unlocked it..you knew in an instant what was going on outside.Beautiful widgets have the same animation but not on the home screen..you have to actually go into the weather to see them.

I think the Beautiful Live wallpaper does what you want. It rains, the sun shines, thunder and lightning, etc. all show up on the wallpaper, it's pretty neat.

 

[paulmz]

Nice..I just installed beautiful widgets but didn't know you could make your own.I have a question maybe you could answer.When you click on the weather and lets saw its snowing..it shows snowflakes...or rain if its raining.Is there a way to make it do that on the homescreen ?
On my HTC Incredible it would do that when you first turned on the screen from being off or in sleep mode.It was cool to have it show it raining or clouds blowing when you unlocked it..you knew in an instant what was going on outside.Beautiful widgets have the same animation but not on the home screen..you have to actually go into the weather to see them.

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]

ok so...i am lazy...i got to step 1 and was errr lazy. this is what i got so far. if somebody wants to make something out of it more power to you. but making the black transparent and the numbers to look right...with the smaller widge=too much workzor for me. here it is:

fiiiiiiine

 

[paulmz]

ok so...i am lazy...i got to step 1 and was errr lazy. this is what i got so far. if somebody wants to make something out of it more power to you. but making the black transparent and the numbers to look right...with the smaller widge=too much workzor for me. here it is:

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.

 

[glockjs]

goood?

 

[paulmz]

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.

 

[paulmz]

Uploaded with ImageShack.us

Title: three_bars

 

[paulmz]

Uploaded with ImageShack.us

Title: traffic_light

 

[JunBringer]

I didn't know you could do skins for the toggles. Those are really neat!

 

[whopper810]

These look great! Especially the GSP one since I'm using a highway wallpaper. Fits perfectly! I have a quick question, and sorry if I missed how to do this. How do you get the toggle skins? I only have options to change clock and weather skins.

 

[paulmz]

I didn't know you could do skins for the toggles. Those are really neat!

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!

 

[paulmz]

These look great! Especially the GSP one since I'm using a highway wallpaper. Fits perfectly! I have a quick question, and sorry if I missed how to do this. How do you get the toggle skins? I only have options to change clock and weather skins.

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]

Hey guys new to the whole theming out my droid X . I dled the beautiful widgets app to get some skins. I pick the skin i want and hit apply but it does not show up on any of my screens. Not sure if I'm doing something wrong. My phone is not rooted. Thanks in advance for the help!

 

[paulmz]

Hey guys new to the whole theming out my droid X . I dled the beautiful widgets app to get some skins. I pick the skin i want and hit apply but it does not show up on any of my screens. Not sure if I'm doing something wrong. My phone is not rooted. Thanks in advance for the help!

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.

 

[paulmz]

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

 

[paulmz]

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