Creating Transparent Lockscreen Wallpapers for WP7

MY LOCKSCREEN APP – Get text on your lockscreen wallpaper (with or without PIN)

For more transparent wallpapers, check out TransparentWallpaper.net

YouTube often has the Wikipedia effect. I visit for a specific reason and end up on a completely unrelated subject and never leave bread crumbs to find out how I got there. Well, today I was on YouTube watching some physics videos and ended up with a trip down memory lane with the X-Men cartoon intro. With the theme tune on loop in my head whilst working on an app, I was inspired to take a break from development and update my lock-screen wallpaper on my device. I had an idea of creating (Wolverine-inspired) claw marks as part of the lock screen. All the wallpapers I’ve seen for Windows Phone 7 contain no transparency. I thought it would be cool to be able to display the home screen ‘through’ the claw marks.

First problem was to draw the claw marks. I simply fired up Gimp (I don’t have Photoshop, although if anyone from Adobe is reading this, I’d be more than happy to receive a copy :D). Not sure what the best way to draw claw marks is, but after some trial and error, I settled with using the lasso tool to draw the outline and used a combination of the smudge tool and the dodge tool. A few minutes later, I had the image below:

The image has to be a PNG file as it has a transparency channel. Naturally the transparency here is added to where the home screen should be visible (through the marks).

The second problem is getting this PNG image to the phone. The Zune software only seems to sync JPEG’s. I decided to try and email myself the image as a PNG and download it via the phone. This seemed to work perfectly. Simply send yourself an email with the image attached, then open the email on your phone and save the image. When you view the image, you have an option of setting it as your wallpaper.

There are two main caveats when using transparency in your wallpaper. Until the lock screen has started any animation, the home screen will appear black. Presumably this is because the home screen isn’t loaded until the lock screen has been touched, which makes sense. Secondly, it doesn’t work if you have a password on the lock screen. Having a password is obviously a good idea, so it’s a shame this doesn’t work with the password.

Key thing is, don’t set it as wallpaper as you would for another image, otherwise the transparency is lost. When you download, don’t download the entire message. Click on the PNG attachment and then wait a few moments. Once the ‘cancel’ button next the attachment disappears, click again. This should open it in the picture viewer with the option to set as wallpaper. If you’re having trouble with it, try sending it via another email address. (I used a Hotmail account, but not sure if that makes a difference).

Below is a video of the wallpaper on the phone (there’s no audio in the video). As you can see, all the animations and live tiles are fully working, even when the lock screen is down (but still active). Feel free to send in any of your designs and I’ll post them up. (The size of my wallpaper is 480 x 800). That was a fun distraction, but I should get back to work 🙂

As mentioned earlier, the home screen doesn’t show unless the lock screen is activated. Assuming you’re using the dark theme, you can use this to your advantage. I quickly drew a flashlight to see how it would look. Quite pleased with the results (and not being a fan of flashlight apps, I think irony has been bestowed upon this post :D). Check out the video and image below.

The image used:


Feel free to share any of your wallpapers here. You can see a video on how to create transparent images here.

@keyboardP

Advertisements

113 Responses to Creating Transparent Lockscreen Wallpapers for WP7

  1. Pingback: Make Your WP7 Lock Screen Transparent To Show Homescreen

  2. Pingback: Lockscreen Trasparente : WindowsBlog.it

  3. Leon Zandman says:

    Doesn’t work for me. Transparent parts stay black. Maybe because I’ve set a lock screen password? Can’t disable password, because it comes from a policy attached to my Exchange mail box account.

    • keyboardP says:

      I just tried it with a password and it doesn’t work. I’m guessing this is because of privacy reasons (as the user may expect all details to not be visible unless the password is entered).

      • Maarten says:

        Same here, password protected phone does not support this.

      • keyboardP says:

        It’s most likely a case of it being programmed such that it loads the home screen only if it’s visible. Without a password, it’s probably still considered “invisible” and so nothing is displayed. This is proven by setting the theme to ‘light’. Instead of it being black in the claw marks, it’s white, so you’re seeing the main background colour.

  4. Pingback: Comment avoir un wallpaper transparent sur Windows Phone 7 ! | WP7Blog : le blog pour les fans de Windows Phone 7

  5. Pingback: Tip: Create transparent lock screen wallpapers for Windows Phone 7 | Windows Phone Secrets

  6. Pingback: Wolverine’s WP7 Lock Screen! | windows mobile apps

  7. G-Reg says:

    Worked for me on a Samsung Focus with no password. Cool trick, thanks!

    • keyboardP says:

      Thanks for testing G-Reg!

    • SeNiLe911 says:

      Works great on my Focus as well. Check out the gaming related wallpaper I created on my blog http://conflictinggamers.com/2010/12/10/windows-phone-7-transparent-wallpaper/

      -Conflicting Gamers-

    • Fabio says:

      ciao ragazzi ho bisogno del vostro aiutoo ho un omnia 7 nn mi funziona nessun immaggine trasparente si vede doppia l immaggina riesco a vede la ttrasparenza ma l immaggine e doppia o kuasi tripla perche ragazzi le dimensioni sono buone

      • keyboardP says:

        Ciao, purtroppo questo è parte del Mango. È l’unica alternativa al momento di utilizzare questo metodo.

  8. Stephen says:

    Sort of works on a HD7, though it’s blank until you tap it then it becomes transparent

    • keyboardP says:

      Hi Stephen, that’s the same in all cases. I don’t think the home screen is loaded until the lock-screen is activated. Thanks for the HD7 confirmation.

      • alex says:

        KeyboardP, can u please give me instructions of how to use GIMP to create a custom WP7 wallpaper as im a noob at photo editing 🙂

        Thanksss!

      • keyboardP says:

        Hi Alex,

        Fire up Gimp and go to File…New… I set my width to be 480 and my height to be 800. Before clicking OK, click on “Advanced Options” and set “Fill With” to “Transparency”. Click OK and you should have a grey chequered pattern. This means it’s transparent, so anywhere you see that will be transparent. Now, on the right hand side you’ll see a mini-version of your chequered pattern called “Background”. This is the ‘Layer’ window. Right click in that window and click “New Layer”. Click OK. In this New Layer, draw what you want. Just remember, anywhere you see the grey square pattern will be transparent. Once you have your image, click on File…Save…. Set the file type to be “PNG” , so your filename should look like “myImageName.png”. Click Save and a small window should pop up. In this window, click Export. That’s your image 🙂

      • alex says:

        Cheers for the quick reply! Just created a ‘monster logo’ transparent wallpaper 😛
        Thanks for your help KeyboardP!

      • keyboardP says:

        You’re welcome 🙂 Next stop, Red Bull! 😀

      • daffyduff87 says:

        Hey keyboardP,

        When using Gimp, where does the finished product save to?

        Thanks,

        Daffy

      • keyboardP says:

        Hi Daffyduff87,
        You can select where you save it. I’m not sure what the default folder is, but if you didn’t select the folder yourself, check the “My Pictures” folder in “My Documents”. If it’s not there, and you’re on Windows 7, click on ‘Start…Pictures’ and see if it’s there. If not, reply back 🙂

  9. Pingback: Windows News » Wolverine’s WP7 Lock Screen!

  10. Pingback: Windows Phone 7 transparent wallpapers

  11. Sven says:

    Super cool. Will try on my HD7. A thought for a different wallpaper. How about a window, with mullions (the vertical and horizontal little bars between the glass pnes). Bit of interior wall around the transparent part so the message/phone icons are clear at the bottom. My current forest scene makes the icons hard to see.

    • keyboardP says:

      Nice idea! I thought of a grid or something, but the window idea gives it a nicer feel. You’d need to the dimension of the wallpaper and the grids in order to have it line up, but could look very cool.

  12. Pingback: Transparent Wallpaper for Windows Phone 7 | Apple/Android/Blackberry/Windows

  13. Pingback: Transparent Wallpaper for Windows Phone 7 | ITboxS

  14. Pingback: Transparent Wallpapers | Windows Roundup

  15. Pingback: Transparent Wallpaper for Windows Phone 7 | Windows 7

  16. Pingback: How to Make Your Windows Phone 7 Background Transparent to Show The Homescreen | OmniTechNews

  17. It works if i directly set it as wallpaper while preview from mail. Otherwise it doesn’t work if i first save it to my pictures and then i set it as wallpaper.

    • keyboardP says:

      Hi Garen,
      You’re right. I tried different ways of moving the image to the phone, but each time it would lose the transparency. The only way I found was to email myself the image and set it directly from there.

    • Leon Zandman says:

      Just tried it on my phone (still with lock screen password set), but even using this direct approach it doesn’t work. Which was what I expected and I guess this is also what you want if you set a password.

      • keyboardP says:

        Indeed. I think what happens is that, to save battery, the OS doesn’t load any of the tiles unless the user is allowed to see them. In the case of a password, the user is only allowed to see them when the password is entered, and so the tiles are not loaded at all. This can be shown by changing the theme. When the theme is light, the background will be plain white, and when the theme is dark, the background will be all black. So technically, the transparency is still working, but the layer inbetween the main background and the lock screen is not loaded.

      • Leon Zandman says:

        I’m not sure it’s the way you describe it. I don’t think it has anything to do with battery life.

        I find it pretty amazing that Microsoft apparently renders the whole background, even though it normally (without this hack) isn’t visible. But that’s not entirely true now, is it? They normally do show some background. They need the underlying tile image, so they can display a little piece of it when you press the lock screen. That little jumping animation shows a small piece of the tile screen underneath. The apparently render the full tile screen, just so they can display the appropriate bottom part.

        For password-locked Lock Screens they don’t need the underlying image, so I guess that’s the reason it isn’t rendered. The fact that it displays the right theme color is because this color is also used as background for the password entry keyboard.

      • keyboardP says:

        The phone only renders the home screen when it it may be possible to see. So, when the lock-screen is touched, the tiles are loaded (all of them). However, when the screen is not being touched, therefore no chance of the background being visible (normally), the home screen is not loaded. I don’t mean only visible tiles are loaded. I’d image the entire layer is loaded, which is why the hack works.

  18. Pingback: Transparent Wallpaper for Windows Phone 7 « Nieuws « Red je PC

  19. Pingback: Transparan Wallpaper untuk Telepon Windows 7 | godzam bLog

  20. carlo says:

    any new designs? may i suggest something like the japanese or philipino sun?

    • keyboardP says:

      I’ll update the wallpaper page tomorrow, so keep a look out 🙂

  21. karthik says:

    Tried all options but nothing worked. I always get the black screen and not a transparent ones.
    I mailed it, opened it from the mail but still the wall paper always shows only black within the claw. It is never transparent.

    • keyboardP says:

      Hi Karthik,
      What device do you have? Make sure that your image is saved as a PNG file and not a JPG. Email this PNG file to yourself and on your phone, click on the “imagename.png” link. Don’t download the entire message. When you click “imagename.png”, there should be a cancel button appearing as it downloads. Once this cancel button disappears, click “imagename.png” again. This should open it in the picture viewer. From here, use the ApplicationBar to display the menu and select “Use as wallpaper”. Don’t save it to the phone. That should work 🙂

      • Twisticles says:

        Hi,
        I have the same problem as Kathik….on LF Optimus 7. The image isn’t even saved on the phone, only opened from the mail message and set as wallpaper.

        Verified the png with transparent channels on my PC too. AH well.

      • karthik says:

        I am having a samsung focus. I did save it in my machine as a png file and it is transparent in my desktop.
        I sent the file to my gmail account as well as my hotmail account with which i have phone access. In the phone i opened the xxx.png it opened it in the picture viewer and when i click on the use as wall paper it goes to the crop section and once i hit the click button i get the image on my wall paper. But it is always black.

      • keyboardP says:

        Hi Karthik and Twisticles (lol, interesting name),
        I’ve had confirmation that it works on the Optimus 7 and on the Focus, so it might be down to the image itself, or the way you’re doing it. Try the claw image and the flashlight and see if either work. Or, you could try a few from the gallery. Just remember, when it comes to cropping, don’t change anything – just cick on the tick. Let me know how it goes with the other images 🙂

      • Twisticles says:

        Ahhhh I tried in IE instead of Chrome…all works no problem!

        Very cool, and thanks very much!

      • keyboardP says:

        That’s awesome, Twisticles. Credit for for the IE idea goes to Big Slim. Karthik, any luck with IE?

  22. Pingback: Wolverine’s WP7 Lock Screen!

  23. Pingback: WP7 Transparent Lockscreen Wallpapers — windows phone 7 apps / WP7 games / WP7 Accessories

  24. Nick says:

    The claw image works but the flashlight doesn’t and neither does amy images I have created (trying for hours last night !) transparant bits just show as black. All are png. Any ideas?

    • Andrew says:

      I used fire fox pic. I would love to post a pic here but dont know how….instructions anyone??

    • keyboardP says:

      Hi Nick and Andrew,
      Nick, feel free to send me your images and I’ll test them on my Mozart. You can email them to me (phone7 AT live DOT co DOT uk).
      Andrew, you could upload them to various web services such as imgur and post the link in a comment here. Or you can email me the image and I’ll upload it.

  25. Pingback: Transparent Wallpaper for Windows Phone 7 | Windows 7 Editing

  26. Pingback: Transparent wallpaper for lock screen - Windows Phone Forums at wpcentral.com

  27. MaulerX says:

    I can confirm that it works on the Samsung Focus. So far I only tried the flashlight one using the instructions provided. Saved image as a PNG file and emailed it from Gmail to another email adress that I use on my Focus. I did not save the image but set it as wallpaper directly from the email. Pretty cool.

    • keyboardP says:

      Thanks for letting me know MaulerX, I’ve updated the post.

  28. Pingback: WP7 Transparent Lockscreen Wallpapers | Free Pocket PC Software

  29. Pingback: Transparent wallpapers are all the rage | Best Smartphone Blogging

  30. Pingback: Transparent lockscreen for Windows Phone 7 | PocketHacks.com

  31. Pingback: Criando papéis de parede transparentes para WP7 | Windows Phone Blog Brasil

  32. Pingback: More WP7 transparent lock screen goodness!

  33. Pingback: Windows Phone 7 Transparent Lock Screen (video) - Geeky Gadgets

  34. Pingback: kevinpaquet.com » Windows Phone 7 Transparent Lock Screen (video)

  35. Big Slim says:

    After numerous times of failing to get this to work on my Focus, I found out that for some reason, using Firefox to save the images wasn’t working. I used IE8 to save them and they now work! =)) I can’t get that Dannahan one to work though.

    • keyboardP says:

      Thanks a lot for the info Big Slim! I don’t have access to a Focus to test on, so nice work on finding a reason why it may not work on it.

      • Big Slim says:

        No problem. Thanks for your great work! One more new thing to show off to all the friends.

  36. Pingback: Ingenio, transparencias y Windows Phone 7 | Arenamovil

  37. Soon Studios says:

    I like the dog. lol

    Regards
    http://soonstudios.wordpress.com/

  38. Pingback: Transparent Wallpapers in WP7 – Video Tutorial | www.nalli.net

  39. Lee@TWC says:

    After creating the first wallpaper pack (displayed in your gallery), I created 24 more to make a few more packs. I sent them to a friend to test on his phone first, as I don’t have a WP7 (yet). He is saving them to his phone and says they display distorted in thumbnail view. Also if he sets them as wallpaper from the phones save folder they look distorted when set. I read a few posts where you said not to save them to phone and set them as wallpaper directly from email………… Just curious, were you getting the same effect with your wallpapers as well when you saved them to the phone?

    • keyboardP says:

      Hi Lee,
      Saving them to a phone converts them from a PNG to JPG. This means that the transparency channel is removed and so using that image will not have any transparency. The reason this trick works is because the wallpaper is being set before any conversion takes place and so the PNG file stays as a PNG file. First time I tried, I saved it to the phone and it became distorted as all the transparent areas became solid black.
      I’ve got a video tutorial on YouTube. The process has to be carried out exactly as in the video (skip to 4:06 to see the actual setting of the wallpaper as before it is simply creating a basic image). Let me know if that helps 🙂

  40. Pingback: ShMarker.com

  41. Felix says:

    Doesn´t work for me on my HTC 7 Mozart. I did everything what you wrote.

    • keyboardP says:

      Hi Felix,

      It won’t work if you have a password on your lockscreen. I’ve created a video here which shows you how to do it step by step. Let me know if that helps.

  42. solroger says:

    I have a Samsung Focus and this doesn’t work. I have emailed myself the .png images here and set them as wallpaper and they aren’t transparent. I don’t have a password either.

    • keyboardP says:

      Hi solroger,
      This should work fine on Samsung Focus phones. Follow the steps as shown in this video (it should start at the email bit). Let me know if that method works. A key thing to remember is to not save the image onto the phone itself.

  43. wij jaya says:

    i want info about WP7 Transparant
    price,?

    • keyboardP says:

      Hi Wij,
      I don’t quite understand what you mean, but the transparent effect mentioned above can be done for free.

  44. Pingback: WP7 – átlátszó háttérkép « Surex's developer blog

  45. Pingback: Transparent wallpapers for the WP7 lock screen « Binary Tropic

  46. Pingback: Transparent wallpapers for your DVP - Windows Phone Forums at wpcentral.com

  47. Robert says:

    Thanks works on HTC Mozart!

    I tried to save them etc on the phone via Zune first until I found the solution here! 🙂

  48. i try using the software and it work i’m using unlock HD7 i did try and error inorder to get the transparency.One thing that it couldn’t do is that i’m taking my picture jpg transfer to png do the tranparency thing email to myself the picture is not acceptable more on darkerside though the picture taken during daylight.

    • keyboardP says:

      Hi Mohammad!

      JPGs will not work with transparency. If you want to convert a JPG to a PNG, with transparency, then you’ll have to add an Alpha layer. You can do this in any major art programs. I use GIMP. If you’re using GIMP, you can add an alpha layer to your image like this. I have a video here showing how to create a brand new transparent image – it might also be useful :).

      Hope that helps!

  49. Pingback: Transparent Wallpapers on Windows Phone

  50. Wolfenstein says:

    I’ve tried the transparent wallpaper, it works but i have symbols the live times, time and date etc also showing transparent ghost images on the screen, can anyone help?

    • 40ro says:

      I’ve gotten the same issue. Does it have anything to do with the mango update? I’d rather have a black screen over a jarbled one. Does it have anything to do with interlacing or dpi?

      • keyboardP says:

        Hi guys,
        It seems that the Mango update has messed up the transparent wallpapers. They no longer work as nicely as they did pre-Mango. The closest you can do now is follow the instructions here. This doesn’t necessarily fix the issue with existing wallpapers, but shows you how to create wallpapers that won’t ghost (because of the way they’re designed). When I get some time, I’ll see if I can find another way around the Mango wallpaper.

  51. 40ro says:

    So I looked at what you linked me to, and I’m wondering if anyone has figured out the template for covering the repeat. Your top third covers the first repeat. But I haven’t figured out how many times it would repeat or what specifically offsets it in the first place. You could strategically set masks for where the lockscreen time date player and battery WiFi area repeats, but you end up with less transparency. Call Microsoft, tell them to drop everything and make this a usable function =) call it the window update. It’ll take you 5 mins to fix it, and all the art geeks will love you for it. Actually f that I want origami lockscreens. I want to have to fold the lock screen up strategically like a password screen. Then we need to have a talk about ringers and notifications when you are done.

    • keyboardP says:

      lol, aye aye cap’n :D. The origami idea is actually pretty cool. It’s sort of like a gesture pin, but with a bit more animation. As for ringers, you can add your own MP3 ringtones now in Mango, which is nice. Would be cool if it could be done without needing to sync with Zune, but hopefully they add that in a future update!

  52. Nasra says:

    I want to know to put your own picture. I only know how to do the page curl. HELP! I watched the video a couple of times but I want to use a picture I downloaded.

    • keyboardP says:

      Hi Nasra.
      The first thing you need to do is make sure that the image has a transparency channel. In the video, you can see that there is a square-pattern that show where the transparency will be. If your image isn’t a PNG, it probably won’t have it. You can add it as explained in this post. Once you have that channel, you can use the Eraser tool to erase the areas you want transparent. You should see the square pattern come up wherever you erase. Save the file as a PNG file and you’ll have your image. 🙂

  53. Nasra says:

    Hey!
    I tried to do it right now and I still don’t understand. Can I send a picture for you to do for me? I’ve just tried it right now and sent it to my phone, but it still doesn’t work!

    • keyboardP says:

      I don’t really have time at the moment, but you can email it to me with a description of what bit you want transparent. If I get time, I’ll do it for you 🙂 My email address is phone7 {at} live {dot} co {dot} uk.

      • Nasra says:

        ok! That’s great!

  54. Nasra says:

    Hey!
    I think you should make a video tutorial on how to make downloaded pictures into transparent wallpapers.

    • keyboardP says:

      Hi Nasra!
      Thanks for the suggestion. I’ve got plans for a few other videos as well (not related to wallpapers), so I might create one when I create those as well.

      • Nasra says:

        okay, so I just wanted to make a transparent wallpaper right now but the toolbar on the left isn’t there. How do I get it back??

  55. Nasra says:

    Sorry, I meant the toolbar on the right.

    • Nasra says:

      Never mind I got it back.

      • keyboardP says:

        Cool 🙂

    • keyboardP says:

      Are you using a Mac or a PC? If you’re using a Mac, the toolbar might have gone behind the window. If you minimise the main window, you might see it again. If you accidentally closed it, try going to “Windows” (in the toolbar at the top, next to “help”). Then go to “Recently Closed Docks” and then “Layers, Channels, Paths, Undo…”.

  56. Martin says:

    I have a real issue with the wallpapers, i have a samsung omnia 7 and I am using a transparent wallpaper, but when its locked, the wallpaper multiplies and I get multiple copies of the time and picture all over my screen until i touch the screen
    Anybody got any ideas?

    • keyboardP says:

      Hi Martin. This is a Mango problem and unfortunately there’s no way to fix it. For some reason, Mango messes up the transparent wallpapers. There is one workaround you can try, which is this.

      • Martin says:

        Thanks for such a quick response, are you aware of any places i can get these mango style transparent wallpapers from??

      • keyboardP says:

        Unfortunately not. There doesn’t seem to be any real gallery with these wallpapers, maybe because they take longer to create than the old ones. I’m working on trying to figure out any other ways, but so far no luck :(.

      • Martin says:

        I guess we can’t win them all. I guess this is only the second annoying thing about wp7 for me, along with the not connecting to hidden wifi!! But thats a small gripe

      • keyboardP says:

        If you’re running Mango (which you seem to be since the transparent wallpapers have gone strange), you can connect to hidden WiFis. Go to Settings…WiFi…Advanced…Click the ‘Add’ button at the bottom 🙂

  57. Pingback: Tapety na telefon | Telefon-Telefony

  58. Pingback: Criando papéis de parede transparentes para o Windows Phone 7 – Windows Phone Brasil

  59. Pingback: PocketPC.ch - Deine Smartphone Community

  60. Dexter's LAb says:

    THERE IS A TRICK…100% working.. YOU NEED TO MAKE IT IN PNG AND THEN RENAME IT TO .JPG And then sync it to phone with ZUNE!

    WORKS! B)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: