*This guide was originally made for the Kindle Fire, which has a different screen resolution than the Nexus 7. Wherever you see a 1024x600, replace with the desired resolution.*
End Result
Getting Started
YOU WILL NEED
-A computer with Photoshop installed
-Basic knowledge of how Photoshop works
-A bit of patience
So go get a cup of coffee and let's get started. First fire up Photoshop (or whatever image editor you are using) and create a new image that is 800x1280. (Or whatever the screen resolution of your device is)
The 800x1280 is the resolution of your screen. If you want a landscape boot animation, you make it 1280x800.
File>New
Now that we have a canvas that is 800x1280, let's make a background.
BACKGROUND
I used the gradient tool and created a gradient that was dark grey in the middle and went to black near the edges.
This is done using the gradient tool using the radial setting. Drag from the middle to one of the 4 corners.
{
"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"
}
Now the background looks great right here but I want some more texture. I grabbed a wooden background and put it as a new layer on top of the gradient and set the opacity to 60%
TEXT
Then I added the text "TUTORIAL" in Devil Breeze font with a slight gradient over it.
LOADING BAR
Now that we've got the Background and Text out of the way lets do the loading bar.
Use the rounded rectangle tool with a radius of 5 pixels to make a shape that is roughly 447x48 (doesn't have to be exact)
Here is roughly what it should look like.
Now create a drop shadow using the following settings
Next create an inner shadow using the following settings
Now here's what it should look like. It has some depth and looks like it's sunk into the wooden background.
The background of the Loading bar is done. Now we need the actual moving portion of the bar.
Create a new rounded rectangle shape that is about 1 pixel smaller on each side than the loading bar background that we just created. (You can just duplicate that layer and resize it) I'll pick a nice blue color for it but of course you can choose whatever color you wish.
Plain blue is pretty boring though. Lets make it glossy! Duplicate the layer that we just made and make it white. Then delete the bottom half and set the opacity to around 8%.
Now it's looking snazzy! There's one last thing to do... Well, ANIMATE it of course! That's why it's called a boot animation.
ANIMATION
Now we need to set up Photoshop to do animations... Window>Animation
Now an animation window should come up at the bottom of your screen.
Next we're going to merge some of the layers so it's not so messy. To merge layers Shift+Click on the layers you want and the right click and merge layers.
I merged the Gloss and the blue loading bar to create one loading bar. This should leave you with 4 layers and they should be in this order. (From Top to Bottom)
1. The loading bar
2. Loading bar background
3. Your Text
4. The main background
Now click on the Loading bar layer and go to Layer>Create Clipping Mask
Then give the Loading bar a drop shadow and set the distance to 0. This gives it a slight 3D look.
We're almost done here.. hang tight!
Then move the loading bar layer straight left until you can't see it anymore like so.. and then click on the little clock next to Position.
Next drag the slider over to 04:00f (4 seconds) and then move the Loading Bar layer back over to the right so it's fully visible again. Now if you slide the slider back and forth between 0 and 4 seconds you should be able to see the bar moving.
We're done animating! Pat yourself on the back for making it this far. But hold on... we need to save this don't we?
SAVING
Go to File>Export>Render Video
We're going to name it 0 (Zero) (Otherwise you will have to go through and rename 120 different files), Create a new subfolder and call it part0. Select Image Sequence. In Range we're going to select the In/Out Frame option. This should be from 0-120 because our animation is 4 seconds long at 30 frames per second. Then go ahead and click Render and you're done
Bump
Sent from my Nexus 7
Stop... MUFFIN TIME!!!
Great tutorial. Thank you for taking the time to post it.
Very nice tutorial, I'm a Linux user so I use GIMP and the technique used here is pretty much the same on GIMP.
Edit: Also on exportation would the document size not be 800 x 1280?
CJHolderUK said:
Very nice tutorial, I'm a Linux user so I use GIMP and the technique used here is pretty much the same on GIMP.
Edit: Also on exportation would the document size not be 800 x 1280?
Click to expand...
Click to collapse
Yes you're right. If you read the first sentence you will realize why. I made this guide originally for the Kindle Fire forum. And the KF has a 600x1024 screen. I just haven't gotten around to editing the numbers.
Sent from my Nexus 7
Stop... MUFFIN TIME!!!
Bumpity?
Sent from my Nexus 7
Stop... MUFFIN TIME!!!
Nice one though resolution needs editing
---------- Post added at 08:53 PM ---------- Previous post was at 08:16 PM ----------
Please help me
I am on CS6 and my animation is coming in a different style. Frames are coming and nothing like the one in above image where i can set keyfranmes
Yo veeman, I got myself a couple of nexus7's.
I want to do boot animations but have had no luck in the past. I'm going to have another crack at it
Standby for assistance. Lol
Sent from my Nexus 7 using xda premium
lovejoy777 said:
Yo veeman, I got myself a couple of nexus7's.
I want to do boot animations but have had no luck in the past. I'm going to have another crack at it
Standby for assistance. Lol
Sent from my Nexus 7 using xda premium
Click to expand...
Click to collapse
Glad you can join us
If you have questions, feel free to ask. :thumbup:
Sent from my Nexus 7
Stop... MUFFIN TIME!!!
iHarkunwar said:
Nice one though resolution needs editing
---------- Post added at 08:53 PM ---------- Previous post was at 08:16 PM ----------
Please help me
I am on CS6 and my animation is coming in a different style. Frames are coming and nothing like the one in above image where i can set keyfranmes
Click to expand...
Click to collapse
Can you post a screenshot of what you're seeing? I haven't got CS6 installed yet.
Sent from my Nexus 7
Stop... MUFFIN TIME!!!
If you are a lazy bugger like me, as long as u can get a gif of what U want as a startup,
Romtoolbox pro has an option to convert .gif to startup
OK, Take it here
Try clicking Window > Timeline
Sent from my Nexus 7
Stop... MUFFIN TIME!!!
hey,
I'm currently rendering the bootlogo - and with 50 png's already rendered I got 31,5 MB
That's fn huge - did I do something wrong? :crying:
veeman said:
Try clicking Window > Timeline
Sent from my Nexus 7
Stop... MUFFIN TIME!!!
Click to expand...
Click to collapse
Nothing like Animations there too. Just installed CS5 and still no way to get that keframe style animation pane :'(
grabba said:
hey,
I'm currently rendering the bootlogo - and with 50 png's already rendered I got 31,5 MB
That's fn huge - did I do something wrong? :crying:
Click to expand...
Click to collapse
No, you didn't do anything wrong. Rendering as jpegs will give you a smaller file size.
Sent from my Nexus 7
Stop... MUFFIN TIME!!!
really appreciate the tutorial, currently working on an animation for my MyTouch4g as a I wait for my nexus....
One question though, when animating the loading bar, how do you make it start at the edge of the loading bar background as opposed to the edge of the screen? I want the animation to "fill" up the bar but as of now i can only get it to slide across the whole screen and settle into the loading bar background, thanks!
cjwebb said:
really appreciate the tutorial, currently working on an animation for my MyTouch4g as a I wait for my nexus....
One question though, when animating the loading bar, how do you make it start at the edge of the loading bar background as opposed to the edge of the screen? I want the animation to "fill" up the bar but as of now i can only get it to slide across the whole screen and settle into the loading bar background, thanks!
Click to expand...
Click to collapse
In the first post, look under the Animation section. There I talk about making a clipping mask. I believe that's what you're trying to do.
Sent from my Nexus 7
Stop... MUFFIN TIME!!!
iHarkunwar said:
OK, Take it here
Click to expand...
Click to collapse
I finally got around to installing CS6 and I figured it out. See this image.
http://i.imgur.com/usKMT.png
can you provide a zip file of it?? please? I keep getting the clipping mask wrong somehow...
Ediit: Nevermind had color overlay on the bottom layer, silly me.
Related
This is a theme derived from mannyb's idea for a "black" edition of his Glossy Minimalism theme here:
http://forum.xda-developers.com/showthread.php?t=478183
The initial concept is all his idea, I'm just doing some of the legwork since he's a busy fellow .
The idea is that we'd love to see more dark based themes, but the only (notification bar) clock colors that we know we can do are black and red (If that's wrong, someone let me know,) so we're basing this theme on a red and black theme.
Here is the concept image:
{
"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"
}
Let me know what you think of the concept or what you'd like to see.
EDIT:
Current Status:
- Changed gradient at top to be better
- Made notifications white (Weatherbug is its own deal)
- Redid the battery meter to be more accurate
- Created network (EDGE, 3G, G) icons. They look nice I think.
What I don't like (Of what's actually been touched):
- The meters hardly fade, I will need to increase the potency of that gradient
- I need to know how to arrange icons on the right to my preference. Does anyone know if this is possible? The vibrate symbol makes it look goofy atm.
As always, feedback is much appreciated.
A note: I will be on vacation in NYC until next Thursday (4-2) so expect no progress on this theme in the mean time. We'll consider it an Alpha field test
Also, can anyone point me in the right direction for a red clock xml edit?
Wow great job I love the notification idea.. expand on this, this may turn out really nice!
You should do the icons in the same color as the clock, we are lacking different looks color wise on here! Great start man
I love this idea! I would prefer a medium dark blue rather than red...
But, I LOVE the transparent clock and the way your doing up the notification bar is awesome!
shaneaus said:
I love this idea! I would prefer a medium dark blue rather than red...
But, I LOVE the transparent clock and the way your doing up the notification bar is awesome!
Click to expand...
Click to collapse
I agree, I'd love to see a dark blue, but as far as I know, the only colors the notification clock can be are black and red. nobody has found out how to make it any color we want yet. :-/
I would like to see a little bit different clock so that it doesn't look exactly like glossy minimalism. Maybe one that isnt clear so that the red doesnt darken up against a black background.
But I do agree that we need one that is black with red so we can take advantage of the red clock font.
Clock
I think you should leave the clock black, or offer a version with a black clock. IMO, the red just takes away from the conformity of the theme.
Otherwise, great job!
P.S. ADP 1.1h? Please? Pretty Please?
indiekid97 said:
I think you should leave the clock black, or offer a version with a black clock. IMO, the red just takes away from the conformity of the theme.
Otherwise, great job!
P.S. ADP 1.1h? Please? Pretty Please?
Click to expand...
Click to collapse
I agree. I think the clock will end up being black.
When the theme is ready for beta testing I will package it into ADP1.1 RC9 and RC33 (JF verisons, obv). I will be doing nightly updates with what I have so far. As it stands, I'm a little bit uneasy with .9.pngs and modifying the .xmls, but I plan on tackling those over the weekend.
Im likin it the way it is actually. At first I thought the red might be too wierd but I think its quickly growing on me, its very slick looking. Ill be interested to see what you do with icons. IMO tehyd look better in black grey contrasts without any red in there. Maybe glossy lookings too?.
EDIT: OH it might be cool to have icons look like little round buttons. Like have icons on a round black background and shiny. Hmmm...
EDIT AGAIN: Wow... my internet musta been running real slow cuz i def didnt see the screenshot of the icons you have up there. Haha yaaaa I like em : )
DUDE YOU ROCK... This has been one of my favorite themes of all time and now its going to be in Black, can't wait...
About the RED FONT??? Where are the edits for changing that, I'm building a theme that would so Rock if I had the font in red...
xcallibur said:
DUDE YOU ROCK... This has been one of my favorite themes of all time and now its going to be in Black, can't wait...
About the RED FONT??? Where are the edits for changing that, I'm building a theme that would so Rock if I had the font in red...
Click to expand...
Click to collapse
That's a good question. I haven't gotten to that point yet. I actually still don't know how to do any xml edits :-/ It might be best to ask someone who has done it.
I love what you did with the notification bar..
Are you still working on this?
Yes, I am still working on it. I'm working on some notification icons that are actually visible and then learning how to do XML edits. If anyone does know how to do XML edits, specifically changing the clock to red, could they let me know?
Latest update:
I seem to have managed to turn my theme into a brick. Every time I flash it, I get stuck on the "G1" screen. I made some changes to an image, packed it up and flashed it, which gave me the error, so when I went back and reverted the changes then repacked it, I still got the error. I'm really confused at this point, so bear with me while I try to figure it out. Thanks a ton to mannyb for making a rock solid glossyminimalism update that I can always revert to.
Status, though:
I have all notification icons done (aside from some weird ones like airplane mode) and am working on XML edits and menus in the rest of the phone.
Have you made sure to compress all your edited PNG's as much as possible, using a program such as PNGOUTWin for example? When the combined increases in file size (a kB here and there, it adds up) hits critical mass the phone will loop/brick during boot. PNGOUTWin will cut the file size of most small PNG's created in Photoxhop in half, or down to a third. Sometimes down to a tenth even.
mannyb said:
Have you made sure to compress all your edited PNG's as much as possible, using a program such as PNGOUTWin for example? When the combined increases in file size (a kB here and there, it adds up) hits critical mass the phone will loop/brick during boot. PNGOUTWin will cut the file size of most small PNG's created in Photoxhop in half, or down to a third. Sometimes down to a tenth even.
Click to expand...
Click to collapse
That would have been my problem. I added a rather large popup_dark_full.9.png along with replacements for all the EDGE, 3G and G network data indicators. I have been watching my framework-res.apk slowly increase in size, and was wondering if that was a bad thing. Turns out it is Thanks.
Ooglez said:
That would have been my problem. I added a rather large popup_dark_full.9.png along with replacements for all the EDGE, 3G and G network data indicators. I have been watching my framework-res.apk slowly increase in size, and was wondering if that was a bad thing. Turns out it is Thanks.
Click to expand...
Click to collapse
Get PNGOUTWin and you'll be set. http://www.ardfry.com/pngoutwin/
Great program, well worth the 15 bucks. There's a free full feature 30 day trial version too. You're gonna want to buy it though, it's that good
mannyb said:
Get PNGOUTWin and you'll be set. http://www.ardfry.com/pngoutwin/
Great program, well worth the 15 bucks. There's a free full feature 30 day trial version too. You're gonna want to buy it though, it's that good
Click to expand...
Click to collapse
Dang, it really is a great program. The trial version only lets you do 20 images at a time, but that's not too bad. I just shrunk my entire framework-res by a considerable amount. Awesome.
Ooglez said:
Dang, it really is a great program. The trial version only lets you do 20 images at a time, but that's not too bad. I just shrunk my entire framework-res by a considerable amount. Awesome.
Click to expand...
Click to collapse
It really is amazing. You can of course use it on the default/unedited Android PNG's too (not just your own edits) to save even more space, but I recommend that you stay away from the .9.png ones with this tool.
mannyb said:
It really is amazing. You can of course use it on the default/unedited Android PNG's too (not just your own edits) to save even more space, but I recommend that you stay away from the .9.png ones with this tool.
Click to expand...
Click to collapse
PNGGauntlet is a free alternative that works VERY well in my opinion. I actually found it from a graphic artist who does mobile game artworks and he swears by it. It works out really well. Go for it if you don't want to pay the $15.
First off, I'd like to thank daveid for making the first theme template, saving us the trouble of re-flashing the entire ROM for any theme.
Next I want to give credit to MOONSSPOON, I based some of my icons from his prior themes, however the ones here will differ once completed.
Lastly, I want to thank Stericson for suppling the community with the amazing xml and java edits that he's accomplished. If there is anyone here in this community that deserves thanks above all else, its him.
So without further due, here is a sneak peak at my upcoming theme:
Forever
***Update 5-6-2009***
Alright well I have a busy week with school and vacation this weekend, so my progress is coming a bit slow. I'm not very fond of the changes in the connection type and battery that I made, so expect changes there. I've taken my first stab at the app drawer, but it's a bit too crisp for my tastes, I plan to roughen it up a bit. I've made some more changes to the backgrounds of the status drawer and app drawer, but I'll post those when I'm more satisfied with them.
{
"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"
}
I still have a lot of work to do, I only just started this project, so I am looking for any feedback or suggestions, positive or negative. So please leave your comments and help hasten its progress.
Looks pretty cool so far.
My only suggestion is to keep the icons a dark with shades of green to match everything..
I like the battery meter.
Looking good. You inspired me to make my own custom boot screen, put a little thought into it and realized it could be done very simply. Not sure if it is the method you took, but this is what I did. I opened the original files, for the logo-shine I converted the layer to a smart object (all work done in Photoshop), and applied a color overlay (with some nice blending options to it) to turn it blue hue'd.
I then opened the logo-mask file, and colored over the entire thing in 0 0 0 black. Created my text using the font of my choice, in blue. And used the background eraser (preserving the black) to erase the text. Leaving a boot screen that looks like this when it is loading:
Now.. back to your theme. I would think some brownish icons would compliment the green overall theme nicely. Kinda give it those earth tones.
daveid said:
Looking good. You inspired me to make my own custom boot screen, put a little thought into it and realized it could be done very simply. Not sure if it is the method you took, but this is what I did. I opened the original files, for the logo-shine I converted the layer to a smart object (all work done in Photoshop), and applied a color overlay (with some nice blending options to it) to turn it blue hue'd.
I then opened the logo-mask file, and colored over the entire thing in 0 0 0 black. Created my text using the font of my choice, in blue. And used the background eraser (preserving the black) to erase the text. Leaving a boot screen that looks like this when it is loading:
Now.. back to your theme. I would think some brownish icons would compliment the green overall theme nicely. Kinda give it those earth tones.
Click to expand...
Click to collapse
First off, thank you! I've been pondering over this all about finding a completive color for the theme and the whites and greys just didn't fit right, and the browns just eluded me. So booyah! I've got a perspective on where to go from here.
As for the boot screen (in PS CS4), I created a new document with the dimensions of the android-logo-mask.png, kept its background transparent. I created a new layer of a black box (rgb, 0 0 0) covering the visible dimenions. Then created the text how I wanted on a new layer. Next, focused on the first black box, then ctrl - click on the contents of the text layer, selecting only the text contents on your black box, then just deleting the selection and presto, black box with your text cut out, preserving your transparent background.
Saved it as a png. Open it with fireworks, export it as PNG 8 with alpha transparency (to compress its size).
And on the android-logo-shine.png is just a scrolling marque that will go end to end across the back of android-logo-mask.png. I noticed yours does have as much of a "shine" to it anymore. Idk if that was your goal or not but yeah, thats how I did mine .
tehseano said:
First off, thank you! I've been pondering over this all about finding a completive color for the theme and the whites and greys just didn't fit right, and the browns just eluded me. So booyah! I've got a perspective on where to go from here.
As for the boot screen (in PS CS4), I created a new document with the dimensions of the android-logo-mask.png, kept its background transparent. I created a new layer of a black box (rgb, 0 0 0) covering the visible dimenions. Then created the text how I wanted on a new layer. Next, focused on the first black box, then ctrl - click on the contents of the text layer, selecting only the text contents on your black box, then just deleting the selection and presto, black box with your text cut out, preserving your transparent background.
Saved it as a png. Open it with fireworks, export it as PNG 8 with alpha transparency (to compress its size).
And on the android-logo-shine.png is just a scrolling marque that will go end to end across the back of android-logo-mask.png. I noticed yours does have as much of a "shine" to it anymore. Idk if that was your goal or not but yeah, thats how I did mine .
Click to expand...
Click to collapse
Mine still shines pretty well, just doesn't capture on the screen shots.
Wow look first theme with a white clock. You work fast....
Looks great.
Stericson
daveid said:
Now.. back to your theme. I would think some brownish icons would compliment the green overall theme nicely. Kinda give it those earth tones.
Click to expand...
Click to collapse
I agree w/ daveid, brown would go really well with it so far, making it into a more earth tone theme.
Iwould take it a bit farther and encompass the silver elements of that status bar into a silver-green theme, or even silver-green with a highlights of brown. (I can't help but think of elves when I picture this in my head...weird) The reason I think green and silver would be better main colours is the theme looks very natural and equal elements of green and brown might "pop" it too much. Green/Silver (white w/ that shade of black) would fit, but deffinetly has to have brown highlights somewhere.
I'm sure it's on your list, but I would change the pull-up menu tab from stock. It conflicts with your theme, which is looking really great.
Great start!
Love the colors! Not so sure about the clock but that's a personal preference thing. White clock looks awesome with it. Can't wait to see the release.
Like it, cant wait to see the finished product!
LOVE THE GREEN!!! I would suggest skinning the bottom pull menu though
Come on now, you all didn't expect me to leave the app drawer default, did you?
I've only just begun, so when an idea pops in my head I take care of it. I'm not handling anything in a specific order, however the icons will probably be my last addition (however I'll get up a few prototypes for screenshot-sake and help add to the feel of the theme).
Anyways I've added an update along with new screenshots, check it out.
It's coming together nicely. The browns really do compliment the greens and give it more depth. Keep it coming.
I like it! I like the shades of green and brown you used. The suggestion of a complimenting silver is a good one. Also, consider an earthy dark/muted blue for some highlights (suggestive of water). Then you would have the three primary earth tones - primarily using the green and brown with some small amount of silver/blue as highlights.
Just my .02c - Looking forward to trying it out on Dudes' build!
shaneaus said:
I like it! I like the shades of green and brown you used. The suggestion of a complimenting silver is a good one. Also, consider an earthy dark/muted blue for some highlights (suggestive of water). Then you would have the three primary earth tones - primarily using the green and brown with some small amount of silver/blue as highlights.
Just my .02c - Looking forward to trying it out on Dudes' build!
Click to expand...
Click to collapse
As of right now my plans are only supporting JF's ADP1.5 build. That may change down the road, but wouldn't come until I release a final for JF's build.
Oh...the silver is gone. The brown highlights look nice, but the removal of the silver in the task bar seems to have taken something away from the overall theme rather than added something in.
knight4linux said:
Oh...the silver is gone. The brown highlights look nice, but the removal of the silver in the task bar seems to have taken something away from the overall theme rather than added something in.
Click to expand...
Click to collapse
Yeah, agreed. I really wasn't impressed with its turnout. I'll make chanegs when I'm back from vacation.
I like it, but to be honest im not feeling the pull out bar.
::bump::
i dont wanna see this theme die...
EDIT: View new version (88KB in size, 6 dots "progress bar") on post #8.
Hi guys,
First time poster, long time reader.
I've been using Slim ICS since 3.7 (now on 3.9), and I was very disappointed with the new boot animation on 3.9. Besides looking very choppy, I just didn't like it.
So, I went ahead and made a Slim ICS boot animation that i do like. It turned out to be very clean, superb definition on Slim logo, 1px progress bar at the bottom.
The sample, since it is larger than the actual phone screen, doesn't do justice to the bootscreen running on the phone. I was very surprised by the result myself.
THe progress bar is smooth on the sample, but on the phone, since it is booting, stops momentarily (just like a true progress bar, that gets stuck for a second while the phone is busy doing much needed stuff)
I like Slim ICS so much, I thought I'd give back to the community and post it here for all who want it.
[Thanks krarvind, for a great ROM. If by any chance you want to include this boot animation in any of your future Slim ICS ROMs, you have my permission.]
It is made for SGS @ 480x800, and I can only guarantee that it works on this phone. It might work on others, but I have no way of testing it. Consider yourself warned.
{
"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"
}
How to install:
Place bootanimation.zip in /data/local folder. That's it. Reboot and see.
Any comments?
Thanks I will try this B-)
Sent from my GT-I9000 using xda premium
@Jovenitto:
Nice work, can you bring the size down to my current levels? if yes, make one up and post it in my thread, i will look to put it in. As i said before, i would love users to get involved in this if they wish, my only req is BA should be simple and light ( < 100 kb preferred )
Thanks very much Jovenitto,
Nice and simple - just how I like it...
krarvind said:
@Jovenitto:
Nice work, can you bring the size down to my current levels? if yes, make one up and post it in my thread, i will look to put it in. As i said before, i would love users to get involved in this if they wish, my only req is BA should be simple and light ( < 100 kb preferred )
Click to expand...
Click to collapse
I was actually thinking of increasing the number of frames...
I'll try to get the size down.
Maybe by reducing the PNG quality and hope that it doesn't compromise overall image quality.
I could reduce the number of frames (there are exactly 100 frames), but the progress bar will be choppier... each frame "fills" the bar 4 pixels, i can reduce the frames to 50 if I increase the "fill" to 8px/frame.
Or maybe reduce the size of the progress bar. As of now, the bar is 400px wide, with 40px margin on each size. If the bar is smaller, it takes less frames to fill.
Tomorrow is a national holliday here in PT, i'll edit the BA and try to hit the 100KB mark.
EDIT: Small update:
PNG Compression already at max. 9KB each frame.
Reduced to 50frames (progress bar @ 8px/frame)
Result: bootanimation.zip @ 426KB
Maybe i'll be albe to get to 200KB by reducing the size of the bar to 200px or something...
Or change the progress bar completely. Maybe some Ubuntu style dots? Or some kind of glow effect (less frames needed)?
Cogs are turning in my head.
Jovenitto said:
I was actually thinking of increasing the number of frames...
I'll try to get the size down.
Maybe by reducing the PNG quality and hope that it doesn't compromise overall image quality.
I could reduce the number of frames (there are exactly 100 frames), but the progress bar will be choppier... each frame "fills" the bar 4 pixels, i can reduce the frames to 50 if I increase the "fill" to 8px/frame.
Or maybe reduce the size of the progress bar. As of now, the bar is 400px wide, with 40px margin on each size. If the bar is smaller, it takes less frames to fill.
Tomorrow is a national holliday here in PT, i'll edit the BA and try to hit the 100KB mark.
EDIT: Small update:
PNG Compression already at max. 9KB each frame.
Reduced to 50frames (progress bar @ 8px/frame)
Result: bootanimation.zip @ 426KB
Maybe i'll be albe to get to 200KB by reducing the size of the bar to 200px or something...
Or change the progress bar completely. Maybe some Ubuntu style dots? Or some kind of glow effect (less frames needed)?
Cogs are turning in my head.
Click to expand...
Click to collapse
why dont u try something like windows 8 type of round circle http://i.imgur.com/vG0XV.gif
takerhbk said:
why dont u try something like windows 8 type of round circle http://i.imgur.com/vG0XV.gif
Click to expand...
Click to collapse
+1, not necessarily for the win8 circle but for a smaller type of animation, will save you a bucket load of frames
As per krarvind's request of size, here it is:
Keeping it simple, just the way I like it.
Try it and comment, plz.
FYI, I'll keep the previous one available (the one with long progress bar).
@krarvind:
10 frames only, 88KB total zipped size.
Just downloaded - works great and much nicer than the 3.9 animation (not that it upset me!). Thanks.
[BOOTANIMATION] [RED-MOD] Slim ICS for Galaxy S [480x800]
Thank you so very much for doing this boot animation. FYI, still works great in SlimICS 4.2. It's alot nicer then stock animation but still nice and light.
As I have an eternal hatred of the color blue and try to mod it out of every aspect of my phone, I've made a red version of your bootanimation and am uploading it to those who prefer it...
Enjoy!
Hello all,
been trying to do this: battery progress bar
= red for <20%
= cyan for general discharge above 20%
=yellow while charging
=green when fully charged
i managed to get the red part right but have problems with yellow and green. for red i used #BLEVN# comparison. for cyan just the standard color option for foreground.tried using the battery status numeric tag but it just turns to white.
i'm a noob. so please tone down the answers. Thank you!
this might help
paramdinkar said:
Hello all,
been trying to do this: battery progress bar
= red for <20%
= cyan for general discharge above 20%
=yellow while charging
=green when fully charged
i managed to get the red part right but have problems with yellow and green. for red i used #BLEVN# comparison. for cyan just the standard color option for foreground.tried using the battery status numeric tag but it just turns to white.
i'm a noob. so please tone down the answers. Thank you!
Click to expand...
Click to collapse
i just started using this and kinda learning how it works but i think this will help
1st put #ff00ffff as FG Color (cyan)
Code:
$#BSTATN#=2?[cf]#ffff00[/cf]$$#BLEVN#<20?[cf]#ffff0000[/cf]$$#BSTATN#=5?[cf]#008000[/cf]$
i tested and it works for me
quilll said:
i just started using this and kinda learning how it works but i think this will help
1st put #ff00ffff as FG Color (cyan)
Code:
$#BSTATN#=2?[cf]#ffff00[/cf]$$#BLEVN#<20?[cf]#ffff0000[/cf]$$#BSTATN#=5?[cf]#008000[/cf]$
i tested and it works for me
Click to expand...
Click to collapse
Thank you quilll. Your code gave me a good starting point. Without it I had no idea what to do.
What I wanted to do is:
battery <16% = red
battery <31% = yellow
battery <100% = green
Here is what I came up with.
Code:
$#BLEVN#<16?[cf]#ffff0000[/cf]$$#BLEVN#<31?[cf]#ffff00[/cf]$$#BLEVN#<100?[cf]#008000[/cf]$
I like the idea of this. Did you get it working and if so could you post a screenshot the codes in place in the zooper settings? I have tried and can't figure out the placement. Thanks @sonny_c
Sent from my SPH-L720 using XDA Premium 4 mobile app
sonny_c said:
Thank you quilll. Your code gave me a good starting point. Without it I had no idea what to do.
What I wanted to do is:
battery <16% = red
battery <31% = yellow
battery <100% = green
Here is what I came up with.
Code:
$#BLEVN#<16?[cf]#ffff0000[/cf]$$#BLEVN#<31?[cf]#ffff00[/cf]$$#BLEVN#<100?[cf]#008000[/cf]$
Click to expand...
Click to collapse
I tried this code but my progress bar get transparent with this. If I change the [cf] in [cb] it works but its just the background color, I want that the bar who progress that change the color. An issue ?
Thx
deleted
Fugi888 said:
I like the idea of this. Did you get it working and if so could you post a screenshot the codes in place in the zooper settings? I have tried and can't figure out the placement. Thanks @sonny_c
Sent from my SPH-L720 using XDA Premium 4 mobile app
Click to expand...
Click to collapse
Fugi888,
It is working for me. Screenshots are below.
My homescreen. The battery bar stays green when the battery is above 31%. Then it changes to yellow from 16% - 30%. Finally it turns red when the battery drops below 15%.
{
"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"
}
Add a Progress Bar and and go into its settings.
The next five pics are my settings.
Tap on Advanced Parameters.
I typed the code in the highlighted box.
---------- Post added at 07:51 PM ---------- Previous post was at 07:43 PM ----------
Faxx4840 said:
I tried this code but my progress bar get transparent with this. If I change the [cf] in [cb] it works but its just the background color, I want that the bar who progress that change the color. An issue ?
Thx
Click to expand...
Click to collapse
The code is working for me and I haven't had any issues. Check out my settings in my post above.
[/COLOR]The code is working for me and I haven't had any issues. Check out my settings in my post above.[/QUOTE]
thanks! gonna give this a try now!
Here is the battery below 30%.
Sent from my SAMSUNG-SM-N900A using Tapatalk
sonny_c said:
Fugi888,
It is working for me. Screenshots are below.
My homescreen. The battery bar stays green when the battery is above 31%. Then it changes to yellow from 16% - 30%. Finally it turns red when the battery drops below 15%.
Add a Progress Bar and and go into its settings.
The next five pics are my settings.
Tap on Advanced Parameters.
I typed the code in the highlighted box.
---------- Post added at 07:51 PM ---------- Previous post was at 07:43 PM ----------
The code is working for me and I haven't had any issues. Check out my settings in my post above.
Click to expand...
Click to collapse
I don't know what I do wrong. I try your variable and now it works perfectly. Thank you for your help .
Faxx4840 said:
I don't know what I do wrong. I try your variable and now it works perfectly. Thank you for your help .
Click to expand...
Click to collapse
Glad I could help.
Your code is working! Thanx man!
thanks!!
quilll said:
i just started using this and kinda learning how it works but i think this will help
1st put #ff00ffff as FG Color (cyan)
Code:
$#BSTATN#=2?[cf]#ffff00[/cf]$$#BLEVN#<20?[cf]#ffff0000[/cf]$$#BSTATN#=5?[cf]#008000[/cf]$
i tested and it works for me
Click to expand...
Click to collapse
thanks it works fine!!
Not so much of a noob am i ?
paramdinkar said:
Hello all,
been trying to do this: battery progress bar
= red for <20%
= cyan for general discharge above 20%
=yellow while charging
=green when fully charged
i managed to get the red part right but have problems with yellow and green. for red i used #BLEVN# comparison. for cyan just the standard color option for foreground.tried using the battery status numeric tag but it just turns to white.
i'm a noob. so please tone down the answers. Thank you!
Click to expand...
Click to collapse
Not such a noob am i then?
I know this is an old thread but look at your screen you have the state abbreviation under you bar for texas; TX. Is this generated in zooper or manually added?
Thank you!
how bout if i want an image instead of bar? when the batt is 100% the image if full. then when it comes to 50% the image will only show half of the image
wakaranay said:
how bout if i want an image instead of bar? when the batt is 100% the image if full. then when it comes to 50% the image will only show half of the image
Click to expand...
Click to collapse
One way to achieve that should be (if you don't want the image to change its position):
Create a widget with the bitmap of your choice. Adjust size of widget to your needs. The image should fill the whole wigdet. Set widget background to full transparency.
Add a Rect to your widget. Set its Screen Anchor 'Center left'
Height of the rectangular should be set to the height of your widget or bigger
Width of the rectangular should be of the exact size of the widget's width
Than go to 'Advanced parameters' and type [ox]#BLEVN#*xxx/100[/ox] --> xxx is width of your rectangular in pixels
Set 'Drawing mode' of your rectangular to 'Clear', if you want the image to disappear completely for the percentage of battery used
Set it to 'Normal' if you want your rectangular to mask your image.
Another way is to play with the Advanced parameters of your image itself. If you can determine the width of your widget after adjustment of size just type [ox]#(100-BLEVN#)*xxx/100[/ox] there. After setting Screen Anchor to 'Center right' or 'Center left' and your image should move out of sight step by step (either left or right)...
zephyr1100 said:
One way to achieve that should be (if you don't want the image to change its position):
Create a widget with the bitmap of your choice. Adjust size of widget to your needs. The image should fill the whole wigdet. Set widget background to full transparency.
Add a Rect to your widget. Set its Screen Anchor 'Center left'
Height of the rectangular should be set to the height of your widget or bigger
Width of the rectangular should be of the exact size of the widget's width
Than go to 'Advanced parameters' and type [ox]#BLEVN#*xxx/100[/ox] --> xxx is width of your rectangular in pixels
Set 'Drawing mode' of your rectangular to 'Clear', if you want the image to disappear completely for the percentage of battery used
Set it to 'Normal' if you want your rectangular to mask your image.
Another way is to play with the Advanced parameters of your image itself. If you can determine the width of your widget after adjustment of size just type [ox]#(100-BLEVN#)*xxx/100[/ox] there. After setting Screen Anchor to 'Center right' or 'Center left' and your image should move out of sight step by step (either left or right)...
Click to expand...
Click to collapse
Wow Thanks mate! how bout if my image disappear from top to bottom?
wakaranay said:
Wow Thanks mate! how bout if my image disappear from top to bottom?
Click to expand...
Click to collapse
just play with [oy] ... [/oy] and height instead of [ox] ... [/ox] and width
zephyr1100 said:
just play with [oy] ... [/oy] and height instead of [ox] ... [/ox] and width
Click to expand...
Click to collapse
Cool! but the image disaappear in reverse. what i mean. when my batt is 10% left the image left is the top instead of the bottom
My first watchfaces for Facer
White:
http://facerepo.com/app/faces/details/classic-white-149fc055c0f
Black:
http://facerepo.com/app/faces/details/classic-black-149fc2c4ac8
Update 1.0:
Some background tweaks..
Update 1.1:
Added white watchface with dimmed Battery Percentage. (only in dimmed state with screen on.)
Added black watchface with dimmed Battery Percentage. (only in dimmed state with screen on.)
You can replace the Battery Percentage with anything you like, and add more!
Update 1.2:
White watchface: made black stripes more black and and tweaked 12 o'clock sign for dimmed state.
Update 1.3:
Changed arrows into black stripes.
Update 1.4:
Changed the white dimmed state to the black image background.
Update 1.5:
Normal state with current temp, weather and weather icon.
And more visible and modern ambient mode.. Also better with cards notifications and nice black background..
Please let me know what you think... The arrows come from another watchface.
I prefer the white one, the black is an inverted and little bit tweaked white face.
With the black one, in dimmed state, notifications are a bit easier to read.
Unfortunately Facer isn't showing the notifications as on the stock watchfaces at the moment..
{
"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"
}
Love the white one.. think it's gonna be on my wrist for a while!
Thanks for the time and effort you have put into this!
suggestion.. mute symbol, even if just when dimmed.
Changed the white dimmed state to the black image background. Now you can see the mute and other icons..
I think its not possible to change the icon/card colors from wear within facer.
Thanks for the feedback!
Yeah, love that little tweek.. a lot easier to see when dimmed and those icons now visible.. great stuff!!
some times takes a few seconds to change when dimmed.. but not that I'm staring at my new watch all of the time
Thanks dude!
N1XM1X said:
Yeah, love that little tweek.. a lot easier to see when dimmed and those icons now visible.. great stuff!!
some times takes a few seconds to change when dimmed.. but not that I'm staring at my new watch all of the time
Thanks dude!
Click to expand...
Click to collapse
Lol
Send with Tapatalk on Sony Z2
How can i install ? Im new to Sony SW3
Enea307 said:
How can i install ? Im new to Sony SW3
Click to expand...
Click to collapse
Good question: you have to buy the app called Facer from the Playstore..
Send with Tapatalk on Sony Z2
I see the API is released, our about to be, don't know if this is any use to you but i look forward to the new faces for our watch.. hope to see more from you :good:
sadfaces
so apparently facer is updated for new API (GW5) and SW3 is still on old software aka not compatible. uber sadfaces.
What do you guys think?
Normal state with current temp, weather and weather icon.
And more visible and modern ambient mode.. Also better with cards notifications and nice black background..
djgodlike said:
What do you guys think?
Normal state with current temp, weather and weather icon.
And more visible and modern ambient mode.. Also better with cards notifications and nice black background..
https://www.dropbox.com/s/ije7jt49l5mbl9z/Casio AQ 230 White.face?dl=0
Click to expand...
Click to collapse
is this support new API ??
alunx said:
is this support new API ??
Click to expand...
Click to collapse
This wasn't my question but I think this is a Facer question. If you have AW5.0.1 on your watch you have to choose the "Facer on Android Wear 5" watchface. Then you are using the new API...
Send with Tapatalk on Sony Z2
Is it possible to create something like that:
And change the bottom sphere with battery and inside the sphere put the weather. Thanks a lot. If not I'll try to clean the watch face.
Sure it's possible but seems to have some work with PhotoShop.. But it's a nice watch for our Swr50. Maybe I'll digg into it when I have some spare time. Or do it together? Do you have a high res pic straight from the top?
Otherwise you can design it yourself vector based. But i think PhotoShop is more like the easy way...
It's worth a try...
eXPerience1983 said:
Is it possible to create something like that:
And change the bottom sphere with battery and inside the sphere put the weather. Thanks a lot. If not I'll try to clean the watch face.
Click to expand...
Click to collapse
Done some work on the corners already... Now The hard part, wipe out the hands...[emoji15]
Wow
eXPerience1983 said:
Wow
Click to expand...
Click to collapse
Finally got it fully working, first hours of PhotoShop then correcting the hands and code! 1 days hard work.. I must say I'm very happy with it, it looks cool. Screenshots below made with Wear app..
Soon on facer. Never ask again if I can do it [emoji35]
Battery and weather included...
What the hell??? You are amazing!!!!
OK, the version I first upload it's not the same that you are working on it, maybe this version is easier to work with it.
I tried (and still working on it, but I have no Photoshop, so I'm working with GIMP, and I'm learning as I use it) to make a pure black/white (and red for Sunday indicator) version.
I'm on it, but its difficult to me. But maybe it's better solution for dimmed version too.
The idea... insert weather into the bottom circle (or digital clock), use the bottom white circle as battery indicator, still need to clear/clean other 3 spheres an "repair" them.
And try to rescue the clock hands as real as I can. And the last thing, try to get better bottom line numbers, the others seems fine.
Feel free to use it as you want. I need more time to do that, but I'll try if nobody do it before.
And sorry, my English is not as good as I want.
EDIT: Clean/Clear top Sphere added (I have to improvise, because it has 31 points, and it's difficult to get it 100% real)
EDIT 2: added the original one, and another point of view (but it's not good to use it for the face)
EDIT 3: Centre Hands added (valid for center-right, center-left, and top sphere)
eXPerience1983 said:
OK, the version I first upload it's not the same that you are working on it, maybe this version is easier to work with it.
I tried (and still working on it, but I have no Photoshop, so I'm working with GIMP, and I'm learning as I use it) to make a pure black/white (and red for Sunday indicator) version.
I'm on it, but its difficult to me. But maybe it's better solution for dimmed version too.
The idea... insert weather into the bottom circle (or digital clock), use the bottom white circle as battery indicator, still need to clear/clean other 3 spheres an "repair" them.
And try to rescue the clock hands as real as I can. And the last thing, try to get better bottom line numbers, the others seems fine.
Feel free to use it as you want. I need more time to do that, but I'll try if nobody do it before.
And sorry, my English is not as good as I want.
EDIT: Clean/Clear top Sphere added (I have to improvise, because it has 31 points, and it's difficult to get it 100% real)
EDIT 2: added the original one, and another point of view (but it's not good to use it for the face)
EDIT 3: Centre Hands added (valid for center-right, center-left, and top sphere)
Click to expand...
Click to collapse
Nice work dude! Your background works with my face too. Even the hands are the same settings..
Maybe you can adjust the letters "SU" a bit more bright. I think the minute and hour hands in white will be hard to read and possibly need a bit more contrast. My Edifice face is a bit hard to read to..
I will PM send you my facer file. And one with your background..
We keep in touch...