[Guide] Customize S2U2 Battery Animation, Slider Button, Animation & Curtain - Windows Mobile Themes

POST 1:
Customize S2U2 "Slide to Unlock" text Animation
POST 2:
Customize S2U2 Slider button
Customize S2U2 Curtains
Change S2U2 Battery Animation
Here I will tell you guys how to customize the "slide to unlock" text animation.
1. The Animation file is in \Program Files\S2U2\gfx Folder named "slideanis.png"
2. It is made up of several slides of images of size 112x12 pixels(IMPORTANT), each placed right next to the other.
3. Its like the GIF animation but the images here are placed in a single image.
4. The resulatant file can be of any width but a multiple of 112, the Height should only be 12pixels.
4. You can also make customized animations like I did.
Creating animations using only Paint & Irfanview
Designing Frames:
==============
1. Open Paint.
2. Goto Image --> Attributes(Ctrl+E)
3. Set Width to 112 & Height to 12(If values are altered thing will go hazy). Choose the pixels combobox in 'Units' group.
4. You will get a 112x12 pixels white page.
5. Zoom in it to make designing easy.
6. Design a frame to be used in the animation.
7. Save it in BMP Format. I recommend using any naming convention. If Saved in other formats quality will be decreased.
8. Got the first frame, now create each & every frame to be used repeating the steps.
9. Save all of them in BMP format.
Of course: Instead of designing frames u can use any image just resize them.
Designing Animation:
===============
1. Open IrfanView.
2. Goto Image --> Create Panorama Image.
3. Choose Horizontal in the 'Directions' group.
4. Click 'Add images' & Choose all the frames u wish to use.
5. Adjust them 'Up', 'Down' as you want them in the animation. Top frame comes first & Bottom frame comes last.
6. Uncheck 'Insert file name into image'.
6. Click Ceate Image.
7. Save it in PNG format.
PS: Animations play really fast if only one unique frame is used once, In the Loading animation I got 12 frames, each frame was used 3 times repeatedly, to make it slow. i.e each frame was added 3 times.
Use Them:
========
1. I recommend to backup the \Program Files\S2U2\gfx folder.
2. Rename the saved PNG to 'slideanis.png'
3. Copy it to the \gfx folder.
4. Run iLock2 to stop S2U2.
5. Run iLock2 to rerun it.
That's it, Design your own animations & Share them here.
Have a look at a couple of mine:
Here's how my S2U2 looks like:
'll post the screen shots of others later.
Unzip & Copy 'slideanis.png' to \Device\Program Files\S2U2\gfx

Customize Slider Button
Here is a tutorial to customze the S2U2 Slider Button.
1. S2U2 Slider button image is in Device\Program Files\S2U2\gfx folder as Arrows.png.
2. It consists of two images each of size 47x30 pixels, that makes the original image 94x30 pixels.
3. The first image is used when Slide to unlock & second image is used when Slide to Answer.
Designing Buttons:
===============
1. Open Paint.
2. Goto Image --> Attributes
3. Change width to 47pixels & height to 30pixels.
4. Design button u want to use for slide to unlock.
5. When Done, save it in BMP format.
6. Repeat the process for the next button i.e. Slide to answer.
7. Open IrfanView.
8. Goto Image --> Create Panorama Image.
9. Choose 'Horizontal' in Directions Group.
10. Click Add Images & add the images (Remember the first file is for Slide to unlock & the second is for Slide to answer)
11. Untick 'Insert file names in images'.
12. Click Create Image.
13. This file should be of 94x30 pixels.
14. Save it in PNG format.
Use Them:
=========
1. Rename the file to arrows.png
2. Copy it to Device\Program Files\S2U2\gfx folder.
3. Stop S2U2 by running iLock2.
4. Start again by running iLock2
5. U are done.
Of course: Instead of designing buttons u can use any image just resize them.
For now have this @ end of post:
Copy it to \Device\Program Files\S2U2\gfx folder
==============================
Customizing the Curtains
===========================
Here how to customize the S2U2 curtains i.e Both Top & Bottom.
The files used for both curtains is topbar.png in the \Program FIles\S2U2\gfx\ folder.
To remove the curtains just delete the files topbar.png. PS: This will remove both the curatins.
1. Make any image of height 68 pixels, You can set any width. Note:- The width of PPC screen is 240 pixels. If the width is smaller it will be appended.
2. Save it as topbar.png.
3. Place it in GFX folder.
4. Stop S2U2 by running iLock.exe
5. Run S2U2.
That's it.
This file will be used for both curtains, but you can turn off top curtain from S2U2 settings.
============================================================================
Battery Animation:
==============
Screenshot:
With Text & Without Text

mushipkw said:
Reserved to add a Tutorial on modifying Button.
Cant add now coz my net is down and right now I am surfing using my cell data plan.
For now have this:
Copy it to \Device\Program Files\S2U2\gfx folder
Click to expand...
Click to collapse
looking 4ward to this one lol

Great Work

GOOD WK
I Lk it
4 the S2U2 Slider Button >> it would be better if a dark red rose used
4 th BATTERY >> can it B WT or LiT GRAY instead off GREEN Color
it wll B GREAT !!!!
THNKS

Slider Border
Here I'll be posting a tutorial on how to edit the Slider box. But for now Im uploading the Slider Boxes I have got.
Just rename them slide.png & copy them to Device\Program Files\S2U2\gfx folder.

figured it out
just made my own

I LK ths BLK & RD thm !!!
http://wiki.xda-developers.com/index.php?pagename=ATOM_USER_THEMES
down Ld LNK
http://www.mediafire.com/?2k9gjo2la2k

Here are few more:

And few more:

Few Themes:

do you mind if you pm me just the slider? it's the object that you slide across the bar. i'd like one that doesn't already have an icon on it, because i'm trying to figure out how to make my sliders have proper gradient work.
also, could you post here that sweet clock you have in the first post?
thanks for the themes, btw, i'm using the first one in the previous post (can't describe the wallpaper, lol.)

Azimuth21 said:
do you mind if you pm me just the slider? it's the object that you slide across the bar. i'd like one that doesn't already have an icon on it, because i'm trying to figure out how to make my sliders have proper gradient work.
also, could you post here that sweet clock you have in the first post?
thanks for the themes, btw, i'm using the first one in the previous post (can't describe the wallpaper, lol.)
Click to expand...
Click to collapse
I have already posted them in the 6th post in this thread http://forum.xda-developers.com/showpost.php?p=1768371&postcount=6

ah i meant the slider button itself, not the slider bar. sorry if i was vague.

for the slider, you actually just have to follow the first and second post and you can actually make your own slider buttons, ive done so myself and made 2 - 3 acuatll arrows that i actually switch from time to time

MrGalione973 said:
for the slider, you actually just have to follow the first and second post and you can actually make your own slider buttons, ive done so myself and made 2 - 3 acuatll arrows that i actually switch from time to time
Click to expand...
Click to collapse
Great u have made buttons, plz do post them here to share.

I just created the PointUI Slider. Hope you like it

mushipkw said:
Few Themes:
Click to expand...
Click to collapse
I have no probelm with you reposting or editing my themes but it would be nice if you gave me credit for the originals.

popdog54 said:
I have no probelm with you reposting or editing my themes but it would be nice if you gave me credit for the originals.
Click to expand...
Click to collapse
I didnt know they ware yours someone mailed me. Anyways your theme rocks.

Related

Ifonz Skins by Worm+Icon pack

I have been using Ifonz since i first got my Samsung sch-I760 a couple months ago, and was unhappy with the visuals so set about making my own custom wallpapers..I am offering to you all in the hopes that maybe some of you can use them or better yet make your own and post them here for others to use/modify.
the zip file contains [3] folders
the folders contain:
1] the actual .jpg background images in both portrait and lanscape mode to be used with Ifonz [main files]
2] I have included psd layered files for you artists so you can easily add your own pictures.Just replace the background image with your own.The top layer contains the borders [optional]
3] I have also included the icons that i have been using personally. not necessary but there if you want them.44x44 in size [optional]
here are some screenshots (note: these are just a few and do not show all images available)
.
for the Ifonz configuration/settings:
_________________________
Under 'Top and Bottom Bar' settings:
make top bar and bottom bar fully transparent by dragging the transparency slider (0%) all the way to left
_________________________
Under 'Icons' settings:
N* Icons in Bottom Bar: = [4]
_________________________
Adjust the bottom [4] icons to be as follows:
choose blank.png for all four icon images (both pushed and unpushed)
and adjust their links as follows:
1) [phone] - 2) [messages] - 3) [power on/off] - 4) [contacts]
thats it. hope you like them and hope to see what you all come up with.
very nice theme.. good job! to bad I cant try it I lost my usb/phone plug -_- need to get a new one..
thanks for your work

[Skin] [HS++] Sonnar UI Inspirat.

See Post 3 For Downloads.
Installation:
1. Extract contents of Sonnar Inspirat 0.1.zip anywhere on your PC then copy the .xml file along with the Sonnar folder to your Homescreen folder(\Program Files\Homescreen PlusPlus\).
2. Goto your Batterystatus settings and then hit the advanced tab and select Sonnar from the dropdown.
3. Then your Done.
All the Backgrounds attached are included in the Default BGs zip file.
Thanks to Appelton for the inspiration.
Waiting for Home2 adaption.. Looks promising.
Hmm looks like his concept was inspired by someone else's design lol.. well anyways ive attached the Sonnar Inspirat along with a PSD of the background so you can add your own unique images.
Also I will be taking on suggestions and requests for HS++ Today screens.. so just gimme a buzz. Ive been rather bored lately <_<;
For a preview of the BG's ive provided, see the first post.
IMPORTANT:
Woops.. almost forgot to mention the contacts link doesnt work and its QVGA ONLY
Changelog:
0.2:
Contacts Link Now Works! -Thanks tito! xD
Things to Do:
Figure out the WiFi States in the Registry
Figure out ALL the BT States in the Registry
Adapt that to the A2DP button.
Fix the Number for MMS. -lol my bad.
Hi Aegishua
thank you for posting on Mobile Custom.fr
We'll try your theme and tell you our remarks
Aegishua said:
Also I will be taking on suggestions and requests for HS++ Today screens.. so just gimme a buzz. Ive been rather bored lately <_<;
IMPORTANT:
Woops.. almost forgot to mention the contacts link doesnt work and its QVGA ONLY
Click to expand...
Click to collapse
Hi Aegishua
Hi there, nice and simple theme, extremely light. Keep on the good work
BTW you mention that "contacts" doesn't work, obviously your link has a small error: you wrote "contacts.ink" instead of "contacts.lnk" (with an L like austraLia
) happened to me too!
Ahaha nice, but will lnk work with the start_app item class? just verify that it does and i'll change it
THANKs
SiMPLE & NEAT
Aegishua said:
Ahaha nice, but will lnk work with the start_app item class? just verify that it does and i'll change it
Click to expand...
Click to collapse
I wouldn't post anything that is not verified of course it works (BTW see my answers on mobilecustom.fr)
Hi,
How do you get the background show up like the pictures posted here.
I set it as background via settings/Today but the colour appear faded/washed out.
I added it into the .xml by adding this line:
<image left="0" top="1" src="Sonnar BGFinal1.png" height="300" width="240"/>
The colours are great now but the bottom of the background is cut off. See screenshot
Also what is the purpose of the TrayIcons section of the xml. When I enable trayicons in Homescreen ++ options the display becomes too long for the screen and the scrollbar appears. Is this just a matter of reducing the height of the spacer row? Then the background may have to be shortened to compensate.
theme request
http://img110.imageshack.us/img110/8655/launcherzf8.png
can you make a theme like this
This theme is really great look at the picture some guy from XDA Developer was trying to make a new interface for omnia
(PLEASE TAKE PERMISSION FROM THE AUTHOR BEFORE YOU START MAKING THE THEME)
@ ronjoor, when you set your today background... try doing this.
1. Goto your file explorer and find the image file.
2.Then open it with pimg(the default image viewer) and then hit your RIGHT softkey to open the Menu.
3. Then from there SET AS TODAY BACKGROUND.
4. Set the Transperancy level to 0%
@fusioncoast We've been over this already. the fact that it uses a curved layout for the icons means the slide used in batterystatus wouldnt be smooth. You would need to use Flash or different program to accomplish this. Also.. you could always ask him to adapt it from whatever program he was using cause im not sure what that theme is from.
@tito12 Thanks a tonne mate. it works xD
I Still need some inspiration for a new BS Theme... feel free to post something and I'll get around to it. post about ANY issues about the theme itself or if you'd like to see some changes. Just say so and I'll consider it(I'll actually look into it lol).
IMPORTANT:
DOWNLOAD Version 0.2 TO MAKE CONTACTS WORK! See Post 3.
Looks good!
Diggin the layout, testing it on my Verizon XV6900 (HTC Vogue)
Downloaded 0.2, contacts link still not working. Any way to change the clock to 12-hr format?
Also, I can't change the batterystatus to Sonnar...is the reason because of the phone I have? I'm not terribly familiar with HS++ and how to customize the Today screen. I'd like to get my upcoming appointments on the screen if possible. Also, can you create a button on the screen to lock the phone? If i add it through the Today screen settings, it throws off the background image. Any help/guidance would be great!!
See the attached screenshots of with and without the device lock on Today.
Okay, if you want to get that lock working the easy way, I'd remove the bottom bar BUT if you want the tray icons with the bottom bar you'd need adjust the background and the spacer settings.
Code:
<!-- Spacer -->
<Row name="Spacer" rowtoggle="0">
<View height="85">
<Item class="space" type="value">
<label text=" " fontfamily="Segoe UI" align="center" left="0" top="0" fontsize="13" width="30"/>
</Item>
</View>
</Row>
you'd change "View Height" accordingly. My advice personally.. use todaytoggle, the softkeys will still work. Just the ugly bar will dissapear. Sorry i couldn't be of more help, sorta rushing to get to uni. maybe when i get back i'll help you abit more.
i think i kind of got the fix on it...
there is a DeviceLock settings that I can check through the OnHold function, which seems to lock it everytime the screen turns off (which is basically what I was looking for). Also, found a way to get my calendar in the homescreen by integrating the 'TodayAgenda' plugin and playing around with the XML file so it will fit. Also needed to change the background image a bit since the homescreen resizes depending on how much is in the Agenda screen.
I just need to figure out the 24 hr clock to 12 hr...my silly american upbringing won't allow me to learn how to read 24 hr clock. Ok, that's a lie, i just prefer 12 hr.
See my new TodayScreen attached. Thanks for getting this whole thing off the ground, I hope you don't mind my tweaking!
working on my device
very nice bro n thanks
Cool
Very nice dude looks great
Aegishua said:
See Post 3 For Downloads.
Installation:
1. Extract contents of Sonnar Inspirat 0.1.zip anywhere on your PC then copy the .xml file along with the Sonnar folder to your Homescreen folder(\Program Files\Homescreen PlusPlus\).
2. Goto your Batterystatus settings and then hit the advanced tab and select Sonnar from the dropdown.
3. Then your Done.
All the Backgrounds attached are included in the Default BGs zip file.
Thanks to Appelton for the inspiration.
Click to expand...
Click to collapse
thanks
abumhmmd1 said:
SiMPLE & NEAT
Click to expand...
Click to collapse
abumhmmd1,
Please write me in my PM, i want to discuss something with you.
Mohammed.

[Guide] Theme with transparent icons

At the request of a number of people, here's a little tutorial explaining how I made the theme below, I called abstract theme (do not ask me why ...)
(Note that I am not the inventor of this type of theme, I am inspired by many themes I have seen on other forums, I thank very much the creators of wallpapers I used (I never remind theyre names except EG Fox, sorry for that))
These examples where created for the Dell Streak but this guide can be used for every android phone, just use the good resolution for the wallpaper
1/ So, to start, install Launcherpro (you can also take the "plus" but paying)
2/ Adjust the settings you prefer (this is only the parameters related to the theme I present now, but there are other possible parameters):
- Number of pages, the default page, the number of columns, the number of lines (to position your shortcuts, personally I have 8 columns and 8 rows) => Menu / Settings / Homescreen Settings
- Number of dock (the dock is the Quick Launch bar that is located right in landscape mode, you have 5 possible shortcuts in one dock and it is possible to have up to 3 docks (to slide up or down on the dock) => Menu / Preferences / Dock Settings (you can also specify, if you choose to put shortcuts telephone, email and sms on the dock, if you want to be displayed a count of unread events)
- The bottom of the Dock (in the theme as an example, I have no background) => Menu / Preferences / Appearance Settings / Dock Background / None (if you want to put a custom dock by you or found on the net, then you must choose "Custom" and pick the dock from your SD card)
3/ Choose your screen and resize it at 800x480. So that the bottom is not distorted, use Multipicture Live Wallpaper which allows you to set a different wallpaper per page (if desired). Multipicture Live Wallpaperr is managed as an animated wallpaper
The bottom will not be distorted but the 36 Pxls top will be hidden by the notification bar.
4/ Then you need to know, based on the number of rows and columns you have chosen, where you must place your text on the wallpaper. To do so, complete page fully of shortcuts. Then made a screenshot, I recommend the excellent ScreenShot
5/ On your PC, using your editing software (photoshop, photofiltre ... etc.) you can have your wallpaper nude and the screen as it will be on your Streak with the location where applications will be.
So place your text on your nude background by ensuring that these areas are easily covered by applications..
Your wallpaper is ready !
6/ Now install Desktop Visualizer, which allows you to put shortcuts transparent (especially)
(For those who could not find it on the Market : http://www.partage-facile.com/GYV6DGY6CW/jp.co.bii.android.app.dskvzr.apk.html )
7/ Desktop Visualizer works as a widget : long press on background / add a widget and choose desktop visualizer (it has different sizes, choose the one that best fits the space you have planned for your shortcut)
DV lets you choose the icon of the application to launch, get the transparent icon on your SD card (if you do not have a transparent icon, here's one : http://www.partage-facile.com/0GJIEOUAO0/transparent.png.html )
Then select the application you want to start.
Delete the text of the application and confirm (you can change or remove the highlighting that appears when you press the link to the application you're using, otherwise it will be orange)
8/ Once you've validated, you see nothing changed on the screen, it is normal because you have placed a transparent icon ! The link will always be placed to the top left corner of your home. Make a mong press along the top left, your widget will be highlighted by launcherpro.
You may notice a kind of tab in the lower right corner of your shortcut, by pressing and holding down while moving your finger, you can resize your widget as you like.
So give the desired size for your shortcut and press "back", the highlight disappears. Now made a long press on the top left of the streak and held down, move your widget transparent to the place you want on your home. (To verify that it is well positioned, have a long support for and release to highlight it)
Do this for each shortcut you provided on your screen.
9/ The last step is the Dock. You've already put in the dock transparent, but it remains the shortcuts on the dock that are visible.
Make a long press on shortcuts, you can either change an icon (change icon/custom icon) or change the shortcut and put any you want and you can still choose the transparent icon before finalizing this shortcut.
Then, I think I pretty much said it all. To summarize, here is my wallpaper ith some details :
This is obviously a simple example that you described above some customization capabilities. Unleash your imagination and make us great themes!
I hope I was clear about (and sorry for my english), do not hesitate if you have questions or additions
Some other example of themes done with this method :
My latest :
I compiled my wallpapers and you can download them (empty and modified) here (updated with the 3 latest) : http://www.partage-facile.com/O87TRUWWBJ/compil_theme.zip.html
or here : http://dl.dropbox.com/u/12810448/compil_theme.zip
Great inspiration, thank you for sharing
nice home screen ...
but i can't download your wallpaper, can you upload to another
never thought about writing the text to the background, brilliant.
although wouldn't this cause issues with more then one homescreen?
gondronk said:
nice home screen ...
but i can't download your wallpaper, can you upload to another
Click to expand...
Click to collapse
I try with dropbox but I don't know very well. Does it work with this link ? (added to the first post)
http://dl.dropbox.com/u/12810448/compil_theme.zip
crzdcole said:
never thought about writing the text to the background, brilliant.
although wouldn't this cause issues with more then one homescreen?
Click to expand...
Click to collapse
No issue with more than one screen, just use multipicture live wallpaper to choose wich wallpaper you want for each screen.
lestat89 said:
I try with dropbox but I don't know very well. Does it work with this link ? (added to the first post)
http://dl.dropbox.com/u/12810448/compil_theme.zip
Click to expand...
Click to collapse
thanx..
this link work
ok, thank you for the confirmation
Great work and thanks for the guide!
Happy that you like it
Amazing work.
Not sure if i should use the ABEILLE, cube2 or cubecarbon2
Thank you
You can change every week for example ;-)
Sent from my HTC Sensation Z710e using XDA App
This is good and i will give it a try.
Thanx
Don't hesitate if you have any question

"UCCW" and ZOOPER advice by clod007

After several recived messages I've decided to start a new topic, throw wich to explain some notions about how I create my screens using "UCCW".
I will post some short tutorials that I hope to be userfull.
I don't say that these are the best methods, but belive me, they work just fine!
If the topic will not prezent interest, it will be shut down.
If you see it as a userfull thing, please press the "thank's" button. (It will let me know it is worthy)
Thank's !
See all my work, here
http://forum.xda-developers.com/showthread.php?p=42150447
"octa" S4
Steps for create skins.
1. Download "UCCW" app from PlayStore (free app).
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
2. Touch your screen and select "widget".
3. Search "UCCW" widget and selected.
4. Search dimension if you need.
I choose for explanation "UCCW 4X4".
And here I think we must clarify some things.
Whatever launcher you are using, in his settings you will find "homescreen settings", where you can choose the number of collumns and rows you want to use on your screen.
It will form a grid on the screen.
You can create any configuration you want.
For my example, I choose a 4collumns and 8rows configuration, so I will show you how to arrange 2 4x4 skins on the screen.
I always work with the same settings of the screen.
- no statusbar
- no dock
- no margin (vert. and horiz.)
- disable nav bar
The example you see has those settings.
From the moment you start to create a skin you must decide what settings you will use.
There is no problem in using other settings, but if you share the skin with someone, that someone must respect you settings exactly for the skin to fit.
5. Once you open the 4x4 widget you will see "new" which you will select.
After you press the widget on the screen will open the work space.
Exiting the app, you'll see how the skin looks on the screen.
I always covered the entire 4x4 grid.
Press the skin and choose the "resize" option to see how does the skin fit the grid.
See how the skin sides must be resized.
6. Touch the skin and go back to editing.
Press "edit object" and select "background".
You will find all the options which you csn modify.
Search "dimensions" and select it.
With "width" you will resize the background's lenght and with "height" the height.
Increase the "width" till the skin fills the side margins.
Do the same with the "height" too.
Definitely you will retry many times, till you obtain the wanted result.
How do you check the dimensons during the edit ?
You always go back to the skin on the screen and press "resize".
You will see what modifications are needed "width" or "height".
When you reached the final form, go back to editing and press "save" - "save skin".
Rename it and press "ok".
In order to cover the entire screen add again the skin on the screen.
You will have two 4x4 skins.
"octa" S4
Reserved 2
"octa" S4
Everytime at the begining, you must decide your screen settings.
My settings are:
4collumns and 8rows
no statusbar
no dock
no margin
disable nav bar
I decided to create 2 4x4 skins.
1. Add the widget on the screen ucc widget - uccw 4x4 - "new".
The 4x4 widget will appear on the screen, than you would have to resize it to fit your screen.
For this, go to "controls#3" and change "width" and "height".
2. Add in the skin "shape1" which you can fit by "x-0" and "y-0".
In "controls#4" set "width" 500 and "height" identicly with the height of the background you have created the first time.
Mine is 754.
In "controls#3" set "radius" 8 and "dx" 8. The color must be black.
("dx" moves the "shadow" horizontal and "dy" moves it vertical)
Add to skin "shape2", which you resize and position identicle with "shape1" without adding "shadow" in "controls#2" set "see trought effect".
4. Repet exactly the same steps for the second 4x4 skin used in your screen.
5. You will see a discontinuance of the "shadow" on the screen.
For corection you will have to move "shadow" for "shape1".
At the bottom skin; "controls#3" "dy" -7 (the shadow will rise).
At the top skin; "dy" +7 (the shadow will fall)
6. Now, to the right side of the skin, you will respect the used steps (1-5).
Add "shape3" to the skin, wich you will resize "width" 200 and "height" identic with the dimension used in "shape1".
At mine 754.
After redimensioning, fit it soldering to the right edge of the background.
For "shadow" use the same values as you did for "shape1" but "dx" will be with "-" and the "shadow" will come to left.
Add "shape4" and repet step 3.
7. For you to create "appdrawer" add to the skin another 6 "shapes" which you will resize 30x30 and fit them where they belong.
8. According to the wall used change the color of the skins background.
9. Add in the bottom skin "image1, 2, 3, 4".
Fit them as you want and select the "image" you want. ("controls#2", "image")
Resize if neded ("scale")
10. In the top skin add
Fit and resize them as you want (chose your own font)
11. With the "hotspot" you will make the skins functional.
Fit, resize and set the apps you want.
(For "appdrawer" select "shorcut" and chose "appdrawer shorcut" of the launcher that you use)
Finaly, enter uccw settings, select "lock widgets" and set it "on")
That's all !
I hope this will be helpfull for someone !
"octa" S4
In this tutorial I will show you how to make a part of the screen, not all of it.
And with this knoledge you can make your own type of screen.
After you have set your screen settings (collumns and rows), add "UCCW" widget on the screen.
(For this type of screen I used 2 4x4 uccw skins on a 4 collumns 8 rows screen.)
After the widget is added on the screen, open it and add "image1"
Select "image1"
and resize it with "scale" from "controls#2
(You must use adequit images for "UCCW". For images I use DesktopVizualiseR app. DVRImageCrop)
With position "controls#1" you put it wherever you like.
Select and add "shape1", than press "sort" and drag "shape1" under "image1"
(As a rule, in "sort", in order, the last ones in the list, are the first that appear in front of your eyes.)
With "position" move "shape1" on top of "image1"
In "controls#4" resize "shape1" (width and height) till you cover completly "image1"
In "controls#3" set like this: radius 10, dy 20, dx -20 and chose a dark gray color.
After that press "sort" and change the order
The rezult is this one
Add "static text1" and arange in this order
With position set the text on top of the image and select color white for it (use whatever font you like)
As a visual trick for "static text", go to "controls#3" and set this way: radius 2, dy 3, dx 3, color black!
By learning those steps, you can create a full screen!
You can use whatever dimension, colors, fonts, radius, ... you want!
I hope this will realy help someone.
THANK'S !
"octa" S4
Hello,
Thanks for your tutorial in this thread and in i9505 thème, hope you continue
I'll be around also
How do you get the resized image onto uccw
Sent from my SGH-T889 using xda premium
einrae214 said:
How do you get the resized image onto uccw
Sent from my SGH-T889 using xda premium
Click to expand...
Click to collapse
For choosing your own image, go to "controls#2" and press image.
After this open the file where you have the image and selected.
"octa" S4
This one also please.
Sent from my SGH-T889 using xda premium
awesome! thanks for this guide mate can learn more from you ;D
tutorial fur use UZIP
clod007 said:
After several recived messages I've decided to start a new topic, throw wich to explain some notions about how I create my screens using "UCCW".
I will post some short tutorials that I hope to be userfull.
I don't say that these are the best methods, but belive me, they work just fine!
If the topic will not prezent interest, it will be shut down.
If you see it as a userfull thing, please press the "thank's" button. (It will let me know it is worthy)
Thank's !
See all my work, here
http://forum.xda-developers.com/showthread.php?p=42150447
"octa" S4
Click to expand...
Click to collapse
Hi,
Now i know more about how to use the UCCW app, but i 'still don't know how to use your UZIP files to create your beautifull skins. I'm dying to use your skins, but am a totally noob with UCCW and how to use it espacially for the UZIP files.
So please, can you make a tutorial for how to use your UZIP files to create a skin...
Thx.....
edit:
here a screen shot of what I have now: used 4 times widget 4x2, no marges, no notification drawer etc....how do i get this like your skins????
https://www.dropbox.com/s/s4kwj7hitbtnt24/Screenshot_2013-08-16-15-27-06.png?m
Just commenting to follow thread.
Sent from my SAMSUNG-SGH-I747 using xda app-developers app
just a suggestion, how about giving the zooper a try? :thumbup:
A velociraptor sent this :v
Hi my friends!
UCCW app has changed the interface design, but still remains the same exceptional app.
This tutorial is made on the new interface.
I have decided to use the following settings for the screen:
- 4collumns and 8rows
- no statusbar
- no dock
- no margin
- disable nav bar
All those settings you set on your own launcher. (I use Apexpro)
I will start by creating two 4x4 skins.
Let's begin!
1. Add "uccw 4x4" widget on the screen, than edit (width and height) till it will cover the entire half of the screen.
The same with the other half, covering this way the entire screen.
I remain on my dimensions (848x754), perfect for my S4. Depending on your phone, change it till you obtain the wanted result.
2. Press the skin which you would like to begin with start the screen creation. (I present you the first one, top of the screen).
By pressing "add/remove objects" you'l see the entire list of "things" you can add to the skin.
Select "shape1" and press "close".
"Shape1" appears on the screen and for editing it you must select "edit objects".
A list with what you can edit will appear.
Select "shape1" and you will see the entire list with what you can modify at "shape1".
With "position" you will set "shape1" leaving a widther margin on horizontal than vertical.
With "width" and "height" set your own wanted measurements, so as the terminations for "shape1" to be identicle with the termination for the "background".
3. Now we will try to give effect to the skin.
Now back to "add/remove objects" and add "shape2".
After "shape2" appears on the screen, select "edit objects" - "shape2" and start editing.
With "width" we slim it very much (I set it at 40).
With "height" we make it longer at almost twice the height used at "shape1". (I used "shape1" 724 and "shape2" 1400).
We press "style" and select "oval".
Set "shape2" where we want with "position", than we go to "shadow" and edit: "radius 10" and "dx -10" (the shadow will go to left) and select a dark gray color.
Now we go back to "sort objects" and change the order. "Shape2" first and than "shape1" (drag "shape2" over "shape1").
Press save.
This is the rezult.
4. For the "window" effect we go back to "add/remove objects" and add "shape3" which we will redimension and set it identicly with "shape1".
Afther this is done, we add "special effects".
This is the rezult.
5. In order to make your work (editing) eazyer, my advice to you is to remove the "effect" from "shape3" (readd it at the end).
We go back to "add/remove objects" and add "shape4".
Set "shape4" in the right part of the screen, slightly higher than "shape1".
We are going to add "roundness" half of the setted "width" ("width" 200, "roundness" 100).
For the height, we can't stop anymore at the "background's" margin because of the round shape.
And so we are going to make "height" bigger with at least the dimension of theused round shape ("roundness" 100; "height" +100).
At "shape4" will set "shadow" 2 and chose the color black.
6. For the effect to be created, "shape5" and "shape6" must be added, which we will set exactly as "shape2" (the one with which we created the first effect) but we will set them under "shape4".
The "shape" set in the left will have "dx" with minus, so the one in the right will have "dx" with plus.
7. Go back to "shape3" and readd the effect.
Depending on the wall you use, chose a color for "shape4".
The skin from the bottom is identicle with the one from the top.
You will create them identicle (in the mirror).
After your screen is finished, add anything you want in the skin (image, text, hour, ... )
Do not forget to remove the "effect" from "shape3" till the end of your work when you can addit back.
That is it!
"octa" S4
siers1 said:
Hi,
Now i know more about how to use the UCCW app, but i 'still don't know how to use your UZIP files to create your beautifull skins. I'm dying to use your skins, but am a totally noob with UCCW and how to use it espacially for the UZIP files.
So please, can you make a tutorial for how to use your UZIP files to create a skin...
Thx.....
edit:
here a screen shot of what I have now: used 4 times widget 4x2, no marges, no notification drawer etc....how do i get this like your skins????
https://www.dropbox.com/s/s4kwj7hitbtnt24/Screenshot_2013-08-16-15-27-06.png?m
Click to expand...
Click to collapse
+1 same here, could you do-post that here pls?
Finnaly I got a phone on which I can realize this tutorial.
I made this on a Nexus4.
You just have to understand the steps and the idea of how this is done and than you can apply them on whathever phone you have.
At my skins you always have to respect some settings, in particular the dimensions (collumns and rows) so it can fit your screen.
After i seted the launcher on the needed dimensions (5collumns and 10rows) , I downloaded the skins and put them on the screen, the rezult was this one.
There are 5 5x2 skins. You can see that the margins are uncovered.
The first step is to create a 5x2 skin, made to fit your screen, so that when you attach them together they cover your entire screen.
Why so ? Because you will know the background's dimensions (whidth and height), which you are going to use on modifyng the skin.
Open the skin you want to start with (I chose the one on the bottom) and in the background settings (whidth and height) set the numbers you have used in the 5x2 skin realized earlier.
This is the rezult
Now you can see how the skin's background covers the screen.
For you to go on from here, you must know which is which (shape1,2..., image1,2..., text1,2...).
To know them I recomand you to use "opacity" (minimum - maximum on every objects).
Knowing which is shape1, try to move it where is belongs and reduce it's height to fit your skin.
The next step is to resize the image to fit the skin.
With position and reduceing it's dimension (scale) try to move it where it belongs.
We go back to shape1 to reduce whight, to fit the image.
Next, modify static text 1, reduce it's dimension and with position, move it where it belongs.
Next, pozition and resize the "hot spot" by changing width and height and move it where it belongs.
After creating the first "button", put in line the other two as well.
In my atempt to modify the skin, trying to resize shape 2 and 3, I realized that shape 1 was to big for them to fit the screen together.
From the next pic you will see the error.
(Shape 3 smaller than 1,2)
I told you this because it is normal not to get the right dimensions from the first time.
You can solve this by changing shape1's width so that shape 2,3 fit.
By making shape 1 smaller , obviosly we must resize the image that coresponds to shape 1
We will go on by getting the rest of the images to their spot , as well as the coresponding text
We will end by placeing the "hotspot" to the buttons
The final result is this one
Continueing to do as you learned with all the skins, you will get the final result, the entire screen.
Sent from my Nexus 4 using Tapatalk 2
nice thread
thanks for your advices
all work for me :good:
Hi my friends !
If you like my presentation ?
Today "HOW I MADE" !
1. Download this apps from PlayStore.
(Is absolutly free and great)
2. Open "Phoneshot Free" and select "choose screenshot".
Choose location for your screenshot. (I use Quick Pic)
Choose your screenshot and press "save". Enter a filename and press ok.
For this app "THAT IS IT" !
Now open "Photo Editor" and select "Gallery".
Enter in your file and select wall used for screenshot.
Select "frame" and select "color".
Now, set value for "thickness", 26,6 (or want you need).
Select whatever color you want for frame (I use black) and press "apply".
Now, choose "crop" and selected.
Eliminate vertical border and press "apply".
Now, choose "Text/Image" and select.
Press " + " and "Add Image".
Select "Built - in image picker" and select your "phoneshot".
Press "apply"
Again press "apply".
Repeat the same steps for "text" and press "save".
Now see final result !!!
That is it !!!
If you see it as a userfull thing, please press the "thank's" button.
IT WILL LET ME KNOW IT IS WORTHY !!!
"octa" S4
once again, sweet presentation my friend
Sent from muffintalk

[WALLPAPER][GUIDE] MKBHD iPhone Graph Style Wallpaper for All Android Phones!

MKBHD posted a very cool wallpaper for the iPhone 7 which had a graph background with labels for everything like Signal, battery, etc. which you can check out here:
https://twitter.com/MKBHD/status/837...096129538?s=09
I wanted a similar wallpaper but for Android and after hours of searching, couldn't find one. So I made my own
Now since Android is very customizable, it is virtually impossible to make a universal wallpaper for all android phones. Therefore this guide so that everyone can make that wallpaper for their phone themselves!
Note: Some basic Photoshop skills will be required which I will not be explaining in this guide.
STEP 1: Downloading the .PSD files
I have uploaded 2 files, one for the homescreen and one for the lockscreen. You can download both if you wish to at any one of them.
Homescreen - https://drive.google.com/open?id=0B2XbBDw3Myp5WG5uSF8yUlRmZHM
Lockscreen - https://drive.google.com/open?id=0B2XbBDw3Myp5bE8tNExhaU9uaDA
STEP 2: Placement of screenshot and blueprint background
This is the main step.
Take a screenshot of your current homescreen and/or lockscreen with your current wallpaper and embed it in the respective .PSD files(as a new layer). Now place the screenshot at the bottom of all the layers. Make sure that the visibility of both the blueprint backgrounds (coming to that later) is turned off. At this stage, you can see which of the boxes an labels are aligned with the elements on your homescreen/lockscreen(like clock, widgets, signal and wifi icons, etc.) and align the ones that are not already aligned simply by dragging/moving them. You can zoom in for better precision.
After the alignment of the labels and boxes has been done, you can turn off the visibility of the screenshot layer.
Now coming to the background: I have supplied 2 blueprint backgrounds - one is blue(just like the one MKBHD posted) and the other is purple(which I made for myself). You can choose any 1 from the 2. Now turn on the visibility of the blueprint that you have chosen and your editing is complete!
STEP 3: Exporting the wallpaper
Now comes the most easy yet awaited part: saving your work! Just choose "Quick export as PNG" in the file menu and transfer the saved image to your device. You can now set it as your wallpaper and enjoy!
Please give a "Thanks" if it helped you and share!
shreyamt said:
MKBHD posted a very cool wallpaper for the iPhone 7 which had a graph background with labels for everything like Signal, battery, etc. which you can check out here:
https://twitter.com/MKBHD/status/837...096129538?s=09
I wanted a similar wallpaper but for Android and after hours of searching, couldn't find one. So I made my own
Now since Android is very customizable, it is virtually impossible to make a universal wallpaper for all android phones. Therefore this guide so that everyone can make that wallpaper for their phone themselves!
Note: Some basic Photoshop skills will be required which I will not be explaining in this guide.
STEP 1: Downloading the .PSD files
I have uploaded 2 files, one for the homescreen and one for the lockscreen. You can download both if you wish to at any one of them.
Homescreen - https://drive.google.com/open?id=0B2XbBDw3Myp5WG5uSF8yUlRmZHM
Lockscreen - https://drive.google.com/open?id=0B2XbBDw3Myp5bE8tNExhaU9uaDA
STEP 2: Placement of screenshot and blueprint background
This is the main step.
Take a screenshot of your current homescreen and/or lockscreen with your current wallpaper and embed it in the respective .PSD files(as a new layer). Now place the screenshot at the bottom of all the layers. Make sure that the visibility of both the blueprint backgrounds (coming to that later) is turned off. At this stage, you can see which of the boxes an labels are aligned with the elements on your homescreen/lockscreen(like clock, widgets, signal and wifi icons, etc.) and align the ones that are not already aligned simply by dragging/moving them. You can zoom in for better precision.
After the alignment of the labels and boxes has been done, you can turn off the visibility of the screenshot layer.
Now coming to the background: I have supplied 2 blueprint backgrounds - one is blue(just like the one MKBHD posted) and the other is purple(which I made for myself). You can choose any 1 from the 2. Now turn on the visibility of the blueprint that you have chosen and your editing is complete!
STEP 3: Exporting the wallpaper
Now comes the most easy yet awaited part: saving your work! Just choose "Quick export as PNG" in the file menu and transfer the saved image to your device. You can now set it as your wallpaper and enjoy!
Please give a "Thanks" if it helped you and share!
Click to expand...
Click to collapse
Right on man! I'm gonna try it out now. Will update afterwards..
Any screen shots??
Still_living714 said:
Any screen shots??
Click to expand...
Click to collapse
You can find the screenshots in my original post over here:
https://forum.xda-developers.com/nexus-6p/themes-apps/wallpaper-mkbhd-iphone-graph-style-t3581583

Categories

Resources