Symbian-Developers
Symbian^3, Anna, Belle Forum => Symbian^3 Modding => Topic started by: syarmwawa on February 05, 2012, 11:42:47 am
-
How to edit widget skin
Tool you need.
1.SIS CONTENT (http://sdf.allstarsoftware.co.uk/index.php?topic=4.msg40#msg40)
2.SVG EDITOR (http://inkscape.org/download/) in this case i'm using inkscape because it free and light.You also can use other SVG editor like Adobe Illustrator.
3.SVGB Converter (http://sdf.allstarsoftware.co.uk/index.php?topic=711.0)
Ok.....Now we start...just for reminder...this is just simple tutorial and base on digital clock.
First we need responsible file for digital clock widget skin.The file is migitalclock.mif.To get the file follow next step.
1.open any digitalclock SIS using SIS content.click on folder icon and navigate to any digital clock sisi u have.In this case it is digital clock buble.
(http://img80.imageshack.us/img80/7220/skin1i.jpg)
2.After That click At the blue circle like in picture below.You will see a long list.The file higlight yellow is what we want.Click on in and click view detail like higlight in below picture.New window will pop up...select all file "Entry01""Entry02".Then click extract all image.Save it in any folder u want.Then u can close SIS content.
(http://img267.imageshack.us/img267/6315/skin2w.jpg)
(http://img215.imageshack.us/img215/9713/skin3z.jpg)
3.Go to folder where u save the file(Entry01,Entry02,etc) from Sis Content.check the image type.If it SVG you can proceed and edit it using SVG tool.If it in SVGB format,it need to convert to SVG first.You can use this tool to convert it.But there is a problem if the file is in NVG format,becouse till date there is no software for view or edit the file.So the only way is replace it with any SVG and try identified manually that file responsible for what image.So my advise it better use existing MODDED skin as base because normally it all are in SVG and SVGB format.
4.This is how it look like in inkscape.First picture below is Entry01 file so i know this file responsible for main background.Second picture is Entry02 so i know it is clock overlay.So in inkscape u can edit it to what ever design u want.you can add gradiant/change transparency/opacity and etc according to your taste.After finished with editing just simply save it.But make sure you not make it large than the image property.It will not appear in phone.And i notice 1 thing.Blur effect will not apply in phone.So avoid to use this effect.
(http://img69.imageshack.us/img69/3699/skin4f.jpg)
(http://img848.imageshack.us/img848/4425/skin5.jpg)
5.Now open again the digital clock SIS using SIS CONTENT.follow the same step 1 and 2.Click again at the migitalclock.mif file.You will see the same window popup like in above picture.But this time don't extract it.Select Entry01 and click replace image on left panel.Then replace/navigate it to folder where you save the edited Entry01.Do the same thing to Entry02.
(http://img521.imageshack.us/img521/5306/skin6.jpg)
6.After Finish replacing.Click at file/save as.Now you have the new SIS skin for your digital clock.
And sorry for my bad english.Hope you all can understand it..:)
This tutorial also apply to other widget skin....here some useful note...:)
Here are some .mif that i know
Big analog clock = biganalogueclock.mif
Small Analog clock = analogclock.mif
Mechanical clock = mechanicclock.mif
Blutooth toggle = bluetoothwidgeticon.mif
Cellular Toggle = cellulartoggleicon.mif
Mobile data tracker wiget = mobiledatatrackericon.mif
Network 2G/3G = networkwidgeticon.mif
Offline toggle = offlinewidget.mif
silent toggle = silentwidget.mif
Musicplayer widget[both] = musigwidgeticon.mif
-
hmmm helpful guide again +1 dude ;)
-
Here are some .mif that i know
Big analog clock = biganalogueclock.mif
Small Analog clock = analogclock.mif
Mechanical clock = mechanicclock.mif
Blutooth toggle = bluetoothwidgeticon.mif
Cellular Toggle = cellulartoggleicon.mif
Mobile data tracker wiget = mobiledatatrackericon.mif
Network 2G/3G = networkwidgeticon.mif
Offline toggle = offlinewidget.mif
silent toggle = silentwidget.mif
please add if you know the .mif...and it all located in resource/apps folder...:)
-
hmmm helpful guide again +1 dude ;)
Thanks mate...+1 for u too...:)
-
also I'm a fool dunno anything about these
-
also I'm a fool dunno anything about these
hehe...it ok...once you try it..u will understand it....me also did't know single thing when first time doing this....but after some time i get used to it...:)
-
hehe You already made great skins so on chance for me
-
Very good tutorial.......gonna try this one........ ;)
-
Very good tutorial.......gonna try this one........ ;)
Thanks mate...sorry for my bad english...i hope you all can understand it...:)
-
hehe syarm makes best tutorials :) cheers syarm :D
-
Thanks alot mate. I am searching for this. 8)
-
How to edit widget skin
Thanx A Lot For The Tutorial. (:
-
Thanx A Lot For The Tutorial. (:
Thanks alot mate. I am searching for this. 8)
toyur welcome mate...:)
-
No .nvg hack... :( :'(
-
No .nvg hack... :( :'(
if the file in NVG format you have to try it 1 by 1 to identify it...:D
-
very help full..... +1
-
Thanks a lot +1
-
Thanx syarm! :-D
it helped me alot :-D
But u just wait for some tym I'm going to giv u a tough competition :-P
-
Thanx syarm! :-D
it helped me alot :-D
But u just wait for some tym I'm going to giv u a tough competition :-P
hehehehe.....that will greatz mate....:D i'm not really good in graphic...hope will get something greatz from you soon...:D
-
plz add video guide
-
Yes!
Please add a video guide becoz my clock background never appears :-(
-
But make sure you not make it large than the image property.
Syarmwawa what do you mean by this?
the large size of image which 'll be in mm/cm etc.
OR
the large size of file properties which 'll be in kbs/mbs etc.
Please further guide that what should be done if any one or both things from the above mentioned cases are happened?
-
thanks for the guide mate
-
Very Usefull Mate..
+1 For Sharing
+2 For Creativity
I Tried It Works..
Thanks Dude.. :)