FORUMS
Remove All Ads from XDA

[How-To] Custom Sense Lockring on the MT4GS - easy step-by-step.

1,771 posts
Thanks Meter: 1,144
 
By Blue6IX, Senior Member on 13th December 2011, 04:49 PM
Post Reply Email Thread
Return to Contents Page - doubleshot Developers Reference

----

Part 1: This thread.
Part 2: Edit .9.png files for the MT4GS - step-by-step.
Part 3: Edit Mode10 Files for the MT4GS - step-by-step

--------

In today's workshop we are going to learn how to make changes to the Sense Lockring for the doubleshot.

What you need:

1 - HtcLockScreen.apk from the ( Sense ) ROM you are making it for.
2 - 7-Zip installed and ready.
3 - Photoshop ( or equivalent - directions for photoshop ) installed and ready.
4 - Time, interest, and creativity.

* - Guide written for a Windows XP machine, please adjust accordingly if your environment is different.

--------

Okay - the first thing I want you to do is go to this thread:

Customize Sense 3.0 Lock Ring and read the first and second post completely.

Don't download anything or try to play along, just read it.

When you get to the bottom of post 1, click thanks if you intend to customize your lockring. Ditto on clicking thanks at the bottom of post 2 in that thread if you intend to inscribe text on your Lockring.

Once you have read and thanked the author for both of those posts, come back here and see how much easier it is to do this on the MT4GS then it's sister device.

--------

Preparation: Setup.

Now that you have a rough idea of what you have to do, forget about the .m10 tools, fusion.apk, and everything else except for the requirements I listed at the top of this post. Easier already, huh?

First things first - let's set up our dev environment.

1 - Go to your computer desktop, right click and make a new folder. Call this folder "LockringEdits".

2 - Place your HtcLockScreen.apk file in the "LockringEdits" folder.

3 - Open the "LockringEdits" folder, and create two new folders in it. Call one "LockringOriginal" and the other one "Lockring001".

4 - Right click on the HtcLockScreen.apk file and choose "copy" from the menu.

5 - Open the "LockringOriginal" folder, and then right-click in an empty area of the folder and select "paste" from the options menu. Once pasted, go back up one level to the "LockringEdits" main folder.

6 - Repeat step 4, then step 5 again pasting into the "Lockring001" folder instead.

7 - Stop.

Recap setup:

We now have 3 copies of our HtcLockScreen.apk file in 3 different folders.

- The "LockringOriginal" folder is a backup of our HtcLockScreen.apk file and you hopefully won't have to go in there at all, but just in case you need it it's there.

- The "Lockring001" folder is where we will actually be working on our first Lockring, and has the HtcLockScreen.apk file we are going to edit.

- The "LockringEdit" main folder this project is in also has a copy of HtcLockScreen, so when you make your next project folder ( 002 ) you have a fresh file to copy into it.

--------

Make sure you have 7-zip and Photoshop installed, and you have rebooted your computer after the install, before moving on with this project.

Now that we have our project folders set up, time to get down to business. We are going to extract the graphics we are going to change, change them, and then add them back into the .apk file.

Easy, right? Yep - and here's how:

--------

Part 1: Extraction.

1 - Navigate to the "Lockring001" folder if you aren't in it already.

2 - Right click on HtcLockScreen.apk - highlight the "7-Zip" menu option, and when the next menu pops up choose "Open archive".

*Note: Just "Open archive" NOT the option with another menu of choices.

2A - You should now have a window open that shows the contents of the HtcLockScreen.apk file.

3 - Double-left-click the "res" folder, and then double-left-click the "drawable-hdpi" folder.

4 - Scroll down the list until you see "lockscreen_ring.png" and left-click once and hold to drag it out of the .apk file and drop it in the "Lockring001" folder.

4A - Also scroll down the list and find "lockscreen_ring_highlight.png" and drag that out of the .apk file and into the "Lockring001" folder as well.

4B - Close the 7-Zip window.

5 - Stop.

--------

You should now see in the "Lockring001" folder 3 files:
- HtcLockScreen.apk
- lockscreen_ring.png
- lockscreen_ring_highlight.png

Switch your view of this folder to "thumbnails" so you can see what the pictures look like while they are sitting in the folder.

--------

Part 2: Coloring.

1 - Open photoshop. Once it loads up, go to file->open and open each of the .png files one at a time.

2 - Position them in the Photoshop window so they sit next to each other and you can see them both.

3 - Click in the "lockscreen_ring.png" window, and then go up to and click "Image" in the menu at the top of your Photoshop window. Highlight "Mode" and make sure that "RGB Color" and "8 bits/channel" are both checked. If not, make them so.

3A - Do the same for "lockscreen_ring_highlight.png".

4 - Click back on the "lockscreen_ring.png" window to bring it into focus.

5 - Go back up to "Image" in the menu at the top of your Photoshop window. Highlight "Adjustments" and then select "Color Balance" from the menu.

6 - In the window that pops up, make sure "Midtones" is selected at the bottom, then grab the middle slider and drag it all the way to "Green".

The middle text box at the top of the color balance window should now read "+100" and the lock ring itself should be a semi see-through green.

( If not, make sure the "preview" option is checked in the color balance window to see your changes in real-time before making them. )

7 - Select "OK" in the color balance window, and then save the colored lockring.

8 - Repeat steps 5 to 7 for "lockscreen_ring_highlight.png".

9 - Close Photoshop after having saved both pictures, and navigate back to the "Lockring001" folder if not there already.

10 - Stop.

--------

Part 3: Replacing the graphics.

You should now have two green lockring pictures in the "Lockring001" folder next to the HtcLockScreen.apk file.

We are almost done, we just have to add these graphics back in to the HtcLockScreen.apk file to finish it off. Do that by:

1 - Right click on HtcLockScreen.apk - highlight the "7-Zip" menu option, and when the next menu pops up choose "Open archive".

*Note: Just "Open archive" NOT the option with another menu of choices.

1A - You should now have a window open that shows the contents of the HtcLockScreen.apk file.

2 - Double-left-click the "res" folder, and then double-left-click the "drawable-hdpi" folder.

3 - Select both of the edited graphics in the "Lockring001" folder, and then drag them into the 7-Zip window. Make sure you are in the "drawable-hdpi" folder in the 7-Zip window before doing so.

4 - Confirm the file copy, let it copy, and then close the 7-Zip window when it's done.

That's it!

You have now successfully changed the color of your Lockring for the Sense doubleshot ROM you got the HtclockScreen.apk file from.

The only thing left to do is get the HtcLockScreen.apk file on the device, and replace the one already on it in /system/app. Once that's done, you can enjoy your new custom colored lockring!

--------

Part 4: Engraving.

Now that we've learned that coloring the lockring is pretty easy, especially compared to the hoops they had to jump through on the Sensation to do the same thing, let's look at engraving some text on the lockring.

Again, we have it easy. Unlike on the Sensation, our lockring is right-side up and facing the right way. You can just type your text as normal over it and it'll be just right.

Repeat the steps from above to extract and load the two lockring graphic files into Photoshop.

Type your text over the first lockring, bend it and position it so it looks good on the ring.

Then follow this quote from the Sensation lockring guide:

Quote:
Originally Posted by mohit1234

Engrave on the Lock Ring

  1. Open the lock ring in Photoshop.
  2. Click on the TYPE TOOL in the sidebar on the left and type the text you want to engrave.
  3. On the right sidebar, right click on the layer with your text and click on blending options.
  4. Select inner shadow and input the following settings:-
    • Blend Mode = Multiply
    • Color = Black
    • Angle = 30
    • Use Global Light box ticked
    • Opacity = 75%
    • Distance = 5px
    • Choke = 7%
    • Size = 5px
  5. Then select bevel and emboss and input the following settings:-
    • Style = Outer Bevel
    • Technique = Chisel Hard
    • Depth = 1000%
    • Direction = Up
    • Size = 0px
    • Soften = 16px
    • Angle = 30
    • Altitude = 30
    • Use Global Light box ticked
    • Highlight mode = Screen
    • Color of Highlight Mode = White
    • Opacity = 75%
    • Shadow mode = Multiply
    • Color of Shadow mode = black
    • Opacity = 75%
  6. Click OK and save the file as a PNG file.
  7. There will be a popup asking whether you want the PNG to be interlaced or not. Choose none.

Change the color of the Lock Ring
  1. Open the lock ring in Photoshop.
  2. From the top menu, go to Image ---> Adjustments ---> Variations.
  3. A window will open up.
  4. In the window that just opened, move the pointer towards Coarse.
  5. You can now select the color that you want.
  6. You can also adjust the pointer between fine and coarse depending on the color you wish to achieve.
  7. There are also options of Light and Dark which will also help to get the desired color.
  8. After you've changed the color, click on save and save it as a PNG file.

...and that's basically it.

The only other thing you have to do is go back to the Sensation lockring tutorial and click thanks on both the first and second posts - because that tutorial made your life a whole lot easier.

--------

Conclusion & Thoughts:

Now that it's pretty plain out there how to make changes to the lockring on a Sense ROM for the doubleshot, i'm looking forward to seeing what the rest of you come up with.

I am not such a fan of graphics work, i'd rather be coding, but there are certainly some very talented and creatively artistic people floating around here.

Experiment, try different things, figure out how to make different shapes, and come up with some cool stuff.

I found out how to change the color of the ring on my own while I was overhauling the graphics on my ROM, I just decompiled and went through every app one at a time and changed any graphics file I could find to see what happened.

On a lark I searched for lockrings on XDA to see what was out there after I got my rainbow of colors, and found the Sensation lockring tutorial that taught me how to engrave them and a healthy appreciation for how easy it was to edit the lockrings on our device.

- ...and yes, you did just learn how to edit just about any graphic in any .apk file you come across on the device.

- If you want to start using this information to edit other graphics on your phone, DO NOT EDIT any .9.png graphics you find in this manner. You must use a completely different approach and actually de-compile and re-compile the .apk you take them from for them to work right.

See this thread: Edit .9.png files for the MT4GS - step-by-step. for .9.png files.

Other then that, just about anything else is fair game.

I tried to make the guide as simple as possible, aimed at someone with little-to-no photoshop knowledge or 7-Zip experience. All you need is an interest in doing it, and the tools to do so - the how is right here.

Here's the door, wide open, and I can't wait to see what happens when some of you walk through it.

Happy modding!

Edit - also - some graphics packages ( Like boot animations ) need to be placed back into the archives or archived without being compressed. The drag and drop method of using 7-Zip to do this will compress those images and then the file won't work anymore.

If you start messing with more graphics then the lockring explained above - just make sure to look at the information in the 7-Zip window before you remove it. It'll show you the actual size and compressed size - if they are both the same then you need to make sure it gets back into the archive without being compressed.

I use winrar for that function, I like it and it forces me to realize what graphics are compressed or not because I use a different program to deal with ones that aren't.

Your mileage may vary, but that works great for me, and is a good suggestion for others.

--------

EDIT: 12/16/2011

Lockscreen_ring.png
This is the graphic that shows when you need to grab it, so when the lockring is at rest on the lockscreen.

Lockscreen_ring_highlight.png
This is the graphic that is used to make it grow and appear to fly out of the phone at you once it is activated.

If the two graphics are not lined up the same in the .png files, you will have bugs.

Thus far the only bug i've encountered is that the screen turns off as it's booting - easily solved by just hitting the power or trackpad buttons to get it on again.

There may be other bugs that have not been found yet - it is recommended to keep both .png files with the graphics in the same place, and not one lower and the other higher. I am not sure what happens if you use two different graphics.

Also:

I have noticed no impact on the lock ring when you change the hidden .m10 lockring graphic in fusion.apk

What I have noticed is changing this graphic makes fusion.apk a bit buggy, and lags the system.

At this time it is still recommended to ignore the fusion.apk file altogether as mentioned at the top of this posting.

--------

Make sure to browse the first few posts after this one in the thread, some more in-depth and helpful explanations of the process and particulars is there.
The Following 6 Users Say Thank You to Blue6IX For This Useful Post: [ View ] Gift Blue6IX Ad-Free
 
 
14th December 2011, 03:26 PM |#2  
Senior Member
Flag Wilmington!
Thanks Meter: 55
 
More
Y u no have picture?!?
The Following User Says Thank You to add3421 For This Useful Post: [ View ] Gift add3421 Ad-Free
14th December 2011, 10:37 PM |#3  
Blue6IX's Avatar
OP Senior Member
Thanks Meter: 1,144
 
Donate to Me
More
Quote:
Originally Posted by aad4321

Y u no have picture?!?

I suppose I could take screenshots at each step of the process and work them into the guide...

I've still got a few more tutorials to type up and some work to do on my ROM, so i'll get around to doing that but it's not something i'm in a big hurry to do.

I tried to make sure to over-exaggerate the explanations to make the guide crystal clear for someone to follow, as this is part 1 of 3 and I wanted to target people who have little to no experience and walk them through it. That hopefully sets them up to be able to take advantage of the other two parts after they get finished and written.

I'll link all 3 together once they are done.

Edit: For the time being if you want to see what the lockring looks like in different colors, here's the picture I posted in my ROM thread for the different lockring mod packages I made for it:

... which shows different colors and with text engraved.

There is actually text on both the top and bottom of the lockring, and when you pull it up you can see what's on the bottom.

( Just my handle, for the curious. I'm not so vain as to make that what you see on the top half of the lockring. )

Some more examples:


Misc Lockring 000
md5 = 78bc3cb1cd705f7971d937b82af5c033
Original Art - Blue6IX

Non circle design:


Batman Lockring 005
md5 = cf8c6ccc230dcfb7b547db08ffbeb279
Graphic Source

*Note - flashing these two examples will also change your lockscreen icons to Bulletproof Green.
The Following 3 Users Say Thank You to Blue6IX For This Useful Post: [ View ] Gift Blue6IX Ad-Free
16th December 2011, 03:00 PM |#4  
dillalade's Avatar
Senior Member
Flag Richmond
Thanks Meter: 364
 
More
Wu Tang Lock Rings
I haven't had much chance to test, but throwing them up anyway.
Possibly a little glitchy, I was just testing this tutorial to see if I can get it to work.

(Alpha & Ring Sizes I think need to be tweaked, I may have overlooked the Ring heights - hence they maybe a little too short.)

I am happy to rework any of these if anyone wants em cleaner.

Enjoy


5 Wu tang Rings in one zip, extract them and flash them singularly/individually at will.


DL Link = http://www.megaupload.com/?d=TXW8229A
The Following User Says Thank You to dillalade For This Useful Post: [ View ] Gift dillalade Ad-Free
16th December 2011, 03:23 PM |#5  
Blue6IX's Avatar
OP Senior Member
Thanks Meter: 1,144
 
Donate to Me
More
The plunge - someone has taken it!

Looks pretty happy, now we're getting somewhere

I gotta run out for a bit, but when I get back i'm gonna download them and try them out.

One thing I forgot to mention is that the image size is:

244 pixels
by
243 pixels

If anything is bigger it just gets cut off, but it'll still work fine.

Even if they end up being too low and you can't see them on the lockscreen, you can drag from anywhere on-screen to pull it up, you don't have to touch the graphic.

Keep 'em coming!
The Following User Says Thank You to Blue6IX For This Useful Post: [ View ] Gift Blue6IX Ad-Free
16th December 2011, 03:42 PM |#6  
dillalade's Avatar
Senior Member
Flag Richmond
Thanks Meter: 364
 
More
Quote:
Originally Posted by Blue6IX

The plunge - someone has taken it!

Looks pretty happy, now we're getting somewhere

I gotta run out for a bit, but when I get back i'm gonna download them and try them out.

One thing I forgot to mention is that the image size is:

244 pixels
by
243 pixels

If anything is bigger it just gets cut off, but it'll still work fine.

Even if they end up being too low and you can't see them on the lockscreen, you can drag from anywhere on-screen to pull it up, you don't have to touch the graphic.

Keep 'em coming!

Yeap, I note the sizes (244 by 243 when extracting your original .png files... However these wu images are more oval then round, hence I retained the width at 244, but lost some height trying preserve aspect ratio.)

You're wright, the rings are still useable however slightly too short (hence not as visible as a perfect 244 by 243 ring.)

Defo gonna rework these & make moreeeeeee.
Great simple tutorial, with the necessary programs, I can knock these rings out in like less then 5mins having found a nice graphic to work with.)

Forgot to hit Thanks, will do when back on PC.


Sent from my Bulletproof_Doubleshot using XDA App
16th December 2011, 03:48 PM |#7  
Blue6IX's Avatar
OP Senior Member
Thanks Meter: 1,144
 
Donate to Me
More
You might want to download one of my oval-shaped batman logo lockrings from the Bulletproof thread - they suffer from the same issue.

What I did was make them sit higher on both graphics, instead of centered.

This shows them above the bottom of the screen before you touch them.

One thing to note, though, is that the animation that makes it fly towards you getting bigger on the unlock becomes off-center as well. If you raise it too high it just pops up near the top of the screen and becomes much less visually impressive.

Because Photoshop lets you use layers, I left the original lockring and pasted my new graphic over it, then moved it around using the original graphic as a guide to get it positioned well.

Once I had it where I wanted it, I simply clicked the layer underneath for the original graphic and deleted it, leaving only my newly pasted and aligned image.

Let me actually grab a quick screenie to show you what I mean - give me a few mins to get it edited in.

Edit:

Broke my screenshot function on my computer for the moment - so took a pic with the MT4GS camera - sorry about that.

Here you can see how I positioned it, kind of a happy medium of getting it higher on the graphic but not too high:



Then click on the layer for the grey ring, select delete, and it's all set.

Here is what it looks like in action:



Edit again:

For the sake of convenience, i'm posting the download info for the lockring made of the graphic pictured in the photoshop window just above, that way people can easily download an example of what the picture is showing after it's finished.


Batman Lockring 001
md5 = c6b1efd118ab0e8d6b4e1beaa42b4ffb
Graphic Source

*Note - flashing this example will also change your lockscreen icons to Bulletproof Green.
16th December 2011, 03:58 PM |#8  
dillalade's Avatar
Senior Member
Flag Richmond
Thanks Meter: 364
 
More
Quote:
Originally Posted by Blue6IX

You might want to download one of my oval-shaped batman logo lockrings from the Bulletproof thread - they suffer from the same issue.

What I did was make them sit higher on both graphics, instead of centered.

This shows them above the bottom of the screen before you touch them.

One thing to note, though, is that the animation that makes it fly towards you getting bigger on the unlock becomes off-center as well. If you raise it too high it just pops up near the top of the screen and becomes much less visually impressive.

Because Photoshop lets you use layers, I left the original lockring and pasted my new graphic over it, then moved it around using the original graphic as a guide to get it positioned well.

Once I had it where I wanted it, I simply clicked the layer underneath for the original graphic and deleted it, leaving only my newly pasted and aligned image.

Let me actually grab a quick screenie to show you what I mean - give me a few mins to get it edited in.

I like it, that's very useful info. Great concept in prepping the positioning with layers - niiice!

Sent from my Bulletproof_Doubleshot using XDA App
16th December 2011, 04:55 PM |#9  
Blue6IX's Avatar
OP Senior Member
Thanks Meter: 1,144
 
Donate to Me
More
Quote:
Originally Posted by dillalade

I like it, that's very useful info. Great concept in prepping the positioning with layers - niiice!

Sent from my Bulletproof_Doubleshot using XDA App

The hardest thing about writing up tutorials is communicating all the minor details.

It's easy to take for granted the knowledge that you have, like using layers together for example - for people who don't or haven't spent much time using a particular tool what is obvious to someone is not to someone else.

I'm glad i'm starting to get people just diving in and making stuff, because all the little things that didn't get mentioned get brought up and explained.

No matter how hard you try to cover all your bases, you'll always forget something.
18th December 2011, 03:14 AM |#10  
WeekendsR2Short's Avatar
Senior Member
Flag Cleveland, Tn
Thanks Meter: 1,006
 
More
I'm going to give this a try as soon as I finish getting BulletProof 1.1 set up properly and the corresponding backups made. (I have an older but still very uasable version of Photoshop around here somewhere) But I DID want to take a second and thank you for all your hard work on this ROM that runs sooooo smoothly but not only that....I want to commend you on your selfless desire to teach the rest of us about what you are doing internally with your phases of programming on this ROM. Other experienced programers, I'm Sure, appreciate your efforts on this ROM as well as your other work Blue but I HOPE that a few others will follow your lead in the role of teacher that you have taken on SO well. That alone, is appreciated beyond simple words by those of us that have always had an interest in programming, graphics, modeling, etc.... but have never seen a valid starting point before now. Your detailed explainations along with the open source nature of Linux is an inspiration that makes many (I am sure) reevaluate the possibility of it being within more people's grasps that before now have only sat in awe of the ability of real programmers like yourself. Have you ever given any thought to teaching computer programming at a college for pay so that you could get paid for what you undoubtably LOVE and that give you more time than you now have for you research?? I just HAD to ask.....and THANK YOU again.
19th December 2011, 05:00 AM |#11  
Blue6IX's Avatar
OP Senior Member
Thanks Meter: 1,144
 
Donate to Me
More
Quote:
Originally Posted by WeekendsR2Short

... Have you ever given any thought to teaching computer programming at a college for pay so that you could get paid for what you undoubtably LOVE and that give you more time than you now have for you research?? I just HAD to ask.....and THANK YOU again.

As far as being paid money to teach people...not too interested in that at this point in my life. It would twist my desire to do so into something else altogether. I prefer to give freely and help others advance who are willing to invest the time and effort to do so.
The Following 2 Users Say Thank You to Blue6IX For This Useful Post: [ View ] Gift Blue6IX Ad-Free
Post Reply Subscribe to Thread

Guest Quick Reply (no urls or BBcode)
Message:
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes